{copy.step2Objectifs} appendObjectif(v)} />

set("objectifs_libre", e.target.value)}
              placeholder={copy.step2ObjectifsPh}
              rows={4}
            />
          </div>
        </RentreeStep>
      )}

{/* ====== STEP 2 (prof) ====== */}
      {step === 2 && isProf && (
        <RentreeStep index={2} total={TOTAL} title={copy.step2Title}>
          <div className={`field ${errors.prenom_enfant ? "error" : ""}`}>
            <label>Ton prénom</label>
            <input type="text" value={values.prenom_enfant}
              onChange={(e) => set("prenom_enfant", e.target.value)}
              placeholder="Antoine" />
            {errors.prenom_enfant && <div className="field-error-msg">{errors.prenom_enfant}</div>}
          </div>
          <div className={`field ${errors.prof_ecole ? "error" : ""}`}>
            <label>Ton école / faculté</label>
            <input type="text" value={values.prof_ecole}
              onChange={(e) => set("prof_ecole", e.target.value)}
              placeholder="HEC Paris, Polytechnique, Faculté de Droit Assas, Paris-Saclay, ENS Ulm…" />
            {errors.prof_ecole && <div className="field-error-msg">{errors.prof_ecole}</div>}
          </div>
          <div className={`field ${errors.prof_annee ? "error" : ""}`}>
            <label>Année d'étude actuelle</label>
            <RentreeChips
              options={["1A", "2A", "3A", "4A+", "Diplômé(e)"]}
              values={values.prof_annee}
              single
              onSelect={(v) => set("prof_annee", v)}
            />
            {errors.prof_annee && <div className="field-error-msg">{errors.prof_annee}</div>}
          </div>
          <div className="field">
            <label>LinkedIn <span className="rentree-optional">(facultatif)</span></label>
            <input type="url" value={values.prof_linkedin}
              onChange={(e) => set("prof_linkedin", e.target.value)}
              placeholder="https://linkedin.com/in/…" />
          </div>
        </RentreeStep>
      )}

{/* ====== STEP 3 (élève/parent) — prof idéal ====== */}
      {step === 3 && (isEleve || isParent) && (
        <RentreeStep index={3} total={TOTAL} title={copy.step3Title}>
          <div className={`field ${errors.profils_prof_souhaites ? "error" : ""}`}>
            <label>{copy.step3ProfilsLabel}</label>
            <div className="rentree-hint">{copy.step3ProfilsHint}</div>
            <RentreeChips
              options={PROFILS_PROF}
              values={values.profils_prof_souhaites}
              onToggle={(v) => toggleInArray("profils_prof_souhaites", v)}
            />
            {errors.profils_prof_souhaites && <div className="field-error-msg">{errors.profils_prof_souhaites}</div>}
          </div>

<div className={`field ${errors.frequence_souhaitee ? "error" : ""}`}>
            <label>{copy.step3FreqLabel}</label>
            <RentreeChips
              options={FREQUENCES}
              values={values.frequence_souhaitee}
              single
              onSelect={(v) => set("frequence_souhaitee", v)}
            />
            {errors.frequence_souhaitee && <div className="field-error-msg">{errors.frequence_souhaitee}</div>}
          </div>

<div className={`field ${errors.periode_souhaitee ? "error" : ""}`}>
            <label>{copy.step3PeriodeLabel}</label>
            <RentreeChips
              options={PERIODES}
              values={values.periode_souhaitee}
              single
              onSelect={(v) => set("periode_souhaitee", v)}
            />
            {errors.periode_souhaitee && <div className="field-error-msg">{errors.periode_souhaitee}</div>}
          </div>

<div className="field">
            <label>{copy.step3ProfilRequis} <span className="rentree-optional">(facultatif)</span></label>
            <textarea
              className="rentree-textarea"
              value={values.profil_prof_requis}
              onChange={(e) => set("profil_prof_requis", e.target.value)}
              placeholder={copy.step3ProfilRequisPh}
              rows={3}
            />
          </div>
        </RentreeStep>
      )}

{/* ====== STEP 3 (prof) — ce que tu peux enseigner ====== */}
      {step === 3 && isProf && (
        <RentreeStep index={3} total={TOTAL} title={copy.step3Title}>
          <div className={`field ${errors.prof_matieres_enseignees ? "error" : ""}`}>
            <label>Matières que tu peux enseigner</label>
            <RentreeChipsGrouped
              groups={MATIERES_GROUPES}
              values={values.prof_matieres_enseignees}
              onToggle={(v) => toggleInArray("prof_matieres_enseignees", v)}
            />
            {errors.prof_matieres_enseignees && <div className="field-error-msg">{errors.prof_matieres_enseignees}</div>}
          </div>
          <div className={`field ${errors.prof_niveaux_enseignes ? "error" : ""}`}>
            <label>Niveaux que tu peux enseigner</label>
            <RentreeChips
              options={NIVEAUX_PROF_ENSEIGNABLES}
              values={values.prof_niveaux_enseignes}
              onToggle={(v) => toggleInArray("prof_niveaux_enseignes", v)}
            />
            {errors.prof_niveaux_enseignes && <div className="field-error-msg">{errors.prof_niveaux_enseignes}</div>}
          </div>
          <div className={`field ${errors.prof_disponibilite ? "error" : ""}`}>
            <label>Disponibilité</label>
            <RentreeChips
              options={PERIODES}
              values={values.prof_disponibilite}
              single
              onSelect={(v) => set("prof_disponibilite", v)}
            />
            {errors.prof_disponibilite && <div className="field-error-msg">{errors.prof_disponibilite}</div>}
          </div>
        </RentreeStep>
      )}

