const { useEffect, useMemo, useRef, useState, useCallback } = React;

// =========================================================
// useIsMobile hook
// =========================================================
function useIsMobile() {
  const [mobile, setMobile] = useState(() => typeof window !== "undefined" && window.innerWidth < 768);
  useEffect(() => {
    const check = () => setMobile(window.innerWidth < 768);
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
  }, []);
  return mobile;
}

// =========================================================
// VIDEO MODAL
// =========================================================
function VideoModal({ onClose }) {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setVisible(true), 30);
    const onKey = (e) => e.key === "Escape" && dismiss();
    window.addEventListener("keydown", onKey);
    return () => { clearTimeout(t); window.removeEventListener("keydown", onKey); };
  }, []);

  const dismiss = () => {
    setVisible(false);
    setTimeout(onClose, 350);
  };

  return (
    <>
      <div onClick={dismiss} style={{
        position: "fixed", inset: 0, zIndex: 300,
        background: "rgba(0,0,0,.85)", backdropFilter: "blur(6px)",
        opacity: visible ? 1 : 0, transition: "opacity .35s ease",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <div
          onClick={(e) => e.stopPropagation()}
          style={{
            width: "min(900px, 92vw)",
            opacity: visible ? 1 : 0,
            transform: visible ? "scale(1) translateY(0)" : "scale(0.96) translateY(16px)",
            transition: "opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1)",
          }}
        >
          {/* Video frame */}
          <div style={{
            position: "relative", paddingBottom: "56.25%",
            background: "var(--bg)", border: "1px solid var(--rule-2)",
            borderRadius: 16, overflow: "hidden",
          }}>
            {/* Placeholder — swap src for real embed */}
            <div style={{
              position: "absolute", inset: 0,
              display: "flex", flexDirection: "column",
              alignItems: "center", justifyContent: "center", gap: 20,
              background: "repeating-linear-gradient(135deg, #1a1a18 0 18px, transparent 18px 36px), #0e0e0c",
            }}>
              <div style={{
                width: 80, height: 80, borderRadius: 999,
                background: "var(--accent)", display: "flex",
                alignItems: "center", justifyContent: "center",
              }}>
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
                  <path d="M10 6L24 14L10 22V6Z" fill="var(--accent-ink)" />
                </svg>
              </div>
              <div className="mono" style={{ color: "var(--fg-mute)" }}>
                [ VIDEO PLACEHOLDER — EMBED YOUR LOOM / VIMEO / YOUTUBE ]
              </div>
            </div>
          </div>
          {/* Caption row */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 18 }}>
            <div>
              <div className="display" style={{ fontSize: 22, textTransform: "uppercase" }}>
                How The Exitable Business System Works
              </div>
              <div className="mono" style={{ color: "var(--fg-mute)", marginTop: 6 }}>
                12 MIN · THE FULL WALKTHROUGH
              </div>
            </div>
            <div style={{ display: "flex", gap: 12 }}>
              <Btn variant="ghost" size="md" onClick={dismiss}>Close</Btn>
              <Btn variant="accent" as="a" href="system.html" size="md">
                Explore the system <Arrow size={12} />
              </Btn>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// =========================================================
// WATCH BTN — opens video modal
// =========================================================
function WatchBtn() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        onClick={() => setOpen(true)}
        style={{
          display: "inline-flex", alignItems: "center", gap: 14,
          background: "none", border: "none", cursor: "pointer",
          color: "var(--fg)", padding: 0,
        }}
      >
        {/* Play circle */}
        <span style={{
          width: 48, height: 48, borderRadius: 999,
          border: "1.5px solid var(--fg)",
          display: "flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0,
          transition: "background .2s ease, border-color .2s ease",
        }}
          onMouseEnter={(e) => { e.currentTarget.style.background = "var(--accent)"; e.currentTarget.style.borderColor = "var(--accent)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = "none"; e.currentTarget.style.borderColor = "var(--fg)"; }}
        >
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M3 2L13 7L3 12V2Z" fill="currentColor" />
          </svg>
        </span>
        <span style={{ display: "flex", flexDirection: "column", gap: 2, textAlign: "left" }}>
          <span style={{ fontSize: 15, fontWeight: 600, letterSpacing: "-0.01em" }}>Watch how it works</span>
          <span className="mono" style={{ color: "var(--fg-mute)" }}>12 min · The Exitable Business System</span>
        </span>
      </button>
      {open && <VideoModal onClose={() => setOpen(false)} />}
    </>
  );
}

// =========================================================
// NAV
// =========================================================
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const isMobile = useIsMobile();

  useEffect(() => {
    const s = () => setScrolled(window.scrollY > 24);
    s(); window.addEventListener("scroll", s, { passive: true });
    return () => window.removeEventListener("scroll", s);
  }, []);

  return (
    <>
      <div style={{
        position: "sticky", top: 0, zIndex: 40,
        background: scrolled || menuOpen ? "color-mix(in oklab, var(--bg) 95%, transparent)" : "transparent",
        backdropFilter: scrolled || menuOpen ? "blur(14px)" : "none",
        borderBottom: scrolled || menuOpen ? "1px solid var(--rule)" : "1px solid transparent",
        transition: "all .25s ease",
      }}>
        <Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: isMobile ? 60 : 72 }}>
          <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <LogoMark />
            <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: isMobile ? 18 : 22, letterSpacing: "-0.02em" }}>
              EXITABLE
            </span>
          </a>

          {isMobile ? (
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <Btn variant="accent" as="a" href="#call" size="md" style={{ height: 40, padding: "0 16px", fontSize: 13 }}>
                Book a call <Arrow size={11} />
              </Btn>
              <button
                onClick={() => setMenuOpen(o => !o)}
                style={{ width: 40, height: 40, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 5, background: "none", border: "1px solid var(--rule-2)", borderRadius: 8 }}
              >
                <span style={{ width: 18, height: 1.5, background: "var(--fg)", transition: "transform .25s, opacity .25s", transform: menuOpen ? "rotate(45deg) translate(2px, 4.5px)" : "none" }} />
                <span style={{ width: 18, height: 1.5, background: "var(--fg)", opacity: menuOpen ? 0 : 1, transition: "opacity .25s" }} />
                <span style={{ width: 18, height: 1.5, background: "var(--fg)", transition: "transform .25s, opacity .25s", transform: menuOpen ? "rotate(-45deg) translate(2px, -4.5px)" : "none" }} />
              </button>
            </div>
          ) : (
            <>
              <nav style={{ display: "flex", alignItems: "center", gap: 32 }}>
                {[["How we do it","#method"],["Work with us","#program"],["FAQ","#faq"]].map(([label,href]) => (
                  <a key={label} href={href} style={{ fontSize: 14, color: "var(--fg-mute)", fontWeight: 500 }}>
                    {label}
                  </a>
                ))}
              </nav>
              <Btn variant="accent" as="a" href="#call" size="md">
                Book a call <Arrow size={12} />
              </Btn>
            </>
          )}
        </Container>

        {/* Mobile dropdown menu */}
        {isMobile && (
          <div style={{
            maxHeight: menuOpen ? 300 : 0, overflow: "hidden",
            transition: "max-height .35s cubic-bezier(.4,0,.2,1)",
            borderTop: menuOpen ? "1px solid var(--rule)" : "none",
          }}>
            <Container>
              <div style={{ display: "flex", flexDirection: "column", padding: "16px 0 20px" }}>
                {[["How we do it","#method"],["Work with us","#program"],["FAQ","#faq"]].map(([label,href]) => (
                  <a key={label} href={href} onClick={() => setMenuOpen(false)}
                    style={{ fontSize: 18, fontWeight: 600, padding: "14px 0", borderBottom: "1px solid var(--rule)", color: "var(--fg)", letterSpacing: "-0.01em" }}>
                    {label}
                  </a>
                ))}
              </div>
            </Container>
          </div>
        )}
      </div>
    </>
  );
}
function LogoMark() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <rect x="1" y="1" width="30" height="30" rx="8" fill="var(--accent)" />
      <path d="M10 22L22 10M22 10H13M22 10V19" stroke="var(--accent-ink)" strokeWidth="2" strokeLinecap="square" />
    </svg>
  );
}

