/* Storefront home — Showcase. Gamme MelGeek (vitrine de marque) + sonde de demande AZERTY consolidée. */

/* #5 (refactor) — sonde de demande AZERTY UNIQUE sous la grille (objectif 2).
   Avant : 1 sonde répétée sous chaque carte (4× = bruit visuel, retour Tian 2026-06-25).
   Maintenant : un seul bloc, multi-sélection de modèles → /api/subscribe (form_type=azerty_demand).
   Cadre honnête : en France une première édition AZERTY se prépare ; les autres modèles
   viennent bien plus tard → on MESURE la demande au lieu de promettre un achat immédiat. */
function AzertyDemand() {
  const { Input, Button, Eyebrow } = window.MelGeekFrDesignSystem_7cf6d5;
  const MODELS = ["Centauri 80", "Centauri 60", "Édition EVA", "MADE68 Ultra"];
  const [picked, setPicked] = React.useState([]);
  const [email, setEmail] = React.useState("");
  const [consent, setConsent] = React.useState(false);
  const [hp, setHp] = React.useState("");
  const [status, setStatus] = React.useState("idle");
  const [err, setErr] = React.useState("");
  const done = status === "done";
  const loading = status === "loading";
  const toggle = (m) => setPicked((p) => (p.includes(m) ? p.filter((x) => x !== m) : [...p, m]));
  const submit = async (e) => {
    e.preventDefault();
    if (loading) return;
    setErr("");
    if (!picked.length) { setErr("Choisissez au moins un modèle."); return; }
    if (!email) return;
    if (!consent) { setErr("Cochez la case pour être prévenu·e."); return; }
    setStatus("loading");
    let src = "web";
    try { const p = new URLSearchParams(window.location.search).get("src"); if (p) src = p; } catch (_) {}
    try {
      const r = await fetch("/api/subscribe", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          email, consent: true, honeypot: hp,
          form_type: "azerty_demand", source: src,
          model_interest: picked.join(", "), azerty_interest: true,
          consent_text_version: "v2"
        })
      });
      const d = await r.json().catch(() => ({}));
      if (r.ok && d && d.ok) { setStatus("done"); }
      else { setStatus("error"); setErr(d && d.error === "invalid_email" ? "Adresse e-mail invalide." : "Une erreur est survenue. Réessayez."); }
    } catch (_) { setStatus("error"); setErr("Connexion impossible. Réessayez."); }
  };
  return (
    <div style={{
      marginTop: "var(--mg-space-7)", padding: "var(--mg-space-6)",
      border: "1px solid var(--mg-border)", borderRadius: "var(--mg-radius-3)",
      background: "var(--mg-surface-2)", display: "flex", flexDirection: "column", gap: "16px",
      alignItems: "center", textAlign: "center"
    }}>
      <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
        <Eyebrow bracket style={{ color: "var(--mg-fg-muted)" }}>Demande AZERTY</Eyebrow>
        <p style={{ margin: 0, fontFamily: "var(--mg-font-display)", fontWeight: 600, fontSize: "var(--mg-step-1)", color: "var(--mg-fg)", letterSpacing: "var(--mg-track-tight)" }}>
          Vous les voulez en AZERTY&nbsp;? Dites-nous lesquels.
        </p>
        <p style={{ margin: 0, fontSize: "var(--mg-step--1)", lineHeight: 1.55, color: "var(--mg-fg-muted)", maxWidth: "62ch" }}>
          Une première édition française AZERTY se prépare. Pour les autres modèles, la production des claviers AZERTY démarrera très bientôt - inscrivez-vous pour rester informé en priorité !
        </p>
      </div>
      {done ? (
        <p style={{ margin: 0, fontFamily: "var(--mg-font-mono)", fontSize: "var(--mg-step-0)", color: "var(--mg-kb-accent)" }}>
          ✓ Noté — on vous prévient dès qu'un de ces modèles sort en AZERTY.
        </p>
      ) : (
        <form onSubmit={submit} noValidate style={{ display: "flex", flexDirection: "column", gap: "14px" }}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", justifyContent: "center" }}>
            {MODELS.map((m) => {
              const on = picked.includes(m);
              return (
                <button type="button" key={m} onClick={() => toggle(m)} aria-pressed={on}
                  style={{
                    cursor: "pointer", fontFamily: "var(--mg-font-mono)", fontSize: "var(--mg-step--2)",
                    letterSpacing: "0.06em", padding: "8px 14px", borderRadius: "999px",
                    border: on ? "1px solid var(--mg-kb-accent)" : "1px solid var(--mg-border)",
                    background: on ? "var(--mg-kb-accent)" : "transparent",
                    color: on ? "var(--mg-bg)" : "var(--mg-fg-muted)",
                    transition: "all var(--mg-dur-2) var(--mg-ease)"
                  }}>
                  {on ? "✓ " : ""}{m}
                </button>
              );
            })}
          </div>
          <div style={{ display: "flex", gap: "10px", maxWidth: "min(460px, 100%)" }}>
            <Input dark type="email" required placeholder="Votre e-mail" value={email}
              onChange={(e) => setEmail(e.target.value)} disabled={loading} style={{ flex: 1 }} aria-label="Votre e-mail" />
            <Button type="submit" variant="primary" disabled={loading}>{loading ? "…" : "Me prévenir"}</Button>
          </div>
          <input type="text" name="company" tabIndex={-1} autoComplete="off" aria-hidden="true" value={hp}
            onChange={(e) => setHp(e.target.value)}
            style={{ position: "absolute", left: "-9999px", width: "1px", height: "1px", opacity: 0, pointerEvents: "none" }} />
          <label style={{ display: "flex", gap: "8px", alignItems: "flex-start", textAlign: "left", fontSize: "var(--mg-step--2)", lineHeight: 1.5, color: "var(--mg-fg-muted)", cursor: "pointer", maxWidth: "62ch" }}>
            <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)}
              style={{ marginTop: "3px", flex: "0 0 auto", accentColor: "var(--mg-kb-accent)", cursor: "pointer" }} />
            <span>J'accepte d'être prévenu·e par e-mail des sorties AZERTY MelGeek. Je peux me désinscrire à tout moment.</span>
          </label>
          {err ? <p role="alert" style={{ margin: 0, fontSize: "var(--mg-step--2)", color: "var(--mg-risk)" }}>{err}</p> : null}
        </form>
      )}
    </div>
  );
}

