// Screens: Intro, Hero, Platforms, Challenge, About, Contact
const { useEffect: useE2, useState: useS2, useRef: useR2 } = React;

// --- Masthead (minimal newspaper top strip) ---
function Masthead({ onNav, active }) {
  return (
    <div style={{ marginBottom: 24 }}>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11,
          letterSpacing: "0.1em",
          textTransform: "uppercase",
          color: "var(--ink)",
          paddingBottom: 6,
        }}
      >
        <div>Est. 2026</div>
        <div>London · UK</div>
        <div>lewisjackson.ventures</div>
      </div>
      <div
        style={{
          borderTop: "3px double var(--rule)",
          borderBottom: "1px solid var(--rule)",
          padding: "14px 0 10px",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: 20,
            flexWrap: "wrap",
          }}
        >
          <h1
            style={{
              margin: 0,
              fontFamily: "'Old Standard TT', serif",
              fontSize: 44,
              fontWeight: 700,
              letterSpacing: "-0.01em",
              lineHeight: 1,
            }}
          >
            Lewis Jackson
          </h1>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <button
              onClick={() => onNav("contact")}
              style={{
                fontFamily: "'Press Start 2P', monospace",
                fontSize: 10,
                letterSpacing: "0.1em",
                padding: "10px 14px",
                background: "var(--accent)",
                color: "#fff",
                border: "2px solid var(--ink)",
                boxShadow: "3px 3px 0 var(--ink)",
                cursor: "pointer",
                textTransform: "uppercase",
              }}
            >
              Work With Lewis
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// --- Intro ("Press START") ---
function IntroScreen({ onStart }) {
  const [blink, setBlink] = useS2(true);
  useE2(() => {
    const t = setInterval(() => setBlink((b) => !b), 500);
    const k = (e) => {
      if (e.key === "Enter" || e.key === " " || e.key === "z" || e.key === "Z")
        onStart();
    };
    window.addEventListener("keydown", k);
    return () => {
      clearInterval(t);
      window.removeEventListener("keydown", k);
    };
  }, []);
  return (
    <div
      style={{
        minHeight: "85vh",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 32,
      }}
    >
      <GBScreen style={{ width: 520, padding: 32 }}>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 20,
            padding: "16px 0",
          }}
        >
          <Sprite data={SPRITE_AVATAR} scale={8} />
          <div
            style={{
              fontFamily: "'Press Start 2P', monospace",
              fontSize: 18,
              color: "var(--ink)",
              textAlign: "center",
              lineHeight: 1.5,
            }}
          >
            LEWIS
            <br />
            JACKSON
          </div>
          <div
            style={{
              fontFamily: "'VT323', monospace",
              fontSize: 22,
              color: "var(--dark)",
              textAlign: "center",
            }}
          >
            AI × Investing × Automation
          </div>
          <div
            style={{
              fontFamily: "'Press Start 2P', monospace",
              fontSize: 11,
              color: "var(--ink)",
              marginTop: 10,
              visibility: blink ? "visible" : "hidden",
            }}
          >
            Press Start
          </div>
        </div>
      </GBScreen>

      <PxButton onClick={onStart} big accent>
        Enter Site
      </PxButton>
    </div>
  );
}

// --- Hero: compact intro, portrait + one-line + CTA ---
function HeroScreen({ heroVariant, onNav, portraitUrl }) {
  return (
    <section id="hero">
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "260px 1fr",
          gap: 32,
          alignItems: "center",
          marginTop: 8,
        }}
      >
        {/* Portrait */}
        <div>
          {heroVariant === "sprite" ? (
            <GBScreen style={{ padding: 18 }}>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  gap: 10,
                }}
              >
                <Sprite data={SPRITE_AVATAR} scale={10} />
              </div>
            </GBScreen>
          ) : heroVariant === "cartridge" ? (
            <div
              style={{
                background: "var(--ink)",
                border: "4px solid var(--ink)",
                boxShadow: "5px 5px 0 var(--dark)",
                padding: 10,
              }}
            >
              <div
                style={{
                  background: "var(--light)",
                  padding: 8,
                  border: "2px solid var(--dark)",
                }}
              >
                <Portrait url={portraitUrl} />
              </div>
            </div>
          ) : (
            <div
              style={{
                border: "2px solid var(--ink)",
                padding: 8,
                background: "var(--paper)",
                boxShadow: "5px 5px 0 var(--ink)",
              }}
            >
              <Portrait url={portraitUrl} />
            </div>
          )}
        </div>

        {/* Copy */}
        <div>
          <div
            style={{
              fontFamily: "'Press Start 2P', monospace",
              fontSize: 10,
              letterSpacing: "0.18em",
              color: "var(--dark)",
              marginBottom: 12,
            }}
          >
            — The Short Version —
          </div>
          <h2
            style={{
              margin: 0,
              fontFamily: "'Old Standard TT', serif",
              fontSize: 56,
              fontWeight: 700,
              lineHeight: 0.95,
              letterSpacing: "-0.01em",
            }}
          >
            Most people want the thing to work. Not more information about it.
          </h2>
          <p
            style={{
              margin: "16px 0 0",
              fontFamily: "'Old Standard TT', serif",
              fontSize: 20,
              lineHeight: 1.5,
              maxWidth: 560,
            }}
          >
            If you want to build something real with AI — a trading system, a
            business automation, something that actually runs — the form is at
            the bottom. Everything I'm building in public is below that.
          </p>
        </div>
      </div>
    </section>
  );
}

