/* Page /expertises — version détaillée des 3 piliers Boom Maker.
 * Contenu plus profond que la section home (#expertises) pour cibler des
 * mots-clés long-tail (SEO) et donner une vraie réponse aux visiteurs en
 * mode 'considération'. */

const { useState } = React;
const { Logo, ArrowUpRight, ThemeToggle, Target, Workflow, Brain, Check, FooterMin } = window.BMShared;

const ExpertisesNav = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <nav className="nav" id="nav">
        <a href="/" className="nav-logo" aria-label="Boom Maker"><Logo /></a>
        <div className="nav-links">
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger active" aria-haspopup="true">
              Expertises <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/expertises" className="active">3 piliers</a>
              <a href="/#process">Process</a>
              <a href="/partners">Partenaires</a>
            </div>
          </div>
          <a href="/#prix">Tarifs</a>
          <a href="/news">News</a>
          <div className="nav-dropdown">
            <button type="button" className="nav-dropdown-trigger" aria-haspopup="true">
              À propos <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/a-propos">BoomMaker</a>
              <a href="/#faq">FAQ</a>
            </div>
          </div>
          <a href="/contact">Contact</a>
        </div>
        <ThemeToggle />
        <a href="/audit-gratuit" className="btn btn-glow nav-cta-desktop">Audit gratuit <ArrowUpRight /></a>
        <button className="nav-burger" aria-label="Menu" aria-expanded={open}
                onClick={() => setOpen((o) => !o)}>
          <span /><span /><span />
        </button>
      </nav>
      <div className={`nav-mobile ${open ? 'open' : ''}`} onClick={() => setOpen(false)}>
        <span className="nav-mobile-group">/ Expertises</span>
        <a href="/expertises" className="active">3 piliers</a>
        <a href="/#process">Process</a>
        <a href="/partners">Partenaires</a>
        <a href="/#prix">Tarifs</a>
        <a href="/news">News</a>
        <span className="nav-mobile-group">/ À propos</span>
        <a href="/a-propos">BoomMaker</a>
        <a href="/#faq">FAQ</a>
        <a href="/contact">Contact</a>
        <a href="/audit-gratuit" className="btn btn-glow">Audit gratuit <ArrowUpRight /></a>
      </div>
    </>
  );
};

