/* global React */
const { useState, useEffect, useRef } = React;
const { ArrowUpRight, Check, Spark, Bolt, Brain, Workflow, Target, Logo, HeroCanvas, Marquee, Logos, ThemeToggle } = window.BMShared;

// === NAV ===
const Nav = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <nav className="nav">
        <a href="#top" 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="#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">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>
    </>
  );
};


// === HERO ===
const Hero = ({ heroCopy, ctaText, layout }) =>
<section id="top" className={`section hero hero-layout-${layout}`}>
    <div className="aurora">
      <span className="aurora-blob b1" />
      <span className="aurora-blob b2" />
      <span className="aurora-blob b3" />
    </div>
    <div className="container">
      <div className="hero-grid">
        <div>
          <div className="hero-eyebrow-row">
            <span className="eyebrow"><span className="pulse" /> ouvert aux nouveaux projets</span>
          </div>
          <h1 className="display hero-display">
            {heroCopy.l1}<br />
            <em style={{ margin: "0px" }}>{heroCopy.l2}</em>
          </h1>
          <p className="lead">{Array.isArray(heroCopy.sub) ? heroCopy.sub.map((line, i) => <React.Fragment key={i}>{line}{i < heroCopy.sub.length - 1 && <br />}</React.Fragment>) : heroCopy.sub}</p>
          <div className="hero-cta-row">
            <a href="/audit-gratuit" className="btn btn-glow">{ctaText} <ArrowUpRight /></a>
            <a href="#process" className="btn btn-ghost">Comment ça marche ?</a>
            <span className="label">

SANS ENGAGEMENT · 30 MIN · GRATUIT</span>
          </div>
        </div>
        {layout !== 'stacked' && <HeroCanvas />}
      </div>
      {layout === 'stacked' && <HeroCanvas />}

      <div className="hero-meta hero-meta-2col">
        <div>
          <div className="num">+15<em className="accent">h</em></div>
          <div className="lbl">Récupérées par semaine</div>
        </div>
        <div>
          <div className="num">&lt;90<em className="accent">j</em></div>
          <div className="lbl">ROI sinon on déploie pas</div>
        </div>
      </div>
    </div>
  </section>;
// === PROBLEMS ===
const Problems = () =>
<section className="section" style={{ paddingTop: 40, paddingBottom: 20 }}>
    <div className="container">
      <div className="sect-head reveal">
        <div className="meta">
          <span className="label" style={{ fontSize: "15px", color: "var(--ink-2)", fontWeight: "600" }}>/ 01 · Le problème</span>
          <span className="eyebrow" style={{ fontSize: "12px" }}>TU N'ES PAS SEUL</span>
        </div>
        <h2 className="h2" style={{ color: "var(--ink-2)" }}>Ton vrai métier passe <em>au second plan.</em></h2>
      </div>
      <div className="problems">
        <div className="problem reveal delay-1">
          <h4>Les agences classiques</h4>
          <p>Trop chères, trop lentes, et tu finis dépendante. Tu paies pour comprendre ce qu'elles font.</p>
          <div className="price">3 000 €/mois · 3 à 6 mois</div>
        </div>
        <div className="problem reveal delay-2">
          <h4>Recruter quelqu'un</h4>
          <p>Salaire, charges, recrutement, formation. Et s'il part dans 6 mois, tu repars de zéro.</p>
          <div className="price">45 k€/an · risque humain</div>
        </div>
        <div className="problem reveal delay-3">
          <h4>Le faire toi-même</h4>
          <p>Des dizaines d'heures de tutos YouTube. Aucune garantie. Personne pour t'aider quand ça casse.</p>
          <div className="price">Tes soirées · zéro filet</div>
        </div>
      </div>
      <div className="solution-arrow">
        Il existe une meilleure solution
        <span className="arrow-line" />
      </div>
    </div>
  </section>;


