/* Taskaway — Page Audit (audit.html)
   Tunnel de conversion mono-CTA → formulaire qualifié multi-étapes */

// ─── Logo (inline, self-contained) ────────────────────────────────────
function Mark({ size = 32, color, accent = '#D4FF4F' }) {
  const c = color || 'currentColor';
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{ display: 'block' }}>
      <line x1="10" y1="14" x2="54" y2="14" stroke={c} strokeWidth="9"/>
      <line x1="32" y1="14" x2="32" y2="36" stroke={c} strokeWidth="9"/>
      <path d="M 32 36 L 16 50" stroke={c} strokeWidth="9" strokeLinecap="square" fill="none"/>
      <path d="M 32 36 L 32 52" stroke={c} strokeWidth="9" fill="none"/>
      <path d="M 32 36 L 48 50" stroke={c} strokeWidth="9" strokeLinecap="square" fill="none"/>
      <circle cx="32" cy="36" r="4.5" fill={accent} stroke={c} strokeWidth="1.5"/>
      <circle cx="16" cy="50" r="2.5" fill={c}/>
      <circle cx="32" cy="52" r="2.5" fill={c}/>
      <circle cx="48" cy="50" r="2.5" fill={c}/>
    </svg>
  );
}
function Logo({ height = 30, color, accent = '#D4FF4F' }) {
  const c = color || 'currentColor';
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: height * 0.34, color: c }}>
      <Mark size={height} color={c} accent={accent}/>
      <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: height * 0.7, letterSpacing: '-0.03em', lineHeight: 1 }}>
        taskaway<span style={{ color: accent }}>.</span>
      </span>
    </span>
  );
}

// ─── Slim Nav (page audit = mono-CTA, nav réduite) ────────────────────
function NavSlim() {
  return (
    <header className="nav nav-scrolled" style={{ background: 'var(--color-paper)' }}>
      <div className="container nav-inner">
        <a href="/" className="nav-logo" aria-label="Retour à l'accueil">
          <Logo height={28} color="var(--color-ink)"/>
        </a>
        <nav className="nav-links">
          <a href="/">← Retour à l'accueil</a>
          <a href="#form" className="btn btn-dark btn-sm" style={{padding:'10px 18px', fontSize:12, color:'var(--color-paper)'}}>
            Réserver mon audit
          </a>
        </nav>
      </div>
    </header>
  );
}

// ─── Hero ──────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="a-hero">
      <div className="container">
        <div className="a-hero-grid">
          <div>
            <div className="a-hero-eyebrow">
              <span className="dot"></span>
              <span>Audit Flash · 45 min · gratuit · sans engagement</span>
            </div>
            <h1>
              On regarde votre stack ensemble.<br/>
              Vous repartez avec un <em>top 3 chiffré</em>.
            </h1>
            <p className="lead">
              45 minutes pour cartographier vos process, identifier les 3 priorités d'automatisation, et mesurer le gain attendu. Pas une démo. Un livrable.
            </p>
            <div className="a-hero-kpis">
              <div className="a-hero-kpi">
                <div className="a-hero-kpi-l">Durée</div>
                <div className="a-hero-kpi-v">45 min</div>
              </div>
              <div className="a-hero-kpi">
                <div className="a-hero-kpi-l">Livrable</div>
                <div className="a-hero-kpi-v">PDF 4–6 p.</div>
              </div>
              <div className="a-hero-kpi">
                <div className="a-hero-kpi-l">Délai</div>
                <div className="a-hero-kpi-v">48h</div>
              </div>
            </div>
            <a href="#form" className="btn btn-dark btn-lg">
              Réserver mon Audit Flash
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square"/></svg>
            </a>
          </div>
          {/* Mockup PDF preview */}
          <div className="a-hero-mockup">
            <div className="a-hero-mockup-inner">
              <div className="a-hero-mockup-tag">→ Livrable · PDF · 6 pages</div>
              <div className="a-hero-mockup-h">Audit Flash<br/>— [Votre boîte]</div>
              <div className="a-hero-mockup-line"><span>01 · CONTEXTE</span><span>p.1</span></div>
              <div className="a-hero-mockup-line"><span>02 · CARTOGRAPHIE STACK</span><span>p.2</span></div>
              <div className="a-hero-mockup-line"><span>03 · TOP 3 PROCESS</span><span>p.3–4</span></div>
              <div className="a-hero-mockup-line"><span>04 · ROI ESTIMÉ</span><span>p.5</span></div>
              <div className="a-hero-mockup-line"><span>05 · ROADMAP</span><span>p.6</span></div>
              <div className="a-hero-mockup-foot">
                <span>TASKAWAY</span>
                <span>● CONFIDENTIEL</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Trust strip ───────────────────────────────────────────────────────