function Portrait({ url }) {
  if (url) {
    return (
      <div
        style={{
          aspectRatio: "1 / 1",
          background: `var(--paper) url(${url}) center/cover`,
          imageRendering: "pixelated",
          border: "1px solid var(--dark)",
        }}
      />
    );
  }
  return (
    <div
      style={{
        aspectRatio: "1 / 1.15",
        background: `
        repeating-linear-gradient(45deg, var(--dark) 0 2px, transparent 2px 6px),
        var(--light)
      `,
        border: "1px solid var(--dark)",
        position: "relative",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div
        style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11,
          letterSpacing: "0.1em",
          background: "var(--paper)",
          padding: "6px 10px",
          border: "1px solid var(--ink)",
          textTransform: "uppercase",
          textAlign: "center",
        }}
      >
        Portrait goes here
      </div>
    </div>
  );
}

// --- Platform icons (simple flat SVG glyphs in ink tone) ---
function YouTubeIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      width="100%"
      height="100%"
      fill="var(--ink)"
      aria-hidden="true"
    >
      <path d="M23 7.2a3 3 0 0 0-2.1-2.1C19.1 4.6 12 4.6 12 4.6s-7.1 0-8.9.5A3 3 0 0 0 1 7.2C.5 9 .5 12 .5 12s0 3 .5 4.8a3 3 0 0 0 2.1 2.1c1.8.5 8.9.5 8.9.5s7.1 0 8.9-.5a3 3 0 0 0 2.1-2.1c.5-1.8.5-4.8.5-4.8s0-3-.5-4.8zM9.8 15.5v-7l6 3.5-6 3.5z" />
    </svg>
  );
}
function LinkedInIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      width="100%"
      height="100%"
      fill="var(--ink)"
      aria-hidden="true"
    >
      <path d="M4.98 3.5A2.5 2.5 0 1 1 4.97 8.5a2.5 2.5 0 0 1 .01-5zM3 9.75h4v11H3v-11zM9.5 9.75h3.83v1.5h.05c.53-1 1.84-2.06 3.79-2.06 4.06 0 4.81 2.67 4.81 6.15v5.41h-4v-4.8c0-1.15-.02-2.62-1.6-2.62-1.6 0-1.84 1.25-1.84 2.54v4.88h-4v-11z" />
    </svg>
  );
}
function XIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      width="100%"
      height="100%"
      fill="var(--ink)"
      aria-hidden="true"
    >
      <path d="M18.244 2H21.5l-7.54 8.62L22.8 22h-6.82l-5.34-6.98L4.56 22H1.3l8.07-9.22L1.2 2h6.98l4.83 6.38L18.244 2zm-1.2 18h1.88L7.04 3.9H5.02l12.02 16.1z" />
    </svg>
  );
}
function MailIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      width="100%"
      height="100%"
      fill="none"
      stroke="var(--ink)"
      strokeWidth="1.8"
      strokeLinecap="square"
      strokeLinejoin="miter"
      aria-hidden="true"
    >
      <rect x="3" y="5" width="18" height="14" />
      <path d="M3 6l9 7 9-7" />
    </svg>
  );
}