// =========================================================
// HERO — MANIFESTO (default, bold typographic)
// =========================================================
function HeroManifesto() {
  const isMobile = useIsMobile();

  if (isMobile) {
    return (
      <section id="top" style={{ position: "relative", paddingTop: 32, paddingBottom: 48, overflow: "hidden" }}>
        <Container>
          <Reveal>
            <Kicker style={{ marginBottom: 28 }}>For owner-led businesses doing £5M–£75M</Kicker>
          </Reveal>
          <h1 className="display" style={{ fontSize: "clamp(56px, 17vw, 88px)", margin: "0 0 24px", textTransform: "uppercase", lineHeight: 0.9 }}>
            <Reveal delay={50}><span style={{ display: "block" }}>Build a</span></Reveal>
            <Reveal delay={100}><span style={{ display: "block" }}>business</span></Reveal>
            <Reveal delay={160}><span style={{ display: "block" }}>that runs</span></Reveal>
            <Reveal delay={220}>
              <span style={{ display: "block" }}>
                <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>without</span> you.
              </span>
            </Reveal>
          </h1>
          <Reveal delay={300}>
            <p style={{ fontSize: 18, lineHeight: 1.55, margin: "0 0 28px", color: "var(--fg)" }}>
              We help owners step out of the day-to-day, grow profit, and build a business that no longer depends on them — so it's worth more and easier to exit when the time is right.
            </p>
          </Reveal>
          <Reveal delay={380}>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <Btn variant="accent" as="a" href="#call" style={{ justifyContent: "center", width: "100%" }}>
                Book a strategy call <Arrow size={14} />
              </Btn>
              <Btn variant="ghost" as="a" href="#method" style={{ justifyContent: "center", width: "100%" }}>
                See how it works
              </Btn>
            </div>
          </Reveal>

          {/* Mobile info strip — 2 col */}
          <div style={{ marginTop: 48, border: "1px solid var(--rule-2)", borderRadius: 16, overflow: "hidden" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
              {[
                { t: "Built for owner-led businesses", d: "For companies where too much depends on the founder" },
                { t: "£5M–£75M revenue focus", d: "Where owner-dependency and missed profit becomes costly" },
                { t: "Choose your starting point", d: "Audit, sprint, 12-month programme, or growth support" },
                { t: "Implementation, not just advice", d: "Clear scope, hands-on delivery, measurable progress" },
              ].map((s, i) => (
                <div key={i} style={{
                  padding: "24px 18px",
                  borderRight: i % 2 === 0 ? "1px solid var(--rule-2)" : 0,
                  borderBottom: i < 2 ? "1px solid var(--rule-2)" : 0,
                  background: "var(--card)",
                }}>
                  <div className="display" style={{ fontSize: 15, lineHeight: 1.2, marginBottom: 8 }}>{s.t}</div>
                  <div style={{ fontSize: 12, color: "var(--fg-mute)", lineHeight: 1.5 }}>{s.d}</div>
                </div>
              ))}
            </div>
          </div>
        </Container>
      </section>
    );
  }

  return (
    <section id="top" style={{ position: "relative", paddingTop: 40, paddingBottom: 64, overflow: "hidden" }}>
      <Container>
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingBottom: 48 }}>
            <Kicker>For owner-led businesses doing £5M–£75M</Kicker>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 48px", alignItems: "end" }}>
          <div>
            <h1 className="display hero-title" style={{ fontSize: "clamp(52px, 7.5vw, 128px)", margin: 0, textTransform: "uppercase", lineHeight: 0.92 }}>
              <Reveal delay={50}><span style={{ display: "block" }}>Build a</span></Reveal>
              <Reveal delay={100}><span style={{ display: "block" }}>business</span></Reveal>
              <Reveal delay={160}><span style={{ display: "block" }}>that runs</span></Reveal>
              <Reveal delay={220}>
                <span style={{ display: "block" }}>
                  <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>without</span> you.
                </span>
              </Reveal>
            </h1>
          </div>
          <div style={{ paddingBottom: 8 }}>
            <Reveal delay={300}>
              <p style={{ fontSize: 20, lineHeight: 1.5, margin: "0 0 28px", color: "var(--fg)", maxWidth: "36ch" }}>
                We help owners step out of the day-to-day, grow profit, and build a business that no longer depends on them — so it's worth more and easier to exit when the time is right.
              </p>
            </Reveal>
            <Reveal delay={420}>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Btn variant="accent" as="a" href="#call">Book a strategy call <Arrow size={14} /></Btn>
                <Btn variant="ghost" as="a" href="#method">See how it works</Btn>
              </div>
            </Reveal>
          </div>
        </div>
        <div style={{ marginTop: 88, border: "1px solid var(--rule-2)", borderRadius: 16, overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)" }}>
            {[
              { t: "Built for owner-led businesses", d: "For companies where too much still depends on the founder" },
              { t: "£5M–£75M revenue focus", d: "Where owner-dependency, wasted time, and missed profit becomes costly" },
              { t: "Choose your starting point", d: "Audit, 90-day sprint, 12-month programme, or strategic growth support" },
              { t: "Implementation, not just advice", d: "Clear scope, hands-on delivery, and measurable progress" },
            ].map((s, i) => (
              <div key={i} style={{ padding: "36px 28px", borderRight: i < 3 ? "1px solid var(--rule-2)" : 0, background: "var(--card)" }}>
                <div className="display" style={{ fontSize: "clamp(18px, 1.6vw, 24px)", lineHeight: 1.15, marginBottom: 16 }}>{s.t}</div>
                <div style={{ fontSize: 13, color: "var(--fg-mute)", lineHeight: 1.5 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// =========================================================
// HERO — CALCULATOR
// =========================================================
function HeroCalculator() {
  const [rev, setRev] = useState(12);      // £M
  const [margin, setMargin] = useState(14); // %
  const [mult, setMult] = useState(5);
  const ebitda = (rev * margin) / 100;
  const value = ebitda * mult;
  const upliftVal = value * 2.4;

  return (
    <section id="top" style={{ paddingTop: 40, paddingBottom: 64 }}>
      <Container>
        <Reveal>
          <Kicker style={{ marginBottom: 40 }}>Calculate your exit · live</Kicker>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 56, alignItems: "start" }}>
          <div>
            <h1 className="display" style={{ fontSize: "clamp(56px, 8vw, 130px)", margin: 0, textTransform: "uppercase" }}>
              <Reveal><span>What's your</span></Reveal>
              <Reveal delay={120}><span style={{ display: "block" }}>business <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>actually</span> worth?</span></Reveal>
            </h1>
            <Reveal delay={260}>
              <p style={{ fontSize: 20, lineHeight: 1.45, color: "var(--fg-mute)", maxWidth: "46ch", marginTop: 28 }}>
                Most owners under-price their own company by 40–60%. Move the sliders. See what a buyer sees — and what we can build it into.
              </p>
            </Reveal>
            <Reveal delay={380}>
              <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
                <Btn variant="accent" as="a" href="#call">Book a strategy call <Arrow size={14} /></Btn>
                <Btn variant="ghost" as="a" href="#method">How we do it</Btn>
              </div>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <div style={{
              border: "1px solid var(--rule-2)",
              background: "var(--card)",
              borderRadius: 18,
              padding: 28,
            }}>
              <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 24 }}>
                VALUATION MODEL · SIMPLIFIED
              </div>
              <CalcSlider label="Annual revenue" unit="£M" min={5} max={75} step={0.5} value={rev} onChange={setRev} />
              <CalcSlider label="Profit margin" unit="%" min={5} max={40} step={0.5} value={margin} onChange={setMargin} />
              <CalcSlider label="Exit multiple" unit="×" min={3} max={12} step={0.1} value={mult} onChange={setMult} />
              <Rule style={{ margin: "20px 0" }} />
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div>
                  <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 8 }}>TODAY</div>
                  <div className="display" style={{ fontSize: "clamp(36px, 4vw, 54px)" }}>£{value.toFixed(1)}M</div>
                </div>
                <div style={{ padding: 14, borderRadius: 12, background: "var(--accent)", color: "var(--accent-ink)" }}>
                  <div className="mono" style={{ marginBottom: 8, opacity: 0.7 }}>AFTER 18 MO.</div>
                  <div className="display" style={{ fontSize: "clamp(36px, 4vw, 54px)" }}>£{upliftVal.toFixed(1)}M</div>
                </div>
              </div>
              <div className="mono" style={{ color: "var(--fg-mute)", marginTop: 16 }}>
                BASED ON MEDIAN 2.4× UPLIFT · COHORT 2022–2026
              </div>
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

function CalcSlider({ label, unit, min, max, step, value, onChange }) {
  return (
    <div style={{ marginBottom: 20 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10 }}>
        <span style={{ fontSize: 14, color: "var(--fg)", fontWeight: 500 }}>{label}</span>
        <span className="display" style={{ fontSize: 22 }}>
          {unit === "£M" ? "£" : ""}{value.toFixed(unit === "×" || unit === "%" ? 1 : 1)}{unit === "£M" ? "M" : unit}
        </span>
      </div>
      <input
        type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(+e.target.value)}
        style={{
          width: "100%", appearance: "none", height: 4,
          background: `linear-gradient(to right, var(--accent) 0 ${((value - min) / (max - min)) * 100}%, var(--rule-2) ${((value - min) / (max - min)) * 100}% 100%)`,
          borderRadius: 999, outline: "none",
        }}
      />
      <style>{`
        input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 999px; background: var(--fg); cursor: grab; border: 3px solid var(--accent); }
        input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: var(--fg); cursor: grab; border: 3px solid var(--accent); }
      `}</style>
    </div>
  );
}

// =========================================================
// HERO — STACK (side-by-side pillars)
// =========================================================
function HeroStack() {
  const pillars = [
    { l: "SYSTEMS", t: "Everything your team does, written down and measured." },
    { l: "LEADERSHIP", t: "A team that makes decisions without calling you." },
    { l: "AI", t: "Automating the 40% of work that shouldn't be a human's job." },
  ];
  return (
    <section id="top" style={{ paddingTop: 40, paddingBottom: 80 }}>
      <Container>
        <Reveal><Kicker style={{ marginBottom: 56 }}>For owner-led businesses · £5M – £75M</Kicker></Reveal>
        <h1 className="display" style={{ fontSize: "clamp(56px, 9vw, 150px)", margin: 0, textTransform: "uppercase" }}>
          <Reveal><span>Your business</span></Reveal>
          <Reveal delay={120}><span style={{ display: "block" }}>shouldn't need</span></Reveal>
          <Reveal delay={220}><span style={{ display: "block", color: "var(--accent)" }}>you in it.</span></Reveal>
        </h1>
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr", gap: 24, marginTop: 72, alignItems: "end" }}>
          <Reveal delay={300}>
            <p style={{ fontSize: 20, lineHeight: 1.45, color: "var(--fg-mute)", margin: 0 }}>
              Three mechanisms. One outcome: a business that's more profitable, less dependent on you, and sellable whenever you want.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
              <Btn variant="accent" as="a" href="#call">Book a call <Arrow size={14} /></Btn>
            </div>
          </Reveal>
          {pillars.map((p, i) => (
            <Reveal key={i} delay={400 + i * 100}>
              <div style={{ padding: "28px 22px", border: "1px solid var(--rule-2)", borderRadius: 16, background: "var(--card)", minHeight: 210 }}>
                <div className="mono" style={{ color: "var(--accent)", marginBottom: 20 }}>0{i + 1} · {p.l}</div>
                <div style={{ fontSize: 20, lineHeight: 1.35, fontWeight: 500 }}>{p.t}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// =========================================================
// TICKER
// =========================================================
function Ticker() {
  const isMobile = useIsMobile();
  const items = ["GROW PROFIT", "CUT OPERATIONAL DRAG", "AUTOMATE REPETITIVE WORK", "REDUCE OWNER DEPENDENCY", "BUILD A BUSINESS THAT RUNS BETTER", "EXIT ON YOUR TERMS"];
  const row = [...items, ...items, ...items];
  const fontSize = isMobile ? 22 : 40;
  const gap = isMobile ? 24 : 40;
  return (
    <div style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", padding: isMobile ? "16px 0" : "22px 0", overflow: "hidden", background: "var(--bg)" }}>
      <div style={{ display: "flex", gap, whiteSpace: "nowrap", animation: "ticker 38s linear infinite", willChange: "transform" }}>
        {row.map((t, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap, fontFamily: "var(--display)", fontWeight: 600, fontSize, letterSpacing: "-0.02em", textTransform: "uppercase" }}>
            {t}
            <span style={{ color: "var(--accent)" }}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// =========================================================
// PROBLEM
// =========================================================
function Problem() {
  const isMobile = useIsMobile();
  const bullets = [
    "The business stalls every time you take a week off.",
    "You're the bottleneck for every meaningful decision.",
    "Profit margin hasn't improved for several years.",
    "The value of your business is dependent on you.",
    "Team productivity levels could be higher.",
    "You have no effective succession or exit plan.",
  ];

  if (isMobile) {
    return (
      <section style={{ padding: "64px 0", borderTop: "1px solid var(--rule)" }}>
        <Container>
          <Kicker style={{ marginBottom: 20 }}>The problem</Kicker>
          <h2 className="display" style={{ fontSize: "clamp(52px, 16vw, 80px)", margin: "0 0 28px", textTransform: "uppercase", lineHeight: 0.9 }}>
            You built a <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>job</span>,<br />not a business.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--fg)", margin: "0 0 32px" }}>
            <span className="serif-italic" style={{ color: "var(--accent)" }}>Be honest.</span> Does any of this sound familiar? If so, your business is built around <em>you</em>. But it's fixable.
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
            {bullets.map((b, i) => (
              <li key={i} style={{ display: "flex", gap: 16, padding: "18px 0", borderTop: "1px solid var(--rule-2)", alignItems: "flex-start" }}>
                <span className="mono tabular" style={{ color: "var(--accent)", flexShrink: 0, paddingTop: 2 }}>0{i + 1}</span>
                <span style={{ fontSize: 17, lineHeight: 1.5 }}>{b}</span>
              </li>
            ))}
            <li style={{ borderTop: "1px solid var(--rule-2)" }} />
          </ul>
        </Container>
      </section>
    );
  }

  return (
    <section style={{ padding: "100px 0", position: "relative" }}>
      <Container>
        <div style={{ marginBottom: 48 }}>
          <Kicker style={{ marginBottom: 24 }}>The problem</Kicker>
          <h2 className="display" style={{ fontSize: "clamp(56px, 8.5vw, 140px)", margin: 0, textTransform: "uppercase", lineHeight: 0.92 }}>
            You built a <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>job</span>,<br/>not a business.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80 }}>
          <div>
            <p style={{ fontSize: 20, lineHeight: 1.5, color: "var(--fg)", margin: "0 0 40px", maxWidth: "36ch" }}>
              <span className="serif-italic" style={{ color: "var(--accent)" }}>Be honest.</span> Does any of this sound familiar? If so, your business is built around <em>you</em>. But it's fixable.
            </p>
          </div>
          <div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {bullets.map((b, i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "56px 1fr", padding: "22px 0", borderTop: "1px solid var(--rule-2)", alignItems: "center" }}>
                  <span className="mono tabular" style={{ color: "var(--fg-mute)" }}>0{i + 1}</span>
                  <span style={{ fontSize: 19, lineHeight: 1.4 }}>{b}</span>
                </li>
              ))}
              <li style={{ borderTop: "1px solid var(--rule-2)" }} />
            </ul>
          </div>
        </div>
      </Container>
    </section>
  );
}

// =========================================================
// METHOD — 3 PILLARS
// =========================================================
function Method() {
  const isMobile = useIsMobile();
  const pillars = [
    { n: "01", kicker: "PROCESS IMPROVEMENT", title: "Make your business frictionless.", body: "We remove the friction that wastes time in your business — broken handoffs, unclear ownership, and operational drag. So the business runs faster, cleaner, and with less coming back to you." },
    { n: "02", kicker: "GROWTH SYSTEMS", title: "Automate the work that doesn't need humans.", body: "We automate the repetitive work that should never need human involvement - just human approval. And only add AI where better intelligence creates better outcomes. The result is a business that works faster, thinks smarter, and gives your team more capability without adding more headcount." },
    { n: "03", kicker: "AUTONOMOUS LEADERSHIP", title: "Build a team that makes decisions without you.", body: "We build the confidence, clarity, and information flow for decisions to be made at the right level — and made consistently. So the business keeps moving, your team takes real ownership, and you stop being the default answer to everything." },
  ];
  const [open, setOpen] = useState(0);

  if (isMobile) {
    return (
      <section id="method" style={{ padding: "64px 0", borderTop: "1px solid var(--rule)" }}>
        <Container>
          <Kicker style={{ marginBottom: 20 }}>How We Do It</Kicker>
          <h2 className="display" style={{ fontSize: "clamp(40px, 12vw, 64px)", margin: "0 0 36px", textTransform: "uppercase", lineHeight: 0.92 }}>
            3 ways we make your business less <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>dependent on you...</span>
          </h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {pillars.map((p, i) => (
              <div key={i} style={{ border: "1px solid var(--rule-2)", borderRadius: 16, overflow: "hidden", background: "var(--card)" }}>
                <button onClick={() => setOpen(open === i ? -1 : i)}
                  style={{ width: "100%", textAlign: "left", padding: "20px 20px", display: "flex", justifyContent: "space-between", alignItems: "center", background: "none", color: "var(--fg)" }}>
                  <div>
                    <div className="mono" style={{ color: "var(--accent)", marginBottom: 6, fontSize: 10 }}>{p.n} · {p.kicker}</div>
                    <div className="display" style={{ fontSize: 22, lineHeight: 1.1 }}>{p.title}</div>
                  </div>
                  <span style={{ flexShrink: 0, marginLeft: 12, transform: open === i ? "rotate(45deg)" : "none", transition: "transform .3s ease" }}>
                    <Plus size={16} />
                  </span>
                </button>
                <div style={{ maxHeight: open === i ? 400 : 0, overflow: "hidden", transition: "max-height .4s ease" }}>
                  <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--fg-mute)", padding: "0 20px 24px", margin: 0 }}>{p.body}</p>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </section>
    );
  }

  return (
    <section id="method" style={{ padding: "140px 0", borderTop: "1px solid var(--rule)" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 40, marginBottom: 72, alignItems: "end" }}>
          <Kicker>How We Do It</Kicker>
          <h2 className="display" style={{ fontSize: "clamp(44px, 5.6vw, 96px)", margin: 0, textTransform: "uppercase" }}>
            3 ways we make your business less <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>dependent on you...</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {pillars.map((p, i) => {
            const active = open === i;
            return (
              <button key={i} onClick={() => setOpen(i)} onMouseEnter={() => setOpen(i)}
                style={{ textAlign: "left", padding: 32, border: "1px solid", borderColor: active ? "var(--accent)" : "var(--rule-2)", borderRadius: 20, background: active ? "var(--accent)" : "var(--card)", color: active ? "var(--accent-ink)" : "var(--fg)", transition: "all .3s ease", minHeight: 460, display: "flex", flexDirection: "column", gap: 20 }}>
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  <span className="mono" style={{ color: active ? "var(--accent-ink)" : "var(--accent)", fontWeight: 600, fontSize: 12 }}>{p.n} · {p.kicker}</span>
                </div>
                <div className="display" style={{ fontSize: 34, lineHeight: 1.0 }}>{p.title}</div>
                <div style={{ fontSize: 16, lineHeight: 1.5, opacity: active ? 1 : 0.7, flex: 1 }}>{p.body}</div>
              </button>
            );
          })}
        </div>
      </Container>
    </section>
  );
}

// =========================================================
// PROOF — quote + logos + case study numbers
// =========================================================
function Proof() {
  return (
    <section id="proof" style={{ padding: "140px 0", borderTop: "1px solid var(--rule)", background: "var(--card)" }}>
      <Container>
        <Kicker style={{ marginBottom: 32 }}>Proof · not pitch</Kicker>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "start" }}>
          <div>
            <blockquote className="display" style={{ fontSize: "clamp(36px, 4.6vw, 68px)", margin: 0, textTransform: "none", letterSpacing: "-0.025em", lineHeight: 1.05 }}>
              <span className="serif-italic" style={{ color: "var(--accent)" }}>"</span>I took six weeks off for the first time in eleven years. Revenue went <em className="serif-italic">up</em>. A year later we sold for 3.1× what the company was worth when we started.<span className="serif-italic" style={{ color: "var(--accent)" }}>"</span>
            </blockquote>
            <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 40 }}>
              <ImgPH label="headshot" aspect="1/1" style={{ width: 64, height: 64, borderRadius: 999 }} />
              <div>
                <div style={{ fontSize: 17, fontWeight: 600 }}>Daniel Morris</div>
                <div className="mono" style={{ color: "var(--fg-mute)" }}>FOUNDER · WILDGRAIN (SOLD 2025)</div>
              </div>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {[
              { k: "Revenue", v: "£8.2M → £14.6M" },
              { k: "EBITDA", v: "9% → 22%" },
              { k: "Founder hrs/wk", v: "68 → 14" },
              { k: "Exit multiple", v: "3.1×" },
            ].map((m, i) => (
              <div key={i} style={{ padding: "24px", border: "1px solid var(--rule-2)", borderRadius: 14 }}>
                <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 10 }}>{m.k.toUpperCase()}</div>
                <div className="display" style={{ fontSize: 28 }}>{m.v}</div>
              </div>
            ))}
          </div>
        </div>

        <Rule style={{ margin: "80px 0 32px" }} />
        <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 24 }}>SELECTED OWNERS WE'VE WORKED WITH</div>
        <div style={{ display: "flex", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
          {["WILDGRAIN", "NORTHWIND", "HELIX", "LONGWAVE", "FORMAT", "ASCENT", "MERIDIAN", "CIPHER"].map((x, i) => (
            <span key={i} className="display" style={{ fontSize: 26, color: "var(--fg-mute)" }}>{x}</span>
          ))}
        </div>
      </Container>
    </section>
  );
}

// =========================================================
// PROGRAM — what's included
// =========================================================
function Program() {
  const isMobile = useIsMobile();
  const items = [
    { t: "Audit", d: "Find the real constraint. A rapid diagnostic to show where profit is leaking, where the owner is still the bottleneck, and what to fix first. Included is an audit of AI usage in your business." },
    { t: "90-Day Sprint", d: "A focused sprint to improve the way the business runs, reduce day-to-day founder reliance, and create measurable gains in profit, capacity, and control. Get quick wins where they matter most." },
    { t: "12-Month Build", d: "Build a business that runs better without you. We work hands-on across systems, leadership, and automation to embed better decision-making, stronger reporting, and a more scalable operating model." },
    { t: "Strategic Growth & Exit Readiness", d: "Turn a better business into a more valuable one. Once the foundations are in place, we help you prepare for exit, or explore growth through acquisition, partnerships, or other strategic options." },
  ];

  if (isMobile) {
    return (
      <section id="program" style={{ padding: "64px 0", borderTop: "1px solid var(--rule)" }}>
        <Container>
          <Kicker style={{ marginBottom: 20 }}>4 ways to work with us</Kicker>
          <h2 className="display" style={{ fontSize: "clamp(40px, 12vw, 64px)", margin: "0 0 36px", textTransform: "uppercase", lineHeight: 0.92 }}>
            4 WAYS TO <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>work with us.</span>
          </h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid var(--rule-2)" }}>
            {items.map((it, i) => (
              <div key={i} style={{ padding: "24px 0", borderBottom: "1px solid var(--rule-2)" }}>
                <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                  <span className="mono tabular" style={{ color: "var(--accent)", flexShrink: 0, paddingTop: 4, fontSize: 11 }}>0{i + 1}</span>
                  <div>
                    <div className="display" style={{ fontSize: 22, lineHeight: 1.1, marginBottom: 10 }}>{it.t}</div>
                    <div style={{ fontSize: 15, lineHeight: 1.6, color: "var(--fg-mute)" }}>{it.d}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32 }}>
            <Btn variant="accent" as="a" href="#call" style={{ width: "100%", justifyContent: "center" }}>
              Find out more <Arrow size={14} />
            </Btn>
          </div>
        </Container>
      </section>
    );
  }

  return (
    <section id="program" style={{ padding: "140px 0", borderTop: "1px solid var(--rule)" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 40, marginBottom: 64, alignItems: "end" }}>
          <Kicker>4 ways to work with us</Kicker>
          <h2 className="display" style={{ fontSize: "clamp(44px, 5.2vw, 88px)", margin: 0, textTransform: "uppercase" }}>
            4 WAYS TO <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>work with us.</span>
          </h2>
        </div>
        <div style={{ border: "1px solid var(--rule-2)", borderRadius: 20, overflow: "hidden" }}>
          {items.map((it, i) => (
            <ProgramRow key={i} n={i + 1} {...it} last={i === items.length - 1} />
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 40 }}>
          <Btn variant="accent" as="a" href="#call">Find out more <Arrow size={14} /></Btn>
        </div>
      </Container>
    </section>
  );
}

function ProgramRow({ n, t, d, last }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid",
        gridTemplateColumns: "80px 1.2fr 2fr 56px",
        gap: 24,
        padding: "28px 32px",
        borderBottom: last ? 0 : "1px solid var(--rule-2)",
        background: hover ? "var(--accent)" : "transparent",
        color: hover ? "var(--accent-ink)" : "var(--fg)",
        transition: "background .25s ease, color .25s ease",
        alignItems: "center",
        cursor: "pointer",
      }}
    >
      <span className="mono tabular" style={{ opacity: 0.6 }}>0{n}</span>
      <span className="display" style={{ fontSize: 28 }}>{t}</span>
      <span style={{ fontSize: 17, lineHeight: 1.45, opacity: 0.85 }}>{d}</span>
      <span style={{ justifySelf: "end", transition: "transform .25s ease", transform: hover ? "translateX(4px)" : "translateX(0)" }}>
        <Arrow size={18} />
      </span>
    </div>
  );
}

// =========================================================
// FAQ
// =========================================================
function FAQ() {
  const isMobile = useIsMobile();
  const qs = [
    { q: "Who is this for?", a: "Owner-led businesses doing £5M\u2013£75M in revenue, where the owner is still the bottleneck and wants to change that \u2014 whether or not an exit is on the horizon." },
    { q: "How long do results take?", a: "The audit delivers actionable next steps within 48 hours. For the 90-Day Sprint and the flagship 12-Month Build, most owners start seeing results within the first 4\u20136 weeks." },
    { q: "What does it cost?", a: "Pricing depends on your company size, complexity, and current systems. We'll walk through exact investment and ROI on your Strategy Call. What we can tell you: this pays for itself quickly through better processes and faster growth. Most business owners wish they'd done this earlier." },
    { q: "Is this an AI consultancy?", a: "Designing and implementing AI and automation systems is one of several capabilities we provide. Our expertise is creating high-value companies that operate without operational involvement from the owners." },
    { q: "Do I have to sell the business?", a: "No. 'Exitable' means optionality \u2014 a business where you become less operational and that's ready whenever you are. Many of our partners and clients never sell. They just stop being trapped." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{ padding: isMobile ? "64px 0" : "140px 0", borderTop: "1px solid var(--rule)" }}>
      <Container>
        {isMobile ? (
          <>
            <Kicker style={{ marginBottom: 20 }}>Questions</Kicker>
            <h2 className="display" style={{ fontSize: "clamp(40px, 12vw, 64px)", margin: "0 0 32px", textTransform: "uppercase", lineHeight: 0.92 }}>
              Things owners ask <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>first.</span>
            </h2>
          </>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 40, marginBottom: 48, alignItems: "end" }}>
            <Kicker>Questions</Kicker>
            <h2 className="display" style={{ fontSize: "clamp(44px, 5.2vw, 88px)", margin: 0, textTransform: "uppercase" }}>
              Things owners ask <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>first.</span>
            </h2>
          </div>
        )}
        <div style={{ borderTop: "1px solid var(--rule-2)" }}>
          {qs.map((f, i) => (
            <div key={i} style={{ borderBottom: "1px solid var(--rule-2)" }}>
              <button onClick={() => setOpen(open === i ? -1 : i)}
                style={{ width: "100%", padding: isMobile ? "18px 0" : "28px 0", textAlign: "left", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, background: "none", color: "var(--fg)" }}>
                <span className="display" style={{ fontSize: isMobile ? "clamp(17px, 5vw, 22px)" : "clamp(24px, 2.6vw, 34px)", textTransform: "none", letterSpacing: "-0.02em", lineHeight: 1.2 }}>
                  {f.q}
                </span>
                <span style={{ flexShrink: 0, transform: open === i ? "rotate(45deg)" : "rotate(0)", transition: "transform .3s ease" }}>
                  <Plus size={isMobile ? 16 : 18} />
                </span>
              </button>
              <div style={{ maxHeight: open === i ? 400 : 0, overflow: "hidden", transition: "max-height .4s ease, opacity .3s ease", opacity: open === i ? 1 : 0 }}>
                <div style={{ fontSize: isMobile ? 16 : 18, color: "var(--fg-mute)", lineHeight: 1.6, paddingBottom: 24, maxWidth: "62ch" }}>
                  {f.a}
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// =========================================================
// CTA / BOOK A CALL (form)
// =========================================================
function Call() {
  const isMobile = useIsMobile();
  const [f, setF] = useState({ name: "", email: "", company: "", revenue: "5-10", goal: "grow", note: "" });
  const [err, setErr] = useState({});
  const [sent, setSent] = useState(false);
  const u = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const submit = (ev) => {
    ev.preventDefault();
    const e = {};
    if (!f.name.trim()) e.name = "required";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email)) e.email = "needs an email";
    if (!f.company.trim()) e.company = "required";
    setErr(e);
    if (Object.keys(e).length === 0) setSent(true);
  };

  const formBlock = (
    <div style={{ background: "var(--bg)", color: "var(--fg)", borderRadius: 20, padding: isMobile ? 24 : 32 }}>
      {!sent ? (
        <form onSubmit={submit} style={{ display: "grid", gap: 16 }}>
          <Field label="Your name" value={f.name} onChange={u("name")} error={err.name} />
          <Field label="Work email" value={f.email} onChange={u("email")} error={err.email} />
          <Field label="Company" value={f.company} onChange={u("company")} error={err.company} />
          <Pick label="Revenue" value={f.revenue} onChange={(v) => setF({ ...f, revenue: v })}
            options={[["u5","Under £5M"],["5-10","£5–10M"],["10-25","£10–25M"],["25-50","£25–50M"],["50-75","£50–75M"],["75+","£75M+"]]}
          />
          <Pick label="Primary goal" value={f.goal} onChange={(v) => setF({ ...f, goal: v })}
            options={[["revenue","Increase revenue or reduce costs"],["free","Get my time back"],["automate","Automate specific high-value tasks"],["exit","Prep for exit"],["valuation","Increase valuation"],["all","All of the above"]]}
          />
          <div>
            <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 8 }}>CONTEXT (OPTIONAL)</div>
            <textarea value={f.note} onChange={u("note")} rows={3} placeholder="Anything we should know."
              style={{ width: "100%", background: "transparent", border: "1px solid var(--rule-2)", borderRadius: 10, padding: 14, color: "var(--fg)", fontFamily: "var(--sans)", fontSize: 15, outline: "none", resize: "vertical" }} />
          </div>
          <Btn variant="accent" type="submit" style={{ width: "100%", justifyContent: "center", marginTop: 8 }}>
            Request call <Arrow size={14} />
          </Btn>
        </form>
      ) : (
        <div style={{ padding: "40px 16px", textAlign: "center" }}>
          <div className="display" style={{ fontSize: 56, color: "var(--accent)", marginBottom: 16 }}>✓</div>
          <div className="display" style={{ fontSize: 36, textTransform: "uppercase", marginBottom: 12 }}>
            Got it, {f.name.split(" ")[0] || "there"}.
          </div>
          <p style={{ fontSize: 17, color: "var(--fg-mute)", maxWidth: "40ch", margin: "0 auto" }}>
            We'll be in touch at <span style={{ color: "var(--accent)" }}>{f.email}</span> soon with some dates that work.
          </p>
        </div>
      )}
    </div>
  );

  if (isMobile) {
    return (
      <section id="call" style={{ padding: "64px 0", background: "var(--accent)", color: "var(--accent-ink)" }}>
        <Container>
          <div className="mono" style={{ marginBottom: 20, fontSize: 11 }}>Nothing ventured, nothing gained.</div>
          <h2 className="display" style={{ fontSize: "clamp(48px, 15vw, 72px)", margin: "0 0 20px", textTransform: "uppercase", lineHeight: 0.9 }}>
            Book a <span className="serif-italic" style={{ textTransform: "lowercase" }}>strategy</span> call.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, margin: "0 0 20px" }}>
            In 30 minutes, we will show you where value is being lost — and what we would fix in the next 90 days to help you build a business that:
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: "0 0 32px", display: "grid", gap: 10 }}>
            {["Runs without you", "Makes decisions without you", "Could be sold — if you wanted to"].map((x, i) => (
              <li key={i} style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 17, fontWeight: 600 }}>
                <Check size={18} /> {x}
              </li>
            ))}
          </ul>
          {formBlock}
        </Container>
      </section>
    );
  }

  return (
    <section id="call" style={{ padding: "140px 0", background: "var(--accent)", color: "var(--accent-ink)" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          <div>
            <div className="mono" style={{ marginBottom: 28 }}>Nothing ventured, nothing gained.</div>
            <h2 className="display" style={{ fontSize: "clamp(56px, 8vw, 130px)", margin: 0, textTransform: "uppercase" }}>
              Book a <span className="serif-italic" style={{ textTransform: "lowercase" }}>strategy</span> call.
            </h2>
            <p style={{ fontSize: 22, lineHeight: 1.4, marginTop: 32, maxWidth: "36ch" }}>
              In 30 minutes, we will show you where value is being lost — and what we would fix in the next 90 days to help you build a business that:
            </p>
            <ul style={{ listStyle: "none", padding: 0, marginTop: 32, display: "grid", gap: 12 }}>
              {["Runs without you", "Makes decisions without you", "Could be sold — if you wanted to"].map((x, i) => (
                <li key={i} style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 22 }}>
                  <Check size={20} /> {x}
                </li>
              ))}
            </ul>
          </div>
          {formBlock}
        </div>
      </Container>
    </section>
  );
}

