/* ===== GAMER ZONE (dark / neon) ===== */

const TIERS = [
  { ic: "tablet", name: "Le Pratique", price: "dès 500€", tag: "iPad / tablette",
    desc: "Pour la maison : mails, photos, visio avec la famille. Simple, léger, increvable.",
    feats: ["iPad ou tablette Android", "Configuré & prêt à l'emploi", "Prise en main offerte"], hot: false },
  { ic: "laptop", name: "Le Créatif", price: "dès 900€", tag: "Mac mini / MacBook",
    desc: "Bureautique, photo, montage léger. La fiabilité Apple, installée et expliquée.",
    feats: ["Mac mini ou MacBook", "Migration de tes données", "Suite installée & rangée"], hot: false },
  { ic: "cpu", name: "Le Gamer", price: "dès 1 500€", tag: "PC sur-mesure",
    desc: "Du vrai jeu en 1440p haute fréquence. Monté pièce par pièce, câblé au cordeau.",
    feats: ["RTX dernière génération", "144 Hz+ fluide", "RGB sur mesure", "Garantie montage"], hot: true },
  { ic: "gpu", name: "L'Extreme", price: "sur devis", tag: "PC gamer haut de gamme",
    desc: "4K, watercooling, le top du top. Tu rêves la machine, on la construit. Sans limite.",
    feats: ["GPU haut de gamme", "Watercooling custom", "4K / 240 Hz", "Pièces premium triées"], hot: false, premium: true },
];

const BUILDS = {
  "1440p": { label: "Jeu 1440p", price: "≈ 1 500 – 2 000 €",
    specs: [["cpu", "CPU", "Ryzen 7 / Core i5-K"], ["gpu", "GPU", "RTX 5070 12 Go"], ["disk", "RAM", "32 Go DDR5"], ["disk", "Stockage", "1 To NVMe Gen4"]] },
  "4k": { label: "Jeu 4K", price: "≈ 2 800 – 4 000 €",
    specs: [["cpu", "CPU", "Ryzen 7 X3D / i7-K"], ["gpu", "GPU", "RTX 5080 16 Go"], ["disk", "RAM", "32 Go DDR5 6000"], ["disk", "Stockage", "2 To NVMe Gen4"]] },
  "extreme": { label: "Extrême / créa", price: "4 500 € et +",
    specs: [["cpu", "CPU", "Ryzen 9 / i9-K"], ["gpu", "GPU", "RTX 5090 32 Go"], ["disk", "RAM", "64 Go DDR5"], ["disk", "Stockage", "4 To NVMe + watercooling"]] },
};

function Configurator() {
  const [sel, setSel] = useState("1440p");
  const b = BUILDS[sel];
  return (
    <div className="cfg" style={{ display: "grid", gridTemplateColumns: "1fr 1.25fr", gap: 0, border: "1px solid var(--g-line)", borderRadius: "var(--radius)", overflow: "hidden", background: "var(--g-bg-2)" }}>
      <div style={{ padding: "clamp(26px,3vw,38px)", borderRight: "1px solid var(--g-line)" }}>
        <span className="eyebrow" style={{ color: "var(--neon)" }}>Configurateur</span>
        <h3 style={{ color: "var(--g-text)", fontSize: "1.7rem", margin: ".5rem 0 1.2rem" }}>Quel joueur es-tu&nbsp;?</h3>
        <div style={{ display: "grid", gap: 12 }}>
          {Object.entries(BUILDS).map(([k, v]) => {
            const active = k === sel;
            return (
              <button key={k} onClick={() => setSel(k)}
                style={{ textAlign: "left", cursor: "pointer", padding: "16px 18px", borderRadius: "var(--radius-sm)",
                  border: "1.5px solid " + (active ? "var(--neon)" : "var(--g-line)"),
                  background: active ? "color-mix(in oklab,var(--neon),transparent 88%)" : "transparent",
                  color: "var(--g-text)", fontFamily: "Space Grotesk", fontWeight: 600, fontSize: "1.05rem",
                  display: "flex", justifyContent: "space-between", alignItems: "center", transition: "border-color .2s, background .2s" }}>
                {v.label}
                <span style={{ color: active ? "var(--neon)" : "var(--g-muted)", transition: "color .2s" }}>›</span>
              </button>
            );
          })}
        </div>
      </div>
      <div style={{ padding: "clamp(26px,3vw,38px)", position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 8, marginBottom: 22 }}>
          <span className="mono" style={{ color: "var(--g-muted)", fontSize: ".8rem", textTransform: "uppercase", letterSpacing: ".16em" }}>Config conseillée</span>
          <span className="mono" style={{ color: "var(--neon)", fontSize: "1.35rem", fontWeight: 700 }}>{b.price}</span>
        </div>
        <div style={{ display: "grid", gap: 2 }}>
          {b.specs.map(([ic, k, v]) => (
            <div key={k} style={{ display: "flex", alignItems: "center", gap: 14, padding: "13px 0", borderBottom: "1px solid var(--g-line)" }}>
              <span style={{ color: "var(--neon)" }}><Icon name={ic} size={20} color="var(--neon)" /></span>
              <span className="mono" style={{ width: 92, color: "var(--g-muted)", fontSize: ".82rem", textTransform: "uppercase", letterSpacing: ".08em" }}>{k}</span>
              <span style={{ color: "var(--g-text)", fontWeight: 600 }}>{v}</span>
            </div>
          ))}
        </div>
        <p className="mono" style={{ color: "var(--g-muted)", fontSize: ".78rem", marginTop: 16 }}>
          * Prix indicatifs. Devis précis et gratuit selon ton budget.
        </p>
      </div>
    </div>
  );
}