// --- What I'm up to ---
function UpToScreen({ onNav }) {
  const platforms = [
    {
      key: "yt",
      name: "YouTube",
      handle: "@lewiswjackson",
      meta: "188,780 subs",
      blurb: "AI builds and live trades. Documented weekly.",
      Icon: YouTubeIcon,
      href: "https://youtube.com/@lewiswjackson",
    },
    {
      key: "li",
      name: "LinkedIn",
      handle: "/in/lewisjackso",
      meta: "Long-form",
      blurb: "Long-form notes on AI in finance.",
      Icon: LinkedInIcon,
      href: "https://linkedin.com/in/lewisjackso",
    },
    {
      key: "nl",
      name: "Lewsletter",
      handle: "Twice weekly",
      meta: "Newsletter",
      blurb: "Systems, trades, and ideas. Twice a week.",
      Icon: MailIcon,
      href: "#",
    },
    {
      key: "x",
      name: "X",
      handle: "@whatsaylew",
      meta: "Daily",
      blurb: "Charts, code, and live commentary.",
      Icon: XIcon,
      href: "https://x.com/whatsaylew",
    },
  ];
  return (
    <section id="up-to">
      <SectionHead kicker="Channels" title="Where to find me" />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        {platforms.map((p) => (
          <a
            key={p.key}
            href={p.href}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              textDecoration: "none",
              color: "var(--ink)",
              border: "3px solid var(--ink)",
              boxShadow: "5px 5px 0 var(--ink)",
              background: "var(--paper)",
              padding: 20,
              display: "grid",
              gridTemplateColumns: "64px 1fr",
              gap: 16,
              alignItems: "start",
              transition: "transform 0.08s, box-shadow 0.08s",
            }}
            onMouseDown={(e) => {
              e.currentTarget.style.transform = "translate(3px,3px)";
              e.currentTarget.style.boxShadow = "2px 2px 0 var(--ink)";
            }}
            onMouseUp={(e) => {
              e.currentTarget.style.transform = "";
              e.currentTarget.style.boxShadow = "5px 5px 0 var(--ink)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = "";
              e.currentTarget.style.boxShadow = "5px 5px 0 var(--ink)";
            }}
          >
            <div
              style={{
                border: "2px solid var(--ink)",
                background: "var(--light)",
                padding: 10,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                aspectRatio: "1/1",
              }}
            >
              <p.Icon />
            </div>
            <div>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "baseline",
                  marginBottom: 6,
                  gap: 8,
                }}
              >
                <div
                  style={{
                    fontFamily: "'Press Start 2P',monospace",
                    fontSize: 12,
                    letterSpacing: "0.08em",
                  }}
                >
                  {p.name}
                </div>
                <div
                  style={{
                    fontFamily: "'JetBrains Mono',monospace",
                    fontSize: 11,
                    letterSpacing: "0.1em",
                    color: "var(--dark)",
                    textTransform: "uppercase",
                  }}
                >
                  {p.meta}
                </div>
              </div>
              <div
                style={{
                  fontFamily: "'VT323',monospace",
                  fontSize: 18,
                  color: "var(--dark)",
                  marginBottom: 8,
                }}
              >
                {p.handle}
              </div>
              <div
                style={{
                  fontFamily: "'Old Standard TT',serif",
                  fontSize: 17,
                  lineHeight: 1.4,
                }}
              >
                {p.blurb}
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// --- The Challenge (tighter) ---
function ChallengeScreen() {
  const progress = 0.12;
  return (
    <section id="challenge">
      <SectionHead
        kicker="Live"
        title="The £50k → £500k Challenge"
        byline="No edits. No hidden trades. Every position, live."
      />
      <div
        style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 28 }}
      >
        <GBScreen>
          <div
            style={{
              fontFamily: "'Press Start 2P',monospace",
              fontSize: 10,
              color: "var(--ink)",
              marginBottom: 14,
              letterSpacing: "0.1em",
            }}
          >
            Progress
          </div>
          <div
            style={{
              fontFamily: "'VT323',monospace",
              fontSize: 22,
              color: "var(--ink)",
              marginBottom: 6,
            }}
          >
            Starting bank
          </div>
          <div
            style={{
              fontFamily: "'Press Start 2P',monospace",
              fontSize: 22,
              color: "var(--ink)",
              marginBottom: 18,
            }}
          >
            £50,000
          </div>
          <div
            style={{
              fontFamily: "'VT323',monospace",
              fontSize: 22,
              color: "var(--ink)",
            }}
          >
            Target
          </div>
          <div
            style={{
              fontFamily: "'Press Start 2P',monospace",
              fontSize: 22,
              color: "var(--ink)",
              marginBottom: 18,
            }}
          >
            £500,000
          </div>
          <PxBar value={progress} />
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginTop: 10,
              fontFamily: "'JetBrains Mono',monospace",
              fontSize: 12,
              color: "var(--ink)",
              letterSpacing: "0.1em",
            }}
          >
            <span>12% in</span>
            <span>247 days left</span>
          </div>
        </GBScreen>

        <div>
          <p
            style={{
              fontFamily: "'Old Standard TT',serif",
              fontSize: 20,
              lineHeight: 1.5,
              margin: 0,
            }}
          >
            I don't teach systems I haven't run myself. This is the proof of
            that. £50k to £500k in twelve months — every trade on camera, no
            exceptions.
          </p>
          <div
            style={{
              marginTop: 16,
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 10,
            }}
          >
            <StatBlock value="£60,020" label="Current" />
            <StatBlock value="+20%" label="YTD" />
            <StatBlock value="23" label="Episodes" />
            <StatBlock value="0" label="Hidden" />
          </div>
        </div>
      </div>
    </section>
  );
}