// === PILLARS ===
const Pillars = () => {
  const items = [
  {
    n: '01', icon: <Target size={26} />,
    title: 'Trouver', em: 'tes clients',
    desc: "On installe une machine qui va chercher tes prospects 24/7 et leur écrit un message personnalisé. Tu reçois les rendez-vous qualifiés dans ton agenda.",
  },
  {
    n: '02', icon: <Workflow size={26} />,
    title: 'Connecter', em: 'tes outils',
    desc: "Tes outils existants se parlent enfin entre eux. Tes données circulent toutes seules. Tu arrêtes les copier-coller du lundi matin.",
  },
  {
    n: '03', icon: <Brain size={26} />,
    title: 'Déléguer à', em: "l'IA",
    desc: "L'IA fait le travail répétitif à ta place : qualifier les leads, écrire les premiers emails, analyser ce qui marche. Toi, tu gardes les décisions.",
  }];

  return (
    <section className="section" id="expertises" style={{ paddingTop: 40 }}>
      <div className="container">
        <div className="sect-head reveal">
          <div className="meta">
            <span className="label">/ 02 · Ce qu'on fait pour toi</span>
            <span className="eyebrow">3 piliers</span>
          </div>
          <h2 className="h2">On transforme tes outils existants en <em>machine qui te trouve des clients.</em></h2>
        </div>
        <div className="pillars" data-glow>
          {items.map((p, i) =>
          <div className={`pillar reveal delay-${i + 1}`} key={p.n}>
              <div className="num"><span>/ {p.n}</span></div>
              <div className="icon-circle">{p.icon}</div>
              <h3>{p.title} <em>{p.em}</em></h3>
              <p>{p.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// === STATS ===
const Stats = () =>
<section className="section">
    <div className="container">
      <div className="sect-head reveal">
        <div className="meta">
          <span className="label">/ 03 · Pourquoi ça marche</span>
          <span className="eyebrow">Pas de promesse en l'air</span>
        </div>
        <h2 className="h2">On ne déploie que ce qui va <em>vraiment changer ton business.</em></h2>
      </div>
      <div className="big-stats reveal">
        <div>
          <div className="num">+15<em className="accent">h</em></div>
          <div className="lbl">Gagnées par semaine</div>
          <div className="desc">Mesuré chez nos clients après 2 mois.</div>
        </div>
        <div>
          <div className="num" style={{ color: "var(--ink)" }}>×4<em className="accent">,2</em></div>
          <div className="lbl">RDV qualifiés par mois</div>
          <div className="desc">Plus de prospects, sans plus de temps passé.</div>
        </div>
        <div>
          <div className="num">85<em className="accent">%</em></div>
          <div className="lbl">Livrés en moins de 30 jours</div>
          <div className="desc">Pas de projet à rallonge. Tu vois le résultat vite.</div>
        </div>
        <div>
          <div className="num">490<em className="accent">€</em></div>
          <div className="lbl">Pour démarrer</div>
          <div className="desc">Une seule fois. Pas d'abonnement caché.</div>
        </div>
      </div>
    </div>
  </section>;


// === PROCESS ===
const Process = () => {
  const steps = [
  { n: '01', title: 'On regarde ensemble', desc: "30 minutes, gratuites. On regarde tes outils, ce qui te bloque, ce qui te prend du temps. On te dit ce qui peut être automatisé — et ce qui ne vaut pas le coup.", deliv: "Liste des automatisations qui te feront vraiment gagner du temps." },
  { n: '02', title: 'On choisit ensemble', desc: "On priorise UNE automatisation à fort impact. Pas dix. On définit ensemble l'objectif, les chiffres avant/après, et ce qu'on attend du résultat.", deliv: "Plan détaillé sur 90 jours · objectifs chiffrés." },
  { n: '03', title: 'On installe', desc: "On met en place ton automatisation directement sur tes outils. Tu vois ce qu'on fait à chaque étape. Tests sur de vrais clients, pas sur des exemples bidons.", deliv: "Automatisation qui tourne sur tes propres outils." },
  { n: '04', title: 'On te forme', desc: "Vidéos d'explication, documentation simple, support quand tu en as besoin. Tu deviens autonome. Tu n'es pas pris en otage par un prestataire.", deliv: "Tu es 100% propriétaire de ton automatisation." }];

  return (
    <section className="section" id="process">
      <div className="container">
        <div className="sect-head reveal">
          <div className="meta">
            <span className="label">/ 04 · Comment on travaille</span>
            <span className="eyebrow">4 étapes simples</span>
          </div>
          <h2 className="h2">Du premier appel à l'automatisation qui tourne. <em>En 4 à 6 semaines.</em></h2>
        </div>
        <div className="process-stage">
          <div className="process-spine">
            <span className="step-pill"><span style={{ width: 6, height: 6, background: 'var(--violet)', borderRadius: 999 }} /> 4 étapes · 4–6 sem.</span>
          </div>
          <div className="process-steps">
            {steps.map((s, i) =>
            <div className={`process-step reveal delay-${i % 4 + 1}`} key={s.n}>
                <span className="num">/{s.n}</span>
                <div>
                  <h3>{s.title}</h3>
                  <p>{s.desc}</p>
                </div>
                <div className="deliv">
                  <div className="lbl">Livrable</div>
                  <div className="v">{s.deliv}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

};

// === PRICING ===
const PRICING_PLANS = [
  {
    name: 'Sprint', prefix: 'À partir de', price: '490', em: '€', unit: 'une seule fois',
    summary: "Une automatisation, livrée et fonctionnelle. La meilleure façon de tester sans s'engager.",
    features: ['1 automatisation prête à l\'emploi', 'Installée sur tes propres outils', 'Vidéo d\'explication + documentation', 'Livraison en 2 semaines'],
    cta: 'Lancer un Sprint', featured: false,
    formSource: 'pricing_sprint'
  },
  {
    name: 'Boost', prefix: 'À partir de', price: '590', em: '€', unit: '/ mois',
    summary: "Ton automatisation qui s'améliore chaque mois. Comme une équipe tech, sans avoir à recruter.",
    features: ['Nouvelles automatisations chaque mois', 'Suivi et optimisation continue', 'Réunion mensuelle pour ajuster', 'Sans engagement — tu peux arrêter quand tu veux'],
    cta: 'Démarrer le Boost', featured: true,
    formSource: 'pricing_boost'
  },
  {
    name: 'Studio', prefix: '', price: 'Sur', em: ' devis', unit: '', priceItalic: true,
    summary: "Pour les boîtes qui veulent automatiser plusieurs choses à la fois. Sur mesure, en 3 mois.",
    features: ['Audit complet de tous tes outils', 'Plusieurs automatisations en parallèle', 'Réunion stratégique chaque semaine', 'Suivi et optimisation pendant 90 jours'],
    cta: 'Réserver un appel', featured: false,
    formSource: 'pricing_studio'
  }
];

const PricingModal = ({ plan, onClose }) => {
  const [form, setForm] = useState({
    first_name: '', last_name: '', company: '',
    email: '', phone: '', message: '',
    rgpd: false, _gotcha: ''
  });
  const [status, setStatus] = useState('idle');
  const [error, setError] = useState('');
  const firstInputRef = useRef(null);

  useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    if (firstInputRef.current) firstInputRef.current.focus();
    return () => {
      document.body.style.overflow = prev;
      document.removeEventListener('keydown', onKey);
    };
  }, [onClose]);

  const update = (field) => (e) => {
    const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setForm((f) => ({ ...f, [field]: value }));
  };

  const submit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    setError('');
    try {
      const res = await fetch('/api/form', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, form_source: plan.formSource })
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setError(data.error || 'Aïe, ça a coincé. Réessaye dans 30 secondes ?');
        setStatus('error');
        return;
      }
      setStatus('success');
    } catch (err) {
      setError('Aïe, ça a coincé. Réessaye dans 30 secondes ?');
      setStatus('error');
    }
  };

  const onBackdropClick = (e) => {
    if (e.target === e.currentTarget) onClose();
  };

  return (
    <div className="pricing-modal-backdrop" onClick={onBackdropClick}
         role="dialog" aria-modal="true" aria-labelledby="pricing-modal-title">
      <div className="pricing-modal">
        <button type="button" className="pricing-modal-close" onClick={onClose} aria-label="Fermer">×</button>

        {status === 'success' ? (
          <div className="pricing-modal-success">
            <div className="success-icon">✓</div>
            <h3 id="pricing-modal-title">Bien reçu. Merci !</h3>
            <p>On te recontacte sous 24h sur <strong>{form.email}</strong> pour caler la suite de ton <strong>{plan.name}</strong>.</p>
            <button type="button" className="btn btn-glow" onClick={onClose}>Fermer</button>
          </div>
        ) : (
          <>
            <div className="pricing-modal-header">
              <span className="eyebrow">Formule {plan.name}</span>
              <h3 id="pricing-modal-title">Parle-nous de ton projet</h3>
              <p className="pricing-modal-sub">5 champs, 1 minute. On te répond sous 24h.</p>
            </div>

            <form className="pricing-modal-form" onSubmit={submit} noValidate>
              <input type="text" name="_gotcha" value={form._gotcha} onChange={update('_gotcha')}
                     className="form-honeypot" tabIndex="-1" autoComplete="off" aria-hidden="true" />

              <div className="form-row">
                <label>
                  <span className="form-lbl">Prénom *</span>
                  <input ref={firstInputRef} type="text" required value={form.first_name}
                         onChange={update('first_name')} placeholder="Julia" maxLength="100" />
                </label>
                <label>
                  <span className="form-lbl">Nom *</span>
                  <input type="text" required value={form.last_name}
                         onChange={update('last_name')} placeholder="Levy" maxLength="100" />
                </label>
              </div>

              <div className="form-row">
                <label>
                  <span className="form-lbl">Entreprise *</span>
                  <input type="text" required value={form.company}
                         onChange={update('company')} placeholder="Boom Maker" maxLength="200" />
                </label>
                <label>
                  <span className="form-lbl">Téléphone *</span>
                  <input type="tel" required value={form.phone}
                         onChange={update('phone')} placeholder="06 12 34 56 78" maxLength="50" />
                </label>
              </div>

              <label className="form-full">
                <span className="form-lbl">Email *</span>
                <input type="email" required value={form.email}
                       onChange={update('email')} placeholder="julia@tonentreprise.fr" maxLength="200" />
              </label>

              <label className="form-full">
                <span className="form-lbl">Formule choisie</span>
                <input type="text" value={plan.name} readOnly className="form-readonly" tabIndex="-1" />
              </label>

              <label className="form-full">
                <span className="form-lbl">Parle-nous de ton projet (optionnel)</span>
                <textarea value={form.message} onChange={update('message')}
                          placeholder="Contexte, outils, objectif…" maxLength="5000" rows="3" />
              </label>

              <label className="form-rgpd">
                <input type="checkbox" required checked={form.rgpd} onChange={update('rgpd')} />
                <span>J'accepte que mes données soient utilisées pour me recontacter. <a href="/politique-de-confidentialite" target="_blank" rel="noopener noreferrer">Confidentialité</a>.</span>
              </label>

              {error && <div className="form-error">{error}</div>}

              <button type="submit" className="btn btn-glow" disabled={status === 'sending'}>
                {status === 'sending' ? 'Envoi…' : `Lancer mon ${plan.name}`} <ArrowUpRight />
              </button>
            </form>
          </>
        )}
      </div>
    </div>
  );
};

const Pricing = ({ ctaText }) => {
  const [openPlan, setOpenPlan] = useState(null);

  return (
    <section className="section" id="prix">
      <div className="container">
        <div className="sect-head reveal">
          <div className="meta">
            <span className="label">/ 05 · Tarifs</span>
            <span className="eyebrow">Cash but caring</span>
          </div>
          <h2 className="h2">3 façons de démarrer. <em>Choisis celle qui te ressemble.</em></h2>
        </div>
        <div className="pricing-grid">
          {PRICING_PLANS.map((p, i) =>
          <div className={`plan ${p.featured ? 'featured' : ''} reveal delay-${i + 1}`} key={p.name}>
              <div className="display-name">{p.name}</div>
              {p.prefix && <div className="price-prefix">{p.prefix}</div>}
              <div className="price">
                {p.priceItalic ? <>{p.price}<em>{p.em}</em></> : <>{p.price}<em>{p.em}</em><span className="unit">{p.unit}</span></>}
              </div>
              <p className="summary">{p.summary}</p>
              <ul>
                {p.features.map((f) => <li key={f}><Check /> {f}</li>)}
              </ul>
              <button type="button"
                      className={`btn ${p.featured ? 'btn-glow' : 'btn-ghost'}`}
                      onClick={() => setOpenPlan(p)}>
                {p.cta} <ArrowUpRight />
              </button>
            </div>
          )}
        </div>
      </div>
      {openPlan && <PricingModal plan={openPlan} onClose={() => setOpenPlan(null)} />}
    </section>);

};

// === TESTIMONIALS ===
const Testimonials = () => {
  const items = [
  { q: "Avant Boom Maker, on envoyait 50 emails/sem à la main. Maintenant, le système tourne en autonomie : 500 emails/sem, 45% d'ouverture, 15 RDV qualifiés/mois.", name: 'Thomas D.', role: 'Fondateur · SaaS B2B', initials: 'TD', metric: '×10 emails · ROI immédiat' },
  { q: "J'avais 200 prospects que je ne relançais jamais. Aujourd'hui, le workflow gère tout : relances, qualification, ajout CRM. J'interviens seulement sur les leads chauds.", name: 'Marie L.', role: 'Consultante stratégie digitale', initials: 'ML', metric: '+12h/sem récupérées' },
  { q: "On hésitait entre recruter un commercial ou automatiser. Avec Boom Maker, on a les deux : un système qui prospecte H24 et l'accompagnement pour l'optimiser. Best decision ever.", name: 'Alex M.', role: 'Co-fondateur · e-commerce', initials: 'AM', metric: 'Prix d\'un stagiaire, output d\'une équipe' }];

  return (
    <section className="section">
      <div className="container">
        <div className="sect-head reveal">
          <div className="meta">
            <span className="label">/ 06 · Preuves</span>
            <span className="eyebrow">Témoignages clients</span>
          </div>
          <h2 className="h2">Des dirigeants comme toi. <em>Avec de vrais chiffres.</em></h2>
        </div>
        <div className="testimonials-row">
          {items.map((t, i) =>
          <div className={`testimonial reveal delay-${i + 1}`} key={i}>
              <div className="qmark">"</div>
              <blockquote>{t.q}</blockquote>
              <div className="metric">→ {t.metric}</div>
              <div className="footer">
                <div className="avatar">{t.initials}</div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="role">{t.role}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// === FAQ ===
const Faq = () => {
  const [open, setOpen] = useState(0);
  const items = [
  { q: "Avec quels outils travaillez-vous ?", a: "On maîtrise les meilleurs outils du marché : N8N, Zapier, Make pour l'automatisation, ChatGPT, Claude, Gemini pour l'IA, Emelia et Sales Navigator pour la prospection, HubSpot et Pipedrive pour les CRM. On choisit le stack adapté à tes besoins et ton budget." },
  { q: "C'est pas trop technique pour moi ?", a: "Justement non ! On utilise du no-code et on te forme. Si tu sais utiliser Gmail et un tableur, tu sais utiliser nos automatisations." },
  { q: "Mes outils actuels sont-ils compatibles ?", a: "99 % de chances que oui. On travaille avec tous les CRM du marché, les outils emails standards, et on peut se connecter à presque tout via API ou Make/Zapier." },
  { q: "Combien de temps avant de voir des résultats ?", a: "Les premiers workflows sont opérationnels en 2–3 semaines. Les premiers résultats — leads, temps gagné — apparaissent généralement dès le premier mois." },
  { q: "Vous gérez la conformité RGPD ?", a: "Absolument. Toutes nos automatisations respectent le RGPD et les bonnes pratiques d'emailing : désinscription, consentement, traçabilité. Et tout tourne sur tes comptes — Boom Maker n'héberge rien." },
  { q: "Et si je veux arrêter ?", a: "Aucun engagement long terme. Tu gardes 100 % de tes données et de tes workflows. On t'a formé pour que tu sois autonome. Tu coupes quand tu veux." }];

  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="sect-head reveal">
          <div className="meta">
            <span className="label">/ 07 · FAQ</span>
            <span className="eyebrow">Questions fréquentes</span>
          </div>
          <h2 className="h2">Tout ce que <em>tu te dis tout bas.</em></h2>
        </div>
        <div className="faq reveal">
          {items.map((it, i) =>
          <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="toggle" />
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// === BLOG ===
const Blog = () => {
  /* Branché sur les vrais articles Contentful (window.BM_POSTS). On affiche
   * les 3 plus récents — la liste complète est sur news.html. */
  const allPosts = (typeof window !== 'undefined' && window.BM_POSTS) || [];
  const posts = allPosts.slice(0, 3);

  return (
    <section className="section" id="blog">
      <div className="container">
        <div className="sect-head reveal">
          <div className="meta">
            <span className="label">/ 08 · News</span>
            <span className="eyebrow">Le journal de Julia</span>
          </div>
          <h2 className="h2">Du terrain au workflow. <em>Tout ce qu'on a appris en automatisant.</em></h2>
        </div>
        <div className="blog-grid">
          {posts.map((p, i) =>
          <a href={`/blog/${p.slug}`} className={`blog-card reveal delay-${i + 1}`} key={p.slug}>
              <div
                className="thumb"
                style={p.image ? { backgroundImage: `url("${p.image}?w=800&q=75&fm=webp")`, backgroundSize: 'contain', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundColor: 'var(--surface)' } : undefined}
              >
                <div className="thumb-grid" />
                <div className="thumb-overlay" />
                <span className="thumb-tag">{p.cat}</span>
                <span className="thumb-meta">{p.read} · {p.date}</span>
              </div>
              <div className="body">
                <h4>{p.title}</h4>
                <p className="desc">{p.desc}</p>
                <span className="read">Lire l'article <ArrowUpRight size={14} /></span>
              </div>
            </a>
          )}
        </div>
        <div className="blog-cta-row" style={{ marginTop: 32, textAlign: 'center' }}>
          <a href="/news" className="btn btn-ghost">Tous les articles <ArrowUpRight size={14} /></a>
        </div>
      </div>
    </section>);

};

// === CTA BANNER ===
const CtaBanner = ({ ctaText }) =>
<section id="cta" className="section" style={{ paddingTop: 60 }}>
    <div className="container">
      <div className="cta-banner reveal">
        <div className="cta-stars">
          {Array.from({ length: 30 }).map((_, i) =>
        <span key={i} style={{
          top: `${Math.random() * 100}%`,
          left: `${Math.random() * 100}%`,
          animationDelay: `${Math.random() * 3}s`
        }} />
        )}
        </div>
        <div style={{ position: 'relative', zIndex: 2 }}>
          <span className="eyebrow" style={{ marginBottom: 32 }}><span className="pulse" /> 30 minutes · gratuit · zéro engagement</span>
          <h2>Prêt à automatiser <em>ta croissance ?</em></h2>
          <div className="row">
            <a href="/audit-gratuit" className="btn btn-glow">{ctaText} <ArrowUpRight /></a>
            <a href="https://calendly.com/julia-boommaker/30min" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">Plutôt 30 min en direct <ArrowUpRight /></a>
            <span className="label">Zéro pitch · zéro contrat · juste des chiffres</span>
          </div>
        </div>
      </div>
    </div>
  </section>;


// === FOOTER ===
const Footer = () => {
  const [nlEmail, setNlEmail] = useState('');
  const [nlWebsite, setNlWebsite] = useState('');
  const [nlStatus, setNlStatus] = useState('idle');
  const [nlError, setNlError] = useState('');

  const submitNewsletter = async (e) => {
    e.preventDefault();
    if (nlStatus === 'loading') return;
    setNlStatus('loading');
    setNlError('');
    try {
      const r = await fetch('/api/newsletter', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: nlEmail, source: 'footer', website: nlWebsite }),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(data.error || 'Inscription impossible.');
      setNlStatus('success');
      setNlEmail('');
    } catch (err) {
      setNlStatus('error');
      setNlError(err.message || 'Inscription impossible.');
    }
  };

  return (
<footer className="footer">
    <div className="container">
      <div className="footer-lockup reveal">Boom<em className="accent">.</em>Maker</div>
      <div className="footer-grid">
        <div>
          <p className="pitch">Transformons tes outils existants en machine de croissance automatisée. </p>
          <div className="socials">
            <a href="https://www.linkedin.com/company/boom-maker/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Boom Maker">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>
            </a>
            <a href="http://instagram.com/boommaker.io" target="_blank" rel="noopener noreferrer" aria-label="Instagram Boom Maker">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" /></svg>
            </a>
            <a href="https://www.facebook.com/share/17XFLCw1Yq/?mibextid=wwXIfr" target="_blank" rel="noopener noreferrer" aria-label="Facebook Boom Maker">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 10-11.6 9.88V14.9H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v6.98A10 10 0 0022 12z"/></svg>
            </a>
          </div>
        </div>
        <div>
          <h5>Expertises</h5>
          <ul>
            <li><a href="#expertises">Prospection auto.</a></li>
            <li><a href="#expertises">Workflows no-code</a></li>
            <li><a href="#expertises">Agents IA</a></li>
            <li><a href="/audit-gratuit">Audit gratuit</a></li>
          </ul>
        </div>
        <div>
          <h5>À propos</h5>
          <ul>
            <li><a href="/a-propos">BoomMaker</a></li>
            <li><a href="/a-propos#julia">Julia Levy</a></li>
            <li><span className="footer-todo">Études de cas</span></li>
            <li><a href="/partners">Partenaires</a></li>
          </ul>
        </div>
        <div>
          <h5>Contact</h5>
          <ul>
            <li><a href="/contact">Page contact</a></li>
            <li><a href="mailto:julia@boommaker.io">julia@boommaker.io</a></li>
            <li><a href="tel:+33634150099">+33 6 34 15 00 99</a></li>
            <li><a href="/audit-gratuit">Audit gratuit</a></li>
          </ul>
        </div>
        <div>
          <h5>Newsletter</h5>
          <p style={{ fontSize: 15, color: 'var(--ink-2)', marginBottom: 14 }}>Le journal mensuel. Actus IA, prospection, no-code..</p>
          {nlStatus === 'success' ? (
            <p className="nl-success" style={{ fontSize: 14, color: 'var(--accent)', margin: 0 }}>✓ Inscription confirmée. À bientôt dans ta boîte.</p>
          ) : (
            <form className="nl-form" onSubmit={submitNewsletter} noValidate>
              <input
                type="email"
                placeholder="ton@email.fr"
                required
                value={nlEmail}
                onChange={(e) => setNlEmail(e.target.value)}
                disabled={nlStatus === 'loading'}
              />
              <input
                type="text"
                name="website"
                value={nlWebsite}
                onChange={(e) => setNlWebsite(e.target.value)}
                tabIndex="-1"
                autoComplete="off"
                aria-hidden="true"
                style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }}
              />
              <button type="submit" disabled={nlStatus === 'loading'} aria-label="S'abonner">
                {nlStatus === 'loading' ? '…' : '↗'}
              </button>
            </form>
          )}
          {nlStatus === 'error' && (
            <p className="nl-error" style={{ fontSize: 13, color: '#ff6b6b', marginTop: 8 }}>{nlError}</p>
          )}
        </div>
      </div>
      <div className="legal">
        <span>© 2026 Boom Maker · Tel-Aviv ↔ Paris</span>
        <span className="footer-legal-links">
          <a href="/mentions-legales">Mentions légales</a> ·{' '}
          <a href="/cgu">CGU</a> ·{' '}
          <a href="/politique-de-confidentialite">Politique de confidentialité</a>
        </span>
      </div>
    </div>
  </footer>
  );
};


// === FIT CHECK — qualifier l'audience pour augmenter la qualité des leads ===
const FitCheck = () =>
<section className="section fit-check">
    <div className="container">
      <div className="sect-head reveal">
        <div className="meta">
          <span className="label">/ 05bis · Pour qui c'est ?</span>
          <span className="eyebrow">On joue cartes sur table</span>
        </div>
        <h2 className="h2">Boom Maker n'est pas pour tout le monde — <em>et c'est OK.</em></h2>
      </div>
      <div className="fit-grid">
        <div className="fit-col fit-yes reveal">
          <div className="fit-head"><span className="fit-icon">✓</span><h3>Pour toi si…</h3></div>
          <ul>
            <li>Tu diriges une boîte de 2 à 20 personnes en B2B.</li>
            <li>Ton chiffre d'affaires est entre 200 k€ et 3 M€ par an.</li>
            <li>Tu jongles entre prospection, factures, suivi clients — et ça déborde.</li>
            <li>Tu en as marre des agences trop chères qui ne livrent rien.</li>
          </ul>
        </div>
        <div className="fit-col fit-no reveal delay-1">
          <div className="fit-head"><span className="fit-icon">✕</span><h3>Pas pour toi si…</h3></div>
          <ul>
            <li>Tu es seule et tu cherches juste un outil à 50 €/mois.</li>
            <li>Tu préfères tout coder toi-même (et tu en as le temps).</li>
            <li>Tu attends une solution magique sans t'investir dans le projet.</li>
            <li>Ton chiffre d'affaires est inférieur à 100 k€ par an.</li>
          </ul>
        </div>
      </div>
    </div>
  </section>;

window.BMSections = { Nav, Hero, Problems, Pillars, Stats, Process, Pricing, FitCheck, Testimonials, Faq, Blog, CtaBanner, Footer };