/* Page /tarifs — pricing dédié avec garantie ROI 90j, cas clients, FAQ tarifs.
 * Réutilise le design system existant : .audit-hero (hero), .expertises-*
 * (sections, cases, FAQ), .partners-cta-final (CTA bas). Charge expertises.css
 * + forms.css depuis tarifs.html. */

const { useState } = React;
const { Logo, ArrowUpRight, Check, ThemeToggle, FooterMin, useReveal } = window.BMShared;
const { Pricing } = window.BMSections;

/* 3 étapes "Comment on chiffre" */
const STEPS = [
  {
    tag: 'Étape 01',
    title: 'Audit gratuit en 24h',
    body: "On regarde ton stack et tes process en 30 minutes. À la fin de l'appel, tu sais quel format te correspond et combien ça coûte. Sans relance commerciale dans les 48h.",
  },
  {
    tag: 'Étape 02',
    title: 'Chiffrage du ROI',
    body: "On calcule ensemble combien l'automatisation va te faire gagner : en heures, en € économisés, ou en RDV pris en plus. Si l'amortissement dépasse 90 jours, on te dit non.",
  },
  {
    tag: 'Étape 03',
    title: 'Déploiement & formation',
    body: "2 semaines pour un Sprint, en continu pour un Boost, 3 mois pour un Studio. On installe sur tes propres comptes, on documente, on te forme.",
  },
];

/* Garanties ROI */
const ROI_PROMISES = [
  "Tu repars de l'audit avec un chiffrage écrit (heures gagnées, € économisés, RDV pris en plus).",
  "Si on ne tient pas le ROI 90 jours, on rembourse ou on continue gratuitement jusqu'à y arriver.",
  "Aucune facturation tant qu'on n'a pas validé le chiffrage avec toi.",
];

/* Cas clients (synchro avec /expertises#cas — modifier les deux endroits si édité) */
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 pour que le commercial ait le contexte avant même de rappeler.",
    bullets: [
      'Funnel 10 étapes visible dans un dashboard Softr',
      'Dédoublonnage propre LinkedIn (par URL profil) + Email',
      'Sentiment des prospects + KPIs hebdo en lecture seule',
    ],
    tag: 'Make + Emelia + Cerca',
  },
  {
    sector: 'SaaS B2B (formation pro)',
    title: 'Cold outbound multi-personas',
    body: "Plateforme IA pour 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 qui prend les CSV Sales Nav bruts, classifie en 4 ICP sectoriels, dédoublonne, exclut les clients existants.",
    bullets: [
      "4 ICP sectoriels avec leur propre séquence email",
      "Pluriels + word boundaries + override marketing dans la regex",
      "Sortie JSON Airtable + CSV Emelia, prêtes à importer",
    ],
    tag: 'Python + Airtable + Emelia',
  },
];

/* FAQ tarifs */
const FAQS = [
  {
    q: "Pourquoi 3 formats fixes plutôt qu'un devis à chaque fois ?",
    a: "Parce que 80% des demandes tombent dans une de ces 3 cases. Un format clair = pas de négo, pas de surprise, pas de \"on verra\". Tu sais en 30 secondes si c'est dans ton budget. Si ton besoin est vraiment hors-périmètre, on passe en Studio sur devis.",
  },
  {
    q: "Que se passe-t-il si l'automatisation ne marche pas ?",
    a: "Avant de signer, on chiffre ensemble combien l'automatisation va te faire gagner. Si l'amortissement dépasse 90 jours, on ne déploie pas. Si on ne tient pas le ROI 90 jours après déploiement, on rembourse ou on continue gratuitement jusqu'à y arriver.",
  },
  {
    q: "Suis-je propriétaire de mes workflows ?",
    a: "Oui, 100%. Les workflows tournent sur tes comptes (ton Make, ton Airtable, ton CRM, ta clé OpenAI/Claude). Tu gardes la data, les credentials, les blueprints. Si tu décides d'arrêter, tout continue à tourner tel quel.",
  },
  {
    q: "Quelle est la différence concrète entre Sprint et Boost ?",
    a: "Le Sprint, c'est un one-shot à 490€ : on livre une automatisation finie en 2 semaines et tu repars avec. Pas d'abonnement. Le Boost, c'est 590€/mois : chaque mois on construit une nouvelle automatisation + on optimise les précédentes. Idéal quand tu as 3-6 process à automatiser sur 6 mois.",
  },
  {
    q: "Vous travaillez avec quels outils ?",
    a: "Make et n8n pour l'orchestration. Claude, GPT et Mistral pour l'IA. Airtable, Notion, Google Sheets pour la data. HubSpot, Pipedrive, Sellsy, Brevo pour le CRM. Emelia, Lemlist, Heyreach pour la prospection. Stripe, Pennylane, Qonto pour la finance. Si ça a une API ou un webhook, on s'y connecte.",
  },
  {
    q: "Pour quelle taille d'entreprise ?",
    a: "TPE et PME de 2 à 30 personnes typiquement. Ce qui compte, c'est que tu aies déjà un produit qui se vend et que tu perdes du temps sur du répétitif. Si tu cherches un outil clé en main sans réflexion stratégique, on n'est pas le bon partenaire.",
  },
  {
    q: "Comment se passe le premier appel ?",
    a: "30 minutes, gratuit, sans engagement. On regarde ensemble ton stack actuel, ce qui te bouffe le plus de temps, et ce qu'on peut automatiser en premier. À la fin de l'appel, tu repars avec un chiffrage clair (ou un \"non, ce n'est pas pour toi\" honnête). Pas de relance commerciale dans les 48h.",
  },
];

