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

function HowItWorksScreen({ theme, onLogin, onSignup, onJoin, onPricing, onLanding }) {
  return (
    <div style={{ minHeight: "100vh", background: theme.bg, color: theme.fg }}>
      <HIWHeader theme={theme} onLogin={onLogin} onSignup={onSignup}
        onJoin={onJoin} onPricing={onPricing} onLanding={onLanding} />

      {/* HERO */}
      <section style={{
        padding: "70px 48px 60px",
        textAlign: "center",
        borderBottom: `2.5px solid ${theme.fg}`,
      }}>
        <Eyebrow theme={theme} style={{ color: theme.accent, marginBottom: 18 }}>
          ── DE FLOW
        </Eyebrow>
        <h1 style={{
          fontFamily: theme.fonts.display, fontWeight: 800,
          fontSize: 96, lineHeight: 0.95, letterSpacing: "-0.04em",
          textTransform: "lowercase", margin: 0, marginBottom: 18,
        }}>
          van leeg blad<br/>
          naar <span style={{ color: theme.accent, fontStyle: "italic" }}>live sessie</span>.
        </h1>
        <p style={{
          fontSize: 18, lineHeight: 1.55, maxWidth: 620,
          margin: "0 auto", color: theme.fg, opacity: 0.8,
        }}>
          Een rustige rondleiding door wat er onder de motorkap zit.
          Geen marketing-praat — gewoon: dit doe je, dit gebeurt er.
        </p>
      </section>

      {/* TIMELINE — vertical journey */}
      <section style={{ padding: "60px 48px 80px", borderBottom: `2.5px solid ${theme.fg}` }}>
        <div style={{ maxWidth: 980, margin: "0 auto" }}>
          <Step theme={theme} num="01" title="account aanmaken"
            time="20 SECONDEN"
            body="E-mail, wachtwoord, naam. Geen creditcard, geen telefoonnummer. We sturen je geen nieuwsbrieven tenzij je daar expliciet voor kiest." />

          <Step theme={theme} num="02" title="quiz schrijven of laten schrijven"
            time="30 SECONDEN — 10 MINUTEN"
            body="Twee paden: laat de AI-wizard 5–150 vragen genereren over een onderwerp dat jij geeft (gratis: 5, party: 50, quizkrak: 150), of open de custom-editor en typ ze zelf. Beide eindigen in dezelfde quiz, beide kun je nog bewerken." />

          <Step theme={theme} num="03" title="redigeren en publiceren"
            time="2 MINUTEN"
            body="Doorloop de vragen, herschrijf wat niet klopt, schrap wat niet leuk is. Klik 'publiceren' — je quiz wordt vastgezet (immutable) zodat je hem niet meer per ongeluk in een live sessie aanpast."
            accent />

          <Step theme={theme} num="04" title="sessiecode delen"
            time="5 SECONDEN"
            body="Bij het starten van een sessie krijg je een code zoals KW-7K2P en een QR-code. Beam die op het grote scherm. Spelers gaan naar kwisthet.be/join, voeren de code in, kiezen een naam — geen app, geen account." />

          <Step theme={theme} num="05" title="live spelen"
            time="ZO LANG ALS JIJ WIL"
            body="Je tikt op 'volgende vraag', alle telefoons updaten tegelijk. Spelers tikken hun antwoord, jij ziet de scoreboard mee-bouwen. Pauzeer wanneer je wil, herhaal als de discussie nog loopt, ga sneller bij makkelijke vragen." />

          <Step theme={theme} num="06" title="eindresultaat"
            time="DIRECT"
            body="Top-3 met fanfare op het grote scherm, persoonlijk overzicht voor elke speler op hun telefoon. Resultaten blijven 90 dagen bewaard onder jouw account, dan worden ze geanonimiseerd."
            last />
        </div>
      </section>

      {/* WHAT YOU NEED */}
      <section style={{ padding: "70px 48px", borderBottom: `2.5px solid ${theme.fg}` }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <Eyebrow theme={theme} style={{ marginBottom: 14, color: theme.accent }}>── WAT JE NODIG HEBT</Eyebrow>
          <Display theme={theme} size={56} style={{ marginBottom: 40, maxWidth: 800 }}>
            een laptop, een groot scherm, en spelers met een <span style={{ color: theme.accent, fontStyle: "italic" }}>telefoon</span>.
          </Display>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: `2px solid ${theme.fg}` }}>
            <NeedBlock theme={theme} num="01" label="HOST"
              title="een laptop & een scherm"
              body="Je laptop bestuurt de sessie. Het scherm — TV, beamer, monitor — toont de vragen aan de zaal. Werkt vanaf elke moderne browser." />
            <NeedBlock theme={theme} num="02" label="SPELERS" border
              title="een telefoon per persoon"
              body="Spelers gebruiken hun eigen telefoon om te joinen en antwoorden in te tikken. Geen app, geen account — alleen kwisthet.be/join." />
            <NeedBlock theme={theme} num="03" label="VERBINDING" border
              title="wifi of mobiele data"
              body="Het werkt zo lang er internet is. Op een trage verbinding? Geen probleem — alle data is licht, ook live updates." />
          </div>
        </div>
      </section>

      {/* PARALLEL EXPLAIN: AI vs Custom */}
      <section style={{ padding: "80px 48px", borderBottom: `2.5px solid ${theme.fg}` }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <Eyebrow theme={theme} style={{ marginBottom: 14, color: theme.accent }}>── TWEE PADEN</Eyebrow>
          <Display theme={theme} size={56} style={{ marginBottom: 40, maxWidth: 800 }}>
            ai-wizard of custom — <span style={{ color: theme.accent, fontStyle: "italic" }}>jij kiest</span>.
          </Display>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            <PathCard theme={theme}
              eyebrow="01 · AI-WIZARD"
              title="snel en breed"
              points={[
                "Geef onderwerp + toon (speels, professioneel, gemixt)",
                "AI levert vragen, opties, en het juiste antwoord",
                "Per vraag: keuren, herschrijven, weggooien",
                "Eigen vragen toevoegen kan altijd",
                "Werkt voor algemene kennis, geschiedenis, popcultuur, …",
              ]}
              good="Goed voor: pubquizzen, teamuitjes, ijsbrekers"
              bad="Minder geschikt voor: bedrijfsspecifieke kennis, schooltoetsen" />
            <PathCard theme={theme} accent
              eyebrow="02 · CUSTOM EDITOR"
              title="precies en eigen"
              points={[
                "Open een leeg blad of importeer een CSV-bestand",
                "Schrijf elke vraag zelf, kies juist antwoord per vraag",
                "Stel timer in per vraag (10–60 seconden)",
                "Drag & drop volgorde aanpassen",
                "Exporteer als CSV om te delen of backuppen",
              ]}
              good="Goed voor: trainingen, examens, branded events"
              bad="Minder geschikt voor: spontane borrels (langer voorbereiden)" />
          </div>
        </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 30% 30%, ${theme.accent}40 0%, transparent 40%), radial-gradient(circle at 70% 70%, ${theme.signal}30 0%, transparent 40%)`,
          pointerEvents: "none",
        }} />
        <div style={{ position: "relative" }}>
          <h2 style={{
            fontFamily: theme.fonts.display, fontWeight: 800,
            fontSize: 88, lineHeight: 0.95, letterSpacing: "-0.04em",
            textTransform: "lowercase", margin: 0, marginBottom: 24,
            color: theme.cream,
          }}>
            zin om het te <span style={{ color: theme.accent, fontStyle: "italic" }}>proberen</span>?
          </h2>
          <p style={{
            fontSize: 18, lineHeight: 1.55, maxWidth: 560,
            margin: "0 auto 32px",
            color: "rgba(255,248,236,0.85)",
          }}>
            Gratis account, geen creditcard. Eerste sessie binnen 30 seconden.
          </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={onPricing} 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",
            }}>bekijk prijzen</button>
          </div>
        </div>
      </section>

      <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 HIWHeader({ theme, onLogin, onSignup, onJoin, onPricing, onLanding }) {
  return (
    <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",
    }}>
      <div onClick={onLanding} style={{ cursor: "pointer" }}>
        <Wordmark size={280} style={{ marginBottom: -90, position: "relative", zIndex: 51 }} />
      </div>
      <nav style={{ display: "flex", gap: 22, alignItems: "center" }}>
        <button style={{ ...hiwNavLink(theme), color: theme.accent, fontStyle: "italic" }}>hoe het werkt</button>
        <button onClick={onPricing} style={hiwNavLink(theme)}>prijzen</button>
        <button onClick={onJoin} style={hiwNavLink(theme)}>doe mee →</button>
        <button onClick={onLogin} style={hiwNavLink(theme)}>inloggen</button>
        <Btn theme={theme} onClick={onSignup}>account maken</Btn>
      </nav>
    </header>
  );
}

function Step({ theme, num, title, body, time, accent, last }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "120px 1fr",
      gap: 32,
      padding: "32px 0",
      borderBottom: last ? "none" : `1.5px dashed ${theme.rule}`,
      alignItems: "flex-start",
    }}>
      <div style={{
        fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
        fontSize: 84, lineHeight: 1, letterSpacing: "-0.04em",
        color: accent ? theme.accent : theme.fg,
      }}>{num}</div>
      <div>
        <div style={{
          fontFamily: theme.fonts.mono, fontSize: 10, letterSpacing: "0.18em",
          color: theme.accent, marginBottom: 8,
        }}>── {time}</div>
        <div style={{
          fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
          fontSize: 36, lineHeight: 1.05, textTransform: "lowercase",
          letterSpacing: "-0.02em",
          marginBottom: 14,
        }}>{title}</div>
        <p style={{ fontSize: 16, lineHeight: 1.6, margin: 0, maxWidth: 720, color: theme.fg, opacity: 0.85 }}>{body}</p>
      </div>
    </div>
  );
}

function NeedBlock({ theme, num, label, title, body, border }) {
  return (
    <div style={{
      padding: "28px 26px",
      borderLeft: border ? `2px solid ${theme.fg}` : "none",
    }}>
      <div style={{
        fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
        fontSize: 56, lineHeight: 1, letterSpacing: "-0.04em",
        color: theme.accent, marginBottom: 14,
      }}>{num}</div>
      <div style={{
        fontFamily: theme.fonts.mono, fontSize: 11, letterSpacing: "0.15em",
        color: theme.fgDim, marginBottom: 10,
      }}>── {label}</div>
      <div style={{
        fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
        fontSize: 22, lineHeight: 1.1, textTransform: "lowercase",
        marginBottom: 10,
      }}>{title}</div>
      <p style={{ fontSize: 14, lineHeight: 1.55, margin: 0, opacity: 0.78 }}>{body}</p>
    </div>
  );
}

function PathCard({ theme, eyebrow, title, points, good, bad, accent }) {
  return (
    <div style={{
      border: `2.5px solid ${theme.fg}`,
      background: accent ? theme.accent : theme.card,
      color: accent ? theme.cream : theme.fg,
      boxShadow: `6px 6px 0 0 ${theme.fg}`,
      padding: "26px 28px 30px",
      display: "flex", flexDirection: "column",
    }}>
      <div style={{
        fontFamily: theme.fonts.mono, fontSize: 11, letterSpacing: "0.18em",
        color: accent ? theme.cream : theme.accent,
        marginBottom: 12, opacity: accent ? 0.85 : 1,
      }}>── {eyebrow}</div>
      <div style={{
        fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
        fontSize: 36, lineHeight: 1.0, letterSpacing: "-0.03em",
        textTransform: "lowercase", marginBottom: 18,
      }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: "0 0 20px 0" }}>
        {points.map((p) => (
          <li key={p} style={{
            display: "flex", gap: 10, alignItems: "flex-start",
            padding: "5px 0", fontSize: 14, lineHeight: 1.5,
          }}>
            <span style={{
              fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
              fontSize: 16, color: accent ? theme.cream : theme.accent,
              flexShrink: 0, width: 16,
            }}>→</span>
            <span style={{ opacity: accent ? 0.92 : 0.9 }}>{p}</span>
          </li>
        ))}
      </ul>
      <div style={{
        marginTop: "auto",
        padding: "12px 14px",
        background: accent ? "rgba(255,248,236,0.12)" : theme.bg2,
        fontFamily: theme.fonts.mono, fontSize: 11,
        letterSpacing: "0.05em", lineHeight: 1.5,
      }}>
        <div style={{ marginBottom: 4 }}>
          <span style={{ color: accent ? theme.cream : theme.accent }}>+</span> {good}
        </div>
        <div style={{ opacity: 0.7 }}>
          <span style={{ color: accent ? "rgba(255,255,255,0.6)" : theme.fgDim }}>−</span> {bad}
        </div>
      </div>
    </div>
  );
}

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

window.HowItWorksScreen = HowItWorksScreen;