// --- About (tighter) ---
function AboutScreen() {
  return (
    <section id="about">
      <SectionHead kicker="About" title="About Lewis" />
      <div
        style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 32 }}
      >
        <div
          style={{
            fontFamily: "'Old Standard TT',serif",
            fontSize: 20,
            lineHeight: 1.55,
          }}
        >
          <p style={{ marginTop: 0 }}>
            I spent five years teaching crypto to hundreds of thousands of
            people. Then I learned that knowing about an asset class and
            building infrastructure to trade it are two completely different
            things.
          </p>
          <p>
            Now I help self-taught traders and business owners use AI to build
            systems that actually run — overnight monitors, automated briefs,
            execution pipelines. The stuff most people abandon because they
            can't code and don't know where to start.
          </p>
          <p style={{ marginBottom: 0 }}>
            All documented on YouTube. 188,780 subscribers. Including a live,
            public challenge to turn £50,000 into £500,000 in one year — every
            trade on camera.
          </p>
        </div>
        <div
          style={{
            border: "3px solid var(--ink)",
            background: "var(--paper)",
            padding: 18,
            boxShadow: "5px 5px 0 var(--ink)",
          }}
        >
          <div
            style={{
              fontFamily: "'Press Start 2P',monospace",
              fontSize: 10,
              letterSpacing: "0.1em",
              marginBottom: 12,
            }}
          >
            Quick Facts
          </div>
          {[
            ["Based in", "London, UK"],
            ["Background", "Crypto education · 5 years"],
            ["Now", "AI × investing systems"],
            ["Audience", "Engineers · IT pros · builders"],
            ["Output", "YouTube · newsletter · builds"],
          ].map(([k, v]) => (
            <div
              key={k}
              style={{
                display: "flex",
                justifyContent: "space-between",
                borderBottom: "1px dotted var(--dark)",
                padding: "8px 0",
                fontFamily: "'Old Standard TT',serif",
                fontSize: 17,
              }}
            >
              <span style={{ color: "var(--dark)" }}>{k}</span>
              <span style={{ fontWeight: 700 }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- Contact: branching, prominent form ---
const INTENTS = [
  {
    key: "build-biz",
    label: "Build AI for my business",
    blurb: "Kill the manual work. Build the system.",
    sprite: SPRITE_PLAY,
  },
  {
    key: "build-invest",
    label: "Build AI for my investing",
    blurb: "Monitors, briefs, execution pipelines.",
    sprite: SPRITE_COIN,
  },
  {
    key: "speak",
    label: "Speak at my event",
    blurb: "AI × investing. Real systems, real results.",
    sprite: SPRITE_CUP,
  },
  {
    key: "podcast",
    label: "Have me on your podcast",
    blurb: "High-signal conversation. No fluff.",
    sprite: SPRITE_PLAY,
  },
  {
    key: "brand",
    label: "Brand deal / sponsorship",
    blurb: "For brands that actually fit the audience.",
    sprite: SPRITE_COIN,
  },
  {
    key: "other",
    label: "Something else",
    blurb: "Not sure? Just say what's on your mind.",
    sprite: SPRITE_CART,
  },
];

// Question flows per intent.
// Each step: { id, label, subtext?, type, placeholder?, options?, multi? }
const FLOWS = {
  "build-invest": [
    {
      id: "describe",
      label: "What do you want the system to do?",
      subtext:
        "Describe the outcome. Not the technology — what should land in your inbox, phone, or broker account.",
      type: "textarea",
      placeholder:
        'E.g. "A system that scans my watchlist overnight, identifies when a setup I\'ve defined is forming, and texts me before the open — so I only look at the ones worth trading."',
    },
    {
      id: "capital",
      label: "Capital you're deploying into this",
      type: "choice",
      options: ["Under £10k", "£10k–£50k", "£50k–£250k", "£250k–£1m", "£1m+"],
    },
    {
      id: "asset",
      label: "Asset class",
      type: "choice",
      options: [
        "Crypto",
        "Equities",
        "Futures / FX",
        "Multi-asset",
        "Not decided yet",
      ],
    },
    {
      id: "current_process",
      label: "Where are you right now?",
      type: "choice",
      options: [
        "Fully manual — I watch charts and make calls",
        "I have alerts but no automation",
        "I have a strategy and need someone to build the system",
        "Starting from scratch",
      ],
    },
    {
      id: "tried",
      label: "What have you already tried? Why didn't it work?",
      type: "textarea",
      placeholder:
        "Courses, tools, hiring a dev, ChatGPT — what did you try and where exactly did it fall apart?",
    },
    {
      id: "session_one",
      label:
        "What do you want built and running by the end of our first session?",
      subtext:
        "Not a plan. Not a better understanding. The thing itself — running.",
      type: "textarea",
      placeholder:
        'E.g. "A working script that pulls my top 5 TradingView setups and sends them to Telegram by 7am every morning."',
    },
    {
      id: "budget",
      label: "Budget for building the system",
      type: "choice",
      options: ["Under £5k", "£5k–£15k", "£15k–£50k", "£50k+", "Not sure yet"],
    },
    {
      id: "call",
      label: "Are you open to a 20-minute call?",
      type: "choice",
      options: [
        "Yes — happy to jump on a call",
        "Maybe — depends what you come back with",
        "I'd rather handle it over email",
      ],
    },
    {
      id: "disclaimer",
      label: "One thing to be clear on.",
      subtext:
        "I build systems, not certainty. Nothing I share is financial advice. Markets are risky. Results vary — sometimes dramatically. If you're expecting a guaranteed outcome, close this tab. I'm not the right person.",
      type: "choice",
      options: ["Understood — let's keep going"],
    },
    {
      id: "timezone",
      label: "Your timezone",
      type: "choice",
      options: [
        "UK / Ireland",
        "Europe",
        "US East",
        "US West",
        "Asia / Pacific",
        "Other",
      ],
    },
  ],
  "build-biz": [
    {
      id: "business",
      label: "What does your business do?",
      type: "text",
      placeholder: "One sentence.",
    },
    {
      id: "role",
      label: "Your role",
      type: "text",
      placeholder: "Founder, Head of Ops, CTO, etc.",
    },
    {
      id: "problem",
      label: "What's the process you want gone?",
      subtext:
        "The one you've been putting off, delegating badly, or manually suffering through for months.",
      type: "textarea",
      placeholder:
        "E.g. \"Every Monday I manually pull data from three tools and paste it into a spreadsheet. It takes two hours. I've done it 50 times and I still haven't automated it.\"",
    },
    {
      id: "cost",
      label: "What's that costing you every month?",
      type: "choice",
      options: [
        "Under £500 — mainly annoying",
        "£500–£2k — real but manageable",
        "£2k–£5k — I feel it monthly",
        "£5k+ — serious drag",
      ],
    },
    {
      id: "tried",
      label: "What have you already tried?",
      type: "textarea",
      placeholder:
        "Tools, workarounds, hires — what happened and why didn't it stick?",
    },
    {
      id: "outcome",
      label: "What should be running when we're done?",
      subtext:
        "Not 'a better workflow.' The actual thing — what runs, what it produces, where it lands.",
      type: "textarea",
      placeholder:
        'E.g. "A pipeline that pulls CRM data every morning, enriches it, and drops a prioritised list into Slack by 9am — without me touching it."',
    },
    {
      id: "budget",
      label: "Rough budget",
      type: "choice",
      options: [
        "Under £5k",
        "£5k–£25k",
        "£25k–£100k",
        "£100k+",
        "Not sure yet",
      ],
    },
    {
      id: "timeline",
      label: "When do you need this live?",
      type: "choice",
      options: ["ASAP", "1–3 months", "3–6 months", "Just exploring"],
    },
    {
      id: "call",
      label: "Are you open to a 20-minute call?",
      type: "choice",
      options: [
        "Yes — happy to jump on a call",
        "Maybe — depends what you come back with",
        "I'd rather handle it over email",
      ],
    },
    {
      id: "timezone",
      label: "Your timezone",
      type: "choice",
      options: [
        "UK / Ireland",
        "Europe",
        "US East",
        "US West",
        "Asia / Pacific",
        "Other",
      ],
    },
  ],
  speak: [
    {
      id: "event",
      label: "Event name",
      type: "text",
      placeholder: "e.g. SaaStr 2026",
    },
    {
      id: "date",
      label: "Date(s)",
      type: "text",
      placeholder: "e.g. Sep 14–16, 2026",
    },
    {
      id: "location",
      label: "Location",
      type: "text",
      placeholder: "City or virtual",
    },
    {
      id: "audience",
      label: "Audience size and profile",
      type: "textarea",
      placeholder:
        "e.g. 400 founders and ops leads. Primarily UK-based, mostly non-technical.",
    },
    {
      id: "format",
      label: "Format",
      type: "choice",
      options: [
        "Keynote",
        "Panel",
        "Workshop / masterclass",
        "Fireside chat",
        "Other",
      ],
    },
    {
      id: "topic",
      label: "Proposed topic or angle",
      type: "textarea",
      placeholder:
        "What do you want Lewis to cover? The more specific, the better.",
    },
    {
      id: "budget",
      label: "Speaker budget",
      type: "choice",
      options: [
        "Under £2k",
        "£2k–£10k",
        "£10k–£25k",
        "£25k+",
        "Honorarium only",
      ],
    },
  ],
  podcast: [
    { id: "show", label: "Show name", type: "text", placeholder: "e.g. 20VC" },
    {
      id: "link",
      label: "Link to a recent episode",
      type: "text",
      placeholder: "https://...",
    },
    {
      id: "audience",
      label: "Audience size",
      type: "choice",
      options: ["Under 1k", "1k–10k", "10k–100k", "100k+"],
    },
    {
      id: "format",
      label: "Format",
      type: "choice",
      options: ["Audio only", "Video", "Both"],
    },
    {
      id: "topic",
      label: "Proposed topic",
      subtext: "What angle would make this a genuinely good episode?",
      type: "textarea",
      placeholder:
        "e.g. How Lewis turned £50k into a live, documented trading system on YouTube — and what he'd do differently.",
    },
    {
      id: "fit",
      label: "Why is Lewis a good fit for your audience?",
      type: "textarea",
      placeholder: "One paragraph. Be honest — if it's a stretch, say so.",
    },
  ],
  brand: [
    {
      id: "company",
      label: "Company",
      type: "text",
      placeholder: "Brand name",
    },
    {
      id: "product",
      label: "Product or service",
      type: "text",
      placeholder: "What are we promoting?",
    },
    {
      id: "fit",
      label: "Why is Lewis a fit?",
      subtext: "Be specific about the audience match.",
      type: "textarea",
      placeholder:
        'e.g. "Our product is a backtesting platform. Lewis\'s audience is builders who use TradingView — exact overlap."',
    },
    {
      id: "deliverable",
      label: "Deliverable type",
      type: "choice",
      multi: true,
      options: [
        "YouTube integration",
        "Dedicated video",
        "Newsletter",
        "Livestream",
        "Other",
      ],
    },
    {
      id: "budget",
      label: "Budget",
      type: "choice",
      options: ["Under £5k", "£5k–£25k", "£25k–£100k", "£100k+"],
    },
    {
      id: "timing",
      label: "Ideal go-live",
      type: "text",
      placeholder: "e.g. Q3 2026",
    },
  ],
  other: [
    {
      id: "message",
      label: "What's on your mind?",
      type: "textarea",
      placeholder: "Tell me everything.",
    },
  ],
};

const COMMON_END = [
  { id: "name", label: "Your name", type: "text", placeholder: "First & last" },
  { id: "email", label: "Email", type: "email", placeholder: "you@domain.com" },
];

function ContactScreen() {
  const [intent, setIntent] = useS2(null);
  const [answers, setAnswers] = useS2({});
  const [submitted, setSubmitted] = useS2(false);

  const flow = intent ? [...FLOWS[intent], ...COMMON_END] : [];
  const setAns = (id, v) => setAnswers((a) => ({ ...a, [id]: v }));

  const reset = () => {
    setIntent(null);
    setAnswers({});
    setSubmitted(false);
  };

  const submit = async () => {
    const intentMeta = INTENTS.find((i) => i.key === intent);
    try {
      await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ intent: intentMeta?.label, ...answers }),
      });
    } catch (_) {}
    setSubmitted(true);
  };

  return (
    <section id="contact" style={{ marginTop: 56 }}>
      {/* BIG eyecatching header card */}
      <div
        style={{
          background: "var(--ink)",
          color: "var(--paper)",
          border: "4px solid var(--ink)",
          boxShadow: "8px 8px 0 var(--accent)",
          padding: "36px 40px",
          marginBottom: 0,
          position: "relative",
        }}
      >
        <div
          style={{
            fontFamily: "'Press Start 2P',monospace",
            fontSize: 11,
            letterSpacing: "0.2em",
            color: "var(--light)",
            marginBottom: 10,
          }}
        >
          CONTACT
        </div>
        <h2
          style={{
            margin: 0,
            fontFamily: "'Old Standard TT', serif",
            fontSize: 72,
            fontWeight: 700,
            lineHeight: 0.95,
            letterSpacing: "-0.02em",
          }}
        >
          Work with Lewis.
        </h2>
        <p
          style={{
            fontFamily: "'Old Standard TT',serif",
            fontSize: 20,
            lineHeight: 1.45,
            maxWidth: 620,
            margin: "14px 0 0",
            color: "var(--paper)",
            opacity: 0.9,
          }}
        >
          Tell me what you're trying to build. I'll read it. If I think I can
          actually help, I'll say so — and tell you exactly how.
        </p>
      </div>

      <div
        style={{
          background: "var(--paper)",
          border: "4px solid var(--ink)",
          borderTop: "none",
          padding: "32px 40px 40px",
        }}
      >
        {submitted ? (
          <SubmittedCard onReset={reset} intent={intent} answers={answers} />
        ) : !intent ? (
          <IntentPicker onPick={setIntent} />
        ) : (
          <FormFlow
            intent={intent}
            flow={flow}
            answers={answers}
            setAns={setAns}
            onBack={() => setIntent(null)}
            onSubmit={submit}
          />
        )}
      </div>
    </section>
  );
}