const PILLARS = [
  {
    id: 'trouver',
    n: '01',
    icon: Target,
    eyebrow: 'Pilier 01 · Prospection B2B automatisée',
    title: 'Trouver',
    em: 'tes clients',
    intro: "Le pipeline de prospection B2B qui tourne 24/7 pendant que tu fais ton vrai métier. Sales Navigator + agents IA (Claude) + multicanal email & LinkedIn — automatisé, mesuré, scalable, connecté à ton CRM.",
    sections: [
      {
        h3: "Le pipeline complet, brique par brique",
        body: "On construit ton pipeline en 4 briques connectées qui s'enchaînent sans intervention humaine : sourcing chirurgical sur Sales Navigator (5 à 10 segments ICP précis avec exclusions clients existants et regex métier), enrichissement entreprise via SIRENE gouv.fr (NAF, effectifs, forme juridique, date de création, adresse siège), génération de messages par Claude (Anthropic) — un message unique par prospect, basé sur ses vraies données d'entreprise, pas du Mad Libs générique — puis envoi multicanal LinkedIn + Email avec warmup intégré."
      },
      {
        h3: "Ce que la machine fait toute seule",
        list: [
          'Scoring HIGH / MEDIUM / LOW automatique sur chaque lead',
          'Dédoublonnage solide : par URL profil LinkedIn + email + fallback identifiant unique',
          'Détection auto des absences et auto-répondeurs (regex multilingue FR/EN)',
          'Classification sentiment des réponses : intéressé / question / neutre / hostile',
          'Briefing IA de 8 lignes posé sur la fiche CRM avant que tu rappelles',
          "Remontée des réponses dans Cerca, HubSpot ou Pipedrive (custom fields, tags conditionnels)",
          'A/B continu sur les accroches pour optimiser au fil des semaines',
        ]
      },
      {
        h3: "Outils intégrés dans le pipeline",
        list: [
          'Sales Navigator pour le sourcing ICP chirurgical',
          'Explorium et SIRENE gouv.fr pour l\'enrichissement entreprise FR',
          'Claude Sonnet 4.6 / Opus 4.7 pour la personnalisation IA — prompts versionnés en Markdown',
          'Emelia (REST + GraphQL + webhooks instant) pour cold email avec warmup',
          'PhantomBuster ou Emelia pour LinkedIn auto (séquences mix LinkedIn + Email)',
          'Pipedrive · HubSpot · Cerca connectés pour scorer et tracker',
        ]
      },
      {
        h3: "Résultat type sur 90 jours",
        body: "Nos clients passent de 3 RDV par mois en 16h de prospection manuelle à 12 RDV par mois en 4h de validation. Les taux de réponse LinkedIn passent de 2-3% (messages génériques) à 15-25% (personnalisation IA bien faite). Le système tourne en autonomie ; toi tu interviens sur la conversation et le closing — là où ta valeur est unique."
      },
    ],
    relatedPosts: [
      { slug: 'prospection-b2b-automatisee-le-guide-2026', title: 'Prospection B2B automatisée : le guide 2026' },
      { slug: 'comment-ecrire-des-messages-linkedin-qui-convertissent-a-25', title: 'Messages LinkedIn qui convertissent à 25%+' },
      { slug: 'cold-email-vs-linkedin-quel-canal-choisir-pour-votre-prospection-b2b', title: 'Cold email vs LinkedIn : quel canal choisir ?' },
    ],
  },
  {
    id: 'connecter',
    n: '02',
    icon: Workflow,
    eyebrow: 'Pilier 02 · Workflows no-code',
    title: 'Connecter',
    em: 'tes outils',
    intro: "Tes outils existants se parlent enfin grâce au no-code. CRM, Gmail, facturation, drive, calendrier : la donnée circule toute seule. Plus de copier-coller du lundi matin, plus de double saisie, plus d'oublis.",
    sections: [
      {
        h3: "La plomberie critique qu'on installe",
        body: "On orchestre tes outils existants (Gmail, ton CRM, ton tableur, ton outil de facturation) avec Make ou n8n. La donnée passe d'un système à l'autre automatiquement — pas besoin de tout changer ni d'apprendre une nouvelle plateforme. Ton équipe continue de travailler sur ses outils habituels, mais sans les saisies manuelles. Et surtout : avec des garde-fous anti-doublons (filtres temporels, lookup par identifiant unique, fallback emails factices uniques à la milliseconde) pour que la machine ne casse jamais ta base."
      },
      {
        h3: "Cas d'usage typiques en automatisation TPE/PME",
        list: [
          'Calendly → CRM : création auto du lead avec source, statut et date du RDV',
          'Formulaire site → email équipe + Airtable + CRM en parallèle (pas de dépendance bloquante)',
          'Webhooks Emelia → Airtable + CRM avec dédoublonnage vérifié par tests end-to-end',
          'Génération et envoi automatiques des factures depuis le CRM',
          'Reporting consolidé dans un dashboard Softr en lecture seule (snapshot hebdo pour ne pas faire ramer Airtable)',
          'Onboarding client automatisé (signature → CRM → facturation → drive)',
          'Synchronisation calendrier × CRM × Slack (notifications temps réel)',
          'Relances automatiques sur les factures impayées (J+15, J+30, J+45)',
        ]
      },
      {
        h3: "Stack supportée côté orchestration et business",
        body: "Make.com (toutes les briques natives + HTTP custom + scripts JS inline) · n8n · Zapier · Pabbly côté orchestration. Côté business : Gmail, Outlook, Pipedrive, HubSpot, Salesforce, Cerca, Notion, Airtable, Softr, Google Workspace, Microsoft 365, Stripe, QuickBooks, Sellsy, Pennylane. Si ton outil a une API ou un webhook, on s'y connecte."
      },
      {
        h3: "Ce qui est livré avec chaque scénario",
        list: [
          'Blueprint Make exportable (JSON) — tu n\'es jamais otage',
          'README en français qui explique quoi tourne quand et pourquoi',
          'Tests end-to-end avec 3+ payloads réels avant la mise en prod',
          'Monitoring + alertes en cas d\'erreur (Slack, email)',
          'Credentials rangés en variables d\'environnement, jamais en clair dans le code',
        ]
      },
    ],
    relatedPosts: [
      { slug: 'make-vs-zapier-2026-comparatif-complet-tpe-prix-puissance-roi', title: 'Make vs Zapier 2026 : comparatif complet TPE' },
      { slug: 'facturation-automatisee-comment-encaisser-15-jours-plus-vite-et-dormir', title: 'Facturation automatisée : 42 → 18 jours de délai' },
      { slug: 'guide-debutant-automatiser-ses-premiers-processus-sans-prise-de-tete', title: 'Guide débutant : ta 1ère automatisation en 30 min' },
    ],
  },
  {
    id: 'deleguer',
    n: '03',
    icon: Brain,
    eyebrow: 'Pilier 03 · Agents IA opérationnels',
    title: 'Déléguer à',
    em: "l'IA",
    intro: "L'IA fait le répétitif à ta place — Claude, ChatGPT ou Gemini intégrés dans tes workflows existants. Toi, tu gardes les décisions. Pas de spectacle, pas de hype : juste un workflow où l'IA a un rôle précis et mesurable.",
    sections: [
      {
        h3: "Comment on intègre vraiment l'IA",
        body: "On intègre Claude (Sonnet 4.6, Opus 4.7, Haiku 4.5), ChatGPT ou Gemini dans tes workflows existants — pas comme un assistant flottant, mais comme un module qui exécute une tâche précise. Prompts versionnés en Markdown côté repo (pas planqués dans des champs Make illisibles), structure JSON propre en sortie, gestion fine des cas limites (échappement, retours à la ligne, hallucinations). Tu définis les règles, l'IA exécute, tu valides."
      },
      {
        h3: "Cas d'usage IA qui marchent vraiment",
        list: [
          'Qualification automatique des leads entrants (analyse profil + scoring HIGH/MEDIUM/LOW)',
          "Rédaction d'accroches cold personnalisées (jamais 2 fois la même formulation, basée sur les vraies données entreprise)",
          'Analyse des réponses prospects (positif / négatif / question / objection)',
          "Briefing commercial automatique de 8 lignes posé sur la fiche CRM avant le rappel",
          "Veille hebdo Perplexity (sonar / sonar-pro avec search_recency_filter et search_domain_filter)",
          "Sélection de sujets SEO anti-cannibalisation (l'IA vérifie qu'on n'a pas déjà écrit là-dessus)",
          'Rédaction d\'articles SEO avec ta voix (brief de ton + anti-jargon versionnés)',
          'Génération automatique de 5 questions FAQ par article pour les rich snippets Google',
          'Résumé automatique des appels Calendly (Fathom / Otter → CRM)',
          'Tri automatique des emails support (urgents / non-urgents / spam)',
        ]
      },
      {
        h3: "Ce que l'IA NE fait PAS chez nous",
        body: "L'IA ne décide jamais d'envoyer un email signé de ton nom sans validation. Elle ne signe pas de contrat. Elle ne change pas tes prix. Elle prépare, propose, exécute le répétitif. Toi tu gardes le contrôle des décisions stratégiques. C'est un workflow augmenté, pas une délégation aveugle."
      },
    ],
    relatedPosts: [
      { slug: 'automatisation-vs-ia-la-confusion-qui-fait-perdre-du-temps-et-de-largent', title: 'Automatisation vs IA : la confusion qui coûte cher' },
      { slug: 'les-5-erreurs-fatales-qui-sabotent-votre-automatisation', title: '5 erreurs fatales qui sabotent ton automatisation' },
      { slug: 'calculer-le-roi-de-vos-automatisations-le-guide-qui-change-tout', title: 'Calculer le ROI de tes automatisations' },
    ],
  },
];