const TarifsNav = () => {
  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" aria-haspopup="true">
              Expertises <span className="nav-dropdown-caret">▾</span>
            </button>
            <div className="nav-dropdown-menu" role="menu">
              <a href="/expertises">3 piliers</a>
              <a href="/cas-usage">Cas d'usage</a>
              <a href="/partners">Partenaires</a>
            </div>
          </div>
          <a href="/tarifs" className="active">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">3 piliers</a>
        <a href="/cas-usage">Cas d'usage</a>
        <a href="/partners">Partenaires</a>
        <a href="/tarifs" className="active">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 TarifsBreadcrumb = () => (
  <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">Tarifs</span>
  </nav>
);

const TarifsPage = () => {
  /* Active l'IntersectionObserver pour rendre visibles les éléments .reveal
   * utilisés par le composant Pricing partagé. */
  useReveal();

  return (
  <div className="tarifs-page">
    <TarifsNav />

    {/* HERO — pattern .audit-hero (forms.css), gradient violet/cyan en fond */}
    <article className="audit-hero">
      <div className="container">
        <TarifsBreadcrumb />
        <span className="eyebrow"><span className="pulse" /> Tarifs · Sprint, Boost, Studio</span>
        <h1>
          3 formats clairs. <em>Le bon prix</em> pour ton stade.
        </h1>
        <p className="lead">
          Sprint à 490€ one-shot, Boost à 590€/mois, Studio sur devis. <strong>ROI sous 90 jours, sinon on ne déploie pas.</strong> Sans engagement, propriété 100%.
        </p>
      </div>
    </article>

    {/* CONTENT — pattern .expertises-content */}
    <section className="expertises-content tarifs-content">
      <div className="container">
        <div className="expertises-main tarifs-main">

          {/* === Pricing component (réutilise la section #prix de la home) === */}
          <div className="tarifs-pricing-wrap">
            <Pricing ctaText="" />
          </div>

          {/* === Comment on chiffre === */}
          <section className="expertises-cases" id="comment-on-chiffre">
            <div className="expertise-eyebrow eyebrow"><span className="pulse" />Comment on chiffre</div>
            <h2 className="expertises-cases-title">
              Pas de devis à 4 chiffres pour une <em>première brique</em>.
            </h2>
            <p className="expertises-cases-lead">
              Le process est fixe : 24h pour chiffrer, 2 semaines minimum pour livrer une première brique, 90 jours max pour rembourser.
            </p>
            <div className="expertises-cases-grid">
              {STEPS.map((s) => (
                <article className="expertises-case" key={s.tag}>
                  <div className="expertises-case-tag">{s.tag}</div>
                  <h3>{s.title}</h3>
                  <p>{s.body}</p>
                </article>
              ))}
            </div>
          </section>

          {/* === Garantie ROI 90j === */}
          <section className="expertises-cases tarifs-roi" id="garantie">
            <div className="expertise-eyebrow eyebrow"><span className="pulse" />Garantie unique</div>
            <h2 className="expertises-cases-title">
              ROI sous 90 jours. <em>Sinon on ne déploie pas.</em>
            </h2>
            <p className="expertises-cases-lead">
              C'est la règle qui filtre 30% des demandes qu'on reçoit. Si on n'arrive pas à te démontrer chiffres en main que ton automatisation se rembourse en moins de 3 mois, on te dit non et on ne facture rien. C'est plus honnête pour toi, et ça nous force à ne déployer que ce qui crée vraiment de la valeur.
            </p>
            <ul className="tarifs-roi-list">
              {ROI_PROMISES.map((r) => (
                <li key={r}><Check /> <span>{r}</span></li>
              ))}
            </ul>
          </section>

          {/* === Cas clients === */}
          <section className="expertises-cases" id="cas">
            <div className="expertise-eyebrow eyebrow"><span className="pulse" />Cas livrés et en production</div>
            <h2 className="expertises-cases-title">
              Ce qu'on a déjà <em>construit</em>.
            </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>

          {/* === FAQ === */}
          <section className="expertises-faq" id="faq" aria-labelledby="faq-title">
            <div className="expertise-eyebrow eyebrow"><span className="pulse" />Questions fréquentes · Tarifs</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">
              {FAQS.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>
                </details>
              ))}
            </div>
          </section>

        </div>
      </div>
    </section>

    {/* CTA final — pattern .partners-cta-final */}
    <section className="partners-content partners-content-minimal">
      <div className="container">
        <div className="partners-cta-final">
          <h2>Besoin d'un conseil&nbsp;?</h2>
          <p>30 minutes, gratuit, sans engagement. À la fin de l'appel, tu repars avec un chiffrage clair ou avec un "non, ce n'est pas pour toi" honnête.</p>
          <div className="partners-cta">
            <a href="/audit-gratuit" className="btn btn-glow">Réserver l'audit gratuit <ArrowUpRight /></a>
            <a href="/expertises" className="btn btn-ghost">Voir nos expertises <ArrowUpRight /></a>
          </div>
        </div>
      </div>
    </section>

    <FooterMin />
  </div>
  );
};

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