{/* ====== STEP 4 — coordonnées ====== */}
      {step === 4 && (
        <RentreeStep index={4} total={TOTAL} title={copy.step4Title}>
          {isParent && (
            <React.Fragment>
              <div className={`field ${errors.civilite_parent ? "error" : ""}`}>
                <label>Civilité</label>
                <RentreeChips
                  options={[
                    { value: "M",     label: "M." },
                    { value: "Mme",   label: "Mme" },
                    { value: "autre", label: "Autre" },
                  ]}
                  values={values.civilite_parent}
                  single
                  onSelect={(v) => set("civilite_parent", v)}
                />
                {errors.civilite_parent && <div className="field-error-msg">{errors.civilite_parent}</div>}
              </div>
              <div className="field two-col">
                <div className={`sub ${errors.prenom_parent ? "error" : ""}`}>
                  <label>Votre prénom</label>
                  <input type="text" value={values.prenom_parent}
                    onChange={(e) => set("prenom_parent", e.target.value)}
                    placeholder="Marie" />
                  {errors.prenom_parent && <div className="field-error-msg">{errors.prenom_parent}</div>}
                </div>
                <div className={`sub ${errors.nom_parent ? "error" : ""}`}>
                  <label>Votre nom de famille</label>
                  <input type="text" value={values.nom_parent}
                    onChange={(e) => set("nom_parent", e.target.value)}
                    placeholder="Dupont" />
                  {errors.nom_parent && <div className="field-error-msg">{errors.nom_parent}</div>}
                </div>
              </div>
            </React.Fragment>
          )}

<div className="field two-col">
            <div className={`sub ${errors.email ? "error" : ""}`}>
              <label>Email</label>
              <input type="email" value={values.email}
                onChange={(e) => set("email", e.target.value)}
                placeholder={isParent ? "marie@exemple.fr" : "louise@exemple.fr"} />
              {errors.email && <div className="field-error-msg">{errors.email}</div>}
            </div>
            <div className={`sub ${errors.tel ? "error" : ""}`}>
              <label>Téléphone</label>
              <input type="tel" value={values.tel}
                onChange={(e) => set("tel", e.target.value)}
                placeholder="06 00 00 00 00" />
              {errors.tel && <div className="field-error-msg">{errors.tel}</div>}
            </div>
          </div>

<div className="field two-col">
            <div className={`sub ${errors.ville ? "error" : ""}`}>
              <label>Ville</label>
              <select value={values.ville}
                onChange={(e) => { set("ville", e.target.value); set("arrondissement", ""); }}>
                <option value="">Sélectionner…</option>
                {VILLES.map((v) => <option key={v} value={v}>{v}</option>)}
              </select>
              {errors.ville && <div className="field-error-msg">{errors.ville}</div>}
            </div>
            <div className={`sub ${errors.arrondissement ? "error" : ""}`}>
              <label>
                {values.ville === "Paris" || values.ville === "Lyon" ? "Arrondissement" : "Quartier"}
                {values.ville !== "Paris" && values.ville !== "Lyon" && <span className="rentree-optional"> (facultatif)</span>}
              </label>
              {values.ville === "Paris" ? (
                <select value={values.arrondissement} onChange={(e) => set("arrondissement", e.target.value)}>
                  <option value="">Sélectionner…</option>
                  {Array.from({ length: 20 }, (_, i) => String(i + 1)).map((a) => (
                    <option key={a} value={a}>{a}{a === "1" ? "er" : "e"}</option>
                  ))}
                </select>
              ) : values.ville === "Lyon" ? (
                <select value={values.arrondissement} onChange={(e) => set("arrondissement", e.target.value)}>
                  <option value="">Sélectionner…</option>
                  {Array.from({ length: 9 }, (_, i) => String(i + 1)).map((a) => (
                    <option key={a} value={a}>{a}{a === "1" ? "er" : "e"}</option>
                  ))}
                </select>
              ) : (
                <input type="text" value={values.arrondissement}
                  onChange={(e) => set("arrondissement", e.target.value)}
                  placeholder="Centre-ville, Bastide…" disabled={!values.ville} />
              )}
              {errors.arrondissement && <div className="field-error-msg">{errors.arrondissement}</div>}
            </div>
          </div>

{isProf ? (
            <div className={`field ${errors.prof_motivation ? "error" : ""}`}>
              <label>Pourquoi tu veux donner des cours ? Raconte ton parcours.</label>
              <textarea
                className="rentree-textarea"
                value={values.prof_motivation}
                onChange={(e) => set("prof_motivation", e.target.value)}
                placeholder="Ex : je suis en 2e année à HEC, j'ai fait MPSI/MP au lycée Louis-le-Grand. J'ai déjà donné des cours à 3 élèves l'an dernier (Terminale maths + prépa). J'aime vraiment expliquer et trouver la méthode qui clique. Je cherche à donner 4-6h par semaine."
                rows={5}
              />
              {errors.prof_motivation && <div className="field-error-msg">{errors.prof_motivation}</div>}
            </div>
          ) : (
            <div className="field">
              <label>{copy.step4MessageFinal} <span className="rentree-optional">(facultatif)</span></label>
              <textarea
                className="rentree-textarea"
                value={values.message_final}
                onChange={(e) => set("message_final", e.target.value)}
                placeholder={copy.step4MessageFinalPh}
                rows={3}
              />
            </div>
          )}
        </RentreeStep>
      )}

