/* global React, ReactDOM */

const { useState, useEffect, useRef, Fragment } = React;

/* =========================================================
   PRIMITIVES
   ========================================================= */

const Arrow = ({ size = 14, className = "", style = {} }) =>
<svg width={size} height={size} viewBox="0 0 24 24" className={className} style={style} aria-hidden="true">
    <path d="M5 19 L19 5 M9 5 H19 V15" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


const Check = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
    <path d="M5 12 L10 17 L20 7" stroke="currentColor" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
  </svg>;


const Dot = ({ color = "currentColor" }) =>
<span style={{
  display: "inline-block", width: 6, height: 6, borderRadius: 999, background: color, marginRight: 8
}} />;


/* =========================================================
   NAV
   ========================================================= */

function Nav() {
  return (
    <header className="ap-nav">
      <a href="#top" className="ap-logo" aria-label="Audran Potié">
        <span className="ap-logo-mark">AP</span>
        <span className="ap-logo-name">Audran Potié</span>
      </a>
      <nav className="ap-nav-links" aria-label="Navigation principale">
        <a href="#about">À propos</a>
        <a href="#methode">Méthode</a>
        <a href="#resultats">Résultats</a>
        <a href="#offre">Offre</a>
        <a href="#faq">FAQ</a>
      </nav>
      <a href="#contact" className="ap-nav-cta">
        Réserver un appel
        <Arrow size={12} />
      </a>
    </header>);

}

/* =========================================================
   HERO
   ========================================================= */

function Hero() {
  return (
    <section className="ap-hero" id="top" data-screen-label="Hero">
      <div className="ap-hero-inner">
        <div className="ap-eyebrow">
          <span className="ap-status-dot" /> Disponible — 3 places ouvertes ce trimestre
        </div>

        <h1 className="ap-h1">
          <span className="ap-h1-strong">Consultant</span>
          <span className="ap-h1-line">Paid Media</span>
          <span className="ap-h1-line">&amp; <em>Growth</em></span>
        </h1>

        <p className="ap-lede">
          J'optimise votre acquisition de bout en bout, bien au-delà des plateformes publicitaires : vision globale, pilotage orienté ROI et stratégie créative pensée pour la conversion.
        </p>

        <div className="ap-hero-cta">
          <a href="#contact" className="ap-btn ap-btn-primary">
            Réserver un appel découverte
            <Arrow size={14} />
          </a>
          <a href="#methode" className="ap-btn ap-btn-ghost">
            Voir la méthode
          </a>
        </div>

        <div className="ap-hero-meta">
          <div className="ap-trust">
            <div className="ap-avatars" aria-hidden="true">
              <img src="uploads/logo-dynveo.jpg" alt="Dynveo" />
              <img src="uploads/logo-infomax.jpg" alt="Infomax" />
              <img src="uploads/logo-green.jpg" alt="Client" />
              <img src="uploads/logo-crown.avif" alt="Client" />
            </div>
            <div>
              <div className="ap-trust-stars">★★★★★ <span>4,8/5</span></div>
              <div className="ap-trust-label">40+ marques accompagnées</div>
            </div>
          </div>
        </div>

        <div className="ap-platforms">
          <span className="ap-platforms-label">Stack maîtrisée —</span>
          <span>Meta Ads</span>
          <span>Google Ads</span>
          <span>TikTok Ads</span>
          <span>Pinterest Ads</span>
          <span>GA4 / GTM</span>
        </div>

        <div className="ap-hero-photo" aria-hidden="true">
          <img
            src="uploads/photo-profil.jpg"
            alt="Audran Potié"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          />
        </div>
      </div>

      <div className="ap-hero-grid" aria-hidden="true" />
    </section>);

}

/* =========================================================
   STATS BAR
   ========================================================= */