function Field({ label, error, ...props }) {
  const [focus, setFocus] = useState(false);
  return (
    <label style={{ display: "block" }}>
      <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 8, display: "flex", justifyContent: "space-between" }}>
        <span>{label.toUpperCase()}</span>
        {error && <span style={{ color: "var(--accent)" }}>— {error.toUpperCase()}</span>}
      </div>
      <input
        {...props}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        style={{
          width: "100%", background: "transparent",
          border: `1px solid ${error ? "var(--accent)" : (focus ? "var(--fg)" : "var(--rule-2)")}`,
          borderRadius: 10, padding: "14px 16px",
          color: "var(--fg)", fontFamily: "var(--sans)", fontSize: 16, outline: "none",
          transition: "border-color .15s ease",
        }}
      />
    </label>
  );
}

function Pick({ label, value, onChange, options }) {
  return (
    <div>
      <div className="mono" style={{ color: "var(--fg-mute)", marginBottom: 8 }}>{label.toUpperCase()}</div>
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
        {options.map(([val, txt]) => (
          <button
            type="button" key={val} onClick={() => onChange(val)}
            style={{
              padding: "10px 14px", borderRadius: 999,
              border: `1px solid ${value === val ? "var(--accent)" : "var(--rule-2)"}`,
              background: value === val ? "var(--accent)" : "transparent",
              color: value === val ? "var(--accent-ink)" : "var(--fg)",
              fontSize: 13, fontWeight: 500, letterSpacing: "-0.005em",
            }}
          >{txt}</button>
        ))}
      </div>
    </div>
  );
}

