/* global React, Icon, Button, euro, FEEST */
const { useState: useStateL } = React;

const EV = window.FEEST.event;

/* shared: hoe werkt het */
const STEPS_HOW = [
  { icon: "user", t: "Vul je gegevens in", d: "Naam, contact en met hoeveel je komt." },
  { icon: "child", t: "Meld je kinderen aan", d: "Zo weten we voor wie de bonnen zijn." },
  { icon: "bag", t: "Vul je mandje", d: "Eten, drinken en muntjes vooraf kiezen." },
  { icon: "ticket", t: "Betaal & ontvang", d: "Via Mollie. Muntjes volgen via school." },
];

function HowItWorks({ tone = "plain" }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: "var(--space-4)" }}>
      {STEPS_HOW.map((s, i) => (
        <div key={i} className={"card" + (tone === "flat" ? " card--flat" : "")} style={{ padding: "var(--space-5)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
            <span style={{ width: 30, height: 30, borderRadius: 8, background: "var(--teal-100)", color: "var(--primary)", display: "grid", placeItems: "center", flex: "none" }}>
              <Icon name={s.icon} size={18} />
            </span>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13, color: "var(--fg-3)" }}>0{i + 1}</span>
          </div>
          <h4 style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 700, margin: "0 0 4px" }}>{s.t}</h4>
          <p style={{ fontSize: 13.5, color: "var(--fg-2)", margin: 0, lineHeight: 1.45 }}>{s.d}</p>
        </div>
      ))}
    </div>
  );
}