const KPIS = [
  { value: '15-25h', label: 'gagnées par semaine en moyenne' },
  { value: '12 RDV', label: 'qualifiés par mois sur le pilier prospection' },
  { value: '1-2 mois', label: 'pour atteindre le ROI sur 90% des projets' },
  { value: '1/sem.', label: 'article SEO publié auto sans intervention humaine' },
];

const CASES = [
  {
    sector: 'Enseigne nationale de restauration',
    title: 'Recrutement de franchisés',
    body: "4 scénarios Make connectés à Emelia + Airtable + Perplexity + Claude + CRM franchise. Briefing IA automatique sur chaque réponse prospect (entreprise, dirigeant, suggestion commerciale en 8 lignes) pour que le commercial ait le contexte avant même de rappeler.",
    bullets: [
      'Funnel 10 étapes du pipeline franchise visible dans un dashboard Softr',
      'Dédoublonnage propre LinkedIn (par URL profil) + Email',
      'Sentiment des prospects + KPIs hebdo en lecture seule pour le client',
    ],
    tag: 'Make + Emelia + Cerca',
  },
  {
    sector: 'SaaS B2B (formation pro)',
    title: 'Cold outbound multi-personas',
    body: "Plateforme IA pour le secteur de la formation pro. Cible segmentée en 3 personas (fondateurs TPE, marketing/growth, ops/admissions), chacun avec son angle de message — douleur perso, douleur funnel, douleur ops.",
    bullets: [
      'Sourcing data sur codes industrie spécifiques (NAF)',
      'Classification automatique par regex sur titres et entreprises',
      'Séquence dédiée par persona dans Emelia',
    ],
    tag: 'Claude + Emelia + Regex',
  },
  {
    sector: 'Média B2C grande audience',
    title: 'Monétisation annonceurs',
    body: "Média grand public (centaines de milliers de lectrices/mois), prospection d'annonceurs B2B. Script Python custom qui prend les CSV Sales Nav bruts, classifie en 4 ICP sectoriels, dédoublonne, exclut les clients existants, et sort un JSON prêt-à-importer.",
    bullets: [
      "4 ICP sectoriels avec leur propre séquence email",
      "Pluriels + word boundaries + override marketing dans la regex de filtrage",
      "Sortie JSON Airtable + CSV Emelia, prêtes à importer",
    ],
    tag: 'Python + Sales Nav + Airtable',
  },
];