<div className="rentree-nav">
        {step > 1 && (
          <button type="button" className="btn btn-ghost" onClick={back}>← Retour</button>
        )}
        <div className="rentree-nav-spacer" />
        {step < TOTAL && (
          <button type="button" className="btn btn-accent" onClick={next}>
            Suivant →
          </button>
        )}
        {step === TOTAL && (
          <button type="submit" className="btn btn-accent" disabled={sending}>
            {sending ? "Envoi…" : copy.cta}
          </button>
        )}
      </div>
      {submitError && <div className="rentree-err rentree-err-submit" role="alert">{submitError}</div>}
    </form>
  );
}

// ============================================================
// DISCORD — bloc communauté gratuite
// ============================================================
function DiscordLogo({ className = "" }) {
  return (
    <svg className={className} viewBox="0 0 127.14 96.36" fill="currentColor" aria-hidden="true">
      <path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
    </svg>
  );
}

function DiscordCommunityBlock() {
  return (
    <section className="discord-section">
      <div className="wrap">
        <div className="discord-card">
          <div className="discord-card-bg" aria-hidden="true" />
          <div className="discord-card-inner">
            <div className="discord-card-left">
              <span className="discord-eyebrow">
                <span className="discord-eyebrow-dot" />
                Communauté · Gratuit
              </span>
              <h2 className="discord-h2">
                Les élèves les plus <em>ambitieux de France</em>,<br />
                au même endroit.
              </h2>
              <p className="discord-sub">
                Un Discord gratuit pour échanger, s'entraider, partager les méthodes, les bons plans
                et les conseils d'orientation. Animé par des étudiants d'HEC, Polytechnique, Sciences
                Po, ENS et médecine. Ouvert sans inscription préalable à Cours Edgar.
              </p>
              <ul className="discord-bullets">
                <li><span className="discord-check">✓</span> Gratuit, sans engagement</li>
                <li><span className="discord-check">✓</span> Canaux par niveau, matière et objectif</li>
                <li><span className="discord-check">✓</span> Modéré par des étudiants grande école</li>
                <li><span className="discord-check">✓</span> Entraide et motivation entre élèves</li>
              </ul>
              <div className="discord-cta-wrap">
                <a
                  className="discord-cta"
                  href={DISCORD_INVITE_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <DiscordLogo className="discord-cta-logo" />
                  <span>Rejoindre le Discord</span>
                  <span className="discord-cta-arrow" aria-hidden="true">→</span>
                </a>
                <span className="discord-cta-meta">En un clic · sans inscription</span>
              </div>
            </div>
            <div className="discord-card-right" aria-hidden="true">
              <DiscordLogo className="discord-card-logo" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// LIVES EXCLUSIFS — bloc mid-page : Q&A en direct réservés aux membres
// ============================================================
function LivesExclusifsBlock({ onCta }) {
  const [imgOk, setImgOk] = useS3(true);
  return (
    <section className="lives-section">
      <div className="wrap">
        <div className="lives-card">
          <div className="lives-card-bg" aria-hidden="true" />
          <div className="lives-card-inner">
            <div className="lives-visual">
              {imgOk ? (
                <img
                  src="assets/edgar-live.png"
                  alt="Edgar en live avec la communauté Cours Edgar"
                  className="lives-photo"
                  onError={() => setImgOk(false)}
                />
              ) : (
                <div className="lives-photo-fallback" aria-hidden="true">
                  <span className="lives-photo-fallback-emoji">🔴</span>
                  <span className="lives-photo-fallback-text">Live Q&A</span>
                </div>
              )}
              <span className="lives-badge" aria-hidden="true">
                <span className="lives-badge-dot" />
                EN DIRECT · 612 viewers
              </span>
            </div>
            <div className="lives-text">
              <span className="lives-eyebrow">
                <span className="lives-eyebrow-dot" />
                Réservé aux membres · Inclus
              </span>
              <h2 className="lives-h2">
                Des <em>lives exclusifs</em> avec Edgar,<br />
                pour les inscrits sur la liste d'attente.
              </h2>
              <p className="lives-sub">
                Tu poses tes questions en direct, j'y réponds personnellement. Sur la méthode,
                l'orientation, Parcoursup, ton classement, ton dossier AST. Réservé aux membres
                Cours Edgar.
              </p>
              <ul className="lives-bullets">
                <li><span className="lives-check">✓</span> Comment intégrer les grandes écoles</li>
                <li><span className="lives-check">✓</span> Comment améliorer ta méthode</li>
                <li><span className="lives-check">✓</span> Stratégie Parcoursup et choix de spés</li>
                <li><span className="lives-check">✓</span> Comment monter dans ton classement</li>
              </ul>
              <div className="lives-cta-wrap">
                <button
                  type="button"
                  className="lives-cta"
                  onClick={onCta}
                >
                  <span>Rejoindre la liste d'attente</span>
                  <span className="lives-cta-arrow" aria-hidden="true">→</span>
                </button>
                <span className="lives-cta-meta">Accès aux lives réservé aux membres</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CALENDLY 1-TO-1 — bloc bas de page : prendre RDV payant avec Edgar
// ============================================================
function CalendlyBlock() {
  return (
    <section className="calendly-section">
      <div className="wrap">
        <div className="calendly-card">
          <div className="calendly-card-bg" aria-hidden="true" />
          <div className="calendly-card-inner">
            <div className="calendly-text">
              <span className="calendly-eyebrow">
                <span className="calendly-eyebrow-dot" />
                Sessions premium · One-to-one
              </span>
              <h2 className="calendly-h2">
                Besoin d'un avis sur ton dossier ?<br />
                <em>Prends rendez-vous avec moi.</em>
              </h2>
              <p className="calendly-sub">
                Sessions individuelles avec Edgar pour analyser ton dossier, structurer ta
                stratégie d'admission, ou cadrer ton plan de carrière. Pour les profils qui
                veulent un accompagnement sur-mesure dès maintenant.
              </p>
              <ul className="calendly-bullets">
                <li><span className="calendly-check">✓</span> Orientation post-bac et choix de prépa</li>
                <li><span className="calendly-check">✓</span> Masters spécialisés en finance (MIF, X-HEC)</li>
                <li><span className="calendly-check">✓</span> Stratégie Parcoursup et vœux</li>
                <li><span className="calendly-check">✓</span> Analyse de dossier AST pour HEC, ESSEC, ESCP</li>
              </ul>
              <div className="calendly-cta-wrap">
                <a
                  className="calendly-cta"
                  href={CALENDLY_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <span>Réserver mon créneau</span>
                  <span className="calendly-cta-arrow" aria-hidden="true">→</span>
                </a>
                <span className="calendly-cta-meta">Disponibilités et tarif sur Calendly</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// STICKY CTA MOBILE — visible après 300px de scroll, se cache quand wizard en vue
// ============================================================
function RentreeStickyCTA({ onCta, wizardRef }) {
  const [visible, setVisible] = useS3(false);
  const [wizardInView, setWizardInView] = useS3(false);

useE3(() => {
    const onScroll = () => setVisible(window.scrollY > 300);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

useE3(() => {
    const el = wizardRef && wizardRef.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => setWizardInView(e.isIntersecting),
      { threshold: 0.15 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [wizardRef]);

const show = visible && !wizardInView;

return (
    <div className={`rentree-sticky-cta ${show ? "is-visible" : ""}`} aria-hidden={!show}>
      <button className="btn btn-accent rentree-sticky-cta-btn" onClick={onCta}>
        Rejoindre la liste d'attente
      </button>
    </div>
  );
}

// ============================================================
// LEAD COUNTER BANNER — bandeau sticky top, suit toute la nav
// ============================================================
function LeadCounterBanner() {
  const [count, setCount] = useS3(null);
  const [bumped, setBumped] = useS3(false);
  const prev = useR3(null);

useE3(() => {
    fetchCount();
    const t = setInterval(fetchCount, 60000);
    return () => clearInterval(t);
  }, []);

return (
    <div className={`rentree-counter-banner ${bumped ? "is-bumped" : ""}`} role="status" aria-live="polite">
      <div className="wrap rentree-counter-banner-wrap">
        <span className="rentree-counter-banner-dot" />
        <span className="rentree-counter-banner-text">
          <strong>{count != null ? count.toLocaleString("fr-FR") : "—"}</strong> étudiants déjà inscrits sur la liste d'attente
        </span>
      </div>
    </div>
  );
}

// ============================================================
// FOUNDER BIO — Edgar Abari avec photo (fallback initiales EA)
// ============================================================
// ============================================================
// LEAD MAGNET BLOCK — téléchargement guide + capture lead
// ============================================================
const LMB_CLASSES = [
  { label: "Collège", value: "" , isGroup: true },
  { label: "6e", value: "6e" },
  { label: "5e", value: "5e" },
  { label: "4e", value: "4e" },
  { label: "3e", value: "3e" },
  { label: "Lycée", value: "", isGroup: true },
  { label: "2nde", value: "2nde" },
  { label: "1re", value: "1re" },
  { label: "Terminale", value: "Terminale" },
  { label: "Prépa / Supérieur", value: "", isGroup: true },
  { label: "MPSI / PCSI / PTSI", value: "Prépa sci 1re année" },
  { label: "MP / PC / PSI / PT", value: "Prépa sci 2e année" },
  { label: "ECG 1re année", value: "ECG 1" },
  { label: "ECG 2e année", value: "ECG 2" },
  { label: "PASS / LAS", value: "PASS/LAS" },
  { label: "L1", value: "L1" },
  { label: "L2", value: "L2" },
  { label: "L3", value: "L3" },
  { label: "M1", value: "M1" },
  { label: "M2", value: "M2" },
  { label: "Autre / non précisé", value: "Autre" },
];

function LeadMagnetBlock() {
  const ref = useR3(null);
  const restRef = useR3(null);
  const [revealed, setRevealed] = useS3(false);
  // Mobile-only wizard : step 1 = juste le toggle élève/parent, step 2 = tout le reste
  // Sur desktop (CSS ≥860px), tout est toujours visible (mobileStep ignoré)
  const [mobileStep, setMobileStep] = useS3(1);
  const [values, setValues] = useS3({
    type: "eleve", // "eleve" | "parent"
    prenom: "",
    nom: "",
    email: "",
    tel: "",
    classe: "",
    ville: "",
    objectifs: "",
    optin_waitlist: true,
  });
  const isParent = values.type === "parent";

useE3(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (e.isIntersecting) { setRevealed(true); io.disconnect(); break; }
        }
      },
      { threshold: 0.15 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

const set = (k, v) => {
    setValues((p) => ({ ...p, [k]: v }));
    if (errors[k]) setErrors((e) => { const { [k]: _, ...rest } = e; return rest; });
  };

const submit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    if (sending) return;
    setSending(true);
    setSubmitError("");

// UTM params (déjà captés au mount de RentreeLanding)
    let utm = {};
    try {
      utm = {
        utm_source:   sessionStorage.getItem("ce_utm_source")   || null,
        utm_medium:   sessionStorage.getItem("ce_utm_medium")   || null,
        utm_campaign: sessionStorage.getItem("ce_utm_campaign") || null,
      };
    } catch (_) {}

const payload = {
      source: "lead_magnet",
      type_demandeur: values.type,
      prenom: values.prenom,
      nom: values.nom,
      email: values.email,
      tel: values.optin_waitlist ? values.tel : null,
      classe: isParent ? null : values.classe,
      ville: values.ville,
      objectifs: values.objectifs,
      optin_waitlist: values.optin_waitlist,
      ...utm,
    };

try {
      const res = await fetch("/api/lead-magnet", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || json.ok === false) {
        setSubmitError((json && json.error) || "Envoi impossible. Réessaye dans un instant.");
        setSending(false);
        return;
      }
      if (typeof trackEvent === "function") {
        trackEvent("lead_magnet_download", { optin_waitlist: values.optin_waitlist });
      }
      // Ouvre le PDF dans un nouvel onglet
      try { window.open("/lead-magnet.html", "_blank", "noopener,noreferrer"); } catch (_) {}
      setSuccess(true);
      setTimeout(() => {
        document.querySelector(".lmb-success")?.scrollIntoView({ behavior: "smooth", block: "center" });
      }, 50);
      setSending(false);
    } catch (_) {
      setSubmitError("Connexion impossible. Vérifie ta connexion et réessaye.");
      setSending(false);
    }
  };

return (
    <section ref={ref} className={`lead-magnet-block ${revealed ? "is-reveal" : ""}`}>
      <div className="wrap lmb-wrap">
        <div className="lmb-grid">
          {/* Colonne gauche : visuel livret 3D */}
          <div className="lmb-visual" aria-hidden="true">
            <div className="lmb-book-shadow"></div>
            <div className="lmb-book">
              <div className="lmb-book-cover">
                <div className="lmb-book-eyebrow">Le guide complet</div>
                <div className="lmb-book-title">
                  Comment intégrer<br/>
                  <em>les grandes écoles.</em>
                </div>
                <div className="lmb-book-rule"></div>
                <div className="lmb-book-author">par <strong>Edgar Abari</strong></div>
                <div className="lmb-book-schools">HEC · X · Berkeley</div>
                <div className="lmb-book-meta">Édition 2026</div>
              </div>
              <span className="lmb-book-badge">
                <strong>70</strong>
                <span>pages</span>
              </span>
            </div>
          </div>

{/* Colonne droite : texte + form */}
          <div className="lmb-content">
            <div className="lmb-eyebrow">
              <span className="lmb-eyebrow-dot" />
              Guide gratuit · 70 pages
            </div>
            <h2 className="lmb-title">
              Comment intégrer <em>les grandes écoles ?</em>
            </h2>
            <p className="lmb-sub">
              Polytechnique, HEC, Sciences Po, ENS, médecine — tout
              ce qu'il faut savoir, de la seconde aux concours AST.
            </p>

<ul className="lmb-bullets">
              <li><span className="lmb-check">✓</span> <strong>70 pages</strong> · édition 2026</li>
              <li><span className="lmb-check">✓</span> <strong>Méthode, Parcoursup, prépa, AST</strong> · tous les parcours</li>
              <li><span className="lmb-check">✓</span> Par <strong>Edgar Abari</strong> · HEC Paris · Polytechnique · U.C. Berkeley</li>
            </ul>

{success ? (
              <div className="lmb-success">
                <div className="lmb-success-icon">
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4 10-10"/></svg>
                </div>
                <div>
                  <div className="lmb-success-title">Merci {values.prenom} ! Le guide s'ouvre dans un nouvel onglet.</div>
                  <div className="lmb-success-sub">
                    {values.optin_waitlist
                      ? "On te recontacte bientôt pour te matcher avec un prof grande école."
                      : "Bonne lecture — reviens nous voir si tu veux un prof sur-mesure."}
                  </div>
                  <a className="lmb-success-link" href="/lead-magnet.html" target="_blank" rel="noopener noreferrer">
                    Ouvrir à nouveau le guide →
                  </a>
                </div>
              </div>
            ) : (
              <form className="lmb-form" onSubmit={submit} noValidate>
                <div className="lmb-form-title">Télécharger le guide</div>

{mobileStep === 1 && (
                  <p className="lmb-step-hint" aria-hidden="true">
                    Choisis un profil pour continuer
                  </p>
                )}

<div className="lmb-type-toggle" role="group" aria-label="Vous êtes...">
                  <button
                    type="button"
                    className={`lmb-type-btn${!isParent ? " is-active" : ""}`}
                    onClick={() => advanceToStep2("eleve")}
                  >
                    🎓 Je suis un élève
                  </button>
                  <button
                    type="button"
                    className={`lmb-type-btn${isParent ? " is-active" : ""}`}
                    onClick={() => advanceToStep2("parent")}
                  >
                    👪 Je suis un parent
                  </button>
                </div>

<div
                  className="lmb-rest-fields"
                  data-mobile-step={mobileStep}
                  ref={restRef}
                >
                <div className="lmb-form-row">
                  <div className={`lmb-field ${errors.prenom ? "error" : ""}`}>
                    <label>{isParent ? "Votre prénom" : "Prénom"}</label>
                    <input type="text" value={values.prenom} onChange={(e) => set("prenom", e.target.value)} placeholder={isParent ? "Marie" : "Louise"} />
                    {errors.prenom && <span className="lmb-err">{errors.prenom}</span>}
                  </div>
                  <div className={`lmb-field ${errors.nom ? "error" : ""}`}>
                    <label>{isParent ? "Votre nom" : "Nom"}</label>
                    <input type="text" value={values.nom} onChange={(e) => set("nom", e.target.value)} placeholder="Dupont" />
                    {errors.nom && <span className="lmb-err">{errors.nom}</span>}
                  </div>
                </div>

<div className={`lmb-field ${errors.email ? "error" : ""}`}>
                  <label>Email</label>
                  <input type="email" value={values.email} onChange={(e) => set("email", e.target.value)} placeholder="louise@exemple.fr" />
                  {errors.email && <span className="lmb-err">{errors.email}</span>}
                </div>

{!isParent && (
                  <div className={`lmb-field ${errors.classe ? "error" : ""}`}>
                    <label>Classe</label>
                    <select value={values.classe} onChange={(e) => set("classe", e.target.value)}>
                      <option value="">Sélectionne…</option>
                      {LMB_CLASSES.map((c, i) => (
                        c.isGroup
                          ? <option key={`g-${i}`} disabled style={{fontWeight:600,color:'#666'}}>── {c.label} ──</option>
                          : <option key={c.value} value={c.value}>{c.label}</option>
                      ))}
                    </select>
                    {errors.classe && <span className="lmb-err">{errors.classe}</span>}
                  </div>
                )}

<div className={`lmb-field ${errors.ville ? "error" : ""}`}>
                  <label>Ville</label>
                  <input
                    type="text"
                    value={values.ville}
                    onChange={(e) => set("ville", e.target.value)}
                    placeholder="Paris, Lyon, Bordeaux, Marseille…"
                  />
                  {errors.ville && <span className="lmb-err">{errors.ville}</span>}
                </div>

<div className="lmb-field">
                  <label>Objectifs <span className="lmb-optional">(optionnel)</span></label>
                  <textarea
                    value={values.objectifs}
                    onChange={(e) => set("objectifs", e.target.value)}
                    placeholder="Ex : je veux intégrer une prépa scientifique · préparer l'AST HEC · passer de 12 à 16 de moyenne…"
                    rows={2}
                  />
                </div>

<label className="lmb-checkbox">
                  <input
                    type="checkbox"
                    checked={values.optin_waitlist}
                    onChange={(e) => set("optin_waitlist", e.target.checked)}
                  />
                  <span>
                    Je souhaite être <strong>inscrit(e) sur la liste d'attente</strong> pour matcher avec un prof grande école.
                  </span>
                </label>

{values.optin_waitlist && (
                  <div className={`lmb-field lmb-field-tel ${errors.tel ? "error" : ""}`}>
                    <label>Téléphone <span className="lmb-optional">(pour le recontact)</span></label>
                    <input
                      type="tel"
                      value={values.tel}
                      onChange={(e) => set("tel", e.target.value)}
                      placeholder="06 00 00 00 00"
                    />
                    {errors.tel && <span className="lmb-err">{errors.tel}</span>}
                  </div>
                )}

<button type="submit" className="lmb-cta" disabled={sending}>
                  {sending ? "Envoi…" : "Télécharger le guide"}
                  <span className="lmb-cta-arrow" aria-hidden="true">→</span>
                </button>

<p className="lmb-mention">Gratuit · sans engagement · ouverture dans un nouvel onglet</p>

{submitError && <p className="lmb-err lmb-err-submit">{submitError}</p>}
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function LeadMagnetGrandOralBlock() {
  const ref = useR3(null);
  const restRef = useR3(null);
  const [revealed, setRevealed] = useS3(false);
  const [mobileStep, setMobileStep] = useS3(1);
  const [values, setValues] = useS3({
    type: "eleve",
    prenom: "",
    nom: "",
    email: "",
    tel: "",
    classe: "",
    ville: "",
    objectifs: "",
    optin_waitlist: true,
  });
  const isParent = values.type === "parent";

const set = (k, v) => {
    setValues((p) => ({ ...p, [k]: v }));
    if (errors[k]) setErrors((e) => { const { [k]: _, ...rest } = e; return rest; });
  };

const submit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    if (sending) return;
    setSending(true);
    setSubmitError("");

let utm = {};
    try {
      utm = {
        utm_source:   sessionStorage.getItem("ce_utm_source")   || null,
        utm_medium:   sessionStorage.getItem("ce_utm_medium")   || null,
        utm_campaign: sessionStorage.getItem("ce_utm_campaign") || null,
      };
    } catch (_) {}

const payload = {
      source: "lead_magnet_grand_oral",
      type_demandeur: values.type,
      prenom: values.prenom,
      nom: values.nom,
      email: values.email,
      tel: values.optin_waitlist ? values.tel : null,
      classe: isParent ? null : values.classe,
      ville: values.ville,
      objectifs: values.objectifs,
      optin_waitlist: values.optin_waitlist,
      ...utm,
    };

try {
      const res = await fetch("/api/lead-magnet-grand-oral", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || json.ok === false) {
        setSubmitError((json && json.error) || "Envoi impossible. Réessaye dans un instant.");
        setSending(false);
        return;
      }
      if (typeof trackEvent === "function") {
        trackEvent("lead_magnet_grand_oral_download", { optin_waitlist: values.optin_waitlist });
      }
      // Ouvre le PDF du Grand Oral dans un nouvel onglet
      try { window.open("/assets/grand-oral-maths.pdf", "_blank", "noopener,noreferrer"); } catch (_) {}
      setSuccess(true);
      setTimeout(() => {
        // Scroll local au bloc (via le ref) pour ne pas remonter au 1er bloc lead magnet
        ref.current?.querySelector(".lmb-success")?.scrollIntoView({ behavior: "smooth", block: "center" });
      }, 50);
      setSending(false);
    } catch (_) {
      setSubmitError("Connexion impossible. Vérifie ta connexion et réessaye.");
      setSending(false);
    }
  };

return (
    <section ref={ref} className={`lead-magnet-block ${revealed ? "is-reveal" : ""}`}>
      <div className="wrap lmb-wrap">
        <div className="lmb-grid">
          {/* Colonne gauche : visuel livret 3D */}
          <div className="lmb-visual" aria-hidden="true">
            <div className="lmb-book-shadow"></div>
            <div className="lmb-book">
              <div className="lmb-book-cover">
                <div className="lmb-book-eyebrow">Le guide gratuit</div>
                <div className="lmb-book-title">
                  Réussir<br/>
                  <em>le Grand Oral.</em>
                </div>
                <div className="lmb-book-rule"></div>
                <div className="lmb-book-author">par <strong>Edgar Abari</strong></div>
                <div className="lmb-book-schools">HEC · X · Berkeley</div>
                <div className="lmb-book-meta">10 sujets · Plans détaillés</div>
              </div>
              <span className="lmb-book-badge">
                <strong>10</strong>
                <span>sujets</span>
              </span>
            </div>
          </div>

{/* Colonne droite : texte + form */}
          <div className="lmb-content">
            <div className="lmb-eyebrow">
              <span className="lmb-eyebrow-dot" />
              Guide gratuit · Grand Oral 2026
            </div>
            <h2 className="lmb-title">
              Réussir <em>le Grand Oral de Maths ?</em>
            </h2>
            <p className="lmb-sub">
              10 sujets classiques rédigés avec plan minuté, démonstration au tableau, application
              concrète et question piège du jury — par un ancien Louis-le-Grand × HEC × Berkeley.
            </p>

<ul className="lmb-bullets">
              <li><span className="lmb-check">✓</span> <strong>10 sujets-types</strong> couvrant tout le programme</li>
              <li><span className="lmb-check">✓</span> <strong>Plan minuté</strong> pour les 5 minutes de présentation</li>
              <li><span className="lmb-check">✓</span> <strong>Démonstration rédigée</strong> + question piège du jury</li>
              <li><span className="lmb-check">✓</span> Par <strong>Edgar Abari</strong> · HEC Paris · Polytechnique · U.C. Berkeley</li>
            </ul>

{success ? (
              <div className="lmb-success">
                <div className="lmb-success-icon">
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4 10-10"/></svg>
                </div>
                <div>
                  <div className="lmb-success-title">Merci {values.prenom} ! Le guide s'ouvre dans un nouvel onglet.</div>
                  <div className="lmb-success-sub">
                    {values.optin_waitlist
                      ? "On te recontacte bientôt pour te matcher avec un prof grande école."
                      : "Bonne lecture — reviens nous voir si tu veux un prof sur-mesure."}
                  </div>
                  <a className="lmb-success-link" href="/assets/grand-oral-maths.pdf" target="_blank" rel="noopener noreferrer">
                    Ouvrir à nouveau le guide →
                  </a>
                </div>
              </div>
            ) : (
              <form className="lmb-form" onSubmit={submit} noValidate>
                <div className="lmb-form-title">Télécharger le guide</div>

{mobileStep === 1 && (
                  <p className="lmb-step-hint" aria-hidden="true">
                    Choisis un profil pour continuer
                  </p>
                )}

<div className="lmb-field">
                  <label>Objectifs <span className="lmb-optional">(optionnel)</span></label>
                  <textarea
                    value={values.objectifs}
                    onChange={(e) => set("objectifs", e.target.value)}
                    placeholder="Ex : je passe le Grand Oral en juin · je galère en maths · je vise 18+…"
                    rows={2}
                  />
                </div>

<p className="lmb-mention">Gratuit · sans engagement · ouverture dans un nouvel onglet</p>

{submitError && <p className="lmb-err lmb-err-submit">{submitError}</p>}
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function FounderBio() {
  const [imgOk, setImgOk] = useS3(true);
  return (
    <section className="rentree-founder-section">
      <div className="wrap rentree-founder-wrap">
        <div className="rentree-founder-card">
          <div className="rentree-founder-photo">
            {imgOk ? (
              <img
                src="assets/edgar.jpg"
                alt="Edgar Abari, fondateur de Cours Edgar"
                onError={() => setImgOk(false)}
              />
            ) : (
              <span className="rentree-founder-initials" aria-hidden="true">EA</span>
            )}
          </div>
          <div className="rentree-founder-text">
            <span className="rentree-eyebrow">Le fondateur</span>
            <h3 className="rentree-founder-name">Edgar Abari</h3>
            <div className="rentree-founder-path">
              <em>Louis-le-Grand</em>
              <span aria-hidden="true">·</span>
              <em>HEC Paris</em>
              <span aria-hidden="true">·</span>
              <em>Polytechnique</em>
              <span aria-hidden="true">·</span>
              <em>U.C. Berkeley</em>
            </div>
            <p className="rentree-founder-bio">
              « J'ai lancé Cours Edgar parce que j'ai vu trop d'élèves talentueux sans accès
              aux bons profs. Un prof particulier qui a vécu le chemin récemment fait une
              différence qu'aucune boîte de soutien générique ne peut égaler. Cours Edgar
              réunit sur une même plateforme les meilleurs profs particuliers de France —
              uniquement des étudiants et diplômés de grandes écoles. »
            </p>
            <a
              className="rentree-founder-link"
              href={TIKTOK_URL}
              target="_blank" rel="noopener noreferrer"
            >
              @{TIKTOK_HANDLE} sur TikTok →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ — 6 questions accordéon
// ============================================================
const FAQ_ITEMS = [
  {
    q: "Combien ça coûte ?",
    a: "La candidature sur la liste d'attente est 100% gratuite et sans engagement. Le tarif des cours sera communiqué au lancement de la plateforme, aligné sur le marché du soutien scolaire d'excellence.",
  },
  {
    q: "Est-ce que je m'engage à quelque chose ?",
    a: "Non. S'inscrire sur la liste n'engage à rien. Nous recontactons chaque candidat avant l'ouverture publique avec une proposition personnalisée — libre à vous de l'accepter ou non.",
  },
  {
    q: "Quand ouvre la plateforme ?",
    a: "Ouverture progressive dès l'été 2026, montée en puissance à la rentrée 2026. Les inscrits sur la liste d'attente sont contactés en premier.",
  },
  {
    q: "Où est-ce que vous opérez ?",
    a: "Paris en priorité (tous les arrondissements), puis Lyon, Bordeaux, Lille, Marseille, Toulouse. Cours à domicile uniquement pour un suivi personnalisé et efficace.",
  },
  {
    q: "Qui est derrière Cours Edgar ?",
    a: "Edgar Abari, diplômé HEC Paris. Cours Edgar réunit sur une même plateforme les meilleurs profs particuliers de France, tous issus de grandes écoles.",
  },
  {
    q: "Comment fonctionne le matching ?",
    a: "Notre équipe choisit manuellement LE prof qui correspond au niveau, aux objectifs et à la personnalité de l'élève. Pas d'algorithme aveugle. Premier cours en 24h après validation du match.",
  },
];

// ============================================================
// LANDING
// ============================================================
function RentreeLanding() {
  const wizardRef = useR3(null);
  const scrollToWizard = () => {
    if (wizardRef.current) wizardRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  const scrollToLeadMagnet = () => {
    document.querySelector(".lead-magnet-block")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

useE3(() => {
    const m = document.createElement("meta");
    m.name = "robots";
    m.content = "noindex, nofollow";
    document.head.appendChild(m);
    const prevTitle = document.title;
    document.title = "Liste d'attente · Cours Edgar — Rentrée 2026";

// Capture UTM params → sessionStorage pour les renvoyer au submit
    try {
      const qs = new URLSearchParams(window.location.search);
      ["utm_source", "utm_medium", "utm_campaign"].forEach((k) => {
        const v = qs.get(k);
        if (v) sessionStorage.setItem(`ce_${k}`, v);
      });
    } catch (_) {}

return () => {
      if (m.parentNode) m.parentNode.removeChild(m);
      document.title = prevTitle;
    };
  }, []);

return (
    <div className="rentree-page">
      <LeadCounterBanner />

<section ref={wizardRef} className="rentree-form-section">
        <div className="wrap rentree-form-wrap">
          <div className="rentree-form-head">
            <span className="rentree-eyebrow">Inscription · 2 minutes</span>
            <h2 className="rentree-form-h2">Candidature à la liste d'attente.</h2>
            <p className="rentree-form-sub">
              Plus c'est précis, meilleur le match. Le recontact se fait par email et téléphone.
            </p>
          </div>
          <div className="rentree-form-card">
            <RentreeWizard />
          </div>
        </div>
      </section>

<footer className="rentree-footer">
        <div className="wrap">
          <span>Cours Edgar · Paris · Rentrée 2026</span>
          <span className="rentree-footer-sep">·</span>
          <a href="/">Site principal</a>
        </div>
      </footer>
    </div>
  );
}

Le prof qui vous emmène {HERO_AMBITIONS[wordIdx]}

{title}

{isParent ? copy.successTitle(null, civNom) : copy.successTitle(firstName)}