function EventFacts({ dark }) {
  const facts = [
    { icon: "calendar", k: "Wanneer", v: EV.date },
    { icon: "clock", k: "Hoe laat", v: EV.time },
    { icon: "pin", k: "Waar", v: EV.location },
    { icon: "ticket", k: "Bestellen kan t/m", v: EV.deadline },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
      {facts.map((f, i) => (
        <div key={i} style={{ display: "flex", gap: 14, alignItems: "center", padding: "12px 0", borderBottom: i < 3 ? `1px solid ${dark ? "rgba(255,255,255,0.14)" : "var(--line-200)"}` : "none" }}>
          <span style={{ color: dark ? "var(--gold-300)" : "var(--primary)", flex: "none" }}><Icon name={f.icon} size={20} /></span>
          <div>
            <div style={{ fontSize: 12, textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 700, color: dark ? "var(--teal-200)" : "var(--fg-3)" }}>{f.k}</div>
            <div style={{ fontSize: 15.5, fontWeight: 600, color: dark ? "var(--fg-on-dark)" : "var(--fg-1)" }}>{f.v}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ============================================================
   VARIANT A — Editorial / strak
   ============================================================ */
function LandingEditorial({ onStart }) {
  return (
    <div style={{ maxWidth: 1200, margin: "0 auto", padding: "clamp(28px,5vw,72px) clamp(16px,5vw,56px) 96px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.15fr) minmax(0,0.85fr)", gap: "clamp(28px,5vw,72px)", alignItems: "center" }}>
        <div>
          <p className="eyebrow" style={{ marginBottom: 18 }}>{EV.kicker} · Ouderraad (OR)</p>
          <h1 className="display" style={{ fontSize: "clamp(40px,6vw,84px)", fontWeight: 700 }}>
            Bestel mee voor het <span style={{ color: "var(--primary)" }}>eindfeest</span> in het bos.
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: "48ch", fontSize: "var(--text-lg)" }}>
            Aan het eind van het schooljaar vieren we feest tussen de bomen. Bestel vooraf eten, drinken en muntjes — dan staat alles klaar als jullie er zijn.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
            <Button size="lg" iconRight="right" onClick={onStart}>Start je bestelling</Button>
            <Button variant="secondary" size="lg" onClick={() => document.getElementById("how")?.scrollIntoView?.({ behavior: "smooth" })}>Zo werkt het</Button>
          </div>
          <p className="muted" style={{ fontSize: 13.5, marginTop: 18 }}>
            Bestellen kan tot en met <b style={{ color: "var(--fg-1)" }}>{EV.deadline}</b>. Betaling loopt veilig via Mollie.
          </p>
        </div>
        <div className="card" style={{ padding: "var(--space-6)", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", right: -70, top: -70, width: 220, height: 220, borderRadius: "50%", background: "var(--gold-100)" }} />
          <img src="assets/logo-mark.png" alt="" style={{ width: 96, position: "relative", marginBottom: 18 }} />
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-xl)", fontWeight: 700, margin: "0 0 14px", position: "relative" }}>{EV.title}</h3>
          <div style={{ position: "relative" }}><EventFacts /></div>
        </div>
      </div>
      <div id="how" style={{ marginTop: "clamp(56px,8vw,96px)", scrollMarginTop: 90 }}>
        <p className="eyebrow" style={{ marginBottom: 10 }}>In vier stappen</p>
        <h2 className="display" style={{ fontSize: "var(--text-2xl)", fontWeight: 700, marginBottom: "var(--space-5)" }}>Zo bestel je mee</h2>
        <HowItWorks />
      </div>
    </div>
  );
}

/* ============================================================
   VARIANT B — Foto-hero (warm, beeldgedreven)
   ============================================================ */
function LandingPhoto({ onStart }) {
  return (
    <div>
      <div style={{ position: "relative", minHeight: "min(78vh,640px)", display: "grid", placeItems: "center", overflow: "hidden", padding: "48px 24px" }}>
        <image-slot id="landing-hero" placeholder="Sleep hier een sfeerfoto van het bos / schoolplein"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} shape="rect"></image-slot>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(37,29,24,0.12) 0%, rgba(37,29,24,0.55) 70%, rgba(37,29,24,0.78) 100%)" }} />
        <div style={{ position: "relative", textAlign: "center", maxWidth: 760, color: "var(--fg-on-dark)" }}>
          <p style={{ textTransform: "uppercase", letterSpacing: "0.16em", fontWeight: 700, fontSize: 13, color: "var(--gold-300)", margin: "0 0 18px" }}>{EV.title}</p>
          <h1 className="display" style={{ fontSize: "clamp(40px,7vw,80px)", fontWeight: 700, color: "#fff", margin: 0, textShadow: "0 2px 24px rgba(0,0,0,0.3)" }}>
            Leren in en van het bos.<br />Vieren ook.
          </h1>
          <p style={{ fontSize: "var(--text-lg)", lineHeight: 1.5, color: "rgba(255,255,255,0.92)", maxWidth: "44ch", margin: "20px auto 0" }}>
            Bestel vooraf je eten, drinken en muntjes voor het eindfeest. Minder wachten, meer tijd om samen te genieten.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 30, justifyContent: "center", flexWrap: "wrap" }}>
            <Button size="lg" iconRight="right" onClick={onStart}>Start je bestelling</Button>
            <Button variant="gold" size="lg" onClick={() => document.getElementById("howp")?.scrollIntoView?.({ behavior: "smooth" })}>Bekijk het menu</Button>
          </div>
        </div>
        <div style={{ position: "absolute", left: 24, bottom: 22, display: "flex", alignItems: "center", gap: 10, color: "rgba(255,255,255,0.85)", fontSize: 13 }}>
          <Icon name="calendar" size={16} /> {EV.date} · {EV.time}
        </div>
      </div>
      <div id="howp" style={{ maxWidth: 1200, margin: "0 auto", padding: "clamp(48px,7vw,88px) clamp(16px,5vw,56px)", scrollMarginTop: 80 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-7)", alignItems: "center", marginBottom: "var(--space-8)" }}>
          <div>
            <p className="eyebrow" style={{ marginBottom: 10 }}>Eenvoudig & vooraf</p>
            <h2 className="display" style={{ fontSize: "var(--text-2xl)", fontWeight: 700, marginBottom: 14 }}>Alles staat klaar als jullie er zijn</h2>
            <p className="lead">Je betaalt vooraf veilig via Mollie. Op het feest haal je je bestelling op met de muntjes en bonnen die je kind meekrijgt van school.</p>
          </div>
          <div className="card" style={{ padding: "var(--space-6)", background: "var(--gold-100)" }}>
            <EventFacts />
          </div>
        </div>
        <HowItWorks />
      </div>
    </div>
  );
}

/* ============================================================
   VARIANT C — Speels / festival
   ============================================================ */
function LandingFestival({ onStart }) {
  const Blob = ({ c, s }) => <div style={{ position: "absolute", borderRadius: "50%", background: c, filter: "blur(2px)", ...s }} />;
  return (
    <div style={{ position: "relative", overflow: "hidden", minHeight: "100%" }}>
      <Blob c="var(--gold-100)" s={{ width: 460, height: 460, top: -160, right: -120 }} />
      <Blob c="var(--teal-100)" s={{ width: 340, height: 340, bottom: 40, left: -140 }} />
      <Blob c="var(--rust-100)" s={{ width: 200, height: 200, top: 280, right: 80 }} />
      <img src="assets/logo-mark.png" alt="" style={{ position: "absolute", right: "6%", top: 80, width: 150, opacity: 0.16, transform: "rotate(8deg)" }} />

      <div style={{ position: "relative", maxWidth: 1080, margin: "0 auto", padding: "clamp(40px,6vw,80px) clamp(16px,5vw,40px) 96px", textAlign: "center" }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "var(--rust-500)", color: "#fff", padding: "8px 18px", borderRadius: "var(--radius-pill)", fontWeight: 700, fontSize: 14, marginBottom: 26 }}>
          <Icon name="sparkle" size={16} /> Het feest van het jaar
        </span>
        <h1 className="display" style={{ fontSize: "clamp(46px,8vw,96px)", fontWeight: 800, margin: 0, lineHeight: 0.98 }}>
          Eet, drink &<br /><span style={{ color: "var(--gold-600)" }}>vier</span> het bos in!
        </h1>
        <p className="lead" style={{ maxWidth: "40ch", margin: "22px auto 0", fontSize: "var(--text-lg)" }}>
          Pak vooraf je hapjes en je muntjes. Op {EV.dateShort} maken we er samen een onvergetelijk eindfeest van.
        </p>

        {/* ticket-style CTA */}
        <div className="card" style={{ maxWidth: 540, margin: "36px auto 0", padding: 0, overflow: "hidden", display: "grid", gridTemplateColumns: "auto 1fr", textAlign: "left" }}>
          <div style={{ background: "var(--teal-600)", color: "var(--fg-on-dark)", padding: "26px 22px", display: "grid", placeItems: "center", position: "relative" }}>
            <div style={{ fontFamily: "var(--font-display)", textAlign: "center" }}>
              <div style={{ fontSize: 13, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--teal-200)" }}>juli</div>
              <div style={{ fontSize: 46, fontWeight: 800, lineHeight: 1 }}>10</div>
              <div style={{ fontSize: 13, color: "var(--teal-200)" }}>2026</div>
            </div>
          </div>
          <div style={{ padding: "22px 24px", display: "flex", flexDirection: "column", justifyContent: "center", gap: 14, borderLeft: "2px dashed var(--line-300)" }}>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18 }}>{EV.title}</div>
              <div style={{ fontSize: 13.5, color: "var(--fg-2)", marginTop: 2 }}>{EV.time} · {EV.location}</div>
            </div>
            <Button block iconRight="right" onClick={onStart}>Start je bestelling</Button>
          </div>
        </div>
        <p className="muted" style={{ fontSize: 13.5, marginTop: 18 }}>Bestellen kan tot en met {EV.deadline} · betaling via Mollie</p>

        <div style={{ marginTop: "clamp(56px,8vw,88px)" }}>
          <HowItWorks />
        </div>
      </div>
    </div>
  );
}

function Landing({ variant, onStart }) {
  if (variant === "photo") return <LandingPhoto onStart={onStart} />;
  if (variant === "festival") return <LandingFestival onStart={onStart} />;
  return <LandingEditorial onStart={onStart} />;
}

Object.assign(window, { Landing });