// ClosingCTA.jsx — closing call + footer + booking dialog
function ClosingCTA({ onCta }) {
  return (
    <section className="section closing" style={{ position: "relative", overflow: "hidden" }}>
      <CompassWatermark size={560} tone="night" style={{ position: "absolute", right: -150, top: "50%", transform: "translateY(-50%)", opacity: .5 }} />
      <div className="wrap-narrow" style={{ position: "relative" }}>
        <p className="eyebrow on-night reveal">Penser → Faire</p>
        <h2 className="reveal">Deux jours pour opérer <em>la bascule.</em></h2>
        <p className="reveal">
          Pas pour « faire le tour de l'IA » — pour transformer la manière dont vous exercez
          votre responsabilité. D'abord sur vous. Ensuite sur votre organisation.
        </p>
        <div className="cl-cta reveal">
          <button className="btn btn-gold" onClick={onCta}>Réserver une cohorte<i data-lucide="arrow-right"></i></button>
          <a className="btn btn-ghost on-night" href="#spine">Revoir le programme</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="wrap foot-inner">
        <div className="foot-brand">A I&nbsp; L E A D E R S H I P&nbsp; C O M P A S S</div>
        <div className="foot-cap">Édition Executive · Penser → Faire</div>
        <a className="foot-espace" href="/espace" style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, color: "var(--ink-muted)", textDecoration: "none" }}>Espace participant →</a>
      </div>
    </footer>
  );
}

// Booking dialog (fake, click-through)
function BookingDialog({ open, onClose }) {
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => { if (open) setSent(false); }, [open]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 100, display: "flex", alignItems: "center",
      justifyContent: "center", padding: 24,
      background: "rgba(28,23,16,.58)",
      backdropFilter: "blur(4px)",
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: 460, maxWidth: "100%", background: "var(--paper)", borderRadius: 16,
        border: "1px solid var(--line)", boxShadow: "var(--shadow-lg)", padding: 34,
        position: "relative",
      }}>
        <button onClick={onClose} aria-label="Fermer" style={{
          position: "absolute", top: 18, right: 18, background: "none", border: 0,
          cursor: "pointer", color: "var(--ink-muted)", display: "flex",
        }}><i data-lucide="x"></i></button>

        {!sent ? (
          <React.Fragment>
            <p className="eyebrow" style={{ margin: 0 }}>Réserver une cohorte</p>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 26, color: "var(--ink)", margin: "12px 0 6px" }}>
              Échangeons sur votre contexte.
            </h3>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-muted)", margin: "0 0 22px" }}>
              Laissez vos coordonnées : nous revenons vers vous sous 48 h pour caler une date.
            </p>
            <Field label="Nom" placeholder="Votre nom" />
            <Field label="Fonction" placeholder="Ex. Directeur Général" />
            <Field label="Email professionnel" placeholder="vous@entreprise.com" type="email" />
            <button className="btn btn-gold" style={{ width: "100%", justifyContent: "center", marginTop: 8 }} onClick={() => setSent(true)}>
              Envoyer ma demande
            </button>
          </React.Fragment>
        ) : (
          <div style={{ textAlign: "center", padding: "16px 0" }}>
            <div style={{ width: 56, height: 56, margin: "0 auto 18px", borderRadius: "50%", background: "var(--gold-tint)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--gold-deep)" }}>
              <i data-lucide="check"></i>
            </div>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 24, color: "var(--ink)", margin: "0 0 8px" }}>Demande envoyée</h3>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--ink-muted)", margin: "0 0 22px" }}>
              Merci — nous revenons vers vous très vite.
            </p>
            <button className="btn btn-ghost" style={{ justifyContent: "center" }} onClick={onClose}>Fermer</button>
          </div>
        )}
      </div>
    </div>
  );
}

function Field({ label, placeholder, type = "text" }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <label style={{ display: "block", marginBottom: 16 }}>
      <span style={{ display: "block", fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--ink-muted)", marginBottom: 7 }}>{label}</span>
      <input type={type} placeholder={placeholder}
        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{
          width: "100%", fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--ink)",
          background: "var(--white)", borderRadius: 8, padding: "12px 14px",
          border: "1px solid " + (focus ? "var(--gold)" : "var(--line-strong)"),
          boxShadow: focus ? "0 0 0 3px var(--gold-tint)" : "none",
          outline: "none", transition: "border-color .18s, box-shadow .18s",
        }} />
    </label>
  );
}

Object.assign(window, { ClosingCTA, Footer, BookingDialog });