const STACK = [
  {
    group: 'Automatisation no-code',
    items: ['Make.com', 'n8n', 'Zapier', 'Pabbly'],
  },
  {
    group: 'Agents IA',
    items: ['Claude Sonnet 4.6', 'Claude Opus 4.7', 'Claude Haiku 4.5', 'ChatGPT', 'Gemini'],
  },
  {
    group: 'Recherche & veille',
    items: ['Perplexity API (sonar / sonar-pro)', 'search_recency_filter', 'search_domain_filter'],
  },
  {
    group: 'Cold outbound',
    items: ['Emelia (REST + GraphQL)', 'Sales Navigator', 'PhantomBuster', 'Lemlist'],
  },
  {
    group: 'CRM',
    items: ['Cerca', 'HubSpot', 'Pipedrive', 'Salesforce'],
  },
  {
    group: 'Bases & dashboards',
    items: ['Airtable', 'Softr', 'Notion', 'Google Sheets'],
  },
  {
    group: 'Sites & dev',
    items: ['React 18', 'Vercel (serverless + edge)', 'Contentful', 'GitHub Actions', 'Puppeteer'],
  },
  {
    group: 'Enrichissement data',
    items: ['SIRENE gouv.fr', 'Explorium', 'Kroki (Mermaid)', 'HCTI'],
  },
  {
    group: 'Scripts custom',
    items: ['Python (ETL, dédup, classification)', 'Node.js (functions + build)'],
  },
];

const DIFFERENTIATORS = [
  {
    title: 'On code aussi.',
    body: "La plupart des agences no-code s'arrêtent dès qu'il faut un script Python, un webhook custom, une function serverless ou un fix CSS. Nous on va jusqu'au bout : si Make n'a pas la brique, on écrit le morceau qui manque. Tu ne te retrouves pas bloqué à 90%.",
  },
  {
    title: 'On documente ce qu\'on livre.',
    body: "Prompts IA versionnés en Markdown, blueprints Make exportables en JSON, README en français, schémas d'architecture. Pas de boîte noire. Si tu changes de presta demain, ton équipe reprend la main.",
  },
  {
    title: 'On dit non aux features inutiles.',
    body: "Si un truc va te coûter cher pour rien, on le dit. Exemple récent : on a refusé d'ajouter reCAPTCHA sur des formulaires (impact négatif sur la conversion) au profit d'un honeypot + rate limiting côté serveur — même protection, zéro friction utilisateur.",
  },
  {
    title: 'On teste en vrai avant de dire "c\'est livré".',
    body: "Chaque scénario passe par 3+ payloads réels avec dédup vérifié — pas juste un \"ça part en succès dans Make donc c'est bon\". Quand on dit \"c'est en prod\", c'est testé en prod.",
  },
];