function IntentPicker({ onPick }) {
  return (
    <>
      <div
        style={{
          fontFamily: "'Press Start 2P',monospace",
          fontSize: 10,
          letterSpacing: "0.15em",
          color: "var(--dark)",
          marginBottom: 18,
        }}
      >
        STEP 1 OF 2 — WHAT DO YOU WANT TO DO?
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 14,
        }}
      >
        {INTENTS.map((it) => (
          <button
            key={it.key}
            onClick={() => onPick(it.key)}
            style={{
              textAlign: "left",
              background: "var(--paper)",
              border: "3px solid var(--ink)",
              boxShadow: "5px 5px 0 var(--ink)",
              padding: 18,
              cursor: "pointer",
              display: "grid",
              gridTemplateColumns: "48px 1fr",
              gap: 14,
              alignItems: "center",
              transition: "transform 0.1s, box-shadow 0.1s",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = "translate(-2px,-2px)";
              e.currentTarget.style.boxShadow = "7px 7px 0 var(--accent)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = "none";
              e.currentTarget.style.boxShadow = "5px 5px 0 var(--ink)";
            }}
          >
            <div
              style={{
                border: "2px solid var(--ink)",
                background: "var(--light)",
                aspectRatio: "1/1",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                padding: 4,
              }}
            >
              <Sprite data={it.sprite} scale={2} />
            </div>
            <div>
              <div
                style={{
                  fontFamily: "'Old Standard TT',serif",
                  fontSize: 22,
                  fontWeight: 700,
                  lineHeight: 1.15,
                  marginBottom: 4,
                }}
              >
                {it.label}
              </div>
              <div
                style={{
                  fontFamily: "'VT323',monospace",
                  fontSize: 18,
                  color: "var(--dark)",
                }}
              >
                {it.blurb} →
              </div>
            </div>
          </button>
        ))}
      </div>
    </>
  );
}