function TrustStrip() {
  return (
    <section className="a-trust">
      <div className="container">
        <div className="a-trust-row">
          <span><span className="tk">●</span> Hébergé en France</span>
          <span><span className="tk">●</span> RGPD natif</span>
          <span><span className="tk">●</span> 0€ d'engagement</span>
          <span><span className="tk">●</span> Réponse en 24h ouvrées</span>
          <span><span className="tk">●</span> NDA sur demande</span>
        </div>
      </div>
    </section>
  );
}

// ─── Qualif ────────────────────────────────────────────────────────────
function Qualif() {
  const yes = [
    "Vous dirigez une PME de 10 à 250 salariés.",
    "Votre équipe ressaisit des données entre 2+ outils chaque semaine.",
    "Vous avez déjà 2–10 outils SaaS en place (CRM, ERP, support, marketing…).",
    "Vous voulez un ROI mesurable, pas une promesse vague.",
  ];
  const no = [
    "Vous cherchez à remplacer un outil métier (ce n'est pas notre périmètre).",
    "Votre projet a un budget < 2 000€ HT (pas viable pour nous).",
    "Vous voulez une démo commerciale standard (l'audit est technique).",
  ];
  return (
    <section className="a-qualif">
      <div className="container">
        <div className="section-head" style={{display:'flex', flexDirection:'column', gap:12}}>
          <span className="mono">01 — Pour qui</span>
          <h2>Cet audit est utile <span className="hl">si</span>...</h2>
          <p style={{maxWidth:680}}>On préfère cadrer en amont — pour respecter votre temps et le nôtre. Voici les 4 critères qui rendent l'audit pertinent, et les 3 cas où on vous redirigera ailleurs.</p>
        </div>
        <div className="a-qualif-grid reveal">
          <div className="a-qualif-col yes">
            <h3>✓ Pour vous si…</h3>
            <ul>{yes.map((y, i) => <li key={i} className="reveal" style={{animationDelay: `${.05 + i*.06}s`}}>{y}</li>)}</ul>
          </div>
          <div className="a-qualif-col no">
            <h3>✗ Pas pour vous si…</h3>
            <ul>{no.map((n, i) => <li key={i} className="reveal" style={{animationDelay: `${.05 + i*.06}s`}}>{n}</li>)}</ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Timeline ──────────────────────────────────────────────────────────
function Timeline() {
  const steps = [
    { t: '0 — 10 min', h: 'Contexte & objectifs', p: 'Votre activité, votre équipe, ce qui vous fait perdre du temps. Pas de pitch — on écoute.' },
    { t: '10 — 25 min', h: 'Cartographie de la stack', p: 'On liste vos outils, les flux entre eux, les ressaisies. On identifie les zones de friction.' },
    { t: '25 — 40 min', h: 'Top 3 process à automatiser', p: 'On chiffre les heures gagnées par process, on priorise selon impact × effort.' },
    { t: '40 — 45 min', h: 'Q&R + suite', p: 'Vos questions. On vous explique comment on travaillerait — ou pas. Pas de pression.' },
  ];
  return (
    <section className="a-timeline">
      <div className="container">
        <div className="section-head" style={{display:'flex', flexDirection:'column', gap:12}}>
          <span className="mono">02 — Le déroulé</span>
          <h2>Ce qui se passe en <span className="hl">45 minutes</span>.</h2>
        </div>
        <div className="a-timeline-track">
          {steps.map((s, i) => (
            <div key={i} className="a-tl-step reveal" style={{animationDelay: `${i*.1}s`}}>
              <span className="a-tl-time">{s.t}</span>
              <span className="a-tl-h">{s.h}</span>
              <span className="a-tl-p">{s.p}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Deliverable ───────────────────────────────────────────────────────
function Deliverable() {
  return (
    <section className="a-deliverable">
      <div className="container">
        <div className="section-head" style={{display:'flex', flexDirection:'column', gap:12}}>
          <span className="mono">03 — Le livrable</span>
          <h2>Vous repartez avec un <span className="hl">document</span>, pas une promesse.</h2>
          <p style={{maxWidth:680}}>48h après l'appel, vous recevez un PDF de 4 à 6 pages — chiffré, actionnable. Que vous travailliez avec nous ensuite, ou pas. C'est notre différenciateur.</p>
        </div>
        <div className="a-deliverable-grid reveal">
          {/* PDF stack visual */}
          <div className="a-pdf-stack">
            <div className="a-pdf a-pdf-3">
              <span className="a-pdf-tag">P.5 — ROI ESTIMÉ</span>
              <div className="a-pdf-h">Gains projetés</div>
              <div className="a-pdf-line short"></div>
              <div className="a-pdf-line"></div>
              <div className="a-pdf-block">
                <div className="a-pdf-line signal"></div>
                <div className="a-pdf-line short"></div>
              </div>
            </div>
            <div className="a-pdf a-pdf-2">
              <span className="a-pdf-tag">P.3 — TOP 3 PROCESS</span>
              <div className="a-pdf-h">Automatisations prioritaires</div>
              <div className="a-pdf-line"></div>
              <div className="a-pdf-line short"></div>
              <div className="a-pdf-block">
                <div className="a-pdf-line"></div>
                <div className="a-pdf-line short"></div>
              </div>
              <div className="a-pdf-block">
                <div className="a-pdf-line signal"></div>
                <div className="a-pdf-line"></div>
              </div>
            </div>
            <div className="a-pdf a-pdf-1">
              <span className="a-pdf-tag">P.1 — SYNTHÈSE EXÉCUTIVE</span>
              <div className="a-pdf-h">Audit Flash<br/>— [Votre boîte]</div>
              <div className="a-pdf-line"></div>
              <div className="a-pdf-line"></div>
              <div className="a-pdf-line short"></div>
              <div className="a-pdf-block">
                <div className="a-pdf-line signal"></div>
                <div className="a-pdf-line"></div>
                <div className="a-pdf-line short"></div>
              </div>
              <div className="a-pdf-line"></div>
              <div className="a-pdf-line short"></div>
            </div>
          </div>
          {/* Bullets */}
          <div>
            <span style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'0.1em', textTransform:'uppercase', opacity:0.6}}>4 à 6 pages · format A4</span>
            <ul className="a-deliv-bullets">
              <li>
                <span className="a-deliv-bullets-num">01</span>
                <div><strong>Synthèse exécutive</strong> · vue d'ensemble en 1 page, lisible par un non-tech.</div>
              </li>
              <li>
                <span className="a-deliv-bullets-num">02</span>
                <div><strong>Cartographie de votre stack</strong> · schéma des outils + flux + ressaisies identifiées.</div>
              </li>
              <li>
                <span className="a-deliv-bullets-num">03</span>
                <div><strong>Top 3 process à automatiser</strong> · chacun avec coût manuel actuel, gain estimé en heures, complexité.</div>
              </li>
              <li>
                <span className="a-deliv-bullets-num">04</span>
                <div><strong>ROI projeté</strong> · estimation chiffrée sur 12 mois, hypothèses explicites.</div>
              </li>
              <li>
                <span className="a-deliv-bullets-num">05</span>
                <div><strong>Roadmap suggérée</strong> · ordre d'attaque, durée par chantier, options DIY vs accompagné.</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Compare ───────────────────────────────────────────────────────────
function Compare() {
  const rows = [
    { l: 'Coût', a: '0€', b: '3 000–8 000€', c: '~20h de votre temps' },
    { l: 'Durée', a: '45 min + 48h', b: '2 à 4 semaines', c: 'Indéfini' },
    { l: 'Livrable', a: 'PDF 4–6 p. chiffré', b: 'Rapport 30–60 p.', c: 'Tableur perso' },
    { l: 'Profondeur', a: 'Top 3 actionnable', b: 'Audit complet', c: 'Variable' },
    { l: 'Engagement', a: 'Aucun', b: 'Devis ferme', c: '—' },
    { l: 'Spécialisation', a: 'Automatisation', b: 'Conseil généraliste', c: '—' },
  ];
  return (
    <section className="a-compare">
      <div className="container">
        <div className="section-head" style={{display:'flex', flexDirection:'column', gap:12}}>
          <span className="mono">04 — Comparaison</span>
          <h2>Pourquoi <span className="hl">gratuit</span> ?</h2>
          <p style={{maxWidth:680}}>Parce qu'on préfère investir 45 min pour qualifier un projet plutôt que perdre des semaines en aller-retour commercial. C'est un filtre — pour vous comme pour nous.</p>
        </div>
        <div className="a-compare-table reveal">
          <div className="a-compare-row head">
            <div className="a-compare-cell">CRITÈRE</div>
            <div className="a-compare-cell win">AUDIT TASKAWAY</div>
            <div className="a-compare-cell">CABINET CONSEIL</div>
            <div className="a-compare-cell">DIY (vous-même)</div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="a-compare-row">
              <div className="a-compare-cell a-compare-cell-l">{r.l}</div>
              <div className="a-compare-cell win">{r.a}</div>
              <div className="a-compare-cell">{r.b}</div>
              <div className="a-compare-cell">{r.c}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Quotes ────────────────────────────────────────────────────────────
function Quotes() {
  const quotes = [
    { q: "On pensait avoir 2 process à automatiser, on en a identifié 7. Et on a clairement vu lesquels attaquer en premier.", a: "Camille D. · Directrice ops, PME 35p" },
    { q: "Le PDF est concret. Pas de blabla, pas de slide commerciale. Mes équipes l'ont relu sans nous.", a: "Thomas R. · DAF, cabinet expertise" },
    { q: "Honnêtement : on n'a pas signé tout de suite. Mais on est revenus 4 mois après — leur audit était toujours pertinent.", a: "Sophie M. · COO, e-commerce" },
  ];
  return (
    <section className="a-quotes">
      <div className="container">
        <div className="section-head" style={{display:'flex', flexDirection:'column', gap:12}}>
          <span className="mono">05 — Retours terrain</span>
          <h2>Ce qu'on a entendu <span className="hl">après</span> l'audit.</h2>
        </div>
        <div className="a-quotes-grid">
          {quotes.map((q, i) => (
            <div key={i} className="a-quote reveal" style={{animationDelay: `${i*.1}s`}}>
              <div className="a-quote-mark">"</div>
              <div className="a-quote-body">{q.q}</div>
              <div className="a-quote-foot">— {q.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ───────────────────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Vais-je avoir une pression commerciale ?", a: "Non. L'audit est exploratoire. À la fin des 45 minutes, on vous explique comment on travaillerait avec vous, mais on ne pousse pas de devis. C'est vous qui revenez vers nous, ou pas." },
    { q: "Et si je ne donne pas suite ?", a: "Aucun problème. Vous gardez le PDF, c'est utile pour cadrer un projet en interne ou consulter d'autres prestataires. On préfère un \"non\" rapide à un \"peut-être\" éternel." },
    { q: "Avec qui je parle pendant l'audit ?", a: "Directement avec un fondateur (pas un SDR, pas un commercial). C'est pour ça qu'on limite à ~10 audits / mois." },
    { q: "Mes données sont-elles confidentielles ?", a: "Oui. NDA disponible sur simple demande. On ne stocke aucune donnée client : juste les éléments que vous nous partagez en visio. Le PDF est envoyé chiffré." },
    { q: "Puis-je inviter mon CTO / DAF / RH ?", a: "Bien sûr. C'est même recommandé. Plus on a de contexte côté métier + technique, plus l'audit est précis." },
    { q: "Disponibilités ?", a: "Sous 24h ouvrées. Créneaux du lundi au vendredi, 9h–18h. Visio (Google Meet ou Zoom, votre choix). Si vraiment urgent, on peut caler dans la semaine." },
  ];
  return (
    <section className="a-faq">
      <div className="container">
        <div className="section-head" style={{display:'flex', flexDirection:'column', gap:12}}>
          <span className="mono">06 — Questions fréquentes</span>
          <h2>Les 6 questions <span className="hl">récurrentes</span>.</h2>
        </div>
        <div className="a-faq-list reveal">
          {items.map((it, i) => (
            <div key={i} className={`a-faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="a-faq-q">{it.q}</div>
              <div className="a-faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Form (multi-step) ─────────────────────────────────────────────────
function Form() {
  const [step, setStep] = React.useState(0);
  const [sent, setSent] = React.useState(false);
  const [data, setData] = React.useState({
    firstname: '', lastname: '', email: '', phone: '', role: '',
    company: '', size: '', sector: '',
    tools: [], otherTools: '',
    pain: '',
    slot1: '', slot2: '', slot3: '',
  });
  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const toggleTool = (t) => setData((d) => ({ ...d, tools: d.tools.includes(t) ? d.tools.filter((x) => x !== t) : [...d.tools, t] }));

  const steps = [
    { n: '01', l: 'Vous' },
    { n: '02', l: 'Votre boîte' },
    { n: '03', l: 'Votre stack' },
    { n: '04', l: 'Votre besoin' },
    { n: '05', l: 'Disponibilités' },
  ];

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    // En prod : POST vers backend / mailto.
  };

  if (sent) {
    return (
      <section id="form" className="a-form">
        <div className="container">
          <div className="a-form-sent">
            <div className="a-form-sent-mark">✓</div>
            <h3>Reçu — on revient vers vous sous 24h ouvrées.</h3>
            <p>Un email récapitulatif a été envoyé à <strong>{data.email || 'votre adresse'}</strong>. On vous propose 2 créneaux d'audit en réponse, à confirmer en un clic.</p>
            <div style={{marginTop: 36, fontFamily:'var(--font-mono)', fontSize: 11, letterSpacing:'0.1em', textTransform:'uppercase', opacity: 0.6}}>
              ↓ Pendant ce temps, gardez ça sous la main
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="form" className="a-form">
      <div className="container">
        <div className="a-form-head">
          <h2>Réservez votre <em>Audit Flash</em>.</h2>
          <p>5 étapes rapides, 90 secondes. Plus vous nous donnez de contexte, plus l'audit est utile. Tout reste confidentiel.</p>
        </div>

        <div className="a-stepper">
          {steps.map((s, i) => (
            <div key={i} className={`a-step ${step === i ? 'on' : ''} ${step > i ? 'done' : ''}`} onClick={() => step > i && setStep(i)}>
              <span className="a-step-num">{s.n}</span>
              <span>{s.l}</span>
            </div>
          ))}
        </div>

        <form className="a-form-body" onSubmit={submit}>
          {step === 0 && (
            <div className="a-fields">
              <div className="a-field"><label>Prénom <span className="req">*</span></label><input required value={data.firstname} onChange={(e)=>update('firstname', e.target.value)}/></div>
              <div className="a-field"><label>Nom <span className="req">*</span></label><input required value={data.lastname} onChange={(e)=>update('lastname', e.target.value)}/></div>
              <div className="a-field"><label>Email pro <span className="req">*</span></label><input type="email" required value={data.email} onChange={(e)=>update('email', e.target.value)}/></div>
              <div className="a-field"><label>Téléphone</label><input type="tel" value={data.phone} onChange={(e)=>update('phone', e.target.value)} placeholder="+33 …"/></div>
              <div className="a-field full"><label>Votre fonction <span className="req">*</span></label><input required value={data.role} onChange={(e)=>update('role', e.target.value)} placeholder="Ex : Dirigeant, COO, DAF, Responsable opérations…"/></div>
            </div>
          )}

          {step === 1 && (
            <div className="a-fields">
              <div className="a-field full"><label>Nom de votre entreprise <span className="req">*</span></label><input required value={data.company} onChange={(e)=>update('company', e.target.value)}/></div>
              <div className="a-field full"><label>Taille de l'équipe <span className="req">*</span></label>
                <div className="a-radios">
                  {['1–10','11–50','51–250','250+'].map(s => (
                    <label key={s}><input type="radio" name="size" value={s} checked={data.size===s} onChange={()=>update('size', s)}/> <span>{s} salariés</span></label>
                  ))}
                </div>
              </div>
              <div className="a-field full"><label>Secteur</label>
                <select value={data.sector} onChange={(e)=>update('sector', e.target.value)}>
                  <option value="">— Sélectionnez —</option>
                  <option>Services B2B / Conseil</option>
                  <option>E-commerce / Retail</option>
                  <option>SaaS / Tech</option>
                  <option>Cabinet (compta, juridique, RH)</option>
                  <option>Industrie / Logistique</option>
                  <option>Santé / Médical</option>
                  <option>Immobilier / BTP</option>
                  <option>Autre</option>
                </select>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="a-fields">
              <div className="a-field full">
                <label>Outils principaux que vous utilisez <span style={{opacity:0.5, fontSize:10, marginLeft:6}}>(plusieurs choix)</span></label>
                <div className="a-checks">
                  {['HubSpot','Salesforce','Pipedrive','Notion','Airtable','Slack','Zendesk','Intercom','Brevo','Stripe','Shopify','Pennylane','Qonto','Google Workspace','Asana','Linear'].map(t => (
                    <label key={t}><input type="checkbox" checked={data.tools.includes(t)} onChange={()=>toggleTool(t)}/> <span>{t}</span></label>
                  ))}
                </div>
              </div>
              <div className="a-field full"><label>Autres outils non listés</label><input value={data.otherTools} onChange={(e)=>update('otherTools', e.target.value)} placeholder="Ex : ERP maison, outil métier, etc."/></div>
            </div>
          )}

          {step === 3 && (
            <div className="a-fields">
              <div className="a-field full">
                <label>Le process qui vous fait perdre le plus de temps en ce moment <span className="req">*</span></label>
                <textarea required value={data.pain} onChange={(e)=>update('pain', e.target.value)} placeholder="Ex : Onboarding client manuel — il faut créer le compte CRM, l'espace Notion, envoyer 3 emails… 2h par dossier. On en fait 15 par mois." />
              </div>
              <div className="a-field full" style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', opacity:0.55, marginTop: -6}}>
                → Plus c'est concret, plus l'audit sera précis.
              </div>
            </div>
          )}

          {step === 4 && (
            <div className="a-fields">
              <div className="a-field full">
                <label>Indiquez 3 créneaux qui vous arrangent <span className="req">*</span></label>
                <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', opacity:0.55, marginBottom: 8}}>
                  Du lundi au vendredi, 9h–18h. On confirme sous 24h.
                </div>
              </div>
              <div className="a-field"><label>Créneau 1</label><input required value={data.slot1} onChange={(e)=>update('slot1', e.target.value)} placeholder="Ex : Mar. 18 mars · 14h"/></div>
              <div className="a-field"><label>Créneau 2</label><input required value={data.slot2} onChange={(e)=>update('slot2', e.target.value)} placeholder="Ex : Jeu. 20 mars · 10h"/></div>
              <div className="a-field full"><label>Créneau 3</label><input value={data.slot3} onChange={(e)=>update('slot3', e.target.value)} placeholder="Ex : Ven. 21 mars · 16h"/></div>
            </div>
          )}

          <div className="a-form-actions">
            {step > 0 ? (
              <button type="button" className="a-form-back" onClick={()=>setStep(step-1)}>← Précédent</button>
            ) : <span></span>}
            {step < 4 ? (
              <button type="button" className="a-form-next" onClick={()=>setStep(step+1)}>
                Étape suivante
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="square"/></svg>
              </button>
            ) : (
              <button type="submit" className="a-form-next signal">
                Réserver mon Audit Flash
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="square"/></svg>
              </button>
            )}
          </div>
        </form>

        <div className="a-form-micro">
          ● Réponse en moins de 24h ouvrées · ● Confidentiel · ● 0€ d'engagement
        </div>
      </div>
    </section>
  );
}

// ─── Lead magnet ───────────────────────────────────────────────────────
function LeadMagnet() {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  return (
    <section className="a-lm">
      <div className="container">
        <div className="a-lm-row">
          <div>
            <span style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'0.1em', textTransform:'uppercase', opacity:0.6}}>→ Pas prêt pour un appel ?</span>
            <h3 style={{marginTop:12}}>Téléchargez la checklist : <strong>10 process à automatiser dans une PME</strong>.</h3>
            <p>Le PDF qu'on aurait aimé avoir quand on a démarré. Anonyme, gratuit, désinscription en 1 clic.</p>
          </div>
          <div>
            {done ? (
              <div style={{padding:'14px 16px', border:'1.5px solid var(--color-ink)', background:'var(--color-signal)', fontFamily:'var(--font-mono)', fontSize:13, letterSpacing:'0.06em', textTransform:'uppercase'}}>
                ✓ Reçu — vérifiez votre boîte mail
              </div>
            ) : (
              <form className="a-lm-form" onSubmit={(e)=>{e.preventDefault(); setDone(true);}}>
                <input type="email" placeholder="email@entreprise.com" required value={email} onChange={(e)=>setEmail(e.target.value)}/>
                <button type="submit">Recevoir le PDF →</button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Slim footer ───────────────────────────────────────────────────────
function FooterSlim() {
  return (
    <footer style={{background:'var(--color-ink)', color:'var(--color-paper)', padding:'40px 0'}}>
      <div className="container" style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:24, flexWrap:'wrap'}}>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <Logo height={28} color="var(--color-paper)"/>
          <span style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', opacity:0.55, marginLeft:14}}>© 2026 · Hébergé en France</span>
        </div>
        <div style={{display:'flex', gap:24, fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'0.06em', textTransform:'uppercase'}}>
          <a href="/" style={{color:'rgba(245,243,238,0.7)'}}>Accueil</a>
          <a href="/#mentions" style={{color:'rgba(245,243,238,0.7)'}}>Mentions</a>
          <a href="/#privacy" style={{color:'rgba(245,243,238,0.7)'}}>RGPD</a>
          <a href="mailto:hello@taskaway.fr" style={{color:'var(--color-signal)'}}>hello@taskaway.fr</a>
        </div>
      </div>
    </footer>
  );
}

// ─── Sticky mobile CTA ─────────────────────────────────────────────────
function StickyCTA() {
  return (
    <div className="a-sticky-cta">
      <a href="#form">Réserver mon Audit Flash · 45 min</a>
    </div>
  );
}

// ─── Scroll reveal hook ────────────────────────────────────────────────
function useReveal() {
  React.useEffect(() => {
    if (typeof IntersectionObserver === 'undefined') return;
    const els = document.querySelectorAll('.reveal, .hl-anim');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.18, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ─── App ───────────────────────────────────────────────────────────────
function App() {
  useReveal();
  React.useEffect(() => {
    const id = requestAnimationFrame(() => document.body.classList.add('hero-go'));
    return () => cancelAnimationFrame(id);
  }, []);
  return (
    <>
      <NavSlim/>
      <main>
        <Hero/>
        <TrustStrip/>
        <Qualif/>
        <Timeline/>
        <Deliverable/>
        <Compare/>
        <Quotes/>
        <FAQ/>
        <Form/>
        <LeadMagnet/>
      </main>
      <FooterSlim/>
      <StickyCTA/>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

// Defensive: ensure hero animations always trigger even if useEffect timing is fragile.
setTimeout(() => document.body.classList.add('hero-go'), 50);
setTimeout(() => document.body.classList.add('hero-go'), 400);