const FAQ = [
  {
    q: "Combien coûte une automatisation de prospection B2B avec Boom Maker ?",
    a: "Nos formats (audit, projet, setup mensuel) et leurs prix sont détaillés sur la page tarifs. Si tu hésites entre deux formules, l'audit gratuit en 24h te donne un chiffrage personnalisé sans engagement.",
    ctas: [
      { label: 'Voir les tarifs', href: '/#prix' },
      { label: 'Audit gratuit', href: '/audit-gratuit' },
    ],
  },
  {
    q: "Faut-il changer tous mes outils pour automatiser mon business ?",
    a: "Non. On orchestre tes outils existants (Gmail, Pipedrive, HubSpot, Notion, Airtable, Sellsy, Stripe, etc.) avec Make ou n8n. Tant que ton outil a une API ou un webhook, on s'y connecte sans rien remplacer."
  },
  {
    q: "Quelle différence entre automatisation no-code et agent IA ?",
    a: "Une automatisation no-code exécute une suite d'étapes prédéfinies (si X alors Y). Un agent IA, lui, analyse, classe, rédige ou décide à partir d'un contexte. Les deux se combinent : Make orchestre, Claude rédige les accroches personnalisées."
  },
  {
    q: "Make ou n8n : quel outil choisir pour automatiser ?",
    a: "Make est plus accessible et plus puissant que Zapier pour le prix, parfait pour démarrer. n8n est open-source, self-hosted, idéal pour de gros volumes ou des contraintes RGPD strictes. On choisit avec toi selon ton stack et ton budget."
  },
  {
    q: "Quels résultats concrets sur la prospection automatisée ?",
    a: "Sur nos clients : passage de 3 RDV par mois en 16h de prospection à 12 RDV par mois en 4h de validation. Les taux de réponse LinkedIn passent de 2-3% à 15-25% avec une personnalisation IA bien faite."
  },
  {
    q: "L'IA peut-elle envoyer des emails à ma place sans validation ?",
    a: "Pas chez Boom Maker. L'IA prépare et propose, mais elle ne décide jamais d'envoyer un email signé de ton nom sans ta validation. C'est un workflow augmenté, pas une délégation aveugle. Tu gardes le contrôle sur tout ce qui sort."
  },
  {
    q: "En combien de temps un projet est-il opérationnel ?",
    a: "Un audit gratuit en 24h. Un workflow simple (1-3 étapes) livré en 5 à 10 jours. Un pipeline prospection complet livré en 3 à 4 semaines. Les agents IA dépendent du périmètre, compte 2 à 4 semaines."
  },
  {
    q: "Pour qui ces expertises sont-elles adaptées ?",
    a: "Pour les TPE et PME françaises (2 à 50 personnes) qui ont déjà un produit qui se vend, mais qui perdent du temps en répétitif et veulent passer à l'échelle sans embaucher 5 personnes. Si tu cherches un outil clé en main sans réflexion stratégique, on n'est pas le bon partenaire."
  },
];

const ExpertisesTOC = () => (
  <aside className="expertises-toc" aria-label="Sommaire de la page">
    <span className="expertises-toc-label">Sommaire</span>
    <ol>
      {PILLARS.map((p) => (
        <li key={p.id}>
          <a href={`#${p.id}`}>
            <span className="expertises-toc-num">/ {p.n}</span>
            <span className="expertises-toc-title">{p.title} {p.em}</span>
          </a>
        </li>
      ))}
      <li>
        <a href="#resultats">
          <span className="expertises-toc-num">/ KPI</span>
          <span className="expertises-toc-title">Résultats chiffrés</span>
        </a>
      </li>
      <li>
        <a href="#cas">
          <span className="expertises-toc-num">/ Cas</span>
          <span className="expertises-toc-title">Cas en production</span>
        </a>
      </li>
      <li>
        <a href="#stack">
          <span className="expertises-toc-num">/ Stack</span>
          <span className="expertises-toc-title">Stack maîtrisée</span>
        </a>
      </li>
      <li>
        <a href="#difference">
          <span className="expertises-toc-num">/ Diff.</span>
          <span className="expertises-toc-title">Ce qui nous différencie</span>
        </a>
      </li>
      <li>
        <a href="#faq">
          <span className="expertises-toc-num">/ FAQ</span>
          <span className="expertises-toc-title">Questions fréquentes</span>
        </a>
      </li>
    </ol>
  </aside>
);