function StatsBar() {
  const stats = [
  { v: "8M€+", l: "ad spend piloté" },
  { v: "+4 ans", l: "d'expérience paid media" },
  { v: "3 ans", l: "en agence growth top FR" },
  { v: "40+", l: "marques accompagnées" }];

  return (
    <section className="ap-stats" data-screen-label="Stats">
      {stats.map((s, i) =>
      <div className="ap-stat" key={i}>
          <div className="ap-stat-v">{s.v}</div>
          <div className="ap-stat-l">{s.l}</div>
        </div>
      )}
    </section>);

}

/* =========================================================
   ABOUT — Qui suis-je
   ========================================================= */

function About() {
  const ecom = ["Powerlab", "Infomax", "Supersmart", "Dynveo", "Upwatt", "Drink Dong", "School Mouv", "Mabel", "R Town", "One Gum"];
  const leadgen = ["Adekwatts", "Green Acres", "Darwin Microfluidics", "Design Elite"];

  return (
    <section className="ap-about" id="about" data-screen-label="About">
      <div className="ap-about-inner">
        <div className="ap-about-left">
          <span className="ap-section-num">01 / Qui suis-je</span>
          <h2 className="ap-h2">
            3 ans en agence growth.<br />
            <span className="ap-accent-text">Aujourd'hui à votre service.</span>
          </h2>

          <div className="ap-about-portrait" aria-hidden="true">
            <img
              src="uploads/photo-profil.jpg"
              alt="Audran Potié"
              style={{ width: "100%", maxWidth: 280, height: 340, objectFit: "cover", borderRadius: 14, display: "block" }}
            />
          </div>

          <p className="ap-about-bio">
            J'ai passé <strong>plus de 3 ans chez Coudac</strong>, l'une des agences growth les plus exigeantes du marché français, à piloter des comptes publicitaires  pour des marques e-commerce et leadgen — du budget bootstrap au scale 6 chiffres mensuels.
          </p>
          <p className="ap-about-bio">Aujourd'hui en indépendant, je mets cette expérience au service de marques ambitieuses qui veulent un partenaire stratégique qui s’investit comme un co-fondateur, pas comme un exécutant.

          </p>
        </div>

        <div className="ap-about-right">
          <div className="ap-about-photos">
            <img
              src="uploads/testimonial-coudac.jpg"
              alt="Audran Potié chez Coudac"
              style={{ width: "100%", height: 200, objectFit: "cover", borderRadius: 12, display: "block" }}
            />
            <img
              src="uploads/testimonial-podcast.jpg"
              alt="Audran Potié interview"
              style={{ width: "100%", height: 200, objectFit: "cover", borderRadius: 12, display: "block" }}
            />
          </div>

          <div className="ap-about-block">
            <div className="ap-about-block-label">E-commerce</div>
            <ul className="ap-clients">
              {ecom.map((n) => <li key={n}>{n}</li>)}
            </ul>
          </div>

          <div className="ap-about-block">
            <div className="ap-about-block-label">Services &amp; Leadgen</div>
            <ul className="ap-clients">
              {leadgen.map((n) => <li key={n}>{n}</li>)}
            </ul>
          </div>

          <div className="ap-about-block ap-about-budget">
            <div className="ap-about-block-label">Expertise multi-budget</div>
            <div className="ap-budget-row">
              <div className="ap-budget-end">
                <div className="ap-budget-v">1 000 €</div>
                <div className="ap-budget-l">/ mois</div>
              </div>
              <div className="ap-budget-bar" aria-hidden="true">
                <div className="ap-budget-bar-fill" />
                <div className="ap-budget-bar-dots">
                  <span /><span /><span /><span /><span />
                </div>
              </div>
              <div className="ap-budget-end">
                <div className="ap-budget-v">100 000 €</div>
                <div className="ap-budget-l">/ mois</div>
              </div>
            </div>
            <div className="ap-budget-caption">
              Du test bootstrap au scale international — j'ai piloté toute la fourchette.
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* =========================================================
   PILLARS — 4 piliers
   ========================================================= */

function Pillars() {
  const pillars = [
  {
    n: "01",
    t: "Pilotage orienté ROI",
    d: "Chaque euro investi doit générer des ventes ou des demandes de devis qualifiées. Pas de vanity metrics : on regarde le CA et le pipeline."
  },
  {
    n: "02",
    t: "Stratégie créative",
    d: "La stratégie créative représente 80% de vos performances. Je conçois la stratégie créative pour maximiser vos ventes. Angles, formats, hooks, scripts, itérations mensuels."
  },
  {
    n: "03",
    t: "Accélérez votre croissance à la source",
    d: "Ne vous reposez pas uniquement sur les publicités. Je vous accompagne dans l'optimisation de votre site, de vos offres et de vos pages de vente pour maximiser votre acquisition client."
  },
  {
    n: "04",
    t: "Vision d'ensemble de l'acquisition",
    d: "Ne vous limitez plus aux données isolées de vos plateformes. Nous analysons l'intégralité de votre tunnel de conversion (coût d'acquisition, ROI marketing) pour vous apporter la vision globale dont vous avez besoin pour prendre les bonnes décisions."
  }];

  return (
    <section className="ap-pillars" id="piliers" data-screen-label="Pillars">
      <div className="ap-section-head">
        <span className="ap-section-num">02 / Mon approche</span>
        <h2 className="ap-h2">
          Pas un exécutant.<br />
          <span className="ap-accent-text">Un partenaire de croissance.</span>
        </h2>
        <p className="ap-section-lede">
          Je ne suis pas là pour simplement « lancer des campagnes ». Je deviens votre partenaire de croissance autour de 4 piliers concrets.
        </p>
      </div>

      <div className="ap-pillars-grid">
        {pillars.map((p, i) =>
        <article className="ap-pillar" key={i}>
            <div className="ap-pillar-num">{p.n}</div>
            <h3 className="ap-pillar-title">{p.t}</h3>
            <p className="ap-pillar-desc">{p.d}</p>
          </article>
        )}
      </div>
    </section>);

}

/* =========================================================
   POSITIONING — pas media buyer, mais consultant growth
   ========================================================= */

function Positioning() {
  return (
    <section className="ap-positioning" data-screen-label="Positioning">
      <div className="ap-section-head">
        <span className="ap-section-num">03 / Positionnement</span>
        <h2 className="ap-h2">
          La pub n'est pas un coût.<br />
          C'est <span className="ap-accent-text">un système de croissance</span>.
        </h2>
      </div>

      <div className="ap-vs-grid">
        <div className="ap-vs-card ap-vs-bad">
          <div className="ap-vs-tag">Media buyer classique</div>
          <ul>
            <li>Optimise un compte ads en silo</li>
            <li>Vous parle CPM, CTR, CPC</li>
            <li>Pousse du budget sans vision business</li>
            <li>Disparaît quand le ROAS chute</li>
          </ul>
        </div>
        <div className="ap-vs-card ap-vs-good">
          <div className="ap-vs-tag">Mon approche — Consultant Growth</div>
          <ul>
            <li><Check /> Stratégie d'acquisition alignée sur tous les canaux</li>
            <li><Check /> Combien ça coûte, combien ça rapporte</li>
            <li><Check /> Créa, offre et funnel challengés</li>
            <li><Check /> Reporting mensuel orienté décisions</li>
          </ul>
        </div>
      </div>
    </section>);

}

/* =========================================================
   METHOD — 3 étapes
   ========================================================= */

function Method() {
  const steps = [
  {
    n: "01",
    t: "Diagnostic",
    d: "Audit 360° de vos comptes ads, tracking, funnel et économie unitaire. Je remonte là où vos euros fuient.",
    points: ["Audit Meta / Google / TikTok", "Setup tracking GA4 + server-side", "Analyse cohorts & LTV"]
  },
  {
    n: "02",
    t: "Structuration",
    d: "Refonte des comptes selon une architecture claire, naming propre, attribution fiable. Plus de devinettes.",
    points: ["Plan d'acquisition trimestriel", "Refonte campagnes + audiences", "Brief créa & angles"]
  },
  {
    n: "03",
    t: "Scale",
    d: "Pilotage hebdo, tests créatifs, montée en budget contrôlée. Objectif : croissance prévisible, pas de pic-puis-crash.",
    points: ["Itération créa hebdomadaire", "Allocation budgets data-driven", "Call bi-mensuel"]
  }];


  return (
    <section className="ap-method" id="methode" data-screen-label="Method">
      <div className="ap-section-head">
        <span className="ap-section-num">04 / Méthode</span>
        <h2 className="ap-h2">
          Une méthode <span className="ap-accent-text">pensée pour scaler</span>,<br />
          pas pour bricoler.
        </h2>
      </div>

      <div className="ap-steps">
        {steps.map((s, i) =>
        <article className="ap-step" key={i}>
            <div className="ap-step-head">
              <span className="ap-step-num">{s.n}</span>
              <h3 className="ap-step-title">{s.t}</h3>
            </div>
            <p className="ap-step-desc">{s.d}</p>
            <ul className="ap-step-points">
              {s.points.map((p, j) =>
            <li key={j}><span className="ap-bullet" />{p}</li>
            )}
            </ul>
          </article>
        )}
      </div>
    </section>);

}

/* =========================================================
   RESULTS — case studies
   ========================================================= */

function Results() {
  const cases = [
  {
    tag: "DTC · Cosmétique",
    title: "ROAS 1,8 → 4,6 en 90 jours",
    body: "Refonte tracking server-side, simplification de la structure Meta, tests créatifs UGC hebdo.",
    kpis: [["+155%", "revenu pub"], ["−38%", "CAC"], ["120k€/mo", "ad spend"]]
  },
  {
    tag: "SaaS B2B",
    title: "CPL divisé par 3 sur Google Ads",
    body: "Réécriture complète du compte search, attribution multi-touch, alignement avec l'équipe sales.",
    kpis: [["÷3", "CPL"], ["+92%", "MQL"], ["18", "mois d'accompagnement"]]
  },
  {
    tag: "Formation · Infopreneur",
    title: "+540% de revenus sur TikTok Ads",
    body: "Stratégie Spark Ads + creators, funnel webinar repensé, upsell post-achat.",
    kpis: [["540%", "rev. add."], ["2,1×", "AOV"], ["6 mois", "scale"]]
  }];


  return (
    <section className="ap-results" id="resultats" data-screen-label="Results">
      <div className="ap-section-head">
        <span className="ap-section-num">05 / Résultats clients</span>
        <h2 className="ap-h2">
          Des chiffres <span className="ap-accent-text">vérifiables</span>,<br />
          pas des promesses.
        </h2>
      </div>

      <div className="ap-cases">
        {cases.map((c, i) =>
        <article className="ap-case" key={i}>
            <div className="ap-case-tag">{c.tag}</div>
            <h3 className="ap-case-title">{c.title}</h3>
            <p className="ap-case-body">{c.body}</p>
            <div className="ap-case-kpis">
              {c.kpis.map(([v, l], j) =>
            <div key={j}>
                  <div className="ap-case-kpi-v">{v}</div>
                  <div className="ap-case-kpi-l">{l}</div>
                </div>
            )}
            </div>
          </article>
        )}
      </div>

    </section>);

}

/* =========================================================
   OFFER
   ========================================================= */

function Offer() {
  return (
    <section className="ap-offer" id="offre" data-screen-label="Offer">
      <div className="ap-section-head">
        <span className="ap-section-num">06 / Offre</span>
        <h2 className="ap-h2">
          Un accompagnement <span className="ap-accent-text">sur-mesure</span>,<br />
          pas un package figé.
        </h2>
      </div>

      <div className="ap-offer-grid">
        <div className="ap-offer-card">
          <div className="ap-offer-card-head">
            <span className="ap-offer-tag">Sprint</span>
            <h3>Audit &amp; Plan d'attaque</h3>
            <p>Pour diagnostiquer où ça fuit et repartir avec une roadmap claire.</p>
          </div>
          <ul className="ap-offer-list">
            <li><Check /> Audit complet Meta / Google / TikTok</li>
            <li><Check /> Audit tracking + attribution</li>
            <li><Check /> Plan d'acquisition 90 jours</li>
            <li><Check /> Restitution stratégique 1h</li>
          </ul>
          <div className="ap-offer-meta">2 semaines · livrable doc + visio</div>
        </div>

        <div className="ap-offer-card ap-offer-card-featured">
          <div className="ap-offer-pin">Le plus demandé</div>
          <div className="ap-offer-card-head">
            <span className="ap-offer-tag">Pilotage</span>
            <h3>Consulting Growth récurrent</h3>
            <p>Je deviens votre direction acquisition externalisée. Stratégie + exécution.</p>
          </div>
          <ul className="ap-offer-list">
            <li><Check /> Pilotage hebdo des campagnes</li>
            <li><Check /> Tests créatifs &amp; angles</li>
            <li><Check /> Call bi-mensuel</li>
            <li><Check /> Whatsapp direct + appel bi-mensuel</li>
            <li><Check /> Engagement 3 mois minimum</li>
          </ul>
          <div className="ap-offer-meta">Mission 3 / 6 / 12 mois</div>
        </div>

        <div className="ap-offer-card">
          <div className="ap-offer-card-head">
            <span className="ap-offer-tag">Advisory</span>
            <h3>Conseil stratégique</h3>
            <p>Pour les équipes in-house qui veulent un regard senior sans déléguer l'exécution.</p>
          </div>
          <ul className="ap-offer-list">
            <li><Check /> 4 sessions stratégiques / mois</li>
            <li><Check /> Revue de comptes &amp; recos</li>
            <li><Check /> Coaching équipe acquisition</li>
            <li><Check /> Accès Whatsapp direct</li>
          </ul>
          <div className="ap-offer-meta">Engagement trimestriel</div>
        </div>
      </div>

      <div className="ap-offer-foot">
        Tarifs sur devis · sélection de 4 nouveaux clients par trimestre
      </div>
    </section>);

}

/* =========================================================
   FAQ
   ========================================================= */

function FAQ() {
  const items = [
  {
    q: "Pourquoi un consultant plutôt qu'une agence ?",
    a: "Une agence vous vend un junior overbooké. Avec moi vous avez un interlocuteur senior qui pense comme un cofondateur. Moins de slides, plus de décisions."
  },
  {
    q: "Travaillez-vous avec des comptes débutants ?",
    a: "Mon accompagnement est pertinent à partir de 15k€/mois d'ad spend. En dessous, l'audit Sprint suffit largement à débloquer la situation."
  },
  {
    q: "Combien de temps avant des résultats ?",
    a: "Les premiers gains apparaissent en 2 à 4 semaines (tracking, structure). Le scale durable se construit sur 90 jours minimum."
  },
  {
    q: "Sur quels secteurs êtes-vous spécialisé ?",
    a: "DTC e-commerce (cosmétique, mode, food), SaaS B2B, et infopreneurs / formation. J'évite les secteurs très réglementés (santé, finance personnelle)."
  },
  {
    q: "Quels sont vos tarifs ?",
    a: "L'audit démarre à 2 500€. Le pilotage récurrent est sur devis selon le scope (typiquement 4 à 8k€/mois). Je n'ai pas de retainer caché : tout est transparent dès l'appel."
  }];

  const [open, setOpen] = useState(0);

  return (
    <section className="ap-faq" id="faq" data-screen-label="FAQ">
      <div className="ap-section-head">
        <span className="ap-section-num">07 / FAQ</span>
        <h2 className="ap-h2">
          Les questions que vous<br />
          me posez <span className="ap-accent-text">souvent</span>.
        </h2>
      </div>

      <div className="ap-faq-list">
        {items.map((it, i) =>
        <div className={"ap-faq-item" + (open === i ? " is-open" : "")} key={i}>
            <button className="ap-faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
              <span>{it.q}</span>
              <span className="ap-faq-icon" aria-hidden="true">
                {open === i ? "−" : "+"}
              </span>
            </button>
            <div className="ap-faq-a-wrap">
              <div className="ap-faq-a">{it.a}</div>
            </div>
          </div>
        )}
      </div>
    </section>);

}

/* =========================================================
   CONTACT FORM
   ========================================================= */

function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({
    name: "", email: "", phone: "", company: "", site: "", budget: "", platforms: [], goal: ""
  });

  const togglePlatform = (p) => {
    setForm((f) => ({
      ...f,
      platforms: f.platforms.includes(p) ? f.platforms.filter((x) => x !== p) : [...f.platforms, p]
    }));
  };

  const submit = async (e) => {
    e.preventDefault();
    const nameParts = form.name.trim().split(/\s+/);
    sessionStorage.setItem('ap_lead', JSON.stringify({
      email: form.email.trim().toLowerCase(),
      phone: form.phone.trim().replace(/\s/g, ''),
      fn: nameParts[0] || '',
      ln: nameParts.slice(1).join(' ') || ''
    }));

    let site = form.site.trim();
    if (site && !/^https?:\/\//i.test(site)) site = 'https://' + site;

    const params = new URLSearchParams({
      nom: form.name,
      email: form.email,
      telephone: form.phone,
      entreprise: form.company,
      site,
      budget: form.budget,
      plateformes: form.platforms.join(', '),
      objectif: form.goal,
      date: new Date().toISOString()
    });
    fetch('https://hooks.zapier.com/hooks/catch/26307369/4y6w39m/', {
      method: 'POST', body: params, mode: 'no-cors'
    }).catch(() => {});

    window.location.href = 'merci.html';
  };

  return (
    <section className="ap-contact" id="contact" data-screen-label="Contact">
      <div className="ap-contact-grid">
        <div className="ap-contact-intro">
          <span className="ap-section-num">08 / Contact</span>
          <h2 className="ap-h2">
            Parlons de<br />
            <span className="ap-accent-text">votre croissance</span>.
          </h2>
          <p className="ap-contact-lede">Un appel de 30 minutes pour identifier vos problatiques, vous expliquer comment je fonctionne et voir si c'est pertinent d'avancer ensemble. 

          </p>
          <ul className="ap-contact-bullets">
            <li><Check /> Réponse sous 24h ouvrées</li>
            <li><Check /> Aucun engagement</li>
            <li><Check /> Confidentialité garantie</li>
          </ul>
        </div>

        <form className="ap-contact-card" onSubmit={submit}>
          <h3 className="ap-form-title">Réserver mon appel découverte</h3>

          <div className="ap-field">
            <label htmlFor="f-name">Nom &amp; prénom</label>
            <input id="f-name" type="text" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
          </div>

          <div className="ap-field-row">
            <div className="ap-field">
              <label htmlFor="f-email">Email pro</label>
              <input id="f-email" type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
            </div>
            <div className="ap-field">
              <label htmlFor="f-phone">Téléphone</label>
              <input id="f-phone" type="tel" placeholder="+33 6 00 00 00 00" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
            </div>
          </div>

          <div className="ap-field">
            <label htmlFor="f-company">Entreprise</label>
            <input id="f-company" type="text" value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} />
          </div>

          <div className="ap-field">
            <label htmlFor="f-site">Site / boutique</label>
            <input id="f-site" type="text" placeholder="www.monsite.com" value={form.site} onChange={(e) => setForm({ ...form, site: e.target.value })} />
          </div>

          <div className="ap-field">
            <label>Plateformes actives</label>
            <div className="ap-chips">
              {["Meta Ads", "Google Ads", "TikTok Ads", "Aucune"].map((p) =>
              <button
                type="button"
                key={p}
                className={"ap-chip" + (form.platforms.includes(p) ? " is-on" : "")}
                onClick={() => togglePlatform(p)}>
                
                  {p}
                </button>
              )}
            </div>
          </div>

          <div className="ap-field">
            <label htmlFor="f-budget">Budget pub mensuel actuel</label>
            <select id="f-budget" required value={form.budget} onChange={(e) => setForm({ ...form, budget: e.target.value })}>
              <option value="">Sélectionner —</option>
              <option>&lt; 5 000 €</option>
              <option>5 000 – 15 000 €</option>
              <option>15 000 – 50 000 €</option>
              <option>50 000 – 150 000 €</option>
              <option>&gt; 150 000 €</option>
            </select>
          </div>

          <div className="ap-field">
            <label htmlFor="f-goal">Votre objectif principal</label>
            <textarea id="f-goal" rows="3" placeholder="Ex : passer de 30k à 100k€ d'ad spend en gardant un ROAS &gt; 3" value={form.goal} onChange={(e) => setForm({ ...form, goal: e.target.value })} />
          </div>

          <button className="ap-btn ap-btn-primary ap-btn-block" type="submit">
            Réserver mon appel
            <Arrow size={14} />
          </button>
          <div className="ap-form-meta">100% gratuit · sans engagement · réponse en 24h</div>
        </form>
      </div>
    </section>);

}

/* =========================================================
   FOOTER
   ========================================================= */

function Footer() {
  return (
    <footer className="ap-footer">
      <div className="ap-footer-top">
        <div className="ap-footer-brand">
          <span className="ap-logo-mark">AP</span>
          <div>
            <div className="ap-footer-name">Audran Potié</div>
            <div className="ap-footer-role">Consultant Paid Media &amp; Growth</div>
          </div>
        </div>
        <div className="ap-footer-links">
          <a href="#methode">Méthode</a>
          <a href="#resultats">Résultats</a>
          <a href="#offre">Offre</a>
          <a href="#faq">FAQ</a>
          <a href="#contact">Contact</a>
        </div>
      </div>
      <div className="ap-footer-bot">
        <span>© 2026 Audran Potié — Tous droits réservés</span>
        <span>
          <a href="mentions-legales.html" style={{color:"inherit"}}>Mentions légales</a>
          {" · "}
          <a href="cgv.html" style={{color:"inherit"}}>CGV</a>
          {" · "}
          <a href="confidentialite.html" style={{color:"inherit"}}>Confidentialité</a>
        </span>
      </div>
    </footer>);

}

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */

function StickyCTA() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 600);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"ap-sticky-cta" + (visible ? " is-visible" : "")}>
      <a href="#contact" className="ap-btn ap-btn-primary ap-btn-block">
        Réserver mon appel découverte
        <Arrow size={14} />
      </a>
    </div>);

}