// =========================================================
// FOOTER
// =========================================================
function Footer() {
  const isMobile = useIsMobile();

  const socialIcons = (
    <span style={{ display: "flex", alignItems: "center", gap: 14 }}>
      <span className="mono" style={{ color: "var(--fg-mute)" }}>FOLLOW US</span>
      <a href="#" aria-label="LinkedIn" style={{ color: "var(--fg-mute)", display: "flex", alignItems: "center" }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.59 0 4.26 2.36 4.26 5.44v6.3zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.44c.98 0 1.79-.77 1.79-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg>
      </a>
      <a href="#" aria-label="YouTube" style={{ color: "var(--fg-mute)", display: "flex", alignItems: "center" }}>
        <svg width="20" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.54 3.5 12 3.5 12 3.5s-7.54 0-9.38.55A3.02 3.02 0 0 0 .5 6.19C0 8.04 0 12 0 12s0 3.96.5 5.81a3.02 3.02 0 0 0 2.12 2.14C4.46 20.5 12 20.5 12 20.5s7.54 0 9.38-.55a3.02 3.02 0 0 0 2.12-2.14C24 15.96 24 12 24 12s0-3.96-.5-5.81zM9.75 15.5v-7l6.5 3.5-6.5 3.5z"/></svg>
      </a>
    </span>
  );

  if (isMobile) {
    return (
      <footer style={{ padding: "48px 0 32px", borderTop: "1px solid var(--rule)" }}>
        <Container>
          <div className="display" style={{ fontSize: "clamp(64px, 20vw, 120px)", lineHeight: 0.85, textTransform: "uppercase", letterSpacing: "-0.05em", margin: "0 0 32px" }}>
            EXITABL<span style={{ marginLeft: "0.007em" }}>E</span><span style={{ color: "var(--accent)" }}>.</span>
          </div>
          <Rule />
          <div style={{ padding: "28px 0", display: "flex", flexDirection: "column", gap: 20 }}>
            <div>
              <div style={{ fontSize: 17, color: "var(--fg)", fontWeight: 600, marginBottom: 6 }}>Build a business that runs without you.</div>
              <div style={{ fontSize: 13, color: "var(--fg-mute)" }}>Process Improvement · Growth Systems · Autonomous Leadership</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {[["How we do it","#method"],["Work with us","#program"],["FAQ","#faq"]].map(([label, href]) => (
                <a key={label} href={href} style={{ fontSize: 15, color: "var(--fg-mute)", fontWeight: 500 }}>{label}</a>
              ))}
            </div>
            {socialIcons}
          </div>
          <Rule />
          <div style={{ paddingTop: 20, display: "flex", flexDirection: "column", gap: 10 }}>
            <span className="mono" style={{ color: "var(--fg-mute)", display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
              © 2026 EXITABLE
              <span style={{ opacity: 0.4 }}>|</span>
              <a href="#" style={{ color: "var(--fg-mute)", textDecoration: "none" }}>Privacy</a>
              <span style={{ opacity: 0.4 }}>|</span>
              <a href="#" style={{ color: "var(--fg-mute)", textDecoration: "none" }}>Terms</a>
            </span>
          </div>
        </Container>
      </footer>
    );
  }

  return (
    <footer style={{ padding: "80px 0 40px", borderTop: "1px solid var(--rule)" }}>
      <Container>
        <div className="display" style={{ fontSize: "clamp(100px, 24vw, 360px)", lineHeight: 0.85, textTransform: "uppercase", letterSpacing: "-0.05em", margin: "0 0 40px" }}>
          EXITABL<span style={{ marginLeft: "0.007em" }}>E</span><span style={{ color: "var(--accent)" }}>.</span>
        </div>
        <Rule />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", padding: "40px 0", flexWrap: "wrap", gap: 24 }}>
          <div>
            <div style={{ fontSize: 22, color: "var(--fg)", lineHeight: 1.4, marginBottom: 12, fontWeight: 600 }}>
              Build a business that runs without you.
            </div>
            <div style={{ fontSize: 15, color: "var(--fg-mute)" }}>
              Process Improvement · Growth Systems · Autonomous Leadership
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-end" }}>
            <a href="#method" style={{ fontSize: 15, color: "var(--fg-mute)" }}>How we do it</a>
            <a href="#program" style={{ fontSize: 15, color: "var(--fg-mute)" }}>Work with us</a>
            <a href="#faq" style={{ fontSize: 15, color: "var(--fg-mute)" }}>FAQ</a>
          </div>
        </div>
        <Rule />
        <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 24, flexWrap: "wrap", gap: 12 }}>
          <span className="mono" style={{ color: "var(--fg-mute)", display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            © 2026 EXITABLE
            <span style={{ opacity: 0.4 }}>|</span>
            <a href="#" style={{ color: "var(--fg-mute)", textDecoration: "none" }}>Privacy</a>
            <span style={{ opacity: 0.4 }}>|</span>
            <a href="#" style={{ color: "var(--fg-mute)", textDecoration: "none" }}>Terms</a>
          </span>
          {socialIcons}
        </div>
      </Container>
    </footer>
  );
}

// =========================================================
// NEWSLETTER POPUP
// =========================================================
function NewsletterPopup({ onClose }) {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [sent, setSent] = useState(false);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    // Animate in
    const t = setTimeout(() => setVisible(true), 50);
    return () => clearTimeout(t);
  }, []);

  const dismiss = () => {
    setVisible(false);
    setTimeout(onClose, 350);
    try { sessionStorage.setItem("nl_dismissed", "1"); } catch (e) {}
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setError("Please enter a valid email");
      return;
    }
    setSent(true);
    setTimeout(dismiss, 2800);
  };

  return (
    <>
      {/* Backdrop */}
      <div
        onClick={dismiss}
        style={{
          position: "fixed", inset: 0, zIndex: 80,
          background: "rgba(0,0,0,.55)", backdropFilter: "blur(4px)",
          opacity: visible ? 1 : 0,
          transition: "opacity .35s ease",
        }}
      />
      {/* Modal */}
      <div style={{
        position: "fixed",
        left: "50%", top: "50%",
        transform: `translate(-50%, ${visible ? "-50%" : "-46%"})`,
        zIndex: 90,
        width: "min(580px, 94vw)",
        background: "var(--bg)",
        border: "1px solid var(--rule-2)",
        borderRadius: 24,
        padding: "44px 40px 36px",
        opacity: visible ? 1 : 0,
        transition: "opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1)",
        boxShadow: "0 40px 80px -20px rgba(0,0,0,.6)",
      }}>
        {/* Close */}
        <button
          onClick={dismiss}
          className="mono"
          style={{
            position: "absolute", top: 18, right: 18,
            color: "var(--fg-mute)", fontSize: 11, letterSpacing: "0.12em",
            display: "flex", alignItems: "center", gap: 6,
          }}
        >
          CLOSE ×
        </button>

        {!sent ? (
          <>
            <Kicker style={{ marginBottom: 20 }}>The Exitable Letter</Kicker>
            <h3 className="display" style={{
              fontSize: "clamp(28px, 3.5vw, 40px)",
              textTransform: "uppercase",
              margin: "0 0 16px",
              letterSpacing: "-0.03em",
              lineHeight: 1.0,
            }}>
              For owners who want <span className="serif-italic" style={{ color: "var(--accent)", textTransform: "lowercase" }}>more</span> from their business.
            </h3>
            <p style={{ fontSize: 16, color: "var(--fg-mute)", lineHeight: 1.5, margin: "0 0 28px", maxWidth: "44ch" }}>
              A weekly letter on growth systems, reducing founder-dependence and maximising value for owner-led businesses.
            </p>
            <form onSubmit={submit} style={{ display: "flex", gap: 10 }}>
              <input
                type="email"
                placeholder="your@email.com"
                value={email}
                onChange={(e) => { setEmail(e.target.value); setError(""); }}
                style={{
                  flex: 1, background: "transparent",
                  border: `1px solid ${error ? "var(--accent)" : "var(--rule-2)"}`,
                  borderRadius: 999, padding: "0 20px", height: 52,
                  color: "var(--fg)", fontFamily: "var(--sans)", fontSize: 16, outline: "none",
                  transition: "border-color .15s ease",
                }}
              />
              <Btn variant="accent" type="submit" style={{ flexShrink: 0 }}>
                Subscribe <Arrow size={13} />
              </Btn>
            </form>
            {error && (
              <div className="mono" style={{ color: "var(--accent)", marginTop: 10, fontSize: 11 }}>
                {error.toUpperCase()}
              </div>
            )}
            <div className="mono" style={{ color: "var(--fg-mute)", marginTop: 14 }}>
              NO SPAM · UNSUBSCRIBE ANYTIME
            </div>
          </>
        ) : (
          <div style={{ textAlign: "center", padding: "20px 0" }}>
            <div className="display" style={{ fontSize: 64, color: "var(--accent)", marginBottom: 16 }}>✓</div>
            <div className="display" style={{ fontSize: 38, textTransform: "uppercase", marginBottom: 12 }}>
              You're in.
            </div>
            <p style={{ fontSize: 17, color: "var(--fg-mute)" }}>
              Watch out for our next weekly newsletter.
            </p>
          </div>
        )}
      </div>
    </>
  );
}

Object.assign(window, {
  Nav, HeroManifesto, HeroCalculator, HeroStack,
  Ticker, Problem, Method, Proof, Program, FAQ, Call, Footer,
  NewsletterPopup, VideoModal, WatchBtn,
});