function FormFlow({ intent, flow, answers, setAns, onBack, onSubmit }) {
  const intentMeta = INTENTS.find((i) => i.key === intent);
  return (
    <>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 12,
          marginBottom: 20,
        }}
      >
        <button
          onClick={onBack}
          style={{
            fontFamily: "'Press Start 2P',monospace",
            fontSize: 9,
            letterSpacing: "0.1em",
            background: "transparent",
            border: "2px solid var(--ink)",
            padding: "6px 10px",
            cursor: "pointer",
            textTransform: "uppercase",
          }}
        >
          ← Change
        </button>
        <div
          style={{
            fontFamily: "'Press Start 2P',monospace",
            fontSize: 10,
            letterSpacing: "0.15em",
            color: "var(--dark)",
          }}
        >
          STEP 2 OF 2 — {intentMeta.label.toUpperCase()}
        </div>
      </div>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          onSubmit();
        }}
        style={{ display: "grid", gap: 22, maxWidth: 720 }}
      >
        {flow.map((q) => (
          <FormField
            key={q.id}
            q={q}
            value={answers[q.id]}
            onChange={(v) => setAns(q.id, v)}
          />
        ))}
        <div
          style={{ display: "flex", gap: 12, marginTop: 8, flexWrap: "wrap" }}
        >
          <button type="submit" style={bigSendStyle}>
            Send to Lewis →
          </button>
          <button
            type="button"
            onClick={onBack}
            style={{
              fontFamily: "'Press Start 2P',monospace",
              fontSize: 11,
              letterSpacing: "0.1em",
              padding: "14px 18px",
              background: "transparent",
              color: "var(--ink)",
              border: "3px solid var(--ink)",
              cursor: "pointer",
              textTransform: "uppercase",
            }}
          >
            Cancel
          </button>
        </div>
        <div
          style={{
            fontFamily: "'Old Standard TT',serif",
            fontSize: 15,
            color: "var(--dark)",
            marginTop: -4,
          }}
        >
          Usually back within 24 hours.
        </div>
      </form>
    </>
  );
}

