/* ============================================================
   SECTIONS — Chaker Alouni Landing
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------- IntersectionObserver hook ---------- */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }),
      { threshold: 0.12 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return ref;
}

/* ---------- Counter that animates on view ---------- */
function Counter({ value, suffix = "", decimals = 0, duration = 1400 }) {
  const [v, setV] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started) {
          started = true;
          const t0 = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - t0) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setV(value * eased);
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [value, duration]);
  return <span ref={ref}>{v.toFixed(decimals)}{suffix}</span>;
}

/* ============== NAV ============== */
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="brand">
          <div className="brand-mark"></div>
          <div className="brand-name">CHAKER ALOUNI <span>/ COACH</span></div>
        </a>
        <div className="nav-links">
          <a href="#parcours">Parcours</a>
          <a href="#philosophie">Méthode</a>
          <a href="#transformations">Transformations</a>
          <a href="#protocole">Protocole</a>
          <a href="#faq">FAQ</a>
          <a href="#contact">Contact</a>
        </div>
        <a href="#contact" className="nav-cta">Candidater au Bilan →</a>
      </div>
    </nav>
  );
}

/* ============== HERO ============== */
function Hero() {
  return (
    <header id="top" className="hero">
      <div className="hero-top">
        <div className="col">
          <span>N°/ 001 — COACH DE PERFORMANCE</span>
          <strong>Saint-Ouen-l'Aumône / 95</strong>
        </div>
        <div className="col" style={{textAlign: "right"}}>
          <span className="live">Accompagnement individuel · sur sélection</span>
          <strong>One-to-one</strong>
        </div>
      </div>

      <h1 className="hero-headline">
        Devenir<br/>
        <span className="accent">incassable.</span><span className="slash">/</span><span className="dim">90 jours.</span>
      </h1>

      <div className="hero-authority">
        <span>CrossFit Games 2019 — Madison</span>
        <span>Ingénieur Grenoble INP · ex-Areva</span>
        <span>CF-L2 + BPJEPS</span>
        <span>3× Équipe de France MMA</span>
      </div>

      <div className="hero-bottom">
        <p className="hero-sub">
          Coaching de performance &amp; de vie pour entrepreneurs, dirigeants et indépendants.
          Un protocole de 90 jours pour reconstruire son corps, son énergie et sa discipline —
          conçu par un ingénieur devenu athlète d'élite.
        </p>
        <div className="hero-meta">
          <div>
            <span className="label">Format</span>
            <span className="val">One-to-one</span>
          </div>
          <div>
            <span className="label">Engagement</span>
            <span className="val">12 semaines</span>
          </div>
        </div>
        <div className="hero-cta-group">
          <button
            type="button"
            className="btn btn-primary"
            onClick={() => {
              if (window.Calendly) {
                window.Calendly.initPopupWidget({
                  url: "https://calendly.com/chak-trainer/bilan-performance?hide_event_type_details=0&hide_gdpr_banner=1&background_color=0a0a0b&text_color=f4f4f5&primary_color=c7f642"
                });
              } else {
                document.getElementById("contact")?.scrollIntoView({ behavior: "smooth", block: "start" });
              }
            }}
          >
            Candidater au Bilan <span className="arrow">→</span>
          </button>
          <a href="#protocole" className="btn">
            Voir le protocole
          </a>
        </div>
      </div>
    </header>
  );
}

/* ============== TICKER ============== */
function Ticker() {
  const items = [
    "Grenoble INP-Phelma — Génie nucléaire",
    "Areva / La Défense",
    "Équipe de France MMA Amateur 2014–2016",
    "Ceinture noire de karaté",
    "CrossFit Games Madison 2019",
    "120ᵉ mondial",
    "Champion national CrossFit",
    "Fondateur CrossFit Giants — 1 300 m²",
    "CrossFit Level 2 / BPJEPS",
  ];
  const all = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {all.map((s, i) => <span key={i}>{s}</span>)}
      </div>
    </div>
  );
}