/* =========================================================
   APP
   ========================================================= */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "amber",
  "theme": "navy"
} /*EDITMODE-END*/;

const ACCENTS = {
  green: { c: "oklch(0.82 0.18 145)", glow: "oklch(0.82 0.18 145 / 0.25)", label: "Vert growth" },
  lime: { c: "oklch(0.92 0.20 120)", glow: "oklch(0.92 0.20 120 / 0.30)", label: "Lime" },
  electric: { c: "oklch(0.78 0.18 230)", glow: "oklch(0.78 0.18 230 / 0.30)", label: "Bleu électrique" },
  amber: { c: "oklch(0.82 0.16 75)", glow: "oklch(0.82 0.16 75 / 0.30)", label: "Ambre" }
};

function App() {
  useEffect(() => {
    const a = ACCENTS[DEFAULTS.accent] || ACCENTS.amber;
    document.documentElement.style.setProperty("--ap-accent", a.c);
    document.documentElement.style.setProperty("--ap-accent-glow", a.glow);
    document.documentElement.dataset.theme = DEFAULTS.theme;
  }, []);

  return (
    <Fragment>
      <Nav />
      <main>
        <Hero />
        <StatsBar />
        <About />
        <Pillars />
        <Positioning />
        <Method />
        <Results />
        <Offer />
        <FAQ />
        <Contact />
      </main>
      <Footer />
      <StickyCTA />
    </Fragment>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);