{% extends 'marketing/base.html' %}

{% block title %}Tarifs DictIA — 3 forfaits transparents en CAD (369 $/mois Cloud, à partir de 173 $/mois on-premise){% endblock %}
{% block description %}Tarifs DictIA en CAD : DictIA 8 (PME), DictIA 16 (cabinets juridiques) et DictIA Cloud (organismes). Volume illimité, zéro frais par utilisateur, taxes en sus.{% endblock %}

{% block content %}

{# ===== HEADER ===== #}
<section class="bg-brand-navy text-white py-20" aria-labelledby="page-title">
  <div class="max-w-[820px] mx-auto px-6 text-center">
    <p class="eyebrow grad-text mb-4">TARIFS</p>
    <h1 id="page-title" class="text-[clamp(2.25rem,4vw,3.5rem)] font-black mb-4">
      Trois forfaits&nbsp;: <span class="grad-text">choisissez votre infrastructure</span>.
    </h1>
    <p class="text-lg text-white/80">
      Volume illimité, zéro frais par utilisateur. Tarifs en CAD, taxes en sus (TPS&nbsp;5&nbsp;% + TVQ&nbsp;9,975&nbsp;%).
    </p>
  </div>
</section>

{# ===== 3 PRICING TIERS ===== #}
<section class="bg-brand-bg py-20" aria-labelledby="forfaits-title">
  <div class="max-w-[1200px] mx-auto px-6">
    <h2 id="forfaits-title" class="sr-only">Trois forfaits DictIA</h2>
    {% include 'marketing/_partials/_pricing_tiers.html' %}
  </div>
</section>

{# ===== COMPARISON MATRIX ===== #}
<section class="bg-white py-20" aria-labelledby="matrix-title">
  <div class="max-w-[1200px] mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-12">
      <p class="eyebrow grad-text mb-4">COMPARAISON DÉTAILLÉE</p>
      <h2 id="matrix-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
        Détails par forfait.
      </h2>
    </div>

    <div class="overflow-x-auto rounded border border-brand-border">
      <table class="w-full min-w-[720px] text-sm">
        <caption class="sr-only">Comparaison détaillée des 3 forfaits DictIA sur 8 caractéristiques</caption>
        <thead class="bg-brand-bg">
          <tr>
            <th scope="col" class="text-left p-4 font-bold text-brand-navy">Caractéristique</th>
            <th scope="col" class="p-4 font-bold text-brand-navy">DictIA 8</th>
            <th scope="col" class="p-4 font-bold text-brand-navy">DictIA 16</th>
            <th scope="col" class="p-4 font-bold text-brand-navy">DictIA Cloud</th>
          </tr>
        </thead>
        {%- set svg_check = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 inline-block text-brand-b3" aria-label="Inclus" role="img"><path d="M5 13l4 4L19 7"/></svg>' -%}
        <tbody class="divide-y divide-brand-border">
          {% for row in [
            {'name': 'Hébergement', 'd8': 'Sur place (vos murs)', 'd16': 'Sur place (vos murs)', 'cloud': 'OVH Beauharnois (QC)'},
            {'name': 'GPU', 'd8': '8&nbsp;Go RTX', 'd16': '16&nbsp;Go RTX', 'cloud': 'Mutualisé (géré)'},
            {'name': 'Volume audio', 'd8': 'Illimité', 'd16': 'Illimité', 'cloud': 'Illimité'},
            {'name': 'Utilisateurs', 'd8': 'Illimité', 'd16': 'Illimité', 'cloud': 'Illimité'},
            {'name': 'Diarisation', 'd8': '8 locuteurs', 'd16': '8 locuteurs', 'cloud': '8 locuteurs'},
            {'name': 'Résumés Mistral 7B local', 'd8': '—', 'd16': svg_check, 'cloud': svg_check ~ '<span class="ml-1">(mutualisé)</span>'},
            {'name': 'Q&amp;R sur enregistrement', 'd8': '—', 'd16': svg_check, 'cloud': svg_check},
            {'name': 'Délai de mise en service', 'd8': '~2&nbsp;semaines', 'd16': '~2&nbsp;semaines', 'cloud': '48&nbsp;h'}
          ] %}
          <tr>
            <th scope="row" class="text-left p-4 font-semibold text-brand-navy/80">{{ row.name | safe }}</th>
            <td class="p-4 text-center text-brand-navy/80">{{ row.d8 | safe }}</td>
            <td class="p-4 text-center text-brand-navy/80">{{ row.d16 | safe }}</td>
            <td class="p-4 text-center text-brand-navy/80">{{ row.cloud | safe }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <p class="text-xs text-brand-navy/70 mt-6 text-center max-w-3xl mx-auto">
      Caractéristiques au 2026-04-27. Pour un devis personnalisé ou des besoins multi-sites, écrivez à <a href="mailto:info@dictia.ca" class="grad-text font-semibold hover:underline">info@dictia.ca</a>.
    </p>
  </div>
</section>

{# ===== TARIFICATION FAQ ===== #}
<section class="bg-brand-bg py-20" aria-labelledby="tarifs-faq-title">
  <div class="max-w-[820px] mx-auto px-6">
    <div class="text-center mb-10">
      <p class="eyebrow grad-text mb-4">QUESTIONS DE TARIFICATION</p>
      <h2 id="tarifs-faq-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">Vos questions sur les tarifs.</h2>
    </div>

    <div class="divide-y divide-brand-border border-y border-brand-border">
      {% for item in [
        {'q': 'Y a-t-il des frais cachés?', 'a': 'Non. Les tarifs affichés couvrent l\'utilisation illimitée (volume audio, utilisateurs, exports). Les seules variables sont&nbsp;: les taxes (TPS&nbsp;5&nbsp;% + TVQ&nbsp;9,975&nbsp;%) et, pour DictIA on-premise, le matériel GPU si vous ne l\'avez pas déjà. Aucun frais par minute, par mot, par locuteur.'},
        {'q': 'Puis-je passer d\'un forfait à un autre?', 'a': 'Oui, en tout temps. Les passages de DictIA Cloud vers on-premise et inversement sont supportés. Les données peuvent être migrées sur demande, sans frais. Détails dans nos <a href="/legal/conditions" class="grad-text underline">conditions d\'utilisation</a>.'},
        {'q': 'Le tarif on-premise inclut-il le matériel GPU?', 'a': 'Le tarif setup (3&nbsp;450&nbsp;$ pour DictIA 8 ou 5&nbsp;750&nbsp;$ pour DictIA 16) inclut l\'installation logicielle complète, la configuration sécurité, la formation et 90 jours de support prioritaire. Le matériel GPU n\'est pas inclus&nbsp;; nous fournissons une liste de cartes RTX recommandées (RTX 4060 8&nbsp;Go pour DictIA 8, RTX 4080/5080 16&nbsp;Go pour DictIA 16) et pouvons faire l\'achat pour vous moyennant marge transparente.'},
        {'q': 'Comment fonctionne la facturation TPS/TVQ?', 'a': 'DictIA Inc. est inscrite TPS et TVQ. Les factures détaillent les taxes selon votre province de facturation. Pour les organismes exemptés (organismes publics, etc.), envoyez votre attestation à info@dictia.ca avant l\'inscription.'},
        {'q': 'Existe-t-il un tarif annuel ou pluriannuel?', 'a': 'Disponible sur demande pour les engagements 12 ou 24 mois (remise typique de 10 à 15&nbsp;%). Écrivez à <a href="mailto:info@dictia.ca" class="grad-text underline">info@dictia.ca</a> pour un devis.'}
      ] %}
      <div x-data="{ open: false }" class="py-2">
        <h3>
          <button type="button"
                  class="w-full flex items-center justify-between gap-4 py-4 text-left hover:bg-brand-navy/[0.03] transition-colors rounded-none px-2 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2"
                  @click="open = !open"
                  :aria-expanded="open.toString()"
                  aria-controls="tarifs-faq-panel-{{ loop.index }}">
            <span class="font-semibold text-brand-navy text-base">{{ item.q | safe }}</span>
            <span class="grad-text text-2xl flex-shrink-0 transition-transform"
                  :class="open ? 'rotate-45' : ''" aria-hidden="true">+</span>
          </button>
        </h3>
        <div id="tarifs-faq-panel-{{ loop.index }}" x-show="open" x-transition.opacity.duration.200ms>
          <p class="px-2 pb-4 text-sm text-brand-navy/80 leading-relaxed">{{ item.a | safe }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

{# ===== CTA ===== #}
<section class="relative bg-brand-navy text-white py-20 overflow-hidden" aria-labelledby="tarifs-cta-title">
  <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
    <div class="absolute top-1/3 left-1/3 w-[500px] h-[500px] rounded-full"
         style="background: radial-gradient(circle, rgba(0,98,255,0.12) 0%, transparent 60%); filter: blur(50px);"></div>
  </div>
  <div class="relative max-w-[820px] mx-auto px-6 text-center">
    <h2 id="tarifs-cta-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-6">
      Une question sur votre <span class="grad-text">forfait idéal</span>&nbsp;?
    </h2>
    <p class="text-lg text-white/80 mb-8">
      Nous accompagnons chaque organisation dans le choix du forfait le mieux adapté à sa volumétrie, ses contraintes réglementaires et son infrastructure existante. Aucune pression commerciale.
    </p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      {% from 'macros/button.html' import button %}
      {{ button('Discuter avec notre équipe', href='mailto:info@dictia.ca?subject=Question%20tarifs%20DictIA', variant='primary', size='lg', icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>') }}
      {{ button('Voir les fonctionnalités', href='/fonctionnalites', variant='ghost', size='lg') }}
    </div>
  </div>
</section>

{% endblock %}