// ============================================================
// BAC MATHS LANDING — Stage de révision Bac Maths 2026
// 27 mai → 15 juin · 1h de live tous les soirs · replays inclus · 29€
// Route : /bac-maths (zéro nav, hors site public)
// ============================================================

const { useState: useS4, useEffect: useE4, useRef: useR4, useMemo: useM4 } = React;

// ---------- Constantes ----------
const STAGE_START_DATE      = new Date("2026-05-27T20:00:00+02:00");
const STAGE_END_DATE        = new Date("2026-06-15T21:00:00+02:00");
const PRICE_EUR             = 29;
const HORAIRE_LIVE          = "20h–21h";
const STRIPE_PK             = "pk_live_51HijtSEWoUYyaOP1WswPn2OWzlNqWTU3YNnkS8t2LZMBRE3x6DEYaXCQcvSuzDHrlvUfmaoPr72WbtEiHPpSr8OC00DDLnlekA";

// Chargement lazy de Stripe.js — initialisé une seule fois, à la première ouverture de la modale.
let _stripePromise = null;
function loadStripe() {
  if (_stripePromise) return _stripePromise;
  _stripePromise = new Promise((resolve, reject) => {
    if (typeof window === "undefined") return reject(new Error("no window"));
    if (window.Stripe) return resolve(window.Stripe(STRIPE_PK));
    const s = document.createElement("script");
    s.src = "https://js.stripe.com/v3/";
    s.async = true;
    s.onload = () => resolve(window.Stripe(STRIPE_PK));
    s.onerror = () => { _stripePromise = null; reject(new Error("stripe.js failed to load")); };
    document.head.appendChild(s);
  });
  return _stripePromise;
}

const BM_CLASSES = [
  { label: "Terminale · Spé maths", value: "Terminale spé maths" },
  { label: "Terminale · Maths complémentaires", value: "Terminale maths complémentaires" },
  { label: "Terminale · Maths expertes", value: "Terminale maths expertes" },
  { label: "Première · Spé maths (anticipé)", value: "Première spé maths" },
  { label: "Autre", value: "Autre" },
];

// ---------- Aurora animée (réutilise le pattern du Hero /rentree) ----------
function BmHeroAurora() {
  return (
    <div className="rentree-hero-aurora" aria-hidden="true">
      <span className="rentree-hero-blob rentree-hero-blob-1" />
      <span className="rentree-hero-blob rentree-hero-blob-2" />
      <span className="rentree-hero-blob rentree-hero-blob-3" />
      <span className="rentree-hero-grid-overlay" />
    </div>
  );
}

