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

{% block title %}Tarifs DictIA — 4 forfaits transparents en CAD (Cloud Basic 189 $/mo · Essentiel 349 $ · Pro 549 $ · DictIA Local 5 998 $){% endblock %}
{% block description %}Tarifs DictIA en CAD : Cloud Basic (189 $/mo), Cloud Essentiel (349 $/mo), Cloud Pro (549 $/mo + 485 $ onboarding) et DictIA Local (5 998 $ An 1 puis 500 $/an). Aucune limite utilisateurs, 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">
      Quatre forfaits&nbsp;: <span class="grad-text">choisissez votre infrastructure</span>.
    </h1>
    <p class="text-lg text-white/80">
      3 Cloud souverains au Québec + 1 100&nbsp;% local hors-ligne. Aucune limite utilisateurs, tarifs en CAD, taxes en sus (TPS&nbsp;5&nbsp;% + TVQ&nbsp;9,975&nbsp;%).
    </p>
  </div>
</section>

{# ===== 4 PRICING TIERS + Pro+ ===== #}
<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">Quatre forfaits DictIA + Pro+ sur soumission</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-[820px] text-sm">
        <caption class="sr-only">Comparaison détaillée des 4 forfaits DictIA sur 9 caractéristiques techniques et opérationnelles</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">Cloud BASIC</th>
            <th scope="col" class="p-4 font-bold text-brand-navy">Cloud ESSENTIEL</th>
            <th scope="col" class="p-4 font-bold text-brand-navy">Cloud PRO</th>
            <th scope="col" class="p-4 font-bold text-brand-navy">DictIA LOCAL</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',     'basic': 'OVH Beauharnois (QC)', 'ess': 'OVH Beauharnois (QC)', 'pro': 'OVH Beauharnois (QC)', 'local': 'Chez le client (100&nbsp;% hors-ligne)'},
            {'name': 'GPU',             'basic': 'NVIDIA L4 partagé',    'ess': 'L4 partagé étendu',    'pro': 'L4 dédié priorité',     'local': 'RTX 5070&nbsp;Ti 16&nbsp;Go'},
            {'name': 'Capacité audio',  'basic': '~165&nbsp;h/mois',     'ess': '~330&nbsp;h/mois',     'pro': '~660&nbsp;h/mois',      'local': '~1&nbsp;100&nbsp;h/mois'},
            {'name': 'Stockage',        'basic': '100&nbsp;Go',          'ess': '200&nbsp;Go',          'pro': '500&nbsp;Go',           'local': '2&nbsp;To SSD'},
            {'name': 'Utilisateurs',    'basic': 'Aucune limite',        'ess': 'Aucune limite',        'pro': 'Aucune limite',         'local': 'Aucune limite'},
            {'name': 'Diarisation pyannote',          'basic': svg_check, 'ess': svg_check, 'pro': svg_check, 'local': svg_check},
            {'name': 'Résumés IA + Points d&rsquo;action','basic': svg_check ~ '<span class="ml-1 text-xs">(Mistral Nemo 12B)</span>', 'ess': svg_check ~ '<span class="ml-1 text-xs">(Mistral Nemo 12B)</span>', 'pro': svg_check ~ '<span class="ml-1 text-xs">(Mistral Nemo 12B)</span>', 'local': svg_check ~ '<span class="ml-1 text-xs">(Mistral 7B local)</span>'},
            {'name': 'Conformité Loi&nbsp;25', 'basic': svg_check, 'ess': svg_check, 'pro': svg_check, 'local': svg_check ~ '<span class="ml-1 text-xs">+ 100&nbsp;% hors-ligne</span>'},
            {'name': 'SLA',             'basic': '99,5&nbsp;%',          'ess': '99,5&nbsp;%',          'pro': '99,5&nbsp;%',           'local': '—&nbsp;(resp. client)'},
            {'name': 'Délai de mise en service', 'basic': '48&nbsp;h',  'ess': '48&nbsp;h',          'pro': '48&nbsp;h + onboarding', 'local': '~2&nbsp;semaines'}
          ] %}
          <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.basic | safe }}</td>
            <td class="p-4 text-center text-brand-navy/80">{{ row.ess | safe }}</td>
            <td class="p-4 text-center text-brand-navy/80">{{ row.pro | safe }}</td>
            <td class="p-4 text-center text-brand-navy/80">{{ row.local | 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 volume &gt;&nbsp;660&nbsp;h audio/mois, multi-sites ou SLA&nbsp;99,9&nbsp;%, demandez une <a href="/contact?pro-plus=1" class="grad-text font-semibold hover:underline">soumission Pro+</a>. Questions&nbsp;: <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 de la capacité indiquée (audio mensuel, stockage) sans frais par utilisateur. Les seules variables sont&nbsp;: les taxes (TPS&nbsp;5&nbsp;% + TVQ&nbsp;9,975&nbsp;%) et, pour DictIA Local, le matériel inclus dans le 5&nbsp;998&nbsp;$ An&nbsp;1. Aucun frais par minute, par mot, par locuteur.'},
        {'q': 'Puis-je passer d\'un forfait à un autre?', 'a': 'Oui, en tout temps. Les passages entre Cloud Basic, Essentiel et Pro sont supportés (prorata Stripe). Migration Cloud → DictIA Local (et inversement) sur demande, sans frais. Détails dans nos <a href="/legal/conditions" class="grad-text underline">conditions d\'utilisation</a>.'},
        {'q': 'Que comprend le 5&nbsp;998&nbsp;$ de DictIA Local?', 'a': 'Le forfait DictIA Local An&nbsp;1 inclut&nbsp;: PC + GPU RTX 5070&nbsp;Ti 16&nbsp;Go + 2&nbsp;To SSD, installation sur site, configuration sécurité, formation équipe, et la première année de licence logicielle. Dès l\'An&nbsp;2, seul le renouvellement annuel de 500&nbsp;$/an (mises à jour + support) est facturé.'},
        {'q': 'Comment fonctionne le 485&nbsp;$ d\'onboarding Cloud Pro?', 'a': 'Le forfait Cloud Pro inclut un onboarding assisté unique (485&nbsp;$) couvrant&nbsp;: configuration des comptes, importation des hotwords métier, formation équipe (1&nbsp;h visioconférence), tests de charge initiaux. Cloud Basic et Cloud Essentiel sont en self-service (aucun frais d\'installation).'},
        {'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 sur les forfaits Cloud?', 'a': 'Oui. Les paiements annuels sur Cloud Basic, Essentiel et Pro bénéficient d\'une remise de 15&nbsp;% (équivalent ~10&nbsp;mois payés au lieu de 12). Sélectionnable au moment du paiement Stripe.'},
        {'q': 'Quand demander une soumission Pro+?', 'a': 'Pro+ s\'adresse aux organisations ayant besoin de&nbsp;: &gt;&nbsp;660&nbsp;h audio/mois, &gt;&nbsp;500&nbsp;Go de stockage, 7+ utilisateurs simultanés intensifs, multi-sites, SLA renforcé 99,9&nbsp;%, audits SOC&nbsp;2 Type&nbsp;I/II, conformité PHIPA / PIPEDA Ontario, ou documentation gouvernementale (SEAO/MCN). Demandez une <a href="/contact?pro-plus=1" class="grad-text underline">soumission personnalisée</a>.'}
      ] %}
      <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(37,99,235,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 %}