/* global React, Btn, Eyebrow, Display, Wordmark, Rule, FigureNum */
const { useState: useStateLand } = React;

function LandingScreen({ theme, onLogin, onSignup, onJoin, onHowItWorks, onPricing }) {
  return (
    <div style={{ minHeight: "100vh", background: theme.bg, color: theme.fg }}>
      {/* Top nav */}
      <header style={{
        borderBottom: `2.5px solid ${theme.fg}`,
        padding: "20px 48px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        position: "sticky", top: 0, background: theme.bg, zIndex: 50,
        overflow: "visible",
      }}>
        <Wordmark size={280} style={{ marginBottom: -90, position: "relative", zIndex: 51 }} />
        <nav style={{ display: "flex", gap: 22, alignItems: "center" }}>
          <button onClick={onHowItWorks} style={navLink(theme)}>hoe het werkt</button>
          <button onClick={onPricing} style={navLink(theme)}>prijzen</button>
          <button onClick={onJoin} style={navLink(theme)}>doe mee →</button>
          <button onClick={onLogin} style={navLink(theme)}>inloggen</button>
          <Btn theme={theme} onClick={onSignup}>account maken</Btn>
        </nav>
      </header>

      {/* HERO */}
      <section style={{
        padding: "80px 48px 100px",
        display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64,
        alignItems: "center",
        borderBottom: `2.5px solid ${theme.fg}`,
      }}>
        <div>
          <Eyebrow theme={theme} style={{ color: theme.accent, marginBottom: 18 }}>
            ── HET QUIZPLATFORM WAAR WE ALLEN OP ZATEN TE WACHTEN
          </Eyebrow>
          <h1 style={{
            fontFamily: theme.fonts.display, fontWeight: 800,
            fontSize: 124, lineHeight: 0.92, letterSpacing: "-0.04em",
            textTransform: "lowercase", margin: 0, marginBottom: 24,
            color: theme.fg,
          }}>
            stel de<br/>
            <span style={{ color: theme.accent, fontStyle: "italic" }}>juiste</span><br/>
            vragen.
          </h1>
          <p style={{
            fontSize: 19, lineHeight: 1.55, maxWidth: 540,
            color: theme.fg, opacity: 0.85,
            margin: "0 0 32px 0",
          }}>
            Maak in enkele klikken een quiz voor de vrijdagmiddagborrel,
            een teambuilding of een serieuze kennistoets. AI helpt waar het kan,
            jij beslist wat blijft. Spelers joinen op hun telefoon, jij ziet
            alles live op het grote scherm.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <Btn theme={theme} size="lg" onClick={onSignup}>
              ✦ begin gratis
            </Btn>
            <Btn theme={theme} size="lg" variant="outline" onClick={onJoin}>
              speler? doe mee →
            </Btn>
          </div>
          <div style={{
            marginTop: 24,
            fontFamily: theme.fonts.mono, fontSize: 11,
            letterSpacing: "0.1em", color: theme.fgDim,
          }}>
            GEEN CREDITCARD · GEEN INSTALL · MEERTALIG
          </div>
        </div>

        {/* Hero visual: stacked quiz card mockup */}
        <div style={{ position: "relative", height: 720 }}>
          <MockCard theme={theme} color={theme.accent} title="Vrijdagavond pubquiz" category="PUBQUIZ"
            tilt={-3} top={0} left={0} z={3} questions={24} live />
          <MockCard theme={theme} color={theme.fg} title="Onboarding 2026" category="TEAM"
            tilt={4} top={220} left={180} z={2} questions={12} />
          <MockCard theme={theme} color={theme.signal} title="Bruiloft Tom & Sanne" category="EVENT"
            tilt={-6} top={440} left={40} z={1} questions={18} />
        </div>
      </section>

      {/* TWO-CARD TEASER → links to deeper pages */}
      <section style={{ padding: "70px 48px 90px", borderBottom: `2.5px solid ${theme.fg}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, maxWidth: 1200, margin: "0 auto" }}>
          <TeaserCard theme={theme} onClick={onHowItWorks}
            eyebrow="── DE FLOW"
            title="hoe het werkt"
            body="Van account aanmaken tot live sessie op het grote scherm — een rustige rondleiding door wat er onder de motorkap gebeurt."
            cta="bekijk de flow" />
          <TeaserCard theme={theme} onClick={onPricing} accent
            eyebrow="── PRIJZEN"
            title="drie smaken"
            body="Gratis, Party (€2,99), Quizkrak (€6,99). Spelers betalen nooit, opzegbaar per maand, geen vendor lock-in."
            cta="vergelijk plans" />
        </div>
      </section>

      {/* USE CASES */}
      <section style={{
        padding: "80px 48px 100px",
        borderBottom: `2.5px solid ${theme.fg}`,
      }}>
        <Eyebrow theme={theme} style={{ marginBottom: 14, color: theme.accent }}>── WAARVOOR</Eyebrow>
        <Display theme={theme} size={72} style={{ marginBottom: 50, maxWidth: 900 }}>
          van borrel tot bestuurskamer.
        </Display>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {[
            { num: "01", label: "PUBQUIZ", title: "Vrijdagmiddagborrel" },
            { num: "02", label: "TEAM", title: "Onboarding & teambuilding" },
            { num: "03", label: "EDUCATIE", title: "Klas & opleiding" },
            { num: "04", label: "EVENT", title: "Bruiloft & verjaardag" },
          ].map((u, i) => (
            <UseCase key={u.label} theme={theme} {...u} accent={i === 1} />
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{
        background: theme.fg,
        color: theme.cream,
        padding: "100px 48px",
        textAlign: "center",
        position: "relative",
        overflow: "hidden",
      }}>
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          backgroundImage: `radial-gradient(circle at 20% 30%, ${theme.accent}40 0%, transparent 40%), radial-gradient(circle at 80% 70%, ${theme.signal}30 0%, transparent 40%)`,
          pointerEvents: "none",
        }} />
        <div style={{ position: "relative" }}>
          <Eyebrow theme={theme} style={{ color: theme.accent, marginBottom: 18 }}>── KLAAR?</Eyebrow>
          <h2 style={{
            fontFamily: theme.fonts.display, fontWeight: 800,
            fontSize: 96, lineHeight: 0.95, letterSpacing: "-0.04em",
            textTransform: "lowercase", margin: 0, marginBottom: 24,
            color: theme.cream,
          }}>
            wat ga je<br/>
            <span style={{ color: theme.accent, fontStyle: "italic" }}>vragen</span>?
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.55, maxWidth: 560,
            margin: "0 auto 36px",
            color: "rgba(255,248,236,0.85)",
          }}>
            Account maken duurt 20 seconden. Je eerste sessie start vandaag nog.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <button onClick={onSignup} style={{
              background: theme.accent,
              color: "#fff",
              border: `2px solid ${theme.cream}`,
              boxShadow: `6px 6px 0 0 ${theme.cream}`,
              padding: "16px 32px",
              fontFamily: theme.fonts.display, fontWeight: 800, fontSize: 18,
              fontStyle: "italic",
              textTransform: "lowercase",
              cursor: "pointer",
            }}>begin gratis →</button>
            <button onClick={onLogin} style={{
              background: "transparent",
              color: theme.cream,
              border: `2px solid ${theme.cream}`,
              padding: "16px 32px",
              fontFamily: theme.fonts.display, fontWeight: 800, fontSize: 18,
              textTransform: "lowercase",
              cursor: "pointer",
            }}>ik heb al een account</button>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{
        padding: "32px 48px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontFamily: theme.fonts.mono, fontSize: 11,
        letterSpacing: "0.1em", color: theme.fgDim,
        flexWrap: "wrap", gap: 16,
      }}>
        <span>KWIST HET! · GEMAAKT IN ANTWERPEN</span>
        <span>HALLO@KWISTHET.BE</span>
        <span>v0.4 · BETA</span>
      </footer>
    </div>
  );
}

function MockCard({ theme, color, title, tilt = 0, top = 0, left = 0, z = 1, questions, live, category }) {
  return (
    <div style={{
      position: "absolute", top, left,
      width: 480, height: 290,
      background: color,
      color: "#fff",
      border: `3px solid ${theme.fg}`,
      boxShadow: `12px 12px 0 0 ${theme.fg}`,
      transform: `rotate(${tilt}deg)`,
      zIndex: z,
      padding: 28,
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      overflow: "hidden",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div style={{ fontFamily: theme.fonts.mono, fontSize: 12, letterSpacing: "0.15em", opacity: 0.9 }}>
          {category || `${questions} VRAGEN`}
        </div>
        {live && (
          <div style={{
            fontFamily: theme.fonts.mono, fontSize: 11, letterSpacing: "0.15em",
            background: theme.signal, color: "#fff", padding: "4px 12px",
            border: `1.5px solid ${theme.fg}`,
          }}>● LIVE</div>
        )}
      </div>
      <div>
        <div style={{
          fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
          fontSize: 46, lineHeight: 0.95, letterSpacing: "-0.03em",
          textTransform: "lowercase", marginBottom: 14,
        }}>{title}</div>
        <div style={{
          fontFamily: theme.fonts.mono, fontSize: 12, letterSpacing: "0.12em",
          opacity: 0.8,
        }}>{questions} VRAGEN · KW-{Math.floor(Math.random() * 9000) + 1000}</div>
      </div>
    </div>
  );
}

function TeaserCard({ theme, eyebrow, title, body, cta, onClick, accent }) {
  const [hover, setHover] = useStateLand(false);
  return (
    <div onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: accent ? theme.accent : theme.card,
        color: accent ? theme.cream : theme.fg,
        border: `2.5px solid ${theme.fg}`,
        boxShadow: `${hover ? 10 : 6}px ${hover ? 10 : 6}px 0 0 ${theme.fg}`,
        transform: hover ? "translate(-3px,-3px)" : "none",
        transition: "all .15s",
        padding: "30px 32px 32px",
        cursor: "pointer",
        display: "flex", flexDirection: "column",
        minHeight: 240,
      }}>
      <div style={{
        fontFamily: theme.fonts.mono, fontSize: 11, letterSpacing: "0.18em",
        marginBottom: 18, color: accent ? theme.cream : theme.accent,
        opacity: accent ? 0.85 : 1,
      }}>{eyebrow}</div>
      <div style={{
        fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
        fontSize: 56, lineHeight: 0.95, letterSpacing: "-0.04em",
        textTransform: "lowercase", marginBottom: 16,
      }}>{title}</div>
      <p style={{ fontSize: 15, lineHeight: 1.55, margin: "0 0 24px 0", opacity: 0.85 }}>{body}</p>
      <div style={{ marginTop: "auto", display: "flex", justifyContent: "flex-end" }}>
        <span style={{
          fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
          fontSize: 18, textTransform: "lowercase",
        }}>{cta} →</span>
      </div>
    </div>
  );
}

function UseCase({ theme, num, label, title, accent }) {
  const [hover, setHover] = useStateLand(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        border: `2px solid ${theme.fg}`,
        background: accent ? theme.accent : (hover ? theme.bg2 : "transparent"),
        color: accent ? "#fff" : theme.fg,
        padding: "28px 24px",
        boxShadow: hover ? `4px 4px 0 0 ${theme.fg}` : "none",
        transform: hover ? "translate(-2px,-2px)" : "none",
        transition: "all .15s",
        minHeight: 200,
        display: "flex", flexDirection: "column", justifyContent: "space-between",
      }}>
      <div style={{
        fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
        fontSize: 72, lineHeight: 1, letterSpacing: "-0.04em",
        color: accent ? "rgba(255,255,255,0.85)" : theme.accent,
      }}>{num}</div>
      <div>
        <div style={{
          fontFamily: theme.fonts.mono, fontSize: 11, letterSpacing: "0.12em",
          marginBottom: 6, opacity: accent ? 0.85 : 0.7,
        }}>{label}</div>
        <div style={{
          fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
          fontSize: 22, lineHeight: 1.1, textTransform: "lowercase",
        }}>{title}</div>
      </div>
    </div>
  );
}

function navLink(theme) {
  return {
    background: "transparent", border: "none", cursor: "pointer",
    fontFamily: theme.fonts.display, fontSize: 15, color: theme.fg,
    padding: "6px 4px", textDecoration: "none",
  };
}

window.LandingScreen = LandingScreen;