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

{% block title %}Fonctionnalités DictIA — Transcription IA WhisperX, diarisation, résumés Mistral 7B local{% endblock %}
{% block description %}Toutes les fonctionnalités de DictIA : WhisperX Large-v3 fine-tuné FR-CA, diarisation 8 locuteurs, Mistral 7B local, Q&R RAG, exports DOCX/PDF/SRT, intégrations Word/Outlook/Teams.{% 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">FONCTIONNALITÉS</p>
    <h1 id="page-title" class="text-[clamp(2.25rem,4vw,3.5rem)] font-black mb-4">
      Tout ce qu'il faut pour transcrire <span class="grad-text">en restant chez soi</span>.
    </h1>
    <p class="text-lg text-white/80">
      Une pile technique 100&nbsp;% québécoise, sans dépendance à un fournisseur cloud américain. Détails techniques sur demande&nbsp;: <a href="mailto:info@dictia.ca" class="grad-text font-semibold hover:underline">info@dictia.ca</a>.
    </p>
  </div>
</section>

{# ===== 6 BENTO FEATURES ===== #}
<section class="bg-white py-20" aria-labelledby="features-title">
  <div class="max-w-[1060px] mx-auto px-6">
    <h2 id="features-title" class="sr-only">Six fonctionnalités principales</h2>
    {# NOTE: bento card content is duplicated between landing.html and fonctionnalites.html.
       When editing, sync both files. Future refactor: extract to _partials/_bento_features.html. #}
    {% from 'macros/bento.html' import bento_card %}
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-[1.5px] bg-brand-border rounded-[18px] overflow-hidden">
      {{ bento_card('01', 'Transcription WhisperX', 'Large-v3 fine-tuné FR-CA. Précision 95&nbsp;%+ sur réunions, dictées, audiences (méthodologie disponible sur demande).', '🎙️') }}
      {{ bento_card('02', 'Diarisation 8 locuteurs', 'pyannote sépare automatiquement les intervenants. Identification par embeddings vocaux.', '👥') }}
      {{ bento_card('03', 'Résumés Mistral 7B', 'IA locale génère résumés, points d\'action et procès-verbaux. Aucune connexion cloud.', '📝') }}
      {{ bento_card('04', 'Q&amp;R sur enregistrement', 'Posez des questions à vos réunions. RAG local sur embeddings sentence-transformers.', '💬') }}
      {{ bento_card('05', 'Exports multiples', 'DOCX, PDF, SRT, VTT, TXT, JSON, MD. Formats avocat, notaire, CPA.', '📄') }}
      {{ bento_card('06', 'Intégrations', 'Word, Outlook, Teams, Notion, Obsidian, Zapier, Make, n8n.', '🔌') }}
    </div>
  </div>
</section>

{# ===== EXPORT FORMATS DEEP-DIVE ===== #}
<section class="bg-brand-bg py-20" aria-labelledby="exports-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">FORMATS D'EXPORT</p>
      <h2 id="exports-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
        7 formats, prêts pour vos workflows.
      </h2>
    </div>
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-3">
      {% for fmt in [
        {'ext': 'DOCX', 'use': 'Word avec timestamps cliquables'},
        {'ext': 'PDF',  'use': 'Procès-verbaux signés'},
        {'ext': 'SRT',  'use': 'Sous-titres vidéo'},
        {'ext': 'VTT',  'use': 'Web/streaming standard'},
        {'ext': 'TXT',  'use': 'Texte brut universel'},
        {'ext': 'JSON', 'use': 'Pipeline développeur'},
        {'ext': 'MD',   'use': 'Notion, Obsidian, GitHub'}
      ] %}
      <div class="bg-white p-4 rounded-[12px] border border-brand-border text-center">
        <p class="text-base font-black text-brand-navy">{{ fmt.ext }}</p>
        <p class="text-xs text-brand-navy/70 mt-1">{{ fmt.use | safe }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

{# ===== INTEGRATIONS GRID ===== #}
<section class="bg-white py-20" aria-labelledby="integrations-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">INTÉGRATIONS</p>
      <h2 id="integrations-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
        Branchez DictIA à votre stack existant.
      </h2>
      <p class="text-base text-brand-navy/70">
        Webhooks REST, plugin Word natif, connecteurs Zapier/Make/n8n. API documentée — auto-hébergée avec votre déploiement.
      </p>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      {% for integ in [
        {'name': 'Microsoft Word', 'desc': 'Plugin natif (.docx)'},
        {'name': 'Microsoft Outlook', 'desc': 'Pièces jointes audio'},
        {'name': 'Microsoft Teams', 'desc': 'Enregistrements de réunions'},
        {'name': 'Notion', 'desc': 'Pages markdown auto'},
        {'name': 'Obsidian', 'desc': 'Notes timestamped'},
        {'name': 'Zapier', 'desc': 'Workflows no-code'},
        {'name': 'Make (Integromat)', 'desc': 'Scénarios visuels'},
        {'name': 'n8n', 'desc': 'Open source self-host'}
      ] %}
      <div class="bg-brand-bg p-5 rounded-[14px] border border-brand-border text-center">
        <p class="text-base font-bold text-brand-navy">{{ integ.name | safe }}</p>
        <p class="text-xs text-brand-navy/70 mt-1">{{ integ.desc | safe }}</p>
      </div>
      {% endfor %}
    </div>
    <p class="text-xs text-brand-navy/70 text-center mt-6">
      Microsoft, Notion, Obsidian, Zapier, Make et n8n sont des marques de leurs propriétaires respectifs. DictIA n'est pas affilié à ces produits.
    </p>
  </div>
</section>

{# ===== TECH SPECS ===== #}
<section class="bg-brand-navy text-white py-20" aria-labelledby="specs-title">
  <div class="max-w-[1060px] mx-auto px-6">
    <div class="text-center max-w-2xl mx-auto mb-12">
      <p class="eyebrow grad-text mb-4">SPÉCIFICATIONS TECHNIQUES</p>
      <h2 id="specs-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4">
        Sous le capot.
      </h2>
    </div>
    <div class="grid md:grid-cols-2 gap-6">
      {% for spec in [
        {'title': 'Modèle ASR', 'desc': 'WhisperX Large-v3 (1,55&nbsp;G paramètres) fine-tuné sur audio professionnel québécois. Format ONNX optimisé GPU.'},
        {'title': 'Diarisation', 'desc': 'pyannote 3.x — clustering hiérarchique sur embeddings ECAPA-TDNN. 1 à 8 locuteurs détectés automatiquement.'},
        {'title': 'LLM (résumés / Q&amp;R)', 'desc': 'Mistral 7B Instruct quantifié 4-bit. Inférence locale sur le même GPU. Aucune sortie réseau.'},
        {'title': 'Stack web', 'desc': 'Flask 2.3 (backend) + Vue 3 / Alpine.js (front). Chiffrement AES-256 au repos. AGPL&nbsp;v3.'},
        {'title': 'Audio supportés', 'desc': 'WAV, MP3, M4A, FLAC, OGG, WebM — jusqu\'à 8&nbsp;h par fichier. Conversion ffmpeg automatique.'},
        {'title': 'Langues', 'desc': 'Optimisé français québécois. Aussi&nbsp;: français de France, anglais (canadien et US), espagnol, allemand, mandarin, russe.'}
      ] %}
      <article class="bg-white/[0.05] backdrop-blur-sm p-6 rounded-[0.75rem] border border-white/[0.08]">
        <h3 class="text-lg font-bold mb-2 text-white">{{ spec.title | safe }}</h3>
        <p class="text-sm text-white/80 leading-relaxed">{{ spec.desc | safe }}</p>
      </article>
      {% endfor %}
    </div>
  </div>
</section>

{# ===== CTA ===== #}
<section class="bg-brand-bg py-20" aria-labelledby="features-cta-title">
  <div class="max-w-[820px] mx-auto px-6 text-center">
    <h2 id="features-cta-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-6 text-brand-navy">
      Prêt à <span class="grad-text">essayer DictIA</span>&nbsp;?
    </h2>
    <p class="text-lg text-brand-navy/80 mb-8">
      Lancement printemps&nbsp;2026. Inscrivez-vous pour figurer sur la liste prioritaire.
    </p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      {% from 'macros/button.html' import button %}
      {{ button('Pré-inscription par courriel', href='mailto:info@dictia.ca?subject=Pré-inscription%20DictIA', variant='primary', size='lg', icon='✉️') }}
      {{ button('Voir les tarifs', href='/tarifs', variant='secondary', size='lg') }}
    </div>
  </div>
</section>

{% endblock %}