// Zero One Systems — full landing page
const Z1_SKOOL_URL = "https://www.skool.com/zero-one-systems"; // update when Skool page is live

function ZeroOnePage({ onNav }) {
  const ctaStyle = {
    display: "inline-block",
    fontFamily: "'Press Start 2P',monospace",
    fontSize: 14,
    letterSpacing: "0.1em",
    padding: "18px 28px",
    background: "var(--accent)",
    color: "#fff",
    border: "3px solid var(--paper)",
    boxShadow: "5px 5px 0 var(--paper)",
    cursor: "pointer",
    textTransform: "uppercase",
    textDecoration: "none",
  };

  const bodyText = {
    fontFamily: "'Old Standard TT',serif",
    fontSize: 20,
    lineHeight: 1.55,
  };

  return (
    <>
      {/* ── BRAND IDENTITY ── */}
      <section style={{ marginBottom: 0 }}>
        <div
          style={{
            borderTop: "3px double var(--rule)",
            borderBottom: "1px solid var(--rule)",
            padding: "10px 0",
            display: "flex",
            justifyContent: "space-between",
            fontFamily: "'JetBrains Mono',monospace",
            fontSize: 11,
            letterSpacing: "0.12em",
            textTransform: "uppercase",
            color: "var(--ink)",
          }}
        >
          <span>Est. 2026</span>
          <span>A Community · Zero One Systems</span>
          <span>Members Only</span>
        </div>

        <div
          style={{
            position: "relative",
            display: "grid",
            gridTemplateColumns: "auto 1fr",
            gap: 48,
            alignItems: "center",
            padding: "40px 0 36px",
          }}
        >
          {/* Corner crosshairs */}
          {[
            { top: 8, left: 0 },
            { top: 8, right: 0 },
            { bottom: 8, left: 0 },
            { bottom: 8, right: 0 },
          ].map((pos, i) => (
            <div
              key={i}
              style={{
                position: "absolute",
                width: 20,
                height: 20,
                ...pos,
                pointerEvents: "none",
              }}
            >
              <div
                style={{
                  position: "absolute",
                  top: "50%",
                  left: 0,
                  right: 0,
                  height: 1,
                  background: "var(--ink)",
                  transform: "translateY(-50%)",
                }}
              />
              <div
                style={{
                  position: "absolute",
                  left: "50%",
                  top: 0,
                  bottom: 0,
                  width: 1,
                  background: "var(--ink)",
                  transform: "translateX(-50%)",
                }}
              />
              <div
                style={{
                  position: "absolute",
                  top: "50%",
                  left: "50%",
                  transform: "translate(-50%,-50%)",
                  width: 5,
                  height: 5,
                  border: "1px solid var(--ink)",
                  background: "var(--paper)",
                }}
              />
            </div>
          ))}

          {/* 01 Logo */}
          <div
            style={{
              position: "relative",
              background: "var(--light)",
              border: "4px solid var(--ink)",
              width: 220,
              height: 220,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              flexShrink: 0,
            }}
          >
            <div
              style={{
                position: "absolute",
                inset: 8,
                border: "1px solid var(--dark)",
                pointerEvents: "none",
              }}
            />
            {[
              { top: 10, left: 10 },
              { top: 10, right: 10 },
              { bottom: 10, left: 10 },
              { bottom: 10, right: 10 },
            ].map((pos, i) => (
              <div
                key={i}
                style={{
                  position: "absolute",
                  fontFamily: "'JetBrains Mono',monospace",
                  fontSize: 10,
                  color: "var(--dark)",
                  lineHeight: 1,
                  ...pos,
                }}
              >
                [+]
              </div>
            ))}
            <div
              style={{
                position: "absolute",
                inset: 0,
                background:
                  "repeating-linear-gradient(0deg,rgba(0,0,0,0.07) 0px,rgba(0,0,0,0.07) 1px,transparent 1px,transparent 3px)",
                pointerEvents: "none",
              }}
            />
            <div
              style={{
                fontFamily: "'Press Start 2P',monospace",
                fontSize: 64,
                color: "var(--ink)",
                lineHeight: 1,
                letterSpacing: "-0.04em",
                position: "relative",
              }}
            >
              01
            </div>
          </div>

          {/* Brand text */}
          <div>
            <div
              style={{
                fontFamily: "'JetBrains Mono',monospace",
                fontSize: 11,
                letterSpacing: "0.18em",
                color: "var(--dark)",
                marginBottom: 14,
              }}
            >
              — A COMMUNITY —
            </div>
            <div
              style={{
                fontFamily: "'Press Start 2P',monospace",
                fontSize: 36,
                color: "var(--ink)",
                lineHeight: 1.4,
                letterSpacing: "0.02em",
                marginBottom: 24,
              }}
            >
              ZERO
              <br />
              ONE
              <br />
              SYSTEMS
            </div>
            <div
              style={{
                fontFamily: "'Old Standard TT',serif",
                fontStyle: "italic",
                fontSize: 22,
                color: "var(--dark)",
              }}
            >
              Build, ship, compound.
            </div>
          </div>
        </div>

        <div
          style={{
            borderTop: "1px solid var(--rule)",
            borderBottom: "3px double var(--rule)",
            padding: "10px 0",
            textAlign: "center",
            fontFamily: "'JetBrains Mono',monospace",
            fontSize: 11,
            letterSpacing: "0.15em",
            textTransform: "uppercase",
            color: "var(--ink)",
          }}
        >
          01 — BUILD · SHIP · COMPOUND
        </div>
      </section>

      {/* ── SALES HERO ── */}
      <section style={{ marginTop: 32 }}>
        <div
          style={{
            background: "var(--ink)",
            color: "var(--paper)",
            border: "4px solid var(--ink)",
            boxShadow: "8px 8px 0 var(--accent)",
            padding: "56px 40px 48px",
          }}
        >
          <div
            style={{
              fontFamily: "'Press Start 2P',monospace",
              fontSize: 10,
              letterSpacing: "0.2em",
              color: "var(--light)",
              marginBottom: 16,
            }}
          >
            FOUNDING MEMBER OFFER
          </div>
          <h1
            style={{
              margin: 0,
              fontFamily: "'Old Standard TT',serif",
              fontSize: 72,
              fontWeight: 700,
              lineHeight: 0.95,
              letterSpacing: "-0.02em",
              maxWidth: 760,
            }}
          >
            Your first AI agent. Running in 90 days. Or you don't pay.
          </h1>
          <p
            style={{
              fontFamily: "'Old Standard TT',serif",
              fontSize: 22,
              lineHeight: 1.45,
              maxWidth: 620,
              margin: "20px 0 36px",
              opacity: 0.9,
            }}
          >
            Zero One Systems is the structured community for business owners and
            investors who know AI matters — and have never built anything with
            it.
          </p>
          <a
            href={Z1_SKOOL_URL}
            target="_blank"
            rel="noopener noreferrer"
            style={ctaStyle}
          >
            Join Zero One Systems →
          </a>
        </div>

        {/* Proof bar */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            border: "4px solid var(--ink)",
            borderTop: "none",
            background: "var(--paper)",
          }}
        >
          {[
            { value: "186,000", label: "YouTube subscribers" },
            { value: "£100k+", label: "In one month, solo" },
            { value: "32", label: "Live AI agents built" },
            { value: "90 days", label: "Guarantee or full refund" },
          ].map((s, i) => (
            <div
              key={i}
              style={{
                padding: "24px 20px",
                borderRight: i < 3 ? "1px solid var(--ink)" : "none",
                textAlign: "center",
              }}
            >
              <div
                style={{
                  fontFamily: "'Press Start 2P',monospace",
                  fontSize: 16,
                  color: "var(--ink)",
                  marginBottom: 8,
                }}
              >
                {s.value}
              </div>
              <div
                style={{
                  fontFamily: "'VT323',monospace",
                  fontSize: 20,
                  color: "var(--dark)",
                }}
              >
                {s.label}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── PROBLEM ── */}
      <SectionHead
        kicker="The Problem"
        title="Most people have been watching AI for two years."
      />
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 32,
          marginTop: 8,
        }}
      >
        <div style={bodyText}>
          <p style={{ marginTop: 0 }}>
            They read the articles. Watch the videos. Open ChatGPT a few times.
            Close the tab.
          </p>
          <p>
            Not because they're not smart enough. Because nobody showed them the
            system.
          </p>
          <p style={{ marginBottom: 0 }}>
            There's a gap between knowing AI matters and having an agent that
            actually runs. Most people live in that gap forever.
          </p>
        </div>
        <GBScreen>
          <div
            style={{
              fontFamily: "'Press Start 2P',monospace",
              fontSize: 10,
              letterSpacing: "0.1em",
              marginBottom: 14,
              color: "var(--ink)",
            }}
          >
            THE GAP
          </div>
          {[
            "You know it's important",
            "You've never built anything",
            "Tutorials break at step 4",
            "No structure. Just more content.",
            "Everyone else is moving.",
          ].map((line, i) => (
            <div
              key={i}
              style={{
                fontFamily: "'VT323',monospace",
                fontSize: 21,
                color: "var(--ink)",
                padding: "7px 0",
                borderBottom: i < 4 ? "1px dotted var(--dark)" : "none",
              }}
            >
              ▸ {line}
            </div>
          ))}
        </GBScreen>
      </div>

      {/* ── WHO IT'S FOR ── */}
      <SectionHead
        kicker="Is This For You?"
        title="Three types of people belong here."
      />
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr",
          gap: 20,
          marginBottom: 20,
        }}
      >
        {[
          {
            num: "01",
            head: "You know AI matters. You haven't built anything.",
            body: "You've been watching for two years. You read the articles. Watched the videos. Played with ChatGPT. Never built anything. You feel like you're getting left behind.",
          },
          {
            num: "02",
            head: "You're capable. Tutorials keep breaking.",
            body: "You're not a developer, but you're not afraid of a computer. You've followed a tutorial. It fell apart at step four. You need structure — not another YouTube video and a comment section of equally lost people.",
          },
          {
            num: "03",
            head: "You run a business or a portfolio.",
            body: "You can see exactly where an agent saves you hours. You just need someone who's actually done it to show you the system.",
          },
        ].map((card) => (
          <div
            key={card.num}
            style={{
              border: "3px solid var(--ink)",
              boxShadow: "5px 5px 0 var(--ink)",
              background: "var(--paper)",
              padding: 24,
            }}
          >
            <div
              style={{
                fontFamily: "'Press Start 2P',monospace",
                fontSize: 20,
                color: "var(--light)",
                background: "var(--ink)",
                display: "inline-block",
                padding: "4px 10px",
                marginBottom: 14,
              }}
            >
              {card.num}
            </div>
            <div
              style={{
                fontFamily: "'Old Standard TT',serif",
                fontSize: 20,
                fontWeight: 700,
                lineHeight: 1.3,
                marginBottom: 10,
              }}
            >
              {card.head}
            </div>
            <div
              style={{
                fontFamily: "'Old Standard TT',serif",
                fontSize: 17,
                lineHeight: 1.5,
                color: "var(--dark)",
              }}
            >
              {card.body}
            </div>
          </div>
        ))}
      </div>

      <div
        style={{
          border: "3px solid var(--ink)",
          background: "var(--paper-2)",
          padding: "18px 28px",
          display: "flex",
          gap: 20,
          alignItems: "start",
        }}
      >
        <div
          style={{
            fontFamily: "'Press Start 2P',monospace",
            fontSize: 9,
            letterSpacing: "0.1em",
            color: "var(--dark)",
            flexShrink: 0,
            paddingTop: 3,
            whiteSpace: "nowrap",
          }}
        >
          NOT FOR YOU IF:
        </div>
        <div
          style={{
            fontFamily: "'Old Standard TT',serif",
            fontSize: 18,
            lineHeight: 1.5,
          }}
        >
          You need someone to do it entirely for you — that's the{" "}
          <a
            href="https://www.workwithlewis.com"
            style={{ color: "var(--ink)" }}
            onClick={(e) => {
              e.preventDefault();
              onNav && onNav("home");
            }}
          >
            £2,500 1:1 consulting
          </a>
          . Zero One Systems is for people willing to sit down and build. Once.
          So they never have to do the manual version forever.
        </div>
      </div>

      {/* ── AUTHORITY ── */}
      <SectionHead
        kicker="Why Lewis"
        title="My business runs like 10–15 people. There is one person doing it."
      />
      <div
        style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 36 }}
      >
        <div style={bodyText}>
          <p style={{ marginTop: 0 }}>
            I have agents that respond to my emails. Book meetings. Send
            invoices. Negotiate brand deals. Generate content ideas. Manage my
            investment portfolio. Scrape eBay at 3am for deals inside my trading
            criteria.
          </p>
          <p>
            I built a 32-agent AI trading firm — agents that research
            strategies, backtest them, execute real trades, and learn from what
            happens. I've made every mistake you can make. Agents that break
            overnight. Agents that go rogue. Agents so badly instructed they
            were useless.
          </p>
          <p style={{ marginBottom: 0 }}>
            I've also grown a one-person business to just over £100,000 in a
            single month. The automation infrastructure underneath it made that
            possible.
          </p>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 12,
            alignContent: "start",
          }}
        >
          <StatBlock value="186k" label="YouTube subs" />
          <StatBlock value="£100k+" label="One month" />
          <StatBlock value="32" label="Live agents" />
          <StatBlock value="5 yrs" label="Building public" />
        </div>
      </div>

      <GBScreen style={{ marginTop: 24 }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "auto 1fr",
            gap: 24,
            alignItems: "center",
          }}
        >
          <div>
            <div
              style={{
                fontFamily: "'Press Start 2P',monospace",
                fontSize: 10,
                letterSpacing: "0.1em",
                color: "var(--ink)",
                marginBottom: 8,
              }}
            >
              LIVE NOW
            </div>
            <div
              style={{
                fontFamily: "'Press Start 2P',monospace",
                fontSize: 20,
                color: "var(--ink)",
              }}
            >
              £50k → £500k
            </div>
          </div>
          <div
            style={{
              fontFamily: "'Old Standard TT',serif",
              fontSize: 18,
              lineHeight: 1.5,
            }}
          >
            The 10x Challenge — turning £50,000 into £500,000 in 12 months.
            Every trade on camera. No hidden positions. No edited reality. This
            is the proof that the systems I'm teaching aren't theoretical.
          </div>
        </div>
      </GBScreen>

      {/* ── DAY ONE ── */}
      <SectionHead
        kicker="Day One"
        title="In under an hour, you build something that works."
      />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
        <div style={bodyText}>
          <p style={{ marginTop: 0 }}>
            Your personal daily dashboard. Inbox priorities. Market watchlist.
            Morning brief. Built from a single prompt.
          </p>
          <p>It works. It looks good.</p>
          <p style={{ marginBottom: 0 }}>
            And then I tell you:{" "}
            <em>
              "That took you 45 minutes. It does one job and it doesn't know
              you. By day 90, your agent will know who you are, how you think,
              what you're trying to achieve — and it'll be making real decisions
              on your behalf. What you just built is the proof it's possible.
              The next 89 days is the distance between those two things."
            </em>
          </p>
        </div>
        <DialogBox title="Day 1 → Day 90">
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div>
              <div
                style={{
                  fontFamily: "'Press Start 2P',monospace",
                  fontSize: 9,
                  color: "var(--dark)",
                  marginBottom: 6,
                }}
              >
                DAY 1
              </div>
              <div>
                Personal dashboard from one prompt. Under an hour. Works
                immediately.
              </div>
            </div>
            <div
              style={{ borderTop: "1px dotted var(--dark)", paddingTop: 14 }}
            >
              <div
                style={{
                  fontFamily: "'Press Start 2P',monospace",
                  fontSize: 9,
                  color: "var(--dark)",
                  marginBottom: 6,
                }}
              >
                DAY 90
              </div>
              <div>
                Your agent knows who you are. How you think. What you're trying
                to build. It makes real decisions on your behalf.
              </div>
            </div>
            <div
              style={{
                borderTop: "1px dotted var(--dark)",
                paddingTop: 14,
                fontFamily: "'Press Start 2P',monospace",
                fontSize: 9,
                color: "var(--accent)",
              }}
            >
              THE GAP IS WHAT WE BUILD.
            </div>
          </div>
        </DialogBox>
      </div>

      {/* ── MECHANISM ── */}
      <SectionHead
        kicker="How It Works"
        title="Four stages. One outcome."
        byline="Your first AI agent, running."
      />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        {[
          {
            num: "01",
            title: "Architecture",
            sub: "Build your second brain",
            body: "You build your claude.md: a document that teaches the system who you are — how you think, your goals, your values, what to never do. Every agent you build from this point already knows who it's working for. Most people skip this. That's why their agents underperform.",
          },
          {
            num: "02",
            title: "Infrastructure",
            sub: "Map what you want to automate",
            body: "You write an SOP — every step, every decision, every output. This turns a vague idea into a buildable specification. This is where amateurs guess. You won't.",
          },
          {
            num: "03",
            title: "Build",
            sub: "Install the agent",
            body: "You give it tools, context, and autonomy to execute the SOP you wrote. You learn how to give an agent real independence without losing control of what it does.",
          },
          {
            num: "04",
            title: "Iterate",
            sub: "Run. Observe. Compound.",
            body: "You run it. You observe. You improve it. Then you build the next one. Then the one after that. They start to work as a team. This is where it compounds.",
          },
        ].map((stage) => (
          <div
            key={stage.num}
            style={{
              border: "3px solid var(--ink)",
              background: "var(--paper)",
              boxShadow: "5px 5px 0 var(--ink)",
              padding: 24,
              display: "grid",
              gridTemplateColumns: "auto 1fr",
              gap: 18,
            }}
          >
            <div
              style={{
                fontFamily: "'Press Start 2P',monospace",
                fontSize: 26,
                color: "var(--light)",
                background: "var(--ink)",
                padding: "8px 10px",
                lineHeight: 1,
                alignSelf: "start",
              }}
            >
              {stage.num}
            </div>
            <div>
              <div
                style={{
                  fontFamily: "'Press Start 2P',monospace",
                  fontSize: 11,
                  letterSpacing: "0.05em",
                  marginBottom: 4,
                }}
              >
                {stage.title}
              </div>
              <div
                style={{
                  fontFamily: "'VT323',monospace",
                  fontSize: 20,
                  color: "var(--dark)",
                  marginBottom: 10,
                }}
              >
                {stage.sub}
              </div>
              <div
                style={{
                  fontFamily: "'Old Standard TT',serif",
                  fontSize: 17,
                  lineHeight: 1.5,
                }}
              >
                {stage.body}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* ── OFFER STACK ── */}
      <SectionHead
        kicker="What You Get"
        title="Everything inside Zero One Systems."
      />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        {[
          {
            tag: "Immediate",
            title: "One-shot prompt library",
            body: "Lewis's personal collection. Battle-tested in his own business and with 1:1 consulting clients. Copy, paste, adjust, deploy. No starting from scratch.",
          },
          {
            tag: "Structured",
            title: "90-day roadmap",
            body: "Step-by-step modules from zero to your first running agent. Not a content dump. Every lesson builds on the last. You can't get lost.",
          },
          {
            tag: "Copy-paste",
            title: "SOPs, templates, and frameworks",
            body: "The exact documents behind a 15-person solo operation. Folder structures. System prompts. Repeatable processes. All of it.",
          },
          {
            tag: "Daily",
            title: "Q&A with Lewis",
            body: "Every day, Lewis goes through the community and answers questions. Directly. If you're stuck, he wants to know about it.",
          },
          {
            tag: "Monthly",
            title: "Live roast call",
            body: "Once a month, members bring their agent setups to be torn apart live, in front of the group. Practical. Uncomfortable. Worth more than any tutorial.",
          },
          {
            tag: "24/7",
            title: "AI customer success agent",
            body: "Instant answers around the clock. Trained on the curriculum, tools, and processes. When it can't answer, it flags to Lewis. You don't wait.",
          },
        ].map((item, i) => (
          <div
            key={i}
            style={{
              border: "3px solid var(--ink)",
              background: "var(--paper)",
              padding: 20,
              display: "grid",
              gridTemplateColumns: "auto 1fr",
              gap: 16,
              alignItems: "start",
            }}
          >
            <div
              style={{
                fontFamily: "'Press Start 2P',monospace",
                fontSize: 8,
                color: "var(--light)",
                background: "var(--ink)",
                padding: "4px 7px",
                whiteSpace: "nowrap",
                alignSelf: "start",
              }}
            >
              {item.tag}
            </div>
            <div>
              <div
                style={{
                  fontFamily: "'Old Standard TT',serif",
                  fontSize: 20,
                  fontWeight: 700,
                  marginBottom: 6,
                }}
              >
                {item.title}
              </div>
              <div
                style={{
                  fontFamily: "'Old Standard TT',serif",
                  fontSize: 16,
                  lineHeight: 1.5,
                  color: "var(--dark)",
                }}
              >
                {item.body}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* ── GUARANTEE ── */}
      <div
        style={{
          background: "var(--ink)",
          color: "var(--paper)",
          border: "4px solid var(--ink)",
          boxShadow: "8px 8px 0 var(--accent)",
          padding: "40px",
          marginTop: 48,
          display: "grid",
          gridTemplateColumns: "auto 1fr",
          gap: 36,
          alignItems: "center",
        }}
      >
        <div
          style={{
            fontFamily: "'Press Start 2P',monospace",
            fontSize: 56,
            color: "var(--light)",
            lineHeight: 1,
            borderRight: "3px solid var(--dark)",
            paddingRight: 36,
          }}
        >
          90
        </div>
        <div>
          <div
            style={{
              fontFamily: "'Press Start 2P',monospace",
              fontSize: 10,
              letterSpacing: "0.2em",
              color: "var(--light)",
              marginBottom: 12,
            }}
          >
            THE GUARANTEE
          </div>
          <h2
            style={{
              margin: 0,
              fontFamily: "'Old Standard TT',serif",
              fontSize: 40,
              fontWeight: 700,
              lineHeight: 1.05,
              letterSpacing: "-0.01em",
            }}
          >
            Build your first AI agent in 90 days — or every penny back.
          </h2>
          <p
            style={{
              fontFamily: "'Old Standard TT',serif",
              fontSize: 19,
              lineHeight: 1.5,
              margin: "14px 0 0",
              opacity: 0.9,
            }}
          >
            One condition: show the work. Follow the roadmap. Engage with the
            program. If you do those two things and your agent isn't running by
            day 90 — something went wrong with the program, not with you. Lewis
            refunds everything.
          </p>
        </div>
      </div>

      {/* ── PRICE ── */}
      <SectionHead
        kicker="Founding Member Pricing"
        title="Think about what 2 hours a day is worth."
      />
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1.3fr 1fr",
          gap: 40,
          alignItems: "start",
        }}
      >
        <div style={bodyText}>
          <p style={{ marginTop: 0 }}>
            If your first agent saves you 2 hours a day — on email, research,
            scheduling, or reporting — that's 60 hours a month.
          </p>
          <p>At £50 an hour, that's £3,000 a month. Starting in 90 days.</p>
          <p>
            The real ROI isn't the first agent. It's the skill. Once you can
            build one, you can build ten. Once you can build ten, you can
            delegate entire workflows.
          </p>
          <p style={{ marginBottom: 0, fontWeight: 700 }}>
            The compounding effect of learning this — while most people are
            still watching videos about it — is one of the highest-return
            investments of your time that exists right now.
          </p>
        </div>
        <div>
          <GBScreen>
            <div
              style={{
                fontFamily: "'Press Start 2P',monospace",
                fontSize: 9,
                letterSpacing: "0.1em",
                marginBottom: 18,
                color: "var(--ink)",
              }}
            >
              FOUNDING MEMBER
            </div>
            <div
              style={{
                fontFamily: "'Press Start 2P',monospace",
                fontSize: 32,
                color: "var(--ink)",
                marginBottom: 4,
              }}
            >
              $59
            </div>
            <div
              style={{
                fontFamily: "'VT323',monospace",
                fontSize: 22,
                color: "var(--dark)",
                marginBottom: 22,
              }}
            >
              per month
            </div>
            <div
              style={{
                borderTop: "1px solid var(--dark)",
                paddingTop: 16,
                marginBottom: 18,
              }}
            >
              <div
                style={{
                  fontFamily: "'Press Start 2P',monospace",
                  fontSize: 24,
                  color: "var(--ink)",
                  marginBottom: 4,
                }}
              >
                $590
              </div>
              <div
                style={{
                  fontFamily: "'VT323',monospace",
                  fontSize: 20,
                  color: "var(--dark)",
                }}
              >
                per year — two months free
              </div>
            </div>
            <div
              style={{
                fontFamily: "'Old Standard TT',serif",
                fontSize: 16,
                color: "var(--ink)",
                lineHeight: 1.5,
                borderTop: "1px solid var(--dark)",
                paddingTop: 14,
              }}
            >
              Every 100 members: the price goes up. Permanently. The first 100
              people lock in their rate for life.
            </div>
          </GBScreen>
          <a
            href={Z1_SKOOL_URL}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              ...ctaStyle,
              border: "3px solid var(--ink)",
              boxShadow: "5px 5px 0 var(--ink)",
              marginTop: 20,
              display: "block",
              textAlign: "center",
            }}
          >
            Join Zero One Systems →
          </a>
        </div>
      </div>

      {/* ── FINAL CTA ── */}
      <div
        style={{
          background: "var(--ink)",
          color: "var(--paper)",
          border: "4px solid var(--ink)",
          marginTop: 56,
          padding: "56px 40px",
          textAlign: "center",
        }}
      >
        <div
          style={{
            fontFamily: "'Press Start 2P',monospace",
            fontSize: 10,
            letterSpacing: "0.2em",
            color: "var(--light)",
            marginBottom: 14,
          }}
        >
          READY TO BUILD?
        </div>
        <h2
          style={{
            margin: "0 0 10px",
            fontFamily: "'Old Standard TT',serif",
            fontSize: 64,
            fontWeight: 700,
            lineHeight: 0.95,
            letterSpacing: "-0.02em",
          }}
        >
          Zero One Systems.
        </h2>
        <p
          style={{
            fontFamily: "'VT323',monospace",
            fontSize: 26,
            color: "var(--light)",
            margin: "0 0 36px",
          }}
        >
          Your first agent. Running. In 90 days.
        </p>
        <a
          href={Z1_SKOOL_URL}
          target="_blank"
          rel="noopener noreferrer"
          style={{ ...ctaStyle, fontSize: 16, padding: "22px 36px" }}
        >
          Join Zero One Systems →
        </a>
        <div
          style={{
            fontFamily: "'Old Standard TT',serif",
            fontSize: 16,
            color: "var(--paper)",
            opacity: 0.65,
            marginTop: 18,
          }}
        >
          $59/month · $590/year · 90-day money-back guarantee
        </div>
      </div>
    </>
  );
}

Object.assign(window, { ZeroOnePage });