const ExpertisesBreadcrumb = () => (
  <nav className="expertises-breadcrumb" aria-label="Fil d'Ariane">
    <a href="/">Accueil</a>
    <span className="expertises-breadcrumb-sep" aria-hidden="true">/</span>
    <span aria-current="page">Expertises</span>
  </nav>
);

const ExpertisesPage = () => (
  <div className="expertises-page">
    <ExpertisesNav />

    <article className="audit-hero">
      <div className="container">
        <ExpertisesBreadcrumb />
        <span className="eyebrow"><span className="pulse" /> 3 piliers · 1 obsession</span>
        <h1>
          Prospection, no-code, IA : nos <em>3 expertises</em> pour automatiser ta TPE ou PME.
        </h1>
        <p className="lead">
          Trois domaines où on est très bons. Pas dix. Tout le reste, on a des partenaires. Détail des outils intégrés, des cas d'usage, des résultats — pour que tu saches exactement ce qu'on fait avant même d'échanger.
        </p>
      </div>
    </article>

    <section className="expertises-content">
      <div className="container expertises-layout">
        <ExpertisesTOC />

        <div className="expertises-main">
          {PILLARS.map((p) => {
            const Icon = p.icon;
            return (
              <div className="expertise-block" id={p.id} key={p.id}>
                <div className="expertise-header">
                  <span className="expertise-num">/ {p.n}</span>
                  <div className="expertise-eyebrow eyebrow"><span className="pulse" />{p.eyebrow}</div>
                  <div className="expertise-icon-circle"><Icon size={28} /></div>
                  <h2 className="expertise-title">{p.title} <em>{p.em}</em></h2>
                  <p className="expertise-intro">{p.intro}</p>
                </div>

                {p.sections.map((s, i) => (
                  <div className="expertise-section" key={i}>
                    <h3>{s.h3}</h3>
                    {s.body && <p>{s.body}</p>}
                    {s.list && (
                      <ul>
                        {s.list.map((item) => (
                          <li key={item}><Check /> {item}</li>
                        ))}
                      </ul>
                    )}
                  </div>
                ))}

                {p.relatedPosts && p.relatedPosts.length > 0 && (
                  <div className="expertise-related">
                    <span className="expertise-related-label">À lire sur le blog</span>
                    <ul>
                      {p.relatedPosts.map((post) => (
                        <li key={post.slug}>
                          <a href={`/blog/${post.slug}`}>
                            {post.title}
                            <ArrowUpRight />
                          </a>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}

                <div className="expertise-cta">
                  <a href="/audit-gratuit" className="btn btn-glow">Voir si c'est pour toi <ArrowUpRight /></a>
                </div>
              </div>
            );
          })}

          {/* Résultats chiffrés */}
          <section className="expertises-kpis" id="resultats" aria-labelledby="resultats-title">
            <div className="expertise-eyebrow eyebrow"><span className="pulse" />Résultats moyens chez nos clients</div>
            <h2 className="expertises-kpis-title" id="resultats-title">
              Les <em>chiffres</em> qu'on défend.
            </h2>
            <div className="expertises-kpis-grid">
              {KPIS.map((k) => (
                <div className="expertises-kpi" key={k.label}>
                  <div className="expertises-kpi-value">{k.value}</div>
                  <div className="expertises-kpi-label">{k.label}</div>
                </div>
              ))}
            </div>
            <p className="expertises-kpis-note">
              Données issues des projets livrés sur 2024-2026 — TPE et PME françaises, 2 à 50 personnes. Détail méthodo sur demande.
            </p>
          </section>

          {/* Cas concrets en production */}
          <section className="expertises-cases" id="cas" aria-labelledby="cas-title">
            <div className="expertise-eyebrow eyebrow"><span className="pulse" />Cas livrés et en production</div>
            <h2 className="expertises-cases-title" id="cas-title">
              Ce qu'on a déjà <em>construit</em> pour nos clients.
            </h2>
            <p className="expertises-cases-lead">
              Trois projets en prod, vraies données, vrais résultats. On peut te montrer les blueprints Make, les dashboards Softr, les briefings IA — tout est documenté.
            </p>
            <div className="expertises-cases-grid">
              {CASES.map((c) => (
                <article className="expertises-case" key={c.title}>
                  <div className="expertises-case-tag">{c.tag}</div>
                  <span className="expertises-case-sector">{c.sector}</span>
                  <h3>{c.title}</h3>
                  <p>{c.body}</p>
                  <ul>
                    {c.bullets.map((b) => (
                      <li key={b}><Check /> {b}</li>
                    ))}
                  </ul>
                </article>
              ))}
            </div>
          </section>

          {/* Stack maîtrisée */}
          <section className="expertises-stack" id="stack" aria-labelledby="stack-title">
            <div className="expertise-eyebrow eyebrow"><span className="pulse" />Stack qu'on maîtrise vraiment</div>
            <h2 className="expertises-stack-title" id="stack-title">
              Pas un catalogue. La <em>vraie stack</em>.
            </h2>
            <p className="expertises-stack-lead">
              On utilise rarement tout en même temps. On choisit la combinaison la plus simple qui fait le job. Voici ce qu'on a en main, par domaine.
            </p>
            <div className="expertises-stack-grid">
              {STACK.map((s) => (
                <div className="expertises-stack-group" key={s.group}>
                  <h3>{s.group}</h3>
                  <ul>
                    {s.items.map((it) => (
                      <li key={it}>{it}</li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </section>

          {/* Différenciateurs */}
          <section className="expertises-diff" id="difference" aria-labelledby="diff-title">
            <div className="expertise-eyebrow eyebrow"><span className="pulse" />Ce qui nous différencie</div>
            <h2 className="expertises-diff-title" id="diff-title">
              4 trucs qu'on fait <em>différemment</em>.
            </h2>
            <div className="expertises-diff-grid">
              {DIFFERENTIATORS.map((d, i) => (
                <article className="expertises-diff-card" key={d.title}>
                  <span className="expertises-diff-num">/ 0{i + 1}</span>
                  <h3>{d.title}</h3>
                  <p>{d.body}</p>
                </article>
              ))}
            </div>
          </section>

          {/* FAQ */}
          <section className="expertises-faq" id="faq" aria-labelledby="faq-title">
            <div className="expertise-eyebrow eyebrow"><span className="pulse" />Questions fréquentes</div>
            <h2 className="expertises-faq-title" id="faq-title">
              Ce qu'on nous demande <em>tout le temps.</em>
            </h2>
            <div className="expertises-faq-list">
              {FAQ.map((item, i) => (
                <details className="expertises-faq-item" key={i}>
                  <summary>
                    <span>{item.q}</span>
                    <span className="expertises-faq-caret" aria-hidden="true">+</span>
                  </summary>
                  <p>{item.a}</p>
                  {item.ctas && item.ctas.length > 0 && (
                    <div className="expertises-faq-ctas">
                      {item.ctas.map((c, j) => (
                        <a
                          key={c.href}
                          href={c.href}
                          className={j === 0 ? 'btn btn-glow' : 'btn btn-ghost'}
                        >
                          {c.label} <ArrowUpRight />
                        </a>
                      ))}
                    </div>
                  )}
                </details>
              ))}
            </div>
          </section>

          {/* CTA final */}
          <div className="expertises-cta-final">
            <h2>Pas sûr de quel pilier te concerne ?</h2>
            <p>30 minutes d'échange gratuit. On regarde ensemble ce qui te ferait gagner le plus de temps — et on te dit franchement si on est le bon partenaire.</p>
            <div className="cta-row">
              <a href="https://calendly.com/julia-boommaker/30min" target="_blank" rel="noopener noreferrer" className="btn btn-glow">Réserver 30 min <ArrowUpRight /></a>
              <a href="/audit-gratuit" className="btn btn-ghost">Audit qualifié → 24h <ArrowUpRight /></a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <FooterMin />
  </div>
);

ReactDOM.createRoot(document.getElementById('root')).render(<ExpertisesPage />);