function Showcase() {
  const { ProductCard, Eyebrow } = window.MelGeekFrDesignSystem_7cf6d5;
  const products = [
    // prix MASQUÉS (pré-lancement, version AZERTY à venir). Valeurs indicatives à confirmer : C80 199€ / C60 169€ / EVA 249€ / MADE68 159€
    { name: "Centauri 80", registry: "Vaisseau amiral · latence 0,125 ms", image: "../../assets/img/showcase-c80.webp", price: "€___", chip: { label: "Le phare", variant: "dark" }, href: "centauri-80.html" },
    { name: "Centauri 60", registry: "Format 60 % · compact & nomade", image: "../../assets/img/showcase-c60.webp", price: "€___", chip: null, href: "centauri-60.html" },
    { name: "Édition EVA", registry: "Collab Evangelion · série ultra-limitée", image: "../../assets/img/showcase-eva.webp", price: "€___", chip: { label: "Édition limitée", variant: "limited" }, href: "eva.html", imageFit: "contain" },
    { name: "MADE68 Ultra", registry: "Gaming · Hive 2.0 · 4 coloris", image: "../../assets/img/showcase-made68.webp", price: "€___", chip: { label: "4 coloris", variant: "dark" }, href: "made68-ultra.html" },
  ];
  return (
    <section className="mg-seam" style={{ background: "var(--mg-bg)" }}>
      <div style={{ maxWidth: "var(--mg-maxw)", margin: "0 auto", padding: "var(--mg-space-10) var(--mg-gutter)" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--mg-space-3)", marginBottom: "var(--mg-space-7)", alignItems: "center", textAlign: "center" }}>
          <Eyebrow bracket style={{ color: "var(--mg-fg-muted)" }}>La collection</Eyebrow>
          <h2 style={{ margin: 0, fontFamily: "var(--mg-font-display)", fontWeight: 600, fontSize: "var(--mg-step-4)", letterSpacing: "var(--mg-track-tight)", maxWidth: "20ch", background: "var(--mg-kb-grad-text)", WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent" }}>
            La gamme MelGeek.
          </h2>
          <p style={{ margin: 0, fontSize: "var(--mg-step-1)", lineHeight: 1.55, color: "var(--mg-fg-muted)", maxWidth: "54ch" }}>
            Plusieurs formats, une seule obsession : la précision.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--mg-space-5)", alignItems: "stretch" }}>
          {products.map((p) => <ProductCard key={p.name} {...p} style={{ height: "100%" }} />)}
        </div>
        <AzertyDemand />
      </div>
    </section>
  );
}
window.Showcase = Showcase;