const subtextStyle = {
  fontFamily: "'Old Standard TT',serif",
  fontSize: 16,
  color: "var(--dark)",
  lineHeight: 1.45,
  marginBottom: 10,
  display: "block",
};

function FormField({ q, value, onChange }) {
  const header = (
    <>
      <span style={labelTextStyle}>{q.label}</span>
      {q.subtext && <span style={subtextStyle}>{q.subtext}</span>}
    </>
  );

  if (q.type === "textarea") {
    return (
      <label style={labelStyle}>
        {header}
        <textarea
          rows={4}
          value={value || ""}
          onChange={(e) => onChange(e.target.value)}
          placeholder={q.placeholder}
          style={{ ...bigInputStyle, resize: "vertical" }}
        />
      </label>
    );
  }
  if (q.type === "choice") {
    if (q.multi) {
      const arr = value || [];
      const toggle = (opt) => {
        if (arr.includes(opt)) onChange(arr.filter((x) => x !== opt));
        else onChange([...arr, opt]);
      };
      return (
        <div>
          <div style={labelTextStyle}>
            {q.label}{" "}
            <span
              style={{
                fontFamily: "'JetBrains Mono',monospace",
                fontSize: 11,
                color: "var(--dark)",
              }}
            >
              (pick any)
            </span>
          </div>
          {q.subtext && <span style={subtextStyle}>{q.subtext}</span>}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {q.options.map((opt) => {
              const on = arr.includes(opt);
              return (
                <button
                  type="button"
                  key={opt}
                  onClick={() => toggle(opt)}
                  style={chipStyle(on)}
                >
                  {opt}
                </button>
              );
            })}
          </div>
        </div>
      );
    }
    return (
      <div>
        {header}
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
          {q.options.map((opt) => (
            <button
              type="button"
              key={opt}
              onClick={() => onChange(opt)}
              style={chipStyle(value === opt)}
            >
              {opt}
            </button>
          ))}
        </div>
      </div>
    );
  }
  return (
    <label style={labelStyle}>
      {header}
      <input
        type={q.type || "text"}
        value={value || ""}
        onChange={(e) => onChange(e.target.value)}
        placeholder={q.placeholder}
        style={bigInputStyle}
      />
    </label>
  );
}

function SubmittedCard({ onReset, intent, answers }) {
  const meta = INTENTS.find((i) => i.key === intent);
  return (
    <div
      style={{
        textAlign: "center",
        padding: "40px 20px",
      }}
    >
      <div
        style={{
          fontFamily: "'Press Start 2P',monospace",
          fontSize: 14,
          color: "var(--accent)",
          letterSpacing: "0.15em",
          marginBottom: 12,
        }}
      >
        ✓ SENT
      </div>
      <h3
        style={{
          fontFamily: "'Old Standard TT',serif",
          fontSize: 42,
          fontWeight: 700,
          margin: "0 0 10px",
          lineHeight: 1,
        }}
      >
        Thanks, {answers.name || "friend"}.
      </h3>
      <p
        style={{
          fontFamily: "'Old Standard TT',serif",
          fontSize: 20,
          maxWidth: 520,
          margin: "0 auto 20px",
          lineHeight: 1.45,
        }}
      >
        I'll come back to you at <b>{answers.email || "your email"}</b> —
        usually within 24 hours. If it's a fit, we'll talk about what that looks
        like.
      </p>
      <button
        onClick={onReset}
        style={{
          fontFamily: "'Press Start 2P',monospace",
          fontSize: 10,
          letterSpacing: "0.1em",
          padding: "10px 14px",
          background: "transparent",
          border: "2px solid var(--ink)",
          cursor: "pointer",
          textTransform: "uppercase",
        }}
      >
        Send another
      </button>
    </div>
  );
}

// Styles for the prominent form
const bigInputStyle = {
  fontFamily: "'Old Standard TT', serif",
  fontSize: 20,
  background: "#fff",
  border: "3px solid var(--ink)",
  padding: "14px 16px",
  color: "var(--ink)",
  width: "100%",
  outline: "none",
  boxSizing: "border-box",
};
const labelStyle = { display: "block" };
const labelTextStyle = {
  display: "block",
  fontFamily: "'Press Start 2P',monospace",
  fontSize: 10,
  letterSpacing: "0.1em",
  textTransform: "uppercase",
  marginBottom: 8,
};
const chipStyle = (active) => ({
  fontFamily: "'Old Standard TT',serif",
  fontSize: 18,
  padding: "10px 14px",
  background: active ? "var(--ink)" : "#fff",
  color: active ? "var(--paper)" : "var(--ink)",
  border: "3px solid var(--ink)",
  cursor: "pointer",
  boxShadow: active ? "none" : "3px 3px 0 var(--ink)",
  transform: active ? "translate(3px,3px)" : "none",
  transition: "all 0.1s",
});
const bigSendStyle = {
  fontFamily: "'Press Start 2P',monospace",
  fontSize: 14,
  letterSpacing: "0.1em",
  padding: "18px 28px",
  background: "var(--accent)",
  color: "#fff",
  border: "3px solid var(--ink)",
  boxShadow: "5px 5px 0 var(--ink)",
  cursor: "pointer",
  textTransform: "uppercase",
};