/* ============== PARCOURS — 3 ACTES ============== */
function Parcours() {
  const ref = useReveal();
  const acts = [
    {
      roman: "I",
      label: "Acte I",
      title: "Le creux.",
      lede: "Étudiant. 114 kg. Santé qui décroche.",
      body: "Comme beaucoup, je découvre que l'intelligence ne protège pas le corps. Sédentarité, alimentation par défaut, sommeil sacrifié pour étudier. Le poids s'installe — 114 kg — et avec lui une fatigue de fond, des marqueurs santé qui basculent et un quotidien qu'on subit. Le déclic n'est ni glamour, ni héroïque : la prise de conscience qu'on ne peut pas construire une vie de dirigeant sur un corps qu'on néglige.",
      markers: [
        { k: "Point de départ", v: "114 KG" },
        { k: "Décision", v: "Refus du défaut" },
        { k: "Origine", v: "Le déclic" },
      ]
    },
    {
      roman: "II",
      label: "Acte II",
      title: "Le double saut.",
      lede: "Science nucléaire. Combat international. En parallèle.",
      body: "Prépa scientifique, puis Grenoble INP-Phelma — génie nucléaire. J'intègre Areva comme ingénieur d'études sur la sûreté des réacteurs nucléaires français. Sur le papier, la trajectoire idéale. Mais le sport ne lâche pas : ceinture noire de karaté, puis trois sélections en Équipe de France amateur de MMA — 2014, 2015, 2016. Deux mondes, deux exigences, une même règle : la rigueur n'admet pas d'à-peu-près.",
      markers: [
        { k: "Diplôme", v: "INP-PHELMA" },
        { k: "Poste", v: "AREVA / SÛRETÉ" },
        { k: "Sélections FR", v: "3× MMA · 14–16" },
      ]
    },
    {
      roman: "III",
      label: "Acte III",
      title: "Le grand saut.",
      lede: "Quitter le bureau. Aller chercher les Games. Bâtir Giants.",
      body: "Décision : quitter le poste d'ingénieur pour aller au bout du potentiel athlétique. 2019, j'entre aux CrossFit Games de Madison — la plus haute marche du sport. Je rentre, ouvre CrossFit Giants à Saint-Ouen-l'Aumône, 1 300 m². Aujourd'hui, j'accompagne en one-to-one les dirigeants qui veulent une transformation au standard que je m'impose à moi-même.",
      markers: [
        { k: "2019", v: "CROSSFIT GAMES" },
        { k: "2020 →", v: "GIANTS · 1 300 M²" },
        { k: "Aujourd'hui", v: "ONE-TO-ONE" },
      ]
    },
  ];
  return (
    <section id="parcours" ref={ref} className="section fade-in">
      <div className="section-head">
        <div className="section-tag">02 · Parcours</div>
        <h2 className="section-title">
          Trois actes.<br/><em>Une seule trajectoire.</em>
        </h2>
      </div>

      <div className="acts">
        {acts.map((a, i) => (
          <article key={i} className="act">
            <div className="act-side">
              <div className="act-roman">{a.roman}</div>
              <div className="act-label">{a.label}</div>
              <div className="act-line"></div>
            </div>
            <div className="act-main">
              <h3 className="act-title">{a.title}</h3>
              <div className="act-lede">{a.lede}</div>
              <p className="act-body">{a.body}</p>
              <div className="act-markers">
                {a.markers.map((m, j) => (
                  <div key={j} className="act-marker">
                    <div className="act-marker-k">{m.k}</div>
                    <div className="act-marker-v">{m.v}</div>
                  </div>
                ))}
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ============== PILIERS ============== */
function Piliers() {
  const ref = useReveal();
  const pillars = [
    {
      n: "01", title: "Le Corps",
      glyph: <svg width="32" height="32" viewBox="0 0 32 32"><rect x="6" y="6" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.2"/><line x1="6" y1="16" x2="26" y2="16" stroke="currentColor" strokeWidth="1.2"/><line x1="16" y1="6" x2="16" y2="26" stroke="currentColor" strokeWidth="1.2"/></svg>,
      desc: "Reconstruire la machine — composition corporelle, mobilité, force, conditionnement. Le corps précède l'esprit. On mesure, on charge, on récupère.",
      items: ["Évaluation 12 marqueurs", "Programmation hebdomadaire", "Nutrition & récupération"]
    },
    {
      n: "02", title: "L'Énergie & le Mental",
      glyph: <svg width="32" height="32" viewBox="0 0 32 32"><polyline points="6,20 12,12 16,18 20,8 26,16" fill="none" stroke="currentColor" strokeWidth="1.4"/><circle cx="16" cy="16" r="13" fill="none" stroke="currentColor" strokeWidth="1.2"/></svg>,
      desc: "Gérer le sommeil, le stress, la charge mentale. L'énergie est la vraie devise du dirigeant. On installe des protocoles, pas des intentions.",
      items: ["Audit énergie / sommeil", "Respiration & cohérence", "Gestion du stress haute charge"]
    },
    {
      n: "03", title: "La Discipline",
      glyph: <svg width="32" height="32" viewBox="0 0 32 32"><rect x="8" y="8" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.2"/><rect x="8" y="8" width="6" height="6" fill="currentColor"/><rect x="18" y="18" width="6" height="6" fill="currentColor"/></svg>,
      desc: "Ce que vous faites les 95 % du temps où personne ne regarde. On installe des rituels non-négociables et un cadre de responsabilité hebdomadaire.",
      items: ["Cadrage hebdo 1-à-1", "Tableau de bord personnel", "Code de conduite signé"]
    }
  ];
  return (
    <section id="philosophie" ref={ref} className="section fade-in">
      <div className="section-head">
        <div className="section-tag">03 · Méthode</div>
        <h2 className="section-title">
          Trois piliers.<br/><em>Aucune négociation.</em>
        </h2>
      </div>
      <div className="pillars">
        {pillars.map((p, i) => (
          <article key={i} className="pillar">
            <div className="pillar-num">
              <span>PILIER /{p.n}</span><span className="dot"></span>
            </div>
            <div className="pillar-glyph" style={{color: 'var(--accent)'}}>{p.glyph}</div>
            <h3 className="pillar-title">{p.title}</h3>
            <p className="pillar-desc">{p.desc}</p>
            <ul className="pillar-list">
              {p.items.map((it, j) => <li key={j}>{it}</li>)}
            </ul>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ============== OFFRE ============== */
function Offre({ onChoose }) {
  const ref = useReveal();
  const formules = [
    {
      idx: "01", name: "Essentiel", mode: "À distance",
      price: "1 290", unit: "€ · 90 jours",
      features: [
        "Bilan Performance 1h30 inclus",
        "Programmation personnalisée hebdomadaire",
        "Plan nutrition & récupération",
        "1 visio coaching / semaine (45 min)",
        "Suivi WhatsApp 5j/7",
      ]
    },
    {
      idx: "02", name: "Signature", mode: "Hybride · recommandé",
      price: "2 400", unit: "€ · 90 jours",
      features: [
        "Tout l'Essentiel inclus",
        "2 sessions/semaine en présentiel à Giants",
        "Bilan biomécanique & composition corporelle",
        "Visio bi-hebdomadaire (60 min)",
        "Accès illimité à la salle pendant 90 j",
      ],
      featured: true
    },
    {
      idx: "03", name: "Elite", mode: "Immersion",
      price: "3 900", unit: "€ · 90 jours",
      features: [
        "Tout le Signature inclus",
        "Coaching one-to-one 3×/semaine",
        "Préparation mentale dédiée",
        "Suivi médical & nutritionnel partenaire",
        "Disponibilité 7j/7 · ligne directe",
      ]
    }
  ];

  return (
    <section id="protocole" ref={ref} className="section fade-in">
      <div className="section-head">
        <div className="section-tag">06 · Offre — Le Protocole 90 jours</div>
        <h2 className="section-title">
          Trois formules.<br/><em>Un seul standard d'exécution.</em>
        </h2>
      </div>

      <div className="offer-intro">
        <p className="lead">
          90 jours pour reconstruire un corps, une énergie et une discipline qui tiennent
          sous la charge réelle d'un dirigeant.
        </p>
        <p>
          Le protocole commence systématiquement par un Bilan Performance de 1h30 à Giants
          ou en visio. Nous mesurons, nous décidons, puis nous engageons l'une des trois
          formules ci-dessous — sans engagement de reconduction.
        </p>
      </div>

      {/* Étape 1 */}
      <div className="step1">
        <div className="step1-label">ÉTAPE 01</div>
        <div className="step1-title">
          Bilan Performance
          <span className="sub">Diagnostic complet · 1h30 · Présentiel ou visio</span>
        </div>
        <div className="step1-price">150 €</div>
        <button className="btn btn-primary" onClick={() => onChoose("Bilan Performance — 150 €")}>
          Réserver <span className="arrow">→</span>
        </button>
      </div>

      {/* 3 formules */}
      <div className="formules">
        {formules.map((f, i) => (
          <article key={i} className={"formule" + (f.featured ? " featured" : "")}>
            {f.featured && <div className="formule-tag">★ Recommandée</div>}
            <div className="formule-head">
              <span>Formule /{f.idx}</span>
              <span className="idx">{f.mode.split(" · ")[0]}</span>
            </div>
            <div className="formule-name">{f.name}</div>
            <div className="formule-mode">{f.mode}</div>
            <div className="formule-price">
              {f.price} <span className="unit">{f.unit}</span>
            </div>
            <ul className="formule-features">
              {f.features.map((x, j) => <li key={j}>{x}</li>)}
            </ul>
            <div className="formule-cta">
              <span style={{fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-4)'}}>
                Démarrage sous 14j
              </span>
              <button className="formule-cta-btn" onClick={() => onChoose(`Formule ${f.name} — ${f.price} €`)}>
                Choisir <span>→</span>
              </button>
            </div>
          </article>
        ))}
      </div>

      {/* Suivi mensuel */}
      <div className="monthly">
        <div className="monthly-label">SUIVI POST-PROTOCOLE</div>
        <div className="monthly-title">
          Giants Performance
          <span className="sub">Maintien des acquis · programmation continue · 1 visio / mois</span>
        </div>
        <div className="monthly-price">390 € <span className="unit">/ MOIS</span></div>
      </div>
    </section>
  );
}

/* ============== CHIFFRES / DASHBOARD ============== */
function Chiffres() {
  const ref = useReveal();
  return (
    <section id="chiffres" ref={ref} className="section fade-in">
      <div className="section-head">
        <div className="section-tag">04 · Chiffres-clés</div>
        <h2 className="section-title">
          La performance,<br/><em>mesurée — pas racontée.</em>
        </h2>
      </div>

      <div className="metrics-bar">
        <span>SYS / TABLEAU DE BORD — DERNIÈRE MISE À JOUR 24.05.2026</span>
        <span className="pulse">DONNÉES VÉRIFIÉES</span>
      </div>

      <div className="dashboard">
        {/* TALL — Google rating */}
        <div className="kpi tall">
          <div className="kpi-head">
            <span>NOTE GOOGLE — CROSSFIT GIANTS</span>
            <span className="badge">177 AVIS</span>
          </div>
          <div>
            <div className="kpi-val" style={{fontSize: 'clamp(72px, 9vw, 140px)'}}>
              <Counter value={5.0} decimals={1} />
            </div>
            <div className="kpi-stars">
              <span className="star">★</span><span className="star">★</span><span className="star">★</span><span className="star">★</span><span className="star">★</span>
              <span style={{color: 'var(--ink-3)'}}>· PARFAIT</span>
            </div>
          </div>
          <div className="kpi-foot">
            <span>SAINT-OUEN-L'AUMÔNE / 95</span>
            <span className="delta">★★★★★</span>
          </div>
        </div>

        {/* CrossFit Games — rang mondial */}
        <div className="kpi">
          <div className="kpi-head"><span>RANG MONDIAL</span><span className="badge">2019</span></div>
          <div className="kpi-val"><Counter value={120} /><span className="unit">ᵉ</span></div>
          <div className="kpi-foot">
            <span>CROSSFIT GAMES · MADISON</span>
            <span className="delta">CHAMPION NAT.</span>
          </div>
        </div>

        {/* Surface salle */}
        <div className="kpi">
          <div className="kpi-head"><span>SURFACE GIANTS</span><span className="badge">EN SERVICE</span></div>
          <div className="kpi-val"><Counter value={1300} /><span className="unit">M²</span></div>
          <div className="kpi-foot">
            <span>BOX PERFORMANCE</span>
            <span className="delta">7J/7</span>
          </div>
        </div>

        {/* Sélections Équipe de France MMA */}
        <div className="kpi">
          <div className="kpi-head"><span>SÉLECTIONS ÉQUIPE DE FRANCE</span><span className="badge">MMA · AMATEUR</span></div>
          <div className="kpi-val"><Counter value={3} /><span className="unit">×</span></div>
          <div className="kpi-foot">
            <span>2014 · 2015 · 2016</span>
            <span className="delta">INTERNATIONAL</span>
          </div>
        </div>

        {/* WIDE — Certifications & cursus */}
        <div className="kpi wide">
          <div className="kpi-head"><span>CERTIFICATIONS &amp; CURSUS</span><span className="badge">VÉRIFIABLES</span></div>
          <div className="credentials">
            <div className="cred">
              <div className="cred-key">L2</div>
              <div className="cred-val">CrossFit Level 2<span>Coach certifié</span></div>
            </div>
            <div className="cred">
              <div className="cred-key">BP</div>
              <div className="cred-val">BPJEPS<span>Diplôme d'État</span></div>
            </div>
            <div className="cred">
              <div className="cred-key">★</div>
              <div className="cred-val">Karaté<span>Ceinture noire</span></div>
            </div>
            <div className="cred">
              <div className="cred-key">Ing.</div>
              <div className="cred-val">Grenoble INP-Phelma<span>Génie nucléaire</span></div>
            </div>
          </div>
          <div className="kpi-foot">
            <span>SCIENCE · COMBAT · COACHING</span>
            <span className="delta">↳ 4 DOMAINES</span>
          </div>
        </div>

        {/* 114 kg — point de départ */}
        <div className="kpi">
          <div className="kpi-head"><span>POINT DE DÉPART</span><span className="badge">VÉCU PERSONNEL</span></div>
          <div className="kpi-val"><Counter value={114} /><span className="unit">KG</span></div>
          <div className="kpi-foot">
            <span>ÉTUDIANT · OBÉSITÉ</span>
            <span className="delta">ORIGINE DU CHEMIN</span>
          </div>
        </div>

        {/* Durée protocole */}
        <div className="kpi">
          <div className="kpi-head"><span>DURÉE PROTOCOLE</span><span className="badge">STANDARD</span></div>
          <div className="kpi-val"><Counter value={90} /><span className="unit">JOURS</span></div>
          <div className="kpi-foot">
            <span>12 SEMAINES · ONE-TO-ONE</span>
            <span className="delta">SANS RECONDUCTION</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============== CONTACT ============== */
function Contact({ initialFormule }) {
  const ref = useReveal();
  const [data, setData] = useState({
    fonction: "", taille: "", objectif: "",
    nom: "", email: "", tel: "", profil: "",
    formule: initialFormule || "", message: ""
  });
  const [errors, setErrors] = useState({});
  const [focused, setFocused] = useState("");
  const [submitted, setSubmitted] = useState(false);

  useEffect(() => {
    if (initialFormule) {
      setData(d => ({ ...d, formule: initialFormule }));
      setTimeout(() => {
        document.getElementById("contact")?.scrollIntoView({ block: "start", behavior: "smooth" });
      }, 80);
    }
  }, [initialFormule]);

  // Initialize Calendly inline widget once it mounts (Calendly auto-init runs
  // before React renders, so we must trigger it manually).
  useEffect(() => {
    let cancelled = false;
    const tryInit = () => {
      if (cancelled) return;
      const el = document.querySelector(".calendly-inline-widget");
      if (window.Calendly && window.Calendly.initInlineWidget && el && !el.querySelector("iframe")) {
        window.Calendly.initInlineWidget({
          url: el.getAttribute("data-url"),
          parentElement: el,
        });
        return;
      }
      setTimeout(tryInit, 200);
    };
    tryInit();
    return () => { cancelled = true; };
  }, []);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const validate = () => {
    const e = {};
    if (!data.fonction) e.fonction = "Requis";
    if (!data.taille) e.taille = "Requis";
    if (!data.objectif.trim() || data.objectif.trim().length < 6) e.objectif = "Décrivez en une phrase";
    if (!data.nom.trim()) e.nom = "Requis";
    if (!data.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) e.email = "Email invalide";
    if (!data.tel.trim() || data.tel.replace(/\D/g, "").length < 8) e.tel = "Numéro invalide";
    if (!data.formule) e.formule = "Choisissez une formule";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSubmitted(true);
  };

  const fieldCls = (k) => "field" + (focused === k ? " focused" : "") + (data[k] ? " filled" : "") + (errors[k] ? " error" : "");

  return (
    <section id="contact" ref={ref} className="section fade-in">
      <div className="section-head">
        <div className="section-tag">09 · Contact</div>
        <h2 className="section-title">
          Engager la conversation.<br/><em>Réponse sous 24 h ouvrées.</em>
        </h2>
      </div>

      <div className="contact-grid">
        <aside className="contact-info">
          <div className="contact-block">
            <span className="label">Email</span>
            <span className="val">
              <a href="mailto:contact@crossfitgiants.com">contact@crossfitgiants.com</a>
              <span className="sub">Direct · 24h ouvrées</span>
            </span>
          </div>
          <div className="contact-block">
            <span className="label">Téléphone</span>
            <span className="val">
              <a href="tel:+33670402666">+33 6 70 40 26 66</a>
              <span className="sub">Lun–Sam · 7h–20h</span>
            </span>
          </div>
          <div className="contact-block">
            <span className="label">Adresse</span>
            <span className="val">
              14 avenue d'Alsace-Lorraine<br/>
              95310 Saint-Ouen-l'Aumône
              <span className="sub">CrossFit Giants · 1 300 m²</span>
            </span>
          </div>
          <div className="contact-block">
            <span className="label">Process</span>
            <span className="val" style={{fontSize: 14}}>
              <span style={{fontFamily: 'var(--f-mono)', color: 'var(--ink-3)', fontSize: 12, letterSpacing: '0.04em'}}>01 →</span> Échange téléphonique 20 min<br/>
              <span style={{fontFamily: 'var(--f-mono)', color: 'var(--ink-3)', fontSize: 12, letterSpacing: '0.04em'}}>02 →</span> Bilan Performance 1h30 · 150 €<br/>
              <span style={{fontFamily: 'var(--f-mono)', color: 'var(--ink-3)', fontSize: 12, letterSpacing: '0.04em'}}>03 →</span> Démarrage protocole sous 14 j
            </span>
          </div>
        </aside>

        {submitted ? (
          <div className="form-success premium">
            <div className="success-head">
              <span className="success-tag">CONFIRMATION / 001</span>
              <span className="success-ts">{new Date().toLocaleString("fr-FR", {dateStyle: "long", timeStyle: "short"})}</span>
            </div>
            <div className="check">✓</div>
            <h3>Candidature reçue, {data.nom.split(" ")[0]}.</h3>
            <p>
              J'étudie personnellement chaque candidature. Vous recevez un retour sous
              <strong> 24 heures ouvrées</strong> au {data.tel} ou à {data.email} avec une recommandation
              de créneau pour le Bilan Performance.
            </p>
            <div className="success-checklist">
              <div><span>01 →</span> Préparez 3 contraintes réelles de votre agenda</div>
              <div><span>02 →</span> Notez votre objectif principal et son échéance</div>
              <div><span>03 →</span> Restez joignable les 24 prochaines heures</div>
            </div>
            <small>— Chaker Alouni · Coach de Performance</small>
          </div>
        ) : (
          <form className="contact-form" onSubmit={submit} noValidate>
            <div className="form-section-label">QUALIFICATION / 3 QUESTIONS</div>
            <div className="form-row">
              <div className={fieldCls("fonction")}>
                <label>Votre fonction</label>
                <select value={data.fonction} onChange={e => update("fonction", e.target.value)}
                  onFocus={() => setFocused("fonction")} onBlur={() => setFocused("")}>
                  <option value=""></option>
                  <option>CEO</option>
                  <option>Fondateur</option>
                  <option>Directeur / C-Level</option>
                  <option>Cadre supérieur</option>
                  <option>Indépendant</option>
                </select>
                <span className="arrow-down">▾</span>
                {errors.fonction && <div className="err-msg">! {errors.fonction}</div>}
              </div>
              <div className={fieldCls("taille")}>
                <label>Taille d'entreprise</label>
                <select value={data.taille} onChange={e => update("taille", e.target.value)}
                  onFocus={() => setFocused("taille")} onBlur={() => setFocused("")}>
                  <option value=""></option>
                  <option>Solo</option>
                  <option>2–10</option>
                  <option>11–50</option>
                  <option>50+</option>
                </select>
                <span className="arrow-down">▾</span>
                {errors.taille && <div className="err-msg">! {errors.taille}</div>}
              </div>
            </div>
            <div className={fieldCls("objectif")}>
              <label>Objectif principal — en une phrase</label>
              <input value={data.objectif} onChange={e => update("objectif", e.target.value)}
                onFocus={() => setFocused("objectif")} onBlur={() => setFocused("")} />
              {errors.objectif && <div className="err-msg">! {errors.objectif}</div>}
            </div>

            <div className="form-section-label" style={{marginTop: 32}}>COORDONNÉES / VOS DONNÉES</div>
            <div className="form-row">
              <div className={fieldCls("nom")}>
                <label>Nom complet</label>
                <input value={data.nom} onChange={e => update("nom", e.target.value)}
                  onFocus={() => setFocused("nom")} onBlur={() => setFocused("")} />
                {errors.nom && <div className="err-msg">! {errors.nom}</div>}
              </div>
              <div className={fieldCls("email")}>
                <label>Email professionnel</label>
                <input type="email" value={data.email} onChange={e => update("email", e.target.value)}
                  onFocus={() => setFocused("email")} onBlur={() => setFocused("")} />
                {errors.email && <div className="err-msg">! {errors.email}</div>}
              </div>
            </div>
            <div className="form-row">
              <div className={fieldCls("tel")}>
                <label>Téléphone</label>
                <input type="tel" value={data.tel} onChange={e => update("tel", e.target.value)}
                  onFocus={() => setFocused("tel")} onBlur={() => setFocused("")} />
                {errors.tel && <div className="err-msg">! {errors.tel}</div>}
              </div>
              <div className={fieldCls("formule")}>
                <label>Formule envisagée</label>
                <select value={data.formule} onChange={e => update("formule", e.target.value)}
                  onFocus={() => setFocused("formule")} onBlur={() => setFocused("")}>
                  <option value=""></option>
                  <option>Bilan Performance — 150 €</option>
                  <option>Formule Essentiel — 1 290 €</option>
                  <option>Formule Signature — 2 400 €</option>
                  <option>Formule Elite — 3 900 €</option>
                  <option>Suivi mensuel Giants Performance — 390 €/mois</option>
                  <option>Je ne sais pas encore</option>
                </select>
                <span className="arrow-down">▾</span>
                {errors.formule && <div className="err-msg">! {errors.formule}</div>}
              </div>
            </div>
            <div className={fieldCls("message")}>
              <label>Contexte additionnel (optionnel)</label>
              <textarea value={data.message} onChange={e => update("message", e.target.value)}
                onFocus={() => setFocused("message")} onBlur={() => setFocused("")} />
            </div>
            <div className="form-foot">
              <div className="form-disclaimer">
                Échange confidentiel. Vos données ne sont jamais partagées avec des tiers.
              </div>
              <button className="form-submit" type="submit">
                Envoyer la candidature <span>→</span>
              </button>
            </div>
          </form>
        )}
      </div>

      {/* Calendly inline widget */}
      <div className="calendly-wrap">
        <div className="calendly-meta">
          <span className="calendly-label">RÉSERVATION DIRECTE / 02</span>
          <h3>Réserver votre Bilan Performance</h3>
          <p>
            Choisissez votre créneau et réglez en ligne via Stripe. Vous recevez la confirmation
            et le brief de préparation immédiatement par email.
          </p>
          <div className="calendly-specs">
            <div><span>Durée</span><strong>1h30</strong></div>
            <div><span>Format</span><strong>Présentiel / visio</strong></div>
            <div><span>Tarif</span><strong>150 € TTC</strong></div>
            <div><span>Paiement</span><strong>Stripe sécurisé</strong></div>
          </div>
        </div>
        <div
          className="calendly-inline-widget"
          data-url="https://calendly.com/chak-trainer/bilan-performance?hide_event_type_details=0&hide_gdpr_banner=1&background_color=0a0a0b&text_color=f4f4f5&primary_color=c7f642&hide_landing_page_details=0"
          style={{minWidth: 320, height: 760}}
        ></div>
      </div>

      {/* Mailto fallback — alternative discrète */}
      <div className="mail-fallback subtle">
        <div className="mail-fallback-body">
          <span className="mail-fallback-label">ALTERNATIVE</span>
          <p>
            Vous préférez écrire directement ? Envoyez un email à
            {" "}<a href="mailto:contact@crossfitgiants.com">contact@crossfitgiants.com</a> —
            réponse sous 24 h ouvrées.
          </p>
        </div>
        <a
          className="btn"
          href="mailto:contact@crossfitgiants.com?subject=Candidature%20au%20Bilan%20Performance"
        >
          Écrire à Chaker <span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

/* ============== FOOTER ============== */
function Footer() {
  return (
    <footer>
      <div className="foot-grid">
        <div className="foot-brand">
          <div className="brand">
            <div className="brand-mark"></div>
            <div className="brand-name">CHAKER ALOUNI <span>/ COACH</span></div>
          </div>
          <div className="foot-tag">Coach de performance &amp; de vie · Saint-Ouen-l'Aumône / 95</div>
        </div>
        <div className="foot-col">
          <div className="foot-col-head">NAVIGATION</div>
          <a href="#parcours">Parcours</a>
          <a href="#philosophie">Méthode</a>
          <a href="#transformations">Transformations</a>
          <a href="#protocole">Protocole 90 jours</a>
          <a href="#faq">FAQ</a>
          <a href="#contact">Candidater au Bilan</a>
        </div>
        <div className="foot-col">
          <div className="foot-col-head">CONTACT</div>
          <a href="mailto:contact@crossfitgiants.com">contact@crossfitgiants.com</a>
          <a href="tel:+33670402666">+33 6 70 40 26 66</a>
          <span>14 av. d'Alsace-Lorraine</span>
          <span>95310 Saint-Ouen-l'Aumône</span>
        </div>
        <div className="foot-col">
          <div className="foot-col-head">CONFORMITÉ</div>
          <a href="legal/mentions-legales.html">Mentions légales</a>
          <a href="legal/confidentialite.html">Politique de confidentialité</a>
          <a href="legal/cgv.html">CGV</a>
        </div>
      </div>
      <div className="foot-base">
        <span>© 2026 REVIVE SARL · CHAKER ALOUNI</span>
        <span>SIRET 909 715 658 00011 · 14 AV. D'ALSACE-LORRAINE · 95310</span>
        <span>SITE V.2026.05</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Ticker, Parcours, Piliers, Offre, Chiffres, Contact, Footer });