// ---------- Reveal-on-scroll hook ----------
function useReveal(threshold = 0.15) {
  const ref = useR4(null);
  const [revealed, setRevealed] = useS4(false);
  useE4(() => {
    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 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return [ref, revealed];
}

// ---------- Countdown ----------
function useCountdown(targetDate) {
  const [now, setNow] = useS4(Date.now());
  useE4(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, targetDate.getTime() - now);
  const days = Math.floor(diff / 86400000);
  const hours = Math.floor((diff % 86400000) / 3600000);
  const minutes = Math.floor((diff % 3600000) / 60000);
  const seconds = Math.floor((diff % 60000) / 1000);
  return { diff, days, hours, minutes, seconds };
}

// ============================================================
// HERO
// ============================================================
function BmHero({ onCta }) {
  const [ref, revealed] = useReveal();
  return (
    <section ref={ref} className={`rentree-hero bm-hero ${revealed ? "is-reveal" : ""}`}>
      <BmHeroAurora />
      <div className="wrap rentree-hero-wrap">
        <div className="bm-ongoing-banner">
          ▶ <strong>Stage en cours</strong> · tu accèdes immédiatement aux séances déjà diffusées en replay + à tous les lives restants jusqu'au 15 juin.
        </div>
        <div className="rentree-hero-eyebrow">
          <span className="rentree-hero-dot" />
          Stage Bac Maths 2026 Terminale · en cours · rejoignable à tout moment · accès replays immédiat
        </div>
        <h1 className="rentree-hero-title">
          <span className="rentree-hero-title-lead">Reprends tout le programme de Terminale</span>
          <span className="rentree-hero-title-accent-wrap">
            <em className="rentree-hero-title-accent is-in">en 3 semaines</em>
          </span>
        </h1>
        <p className="rentree-hero-sub">
          <strong>Stage en cours · jusqu'au 15 juin</strong><br/>
          1h de live tous les soirs · <strong>{HORAIRE_LIVE}</strong> · <strong>tu rattrapes immédiatement les séances passées en replay</strong>, tu participes aux lives restants, et tu gardes l'accès tout au long de tes révisions<br/>
          Polycopié intégral inclus · <strong>{PRICE_EUR}&nbsp;€</strong> pour tout le stage.
        </p>

        <div className="rentree-hero-ctas">
          <button className="btn btn-guide btn-lg" onClick={onCta}>
            📥 Réserver ma place — {PRICE_EUR}&nbsp;€
          </button>
          <span className="rentree-hero-meta">
            Lien live + replays envoyés par mail après paiement
          </span>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// "COMMENT ÇA MARCHE" (3 colonnes animées)
// ============================================================
function BmHowItWorks() {
  const [ref, revealed] = useReveal();
  const steps = [
    {
      n: 1,
      title: "Tu t'inscris",
      body: `Tu remplis le formulaire, tu paies ${PRICE_EUR}€ en 2 clics via Stripe. Tu reçois immédiatement ton accès privé pour tous les lives et ton polycopié de révision par mail + ton grand oral rédigé (20/20 déjà obtenu grâce à ce sujet).`,
      emoji: "📥",
    },
    {
      n: 2,
      title: "Tu accèdes aux séances",
      body: `Replays des séances déjà passées disponibles immédiatement sur ta plateforme dédiée. Lives restants tous les soirs ${HORAIRE_LIVE} jusqu'au 15 juin, avec tableau partagé et chat actif. Tu revois autant de fois que tu veux.`,
      emoji: "🎥",
    },
    {
      n: 3,
      title: "Tu cartonnes le bac",
      body: `Semaine 1 on reprend tout le programme. Semaines 2 et 3 on enchaîne les annales et la méthode de rédaction pour viser 18+.`,
      emoji: "🎯",
    },
  ];
  return (
    <section ref={ref} className={`bm-how ${revealed ? "is-reveal" : ""}`}>
      <div className="wrap">
        <div className="bm-section-eyebrow">Le format</div>
        <h2 className="bm-section-title">Comment ça marche&nbsp;?</h2>
        <div className="bm-how-grid">
          {steps.map((s, i) => (
            <div key={s.n} className="bm-how-card" style={{ transitionDelay: `${i * 120}ms` }}>
              <div className="bm-how-emoji">{s.emoji}</div>
              <div className="bm-how-step">Étape {s.n}</div>
              <div className="bm-how-title">{s.title}</div>
              <div className="bm-how-body">{s.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PROGRAMME (accordéon par semaine)
// ============================================================
const PROGRAM_WEEKS = [
  {
    label: "Semaine 1",
    range: "27 mai → 1er juin",
    title: "Analyse complète : fonctions, dérivation, exp, log, intégration",
    items: [
      "Étude complète de fonctions (limites, tableau de variation, asymptotes)",
      "Dérivation : règles, applications à l'étude de fonctions",
      "Fonctions exponentielle & logarithme : propriétés, croissance comparée, équations",
      "Intégration : primitives, calcul d'aires, applications",
    ],
  },
  {
    label: "Semaine 2",
    range: "2 → 8 juin",
    title: "Probabilités, suites, géométrie dans l'espace",
    items: [
      "Probabilités conditionnelles, indépendance, loi binomiale, loi normale",
      "Suites : récurrence, limites, convergence",
      "Géométrie 3D : vecteurs, produit scalaire, droites, plans, sphères",
      "Équations différentielles linéaires d'ordre 1",
    ],
  },
  {
    label: "Semaine 3",
    range: "9 → 15 juin",
    title: "Marathon d'annales · méthode rédaction · gestion du temps",
    items: [
      "1 sujet de bac complet corrigé par jour en live",
      "Méthode pour structurer une copie qui rapporte 18+",
      "Pièges classiques du jury : 10 erreurs à éviter",
      "Préparation mentale, gestion du stress et du temps le jour J",
    ],
  },
];

function BmProgram() {
  const [ref, revealed] = useReveal();
  const [openIdx, setOpenIdx] = useS4(0);
  return (
    <section ref={ref} className={`bm-program ${revealed ? "is-reveal" : ""}`}>
      <div className="wrap">
        <div className="bm-section-eyebrow">Le programme</div>
        <h2 className="bm-section-title">3 semaines pour viser 18+</h2>
        <p className="bm-section-sub">
          Tout le programme officiel revu en semaines 1 et 2, marathon d'annales en semaine 3.
          <strong> Séances déjà diffusées accessibles immédiatement en replay</strong> dès ton inscription.
        </p>
        <div className="bm-program-grid">
          {PROGRAM_WEEKS.map((w, i) => (
            <div
              key={i}
              className={`bm-week-card ${openIdx === i ? "is-open" : ""}`}
              onClick={() => setOpenIdx(openIdx === i ? -1 : i)}
              style={{ transitionDelay: `${i * 100}ms` }}
            >
              <div className="bm-week-head">
                <div>
                  <div className="bm-week-label">{w.label}</div>
                  <div className="bm-week-range">{w.range}</div>
                </div>
                <div className="bm-week-chevron">{openIdx === i ? "−" : "+"}</div>
              </div>
              <div className="bm-week-title">{w.title}</div>
              {openIdx === i && (
                <ul className="bm-week-items">
                  {w.items.map((item, j) => (
                    <li key={j}><span className="bm-week-bullet">✓</span> {item}</li>
                  ))}
                </ul>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// POLYCOPIÉ (aperçu carousel + bullets)
// ============================================================
const POLY_PREVIEWS = [
  { src: "/assets/polycopie-preview-1-cover.png",      caption: "Couverture · 102 pages" },
  { src: "/assets/polycopie-preview-2-fiche.png",      caption: "Fiche méthode · Exponentielle" },
  { src: "/assets/polycopie-preview-3-formulaire.png", caption: "Formulaire complet" },
  { src: "/assets/polycopie-preview-4-annale.png",     caption: "Annale corrigée · Géométrie 3D" },
];

function BmPolyLightbox({ openIdx, setOpenIdx, total }) {
  useE4(() => {
    if (openIdx === null) return;
    const onKey = (e) => {
      if (e.key === "Escape") setOpenIdx(null);
      else if (e.key === "ArrowRight") setOpenIdx((openIdx + 1) % total);
      else if (e.key === "ArrowLeft") setOpenIdx((openIdx - 1 + total) % total);
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [openIdx, total]);

  if (openIdx === null) return null;
  const item = POLY_PREVIEWS[openIdx];
  return (
    <div className="bm-poly-lightbox" onClick={() => setOpenIdx(null)}>
      <button className="bm-poly-lb-close" aria-label="Fermer" onClick={() => setOpenIdx(null)}>×</button>
      <button
        className="bm-poly-lb-nav prev"
        aria-label="Page précédente"
        onClick={(e) => { e.stopPropagation(); setOpenIdx((openIdx - 1 + total) % total); }}
      >‹</button>
      <img
        src={item.src}
        alt={item.caption}
        className="bm-poly-lb-img"
        onClick={(e) => e.stopPropagation()}
      />
      <button
        className="bm-poly-lb-nav next"
        aria-label="Page suivante"
        onClick={(e) => { e.stopPropagation(); setOpenIdx((openIdx + 1) % total); }}
      >›</button>
      <div className="bm-poly-lb-caption">{item.caption} · {openIdx + 1}/{total}</div>
    </div>
  );
}

function BmPolycopie() {
  const [ref, revealed] = useReveal();
  const [openIdx, setOpenIdx] = useS4(null);
  return (
    <section ref={ref} className={`bm-polycopie ${revealed ? "is-reveal" : ""}`}>
      <div className="wrap">
        <div className="bm-section-eyebrow">Inclus dans le stage</div>
        <h2 className="bm-section-title">
          Un polycopié intégral, <em>102 pages, livré dès ton inscription.</em>
        </h2>
        <p className="bm-section-sub">
          Rédigé par Edgar — ancien Louis-le-Grand, HEC, X, Berkeley. Fiches méthodes par chapitre, formulaire,
          20 exercices types, 10 pièges classiques, 12 annales corrigées, méthode rédaction 18+, Grand Oral, démos.
        </p>

        <div className="bm-poly-preview-grid">
          {POLY_PREVIEWS.map((p, i) => (
            <button
              key={i}
              className="bm-poly-preview-card"
              onClick={() => setOpenIdx(i)}
              aria-label={`Voir ${p.caption} en grand`}
            >
              <img src={p.src} alt={p.caption} loading="lazy" />
              <div className="bm-poly-preview-caption">{p.caption}</div>
            </button>
          ))}
        </div>

        <ul className="bm-poly-bullets">
          <li><span className="bm-poly-check">✓</span> <strong>Fiches méthode</strong> pour tous les chapitres du programme</li>
          <li><span className="bm-poly-check">✓</span> <strong>Formulaire complet</strong> à connaître par cœur</li>
          <li><span className="bm-poly-check">✓</span> <strong>20 exercices types</strong> + <strong>12 annales</strong> corrigés pas à pas</li>
          <li><span className="bm-poly-check">✓</span> <strong>10 pièges classiques</strong> à éviter au bac · <strong>10 démos clés</strong> rédigées</li>
        </ul>

        <BmPolyLightbox openIdx={openIdx} setOpenIdx={setOpenIdx} total={POLY_PREVIEWS.length} />
      </div>
    </section>
  );
}

// ============================================================
// PROFIL EDGAR
// ============================================================
function BmFounder() {
  const [ref, revealed] = useReveal();
  return (
    <section ref={ref} className={`bm-founder ${revealed ? "is-reveal" : ""}`}>
      <div className="wrap">
        <div className="bm-section-eyebrow">Le prof</div>
        <h2 className="bm-section-title">Qui te coache pendant 3 semaines&nbsp;?</h2>
        <div className="bm-founder-grid">
          <div className="bm-founder-text">
            <p>
              Je m'appelle <strong>Edgar Abari</strong>. J'ai fait Louis-le-Grand, prépa Saint-Louis PC*,
              puis un double diplôme avec <strong>SupOptique</strong> et <strong>HEC Grande École</strong>.
              Ensuite j'ai intégré <strong>X-HEC Entrepreneurs</strong> et pour terminer mes études je me suis
              spécialisé en <strong>IA à U.C. Berkeley</strong>.
            </p>
            <p>
              Pendant 4 ans, j'ai donné <strong>plus de 1500 heures de cours particuliers</strong>{" "}
              à des Terminales et des prépas. J'ai vu passer toutes les difficultés, tous les
              déclics, toutes les méthodes qui marchent vraiment.
            </p>
            <p>
              Ce stage, c'est la condensation de ce que j'aurais voulu qu'on me dise quand j'étais
              en Terminale. <strong>Méthode, rigueur, pédagogie.</strong> Pas de bachotage idiot,
              pas de théorie inutile. Juste ce qui fait gagner des points.
            </p>
          </div>
          <div className="bm-founder-card">
            <div className="bm-founder-stats">
              <div><strong>4 ans</strong><span>cours particuliers</span></div>
              <div><strong>1500h+</strong><span>de cours dispensés</span></div>
              <div><strong>HEC × X × Berkeley</strong><span>parcours académique</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ (accordéon)
// ============================================================
const BM_FAQ = [
  {
    q: "Le stage a déjà commencé, est-ce trop tard pour s'inscrire ?",
    a: "Non, pas du tout. Le stage tourne du 27 mai au 15 juin et tu peux rejoindre n'importe quand. Dès ton inscription, tu accèdes immédiatement aux replays des séances déjà passées (sur ta plateforme dédiée). Tu participes ensuite aux lives restants chaque soir à 20h, et tu gardes l'accès aux replays tout au long de tes révisions pour le bac.",
  },
  {
    q: "Quel niveau ? À qui s'adresse le stage ?",
    a: "Le stage est conçu pour les Terminales spé maths qui passent le bac 2026. Les Maths complémentaires et Maths expertes sont les bienvenus, le format permet de suivre. Premières spé maths anticipés acceptés aussi.",
  },
  {
    q: "Comment se déroulent les lives ?",
    a: "Via Whereby (visio professionnelle, pas besoin de compte). Tu reçois un lien par mail après ton inscription. Audio + vidéo + tableau partagé + chat en direct. Edgar corrige des exercices en live, répond aux questions, démontre les théorèmes.",
  },
  {
    q: "Et si je rate un live ?",
    a: "Aucun souci : tous les lives sont enregistrés et accessibles tout au long de tes révisions sur ton espace. Tu peux les revoir autant de fois que tu veux, prendre des notes à ton rythme. Que tu sois là en direct ou en replay, tu suis le stage à 100%.",
  },
  {
    q: "Et le polycopié ?",
    a: "Envoyé en PDF par mail dès la confirmation du paiement. 102 pages de fiches méthodes par chapitre, formulaire, exemples résolus, annales corrigées et pièges du jury.",
  },
  {
    q: "Et si je suis en Première ?",
    a: "Tu peux participer, mais la cible principale c'est Terminale. Le contenu sera très orienté préparation au bac. Si tu es en Première et que tu veux prendre de l'avance, c'est un bon investissement.",
  },
];

function BmFaq() {
  const [ref, revealed] = useReveal();
  const [openIdx, setOpenIdx] = useS4(-1);
  return (
    <section ref={ref} className={`bm-faq ${revealed ? "is-reveal" : ""}`}>
      <div className="wrap">
        <div className="bm-section-eyebrow">FAQ</div>
        <h2 className="bm-section-title">Tes questions, mes réponses</h2>
        <div className="bm-faq-list">
          {BM_FAQ.map((item, i) => (
            <div key={i} className={`bm-faq-item ${openIdx === i ? "is-open" : ""}`}>
              <button
                className="bm-faq-q"
                onClick={() => setOpenIdx(openIdx === i ? -1 : i)}
              >
                <span>{item.q}</span>
                <span className="bm-faq-chevron">{openIdx === i ? "−" : "+"}</span>
              </button>
              {openIdx === i && <div className="bm-faq-a">{item.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FORM D'INSCRIPTION + CTA PAIEMENT
// ============================================================
function BmInscriptionForm({ onOpenCheckout }) {
  const [ref, revealed] = useReveal();

  return (
    <section ref={ref} id="inscription" className={`bm-inscription ${revealed ? "is-reveal" : ""}`}>
      <div className="wrap">
        <div className="bm-section-eyebrow">Réserve ta place</div>
        <h2 className="bm-section-title">Inscription · {PRICE_EUR}&nbsp;€ pour tout le stage</h2>
        <p className="bm-section-sub">
          Du 27 mai au 15 juin · 1h de live tous les soirs · replays accessibles tout au long de tes révisions · polycopié inclus.
        </p>

        <div className="bm-cta-wrap" style={{ textAlign: "center", padding: "24px 0 8px" }}>
          <button type="button" className="btn btn-guide btn-lg bm-cta" onClick={onOpenCheckout}>
            📥 Réserver ma place — {PRICE_EUR}&nbsp;€
          </button>
          <p className="bm-section-sub" style={{ marginTop: 18, fontSize: 14 }}>
            Paiement sécurisé par Stripe · Lien Whereby + polycopié envoyés par mail dès le paiement confirmé.
          </p>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// MODALE STRIPE EMBEDDED CHECKOUT (sans quitter le site)
// ============================================================
function BmCheckoutModal({ onClose }) {
  const checkoutRef = useR4(null);
  const sessionIdRef = useR4(null);
  const [error, setError] = useS4("");
  const [paymentDone, setPaymentDone] = useS4(false);

  useE4(() => {
    let aborted = false;
    (async () => {
      try {
        const stripe = await loadStripe();
        const res = await fetch("/api/bac-maths/checkout-session", { method: "POST" });
        if (!res.ok) throw new Error("Erreur serveur (HTTP " + res.status + ")");
        const data = await res.json();
        if (!data.clientSecret) throw new Error("Session indisponible. Réessaye dans un instant.");
        if (aborted) return;
        sessionIdRef.current = data.sessionId || null;
        const checkout = await stripe.initEmbeddedCheckout({
          clientSecret: data.clientSecret,
          onComplete: () => {
            // Paiement réussi côté Stripe — on bloque la fermeture, on affiche le succès,
            // puis on redirige vers la page de remerciement (en plus du return_url Stripe).
            setPaymentDone(true);
            setTimeout(() => {
              const sid = sessionIdRef.current;
              window.location.href = "/bac/merci" + (sid ? "?session_id=" + encodeURIComponent(sid) : "");
            }, 1800);
          },
        });
        if (aborted) { try { checkout.destroy(); } catch (_) {} return; }
        checkoutRef.current = checkout;
        checkout.mount("#bm-checkout-mount");
      } catch (e) {
        if (!aborted) setError(e.message || "Impossible de charger le paiement.");
      }
    })();
    // bloque le scroll du body pendant l'ouverture
    document.body.style.overflow = "hidden";
    return () => {
      aborted = true;
      document.body.style.overflow = "";
      if (checkoutRef.current) {
        try { checkoutRef.current.destroy(); } catch (_) {}
      }
    };
  }, []);

  // Clic backdrop : on ne ferme plus la modale (trop dangereux post-paiement).
  // Seul le bouton × explicite ferme, et il disparaît une fois le paiement validé.
  return (
    <div className="bm-checkout-overlay">
      <div className="bm-checkout-container" onClick={(e) => e.stopPropagation()}>
        {!paymentDone && (
          <button className="bm-checkout-close" onClick={onClose} aria-label="Fermer">×</button>
        )}
        {error ? (
          <div className="bm-checkout-error">
            <strong>Oups, le paiement n'a pas pu se charger.</strong>
            <p>{error}</p>
            <p>Tu peux réessayer ou nous écrire à <a href="mailto:contact@cours-edgar.fr">contact@cours-edgar.fr</a>.</p>
          </div>
        ) : (
          <div id="bm-checkout-mount" />
        )}
        {paymentDone && (
          <div className="bm-checkout-success" role="status" aria-live="polite">
            <div className="bm-checkout-success-emoji">✅</div>
            <div className="bm-checkout-success-title">Paiement confirmé !</div>
            <p className="bm-checkout-success-body">
              Tu vas recevoir dans la minute par mail&nbsp;: le polycopié intégral, le lien Whereby pour les lives et l'accès au Discord du stage.
            </p>
            <p className="bm-checkout-success-redirect">Redirection en cours…</p>
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================
// FOOTER simple
// ============================================================
function BmFooter() {
  return (
    <footer className="bm-footer">
      <div className="wrap">
        <div>© 2026 Cours Edgar · contact@cours-edgar.fr</div>
        <div className="bm-footer-links">
          <a href="/rentree">Cours Edgar — Rentrée 2026</a>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// OFFER STACK — ce que tu obtiens pour 29€
// ============================================================
const OFFER_ITEMS = [
  { label: "20h de cours live en visio",      sub: "Edgar Abari · HEC × Polytechnique × Berkeley", value: 240 },
  { label: "Polycopié intégral · 102 pages",   sub: "Fiches méthode + formulaire + démos rigoureuses", value: 30 },
  { label: "Replays accessibles",             sub: "Tout au long de tes révisions, à ton rythme",     value: 100 },
  { label: "Discord privé du stage",          sub: "Q&A, entraide entre élèves, support direct",      value: 40 },
  { label: "20 annales corrigées",            sub: "Méthode rédaction pour viser 18+ au bac",         value: 60 },
];

function BmOfferStack() {
  const [ref, revealed] = useReveal();
  return (
    <section ref={ref} className={`bm-offer-stack ${revealed ? "is-reveal" : ""}`}>
      <div className="wrap">
        <div className="bm-section-eyebrow">Ce que tu obtiens</div>
        <h2 className="bm-section-title">Tout ce qui est inclus dans <em>le stage.</em></h2>
        <p className="bm-section-sub">
          Le détail de tout ce que tu reçois en t'inscrivant.
        </p>

        <div className="bm-offer-card">
          {OFFER_ITEMS.map((it, i) => (
            <div key={i} className="bm-offer-row">
              <div className="bm-offer-row-label">
                <div className="bm-offer-check">✓</div>
                <div>
                  <div className="bm-offer-row-title">{it.label}</div>
                  <div className="bm-offer-row-sub">{it.sub}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="bm-offer-cta-wrap">
          <a href="#inscription" className="btn btn-guide btn-lg bm-cta" style={{ textDecoration: "none", display: "inline-block" }}>
            📥 Réserver ma place — {PRICE_EUR}&nbsp;€
          </a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// LANDING ROOT
// ============================================================
function BacMathsLanding() {
  const [checkoutOpen, setCheckoutOpen] = useS4(false);

  // Capture UTM au mount
  useE4(() => {
    try {
      const p = new URLSearchParams(window.location.search);
      ["utm_source", "utm_medium", "utm_campaign"].forEach((k) => {
        const v = p.get(k);
        if (v) sessionStorage.setItem("ce_" + k, v);
      });
    } catch (_) {}
    // SEO : noindex (page de paiement)
    try {
      const m = document.createElement("meta");
      m.name = "robots";
      m.content = "noindex, nofollow";
      document.head.appendChild(m);
    } catch (_) {}
  }, []);

  const scrollToInscription = () => {
    document.getElementById("inscription")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const openCheckout = () => setCheckoutOpen(true);
  const closeCheckout = () => setCheckoutOpen(false);

  return (
    <div className="rentree-page bm-page">
      <BmHero onCta={scrollToInscription} />
      <BmHowItWorks />
      <BmProgram />
      <BmPolycopie />
      <BmFounder />
      <BmOfferStack />
      <BmFaq />
      <BmInscriptionForm onOpenCheckout={openCheckout} />
      <BmFooter />
      {checkoutOpen && <BmCheckoutModal onClose={closeCheckout} />}
    </div>
  );
}

// ============================================================
// THANK YOU page (/bac-maths/merci)
// ============================================================
function BacMathsThankYou() {
  useE4(() => {
    try {
      const m = document.createElement("meta");
      m.name = "robots";
      m.content = "noindex, nofollow";
      document.head.appendChild(m);
    } catch (_) {}
  }, []);

  return (
    <div className="rentree-page bm-thankyou">
      <section className="rentree-hero bm-hero">
        <BmHeroAurora />
        <div className="wrap rentree-hero-wrap" style={{ textAlign: "center" }}>
          <div className="rentree-hero-eyebrow">
            <span className="rentree-hero-dot" />
            Paiement confirmé
          </div>
          <h1 className="rentree-hero-title">
            <span className="rentree-hero-title-lead">Bienvenue dans le</span>
            <span className="rentree-hero-title-accent-wrap">
              <em className="rentree-hero-title-accent is-in">Stage Bac Maths.</em>
            </span>
          </h1>
          <p className="rentree-hero-sub">
            Ton inscription est confirmée. Tu vas recevoir dans quelques minutes par mail :
          </p>
          <ul style={{
            textAlign: "left", maxWidth: 520, margin: "16px auto 28px",
            listStyle: "none", padding: 0, fontSize: 16, lineHeight: 1.8,
          }}>
            <li>✅ Le <strong>lien Whereby</strong> pour rejoindre les lives</li>
            <li>✅ Le <strong>polycopié intégral de révision</strong> en PDF</li>
            <li>✅ Le <strong>planning détaillé</strong> du stage (27 mai → 15 juin)</li>
          </ul>
          <p className="rentree-hero-meta" style={{ display: "block", marginTop: 8 }}>
            Rendez-vous le <strong>27 mai à {HORAIRE_LIVE.split("–")[0]}</strong> pour le premier live.
          </p>
          <div className="rentree-hero-ctas" style={{ marginTop: 24 }}>
            <a href="/rentree" className="btn btn-secondary btn-lg" style={{ textDecoration: "none" }}>
              Découvrir Cours Edgar →
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}