// --- Feedback form ---
const FEEDBACK_FIELDS = [
  {
    id: "overall",
    label: "Overall — did you get what you came for?",
    type: "choice",
    options: [
      "Yes — exactly what I needed",
      "Mostly — a few gaps but net positive",
      "Partially — useful but not quite there",
      "Not really",
    ],
  },
  {
    id: "best_part",
    label: "What was most useful?",
    type: "textarea",
    placeholder: "The thing you'd tell someone else about.",
  },
  {
    id: "improve",
    label: "What could have been better?",
    subtext: "Be direct. This actually helps.",
    type: "textarea",
    placeholder: "Anything — pace, depth, format, focus.",
  },
  {
    id: "result",
    label: "What's working now that wasn't before?",
    type: "textarea",
    placeholder: "The specific thing that's running, built, or changed.",
  },
  {
    id: "testimonial_ok",
    label: "Can I share your feedback publicly?",
    subtext:
      "First name + outcome only — no surnames, no specifics you haven't approved.",
    type: "choice",
    options: [
      "Yes — you can use it",
      "Yes — but check with me first",
      "No — keep it private",
    ],
  },
  { id: "name", label: "Your name", type: "text", placeholder: "First & last" },
  {
    id: "email",
    label: "Your email",
    type: "email",
    placeholder: "your@email.com",
  },
];

function FeedbackScreen() {
  const [answers, setAnswers] = useS2({});
  const [submitted, setSubmitted] = useS2(false);
  const setAns = (id, v) => setAnswers((a) => ({ ...a, [id]: v }));

  const submit = async () => {
    try {
      await fetch("/api/feedback", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(answers),
      });
    } catch (_) {}
    setSubmitted(true);
  };

  return (
    <section id="feedback" style={{ marginTop: 40 }}>
      <div
        style={{
          background: "var(--ink)",
          color: "var(--paper)",
          border: "4px solid var(--ink)",
          boxShadow: "8px 8px 0 var(--accent)",
          padding: "36px 40px",
        }}
      >
        <div
          style={{
            fontFamily: "'Press Start 2P',monospace",
            fontSize: 11,
            letterSpacing: "0.2em",
            color: "var(--light)",
            marginBottom: 10,
          }}
        >
          FEEDBACK
        </div>
        <h2
          style={{
            margin: 0,
            fontFamily: "'Old Standard TT',serif",
            fontSize: 56,
            fontWeight: 700,
            lineHeight: 0.95,
            letterSpacing: "-0.02em",
          }}
        >
          How did it go?
        </h2>
        <p
          style={{
            fontFamily: "'Old Standard TT',serif",
            fontSize: 20,
            lineHeight: 1.45,
            maxWidth: 560,
            margin: "14px 0 0",
            color: "var(--paper)",
            opacity: 0.9,
          }}
        >
          Two minutes. Honest answers only.
        </p>
      </div>
      <div
        style={{
          background: "var(--paper)",
          border: "4px solid var(--ink)",
          borderTop: "none",
          padding: "32px 40px 40px",
        }}
      >
        {submitted ? (
          <div style={{ textAlign: "center", padding: "40px 20px" }}>
            <div
              style={{
                fontFamily: "'Press Start 2P',monospace",
                fontSize: 14,
                color: "var(--accent)",
                letterSpacing: "0.15em",
                marginBottom: 12,
              }}
            >
              ✓ RECEIVED
            </div>
            <h3
              style={{
                fontFamily: "'Old Standard TT',serif",
                fontSize: 42,
                fontWeight: 700,
                margin: "0 0 10px",
                lineHeight: 1,
              }}
            >
              Thanks, {answers.name || "friend"}.
            </h3>
            <p
              style={{
                fontFamily: "'Old Standard TT',serif",
                fontSize: 20,
                maxWidth: 480,
                margin: "0 auto",
                lineHeight: 1.45,
              }}
            >
              Genuinely appreciated. I read every one of these.
            </p>
          </div>
        ) : (
          <form
            onSubmit={(e) => {
              e.preventDefault();
              submit();
            }}
            style={{ display: "grid", gap: 22, maxWidth: 720 }}
          >
            {FEEDBACK_FIELDS.map((q) => (
              <FormField
                key={q.id}
                q={q}
                value={answers[q.id]}
                onChange={(v) => setAns(q.id, v)}
              />
            ))}
            <div>
              <button type="submit" style={bigSendStyle}>
                Send feedback →
              </button>
            </div>
          </form>
        )}
      </div>
    </section>
  );
}

// --- Footer ---
function Footer() {
  return (
    <footer style={{ marginTop: 60 }}>
      <div
        style={{
          borderTop: "3px double var(--rule)",
          borderBottom: "1px solid var(--rule)",
          padding: "14px 0",
          display: "flex",
          justifyContent: "space-between",
          flexWrap: "wrap",
          gap: 10,
          fontFamily: "'JetBrains Mono',monospace",
          fontSize: 11,
          letterSpacing: "0.1em",
          textTransform: "uppercase",
        }}
      >
        <span>© 2026 · Lewis Jackson Ventures</span>
        <span>London · UK</span>
        <a
          href="/feedback"
          style={{ color: "var(--ink)", textDecoration: "none" }}
        >
          Leave feedback
        </a>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Masthead,
  IntroScreen,
  HeroScreen,
  UpToScreen,
  ChallengeScreen,
  AboutScreen,
  ContactScreen,
  FeedbackScreen,
  Footer,
});