function Gamer({ onCall }) {
  return (
    <section className="section gamer" id="gamer"
      style={{ background: "var(--g-bg)", color: "var(--g-text)", position: "relative", overflow: "hidden" }}>
      {/* neon glows */}
      <div aria-hidden="true" style={{ position: "absolute", top: "-12%", left: "-6%", width: 480, height: 480, borderRadius: "50%", background: "radial-gradient(circle, color-mix(in oklab,var(--neon),transparent 78%), transparent 70%)", filter: "blur(20px)", pointerEvents: "none" }}></div>
      <div aria-hidden="true" style={{ position: "absolute", bottom: "-14%", right: "-8%", width: 520, height: 520, borderRadius: "50%", background: "radial-gradient(circle, color-mix(in oklab,var(--neon-2),transparent 80%), transparent 70%)", filter: "blur(20px)", pointerEvents: "none" }}></div>

      <div className="wrap" style={{ position: "relative" }}>
        <Reveal style={{ display: "grid", gap: 18, maxWidth: 720, marginBottom: 50 }}>
          <span className="mono" style={{ display: "inline-flex", alignItems: "center", gap: 10, color: "var(--neon)", letterSpacing: ".2em", textTransform: "uppercase", fontSize: ".82rem", fontWeight: 700 }}>
            <span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--neon)", boxShadow: "0 0 12px var(--neon)" }}></span>
            Zone Gamer
          </span>
          <h2 style={{ fontSize: "clamp(2.3rem,5vw,3.6rem)", color: "var(--g-text)" }}>
            Tu veux de la <span style={{ color: "var(--neon)" }}>puissance</span>&nbsp;?<br />On monte la bête.
          </h2>
          <p style={{ color: "var(--g-muted)", fontSize: "1.15rem", maxWidth: 580 }}>
            De la tablette pour la maison au PC gamer 4K sans compromis. Chaque machine est
            montée à la main, testée, et calibrée pour ton budget — du raisonnable au déraisonnable. 😏
          </p>
        </Reveal>

        {/* tiers */}
        <div className="tier-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18, marginBottom: 56 }}>
          {TIERS.map((tr, i) => {
            const accent = tr.hot ? "var(--neon)" : tr.premium ? "var(--neon-2)" : null;
            return (
            <Reveal key={tr.name} delay={(i % 4) * 70}
              style={{ position: "relative", display: "grid", gap: 16, alignContent: "start",
                padding: "28px 24px", borderRadius: "var(--radius)",
                background: accent ? "linear-gradient(180deg, color-mix(in oklab," + accent + ",transparent 90%), var(--g-panel))" : "var(--g-panel)",
                border: "1px solid " + (accent || "var(--g-line)"),
                boxShadow: tr.hot ? "0 0 0 1px var(--neon), 0 24px 60px -28px var(--neon)"
                  : tr.premium ? "0 0 0 1px var(--neon-2), 0 24px 60px -30px var(--neon-2)" : "none" }}>
              {tr.hot && <span className="mono" style={{ position: "absolute", top: -11, left: 24, background: "var(--neon)", color: "#04121a", fontSize: ".68rem", fontWeight: 700, padding: "4px 10px", borderRadius: 6, letterSpacing: ".1em", textTransform: "uppercase" }}>Le + demandé</span>}
              {tr.premium && <span className="mono" style={{ position: "absolute", top: -11, left: 24, background: "var(--neon-2)", color: "#fff", fontSize: ".68rem", fontWeight: 700, padding: "4px 10px", borderRadius: 6, letterSpacing: ".1em", textTransform: "uppercase" }}>Sans limite</span>}
              <div style={{ width: 50, height: 50, borderRadius: 13, background: tr.hot ? "var(--neon)" : tr.premium ? "var(--neon-2)" : "color-mix(in oklab,var(--neon),transparent 86%)", display: "grid", placeItems: "center" }}>
                <Icon name={tr.ic} size={26} color={accent && (tr.hot || tr.premium) ? (tr.hot ? "#04121a" : "#fff") : "var(--neon)"} />
              </div>
              <div>
                <div className="mono" style={{ color: "var(--g-muted)", fontSize: ".74rem", textTransform: "uppercase", letterSpacing: ".12em", marginBottom: 4 }}>{tr.tag}</div>
                <h3 style={{ color: "var(--g-text)", fontSize: "1.4rem" }}>{tr.name}</h3>
              </div>
              <div style={{ fontFamily: "Space Grotesk", fontWeight: 700, fontSize: "1.5rem", color: accent || "var(--g-text)" }}>{tr.price}</div>
              <p style={{ color: "var(--g-muted)", fontSize: ".98rem" }}>{tr.desc}</p>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 9 }}>
                {tr.feats.map((f) => (
                  <li key={f} style={{ display: "flex", gap: 9, alignItems: "center", fontSize: ".95rem", color: "var(--g-text)" }}>
                    <Icon name="check" size={15} color={accent || "var(--neon)"} stroke={2.6} /> {f}
                  </li>
                ))}
              </ul>
            </Reveal>
          );})}
        </div>

        <Reveal><Configurator /></Reveal>

        <Reveal style={{ marginTop: 40, display: "flex", gap: 16, flexWrap: "wrap", alignItems: "center" }}>
          <button className="btn btn-neon btn-lg" onClick={onCall}>
            <Icon name="bolt" size={18} color="#04121a" /> Demander mon devis
          </button>
          <a className="btn btn-neon-ghost btn-lg" href="tel:+33658665493">Parler de mon projet · 06 58 66 54 93</a>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Gamer, Configurator });