// Fourth Wall — landing page
// Reuses the real app screens (screens.jsx) inside real iOS frames (ios-frame.jsx)
// and the shared tokens/primitives (components.jsx). No redrawn mockups.

const SAMPLE_JD = "Senior Product Manager — Stripe\n\nStripe is looking for a Senior PM to join the Billing team. You'll partner with engineering, design, and go-to-market to ship the next generation of subscription tooling.\n\nWhat you'll do:\n• Own the roadmap for a high-impact billing surface used by hundreds of thousands of businesses.\n• Write specs that engineering and design can run with.\n• Talk to customers — small startups, mid-market, and enterprise — and turn what you hear into product decisions.";

const HEADLINES = {
  avoiding: ['The sixty-second video', "you've been avoiding for three weeks."],
  wall: ['Break the fourth wall.', 'One quiet line at a time.'],
  easier: ['Recording your intro video', 'has never been easier.']
};

// ───────────────────────── Showcase phone ─────────────────────────
// Renders a REAL app screen inside a REAL iOS frame, scaled to `width`.
function ShowcasePhone({ screen, width = 300, prefill = false }) {
  const scale = width / 390;
  const H = 830 * scale;

  const go = React.useCallback(() => {}, []); // no-op nav in the showcase
  const [jdText, setJdText] = React.useState(prefill ? SAMPLE_JD : '');
  const [tone, setTone] = React.useState('Warm professional');
  const [currentLine, setCurrentLine] = React.useState(3);
  const [lineStates, setLineStates] = React.useState(
    () => ['recorded', 'recorded', 'idle', 'idle', 'idle', 'idle', 'idle']
  );
  const [selfHidden, setSelfHidden] = React.useState(false);
  const [isRecording, setIsRecording] = React.useState(false);
  const [recordSecs, setRecordSecs] = React.useState(0);

  let content;
  switch (screen) {
    case 'home':
      content = <ScreenHomeEmpty go={go} />;break;
    case 'paste':
      content = <ScreenPasteJD go={go} jdText={jdText} setJdText={setJdText} />;break;
    case 'script':
      content = <ScreenScript go={go} tone={tone} setTone={setTone} />;break;
    case 'warmup':
      content = <ScreenWarmup go={go} />;break;
    case 'record':
      content = <ScreenRecord
        go={go}
        currentLine={currentLine} setCurrentLine={setCurrentLine}
        lineStates={lineStates} setLineStates={setLineStates}
        selfHidden={selfHidden} setSelfHidden={setSelfHidden}
        isRecording={isRecording} setIsRecording={setIsRecording}
        recordSecs={recordSecs} setRecordSecs={setRecordSecs} />;
      break;
    case 'link':
      content = <ScreenLinkReady go={go} />;break;
    default:
      content = <ScreenHomeEmpty go={go} />;
  }

  return (
    <div style={{ width, height: H, position: 'relative' }}>
      <div style={{
        position: 'absolute', top: 0, left: 0,
        width: 390, height: 830,
        transform: `scale(${scale})`, transformOrigin: 'top left'
      }}>
        <IOSDevice width={390} height={830}>
          <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
            {content}
          </div>
        </IOSDevice>
      </div>
    </div>);

}

// Phone with a small playbill caption beneath it
function CaptionedPhone({ screen, width, prefill, code, caption }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
      <ShowcasePhone screen={screen} width={width} prefill={prefill} />
      {(code || caption) &&
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, justifyContent: 'center' }}>
          {code && <Micro style={{ color: fwTokens.mute }}>{code}</Micro>}
          {caption &&
        <span style={{ fontFamily: fwTokens.serif, fontStyle: 'italic', fontSize: 16, color: fwTokens.ink2 }}>
              {caption}
            </span>
        }
        </div>
      }
    </div>);

}

// ───────────────────────── Waitlist form ─────────────────────────
function WaitlistForm({ accent, btnFg = fwTokens.paper, dark = false, compact = false }) {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(() => {
    try {return !!localStorage.getItem('fw_waitlist');} catch (e) {return false;}
  });

  const [submitting, setSubmitting] = React.useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    const val = email.trim();
    if (!val || !/.+@.+\..+/.test(val)) return;
    setSubmitting(true);
    try {
      const res = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: val }),
      });
      if (res.ok || res.status === 409) {
        try { localStorage.setItem('fw_waitlist', val); } catch (_) {}
        setDone(true);
      }
    } catch (_) {}
    setSubmitting(false);
  };

  const fg = dark ? fwTokens.paper : fwTokens.ink;
  const sub = dark ? 'rgba(253,246,227,0.62)' : fwTokens.mute;
  const fieldBg = dark ? 'rgba(253,246,227,0.06)' : fwTokens.paper2;
  const border = dark ? 'rgba(253,246,227,0.28)' : fwTokens.ink;

  if (done) {
    return (
      <div style={{ maxWidth: 460 }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 12,
          paddingBottom: 12, borderBottom: `1px solid ${dark ? 'rgba(253,246,227,0.22)' : fwTokens.rule}`
        }}>
          <span style={{ width: 8, height: 8, background: accent, display: 'inline-block', transform: 'translateY(-1px)' }} />
          <span style={{ fontFamily: fwTokens.serif, fontSize: 22, color: fg, fontStyle: 'italic' }}>
            You're on the list.
          </span>
        </div>
        <p style={{ margin: '14px 0 0', color: sub, fontSize: 14.5, lineHeight: 1.6, maxWidth: 380 }}>
          We'll write once — a single, quiet email the week it opens. Nothing before then.
        </p>
      </div>);

  }

  return (
    <form onSubmit={onSubmit} style={{ maxWidth: 480 }}>
      <div style={{
        display: 'flex', gap: 10, flexWrap: compact ? 'wrap' : 'nowrap'
      }}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="your@email.com"
          aria-label="Email address"
          style={{
            flex: 1, minWidth: 200,
            appearance: 'none',
            padding: '15px 16px',
            background: fieldBg,
            border: `1px solid ${dark ? 'rgba(253,246,227,0.22)' : fwTokens.rule}`,
            borderRadius: 2,
            color: fg,
            fontFamily: fwTokens.sans, fontSize: 15.5,
            outline: 'none'
          }} />
        
        <button type="submit" disabled={submitting} style={{
          appearance: 'none', border: `1px solid ${border}`,
          padding: '15px 22px',
          background: accent,
          color: btnFg,
          fontFamily: fwTokens.sans, fontSize: 15.5, fontWeight: 500,
          borderRadius: 2, cursor: submitting ? 'default' : 'pointer', whiteSpace: 'nowrap',
          opacity: submitting ? 0.7 : 1,
          transition: 'transform 80ms cubic-bezier(0.32,0.72,0,1)'
        }}
        onMouseDown={(e) => !submitting && (e.currentTarget.style.transform = 'scale(0.99)')}
        onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
        onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
          {submitting ? 'Joining…' : 'Request early access'}</button>
      </div>
      <p style={{ margin: '12px 0 0', color: sub, fontSize: 13, lineHeight: 1.5 }}>
        No spam, no countdown timers. One email the week it opens.
      </p>
    </form>);

}

// ───────────────────────── Section heading (playbill) ─────────────────────────
function PlaybillHead({ num, kicker, children }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, alignItems: 'baseline' }} className="fw-grid-collapse">
      <div>
        <Micro>{num}</Micro>
        <Micro style={{ marginTop: 8, color: fwTokens.ink2 }}>{kicker}</Micro>
      </div>
      <h2 style={{
        fontFamily: fwTokens.serif, fontSize: 'clamp(32px, 4.4vw, 54px)',
        fontWeight: 400, lineHeight: 1.0, letterSpacing: '-0.015em', margin: 0,
        textWrap: 'pretty'
      }}>{children}</h2>
    </div>);

}

// ───────────────────────── The page ─────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "avoiding",
  "heroScreen": "record",
  "accent": "curtain",
  "texture": true
} /*EDITMODE-END*/;

function LandingPage() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = t.accent === 'curtain' ? fwTokens.oxblood : fwTokens.ink;
  const hl = HEADLINES[t.headline] || HEADLINES.avoiding;

  const scrollToForm = () => {
    const el = document.getElementById('get-access');
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 40, behavior: 'smooth' });
  };

  const pageBg = t.texture ?
  'radial-gradient(circle at 18% 8%, rgba(0,0,0,0.013), transparent 42%), radial-gradient(circle at 82% 88%, rgba(0,0,0,0.016), transparent 52%)' :
  'none';

  return (
    <div style={{
      minHeight: '100vh', background: fwTokens.paper, color: fwTokens.ink,
      fontFamily: fwTokens.sans, backgroundImage: pageBg
    }}>
      {/* ===== Top bar ===== */}
      <header style={{
        position: 'sticky', top: 0, zIndex: 40,
        background: 'rgba(253,246,227,0.86)',
        backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)',
        borderBottom: `1px solid ${fwTokens.rule}`
      }}>
        <div style={{
          maxWidth: 1180, margin: '0 auto', padding: '16px 40px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between'
        }} className="fw-pad">
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <FWMark size={24} stroke={9} />
            <span style={{ fontFamily: fwTokens.serif, fontSize: 24, letterSpacing: '-0.005em' }}>
              Fourth&nbsp;<em style={{ color: fwTokens.ink2 }}>Wall</em>
            </span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 28 }} data-comment-anchor="f822a2bcec-div-234-11">
            <a href="#how" className="fw-navlink" style={{
              fontFamily: fwTokens.mono, fontSize: 11, letterSpacing: '0.12em',
              textTransform: 'uppercase', color: fwTokens.mute, textDecoration: 'none'
            }}>How it works</a>
            <a href="/privacy" className="fw-navlink" style={{
              fontFamily: fwTokens.mono, fontSize: 11, letterSpacing: '0.12em',
              textTransform: 'uppercase', color: fwTokens.mute, textDecoration: 'none'
            }}>Privacy policy</a>
            <button onClick={scrollToForm} style={{
              appearance: 'none', border: `1px solid ${fwTokens.ink}`, background: 'transparent',
              padding: '9px 16px', cursor: 'pointer', borderRadius: 2,
              fontFamily: fwTokens.sans, fontSize: 13.5, fontWeight: 500, color: fwTokens.ink
            }}>Get early access</button>
          </div>
        </div>
      </header>

      {/* ===== Hero ===== */}
      <section style={{ maxWidth: 1180, margin: '0 auto', padding: '88px 40px 96px' }} className="fw-pad fw-hero">
        <div style={{
          display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 72, alignItems: 'center'
        }} className="fw-hero-grid">
          {/* left — promise + form */}
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 28 }}>
              <span style={{ width: 7, height: 7, background: accent, display: 'inline-block' }} />
              <Micro style={{ color: fwTokens.ink2 }}>Now in private beta</Micro>
            </div>
            <h1 style={{
              fontFamily: fwTokens.serif, fontWeight: 400,
              fontSize: 'clamp(40px, 6vw, 76px)', lineHeight: 0.98,
              letterSpacing: '-0.02em', margin: 0, textWrap: 'balance'
            }}>
              {hl[0]}<br />
              <em style={{ fontStyle: 'italic', color: fwTokens.ink2 }}>{hl[1]}</em>
            </h1>
            <p style={{
              margin: '28px 0 0', maxWidth: 480, color: fwTokens.ink2,
              fontSize: 18, lineHeight: 1.6
            }}>
              Fourth Wall is a calm, deliberate way to record the introduction video
              you keep putting off. Paste the job you're applying for, and it writes you
              a script. Then it walks you through it one line at a time — a breath before
              you start, and no such thing as a perfect take.
            </p>
            <div id="get-access" style={{ marginTop: 36, scrollMarginTop: 80 }}>
              <WaitlistForm accent={accent} />
            </div>
          </div>

          {/* right — the real app */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <CaptionedPhone
              screen={t.heroScreen}
              width={324}
              prefill
              code={
              t.heroScreen === 'record' ? 'R.03' :
              t.heroScreen === 'warmup' ? 'R.01' :
              t.heroScreen === 'script' ? 'S.03' : 'L.01'
              }
              caption={
              t.heroScreen === 'record' ? 'one line at a time' :
              t.heroScreen === 'warmup' ? 'sixty seconds, first' :
              t.heroScreen === 'script' ? 'the script is the spine' : 'start with the job'
              } />
            
          </div>
        </div>
      </section>

      {/* ===== Quiet manifesto band ===== */}
      <section style={{ borderTop: `1px solid ${fwTokens.rule}`, borderBottom: `1px solid ${fwTokens.rule}`, background: fwTokens.paper2 }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '56px 40px' }} className="fw-pad">
          <p style={{
            margin: 0, maxWidth: 940,
            fontFamily: fwTokens.serif, fontSize: 'clamp(22px, 2.7vw, 32px)',
            lineHeight: 1.32, color: fwTokens.ink, letterSpacing: '-0.005em', textWrap: 'pretty'
          }}>
            It isn't a video editor. It isn't an AI app. It's the steady friend who sits
            with you while you do the thing you've been dreading — <em style={{ color: fwTokens.ink2 }}>and
            then quietly hands you something you're proud to send.</em>
          </p>
        </div>
      </section>

      {/* ===== How it works ===== */}
      <section id="how" style={{ maxWidth: 1180, margin: '0 auto', padding: '96px 40px 40px', scrollMarginTop: 70 }} className="fw-pad">
        <PlaybillHead num="How it works" kicker="Four steps · one sitting">
          From a job posting to a video <em style={{ color: fwTokens.ink2 }}>you'd actually send.</em>
        </PlaybillHead>

        <div style={{
          marginTop: 64,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 40
        }} className="fw-steps">
          {[
          { n: '01', title: 'Paste the job',
            body: "Drop in the posting you're applying for. We use it to draft your script — and nowhere else." },
          { n: '02', title: 'Get a script',
            body: "Opening, middle, close. Edit any line, change the tone, regenerate a section. The words stay yours." },
          { n: '03', title: 'Record one line',
            body: "A teleprompter, your script, and a record button. Hide your own face if it helps. No perfect take." },
          { n: '04', title: 'Send a private link',
            body: "We stitch the takes, trim the pauses, and hand you a link only your recipient can open." }].
          map((step) =>
          <div key={step.n} style={{ display: 'flex', flexDirection: 'column', paddingTop: 20, borderTop: `1px solid ${fwTokens.ink}` }}>
              <span style={{ fontFamily: fwTokens.mono, fontSize: 12, letterSpacing: '0.14em', color: accent }}>{step.n}</span>
              <span style={{ fontFamily: fwTokens.serif, fontSize: 26, lineHeight: 1.1, color: fwTokens.ink, marginTop: 12 }}>{step.title}</span>
              <p style={{ margin: '12px 0 0', color: fwTokens.ink2, fontSize: 15, lineHeight: 1.6 }}>
                {step.body}
              </p>
            </div>
          )}
        </div>
      </section>

      {/* ===== Founder note ===== */}
      <section style={{ maxWidth: 1180, margin: '0 auto', padding: '104px 40px' }} className="fw-pad">
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48 }} className="fw-grid-collapse">
          <div>
            <Micro>A note</Micro>
            <Micro style={{ marginTop: 8, color: fwTokens.ink2 }}>From the founder</Micro>
          </div>
          <div style={{ maxWidth: 660 }}>
            <p style={{
              margin: 0, fontFamily: fwTokens.serif, fontSize: 'clamp(24px, 3.2vw, 34px)',
              lineHeight: 1.28, letterSpacing: '-0.01em', color: fwTokens.ink, textWrap: 'pretty'
            }}>
              I built this because I once spent three weeks avoiding a sixty-second video,
              and then recorded it forty-one times.
            </p>
            <div style={{ marginTop: 28, color: fwTokens.ink2, fontSize: 16.5, lineHeight: 1.72 }}>
              <p style={{ margin: '0 0 18px' }}>
                Every app I tried treated the problem as a production problem — more filters,
                more cuts, a faster timeline. But it was never a production problem. It was the
                quiet dread of being looked at, and the cruel little voice that said the last
                take wasn't good enough.
              </p>
              <p style={{ margin: '0 0 18px' }}>
                So Fourth Wall does the opposite of what those apps do. It hides the camera
                instead of celebrating it. It gives you a script so you're never staring at a
                blank face. It asks for one line, not one perfect performance. And when you're
                done, it gets out of the way — no feed, no audience, no metrics. Just a video,
                and the one person you made it for.
              </p>
              <p style={{ margin: 0 }}>
                It's being built slowly, by one person, on purpose. If that sounds like
                something you've been waiting for, I'd love to have you in early.
              </p>
            </div>
            <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ width: 28, height: 1, background: fwTokens.ink }} />
              <span style={{ fontFamily: fwTokens.serif, fontStyle: 'italic', fontSize: 19, color: fwTokens.ink }}>
                The founder, Fourth Wall
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Privacy ===== */}
      <section style={{ borderTop: `1px solid ${fwTokens.rule}`, background: fwTokens.paper2 }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '96px 40px' }} className="fw-pad">
          <PlaybillHead num="Privacy" kicker="The quiet contract">
            Your video <em style={{ color: fwTokens.ink2 }}>stays yours.</em>
          </PlaybillHead>

          <div style={{
            marginTop: 56, display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48
          }} className="fw-grid-collapse">
            <div />
            <div style={{ display: 'grid', gap: 0, maxWidth: 760 }}>
              {[
              { t: 'A link, not a feed.', m: 'One recipient · no algorithm',
                b: 'A finished video becomes a private link you send to exactly one person. There is no public profile, no comments, no recommendation engine — and never will be.' },
              { t: 'The job posting goes nowhere.', m: 'Used once · then forgotten',
                b: "We read the posting you paste to draft your script, and that's the end of it. It isn't sold, shared, or used to train anything." },
              { t: 'Delete everything in one tap.', m: 'Your account · your call',
                b: 'Your takes, your scripts, your finished videos — all of it leaves with you, completely, the moment you decide to go.' }].
              map((row, i) =>
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1fr', gap: 8,
                padding: '26px 0', borderTop: `1px solid ${fwTokens.rule}`
              }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
                    <span style={{ fontFamily: fwTokens.serif, fontSize: 'clamp(22px, 2.6vw, 28px)', color: fwTokens.ink, lineHeight: 1.15 }}>
                      {row.t}
                    </span>
                    <Micro style={{ color: fwTokens.mute, whiteSpace: 'nowrap' }}>{row.m}</Micro>
                  </div>
                  <p style={{ margin: 0, color: fwTokens.ink2, fontSize: 15.5, lineHeight: 1.65, maxWidth: 600 }}>
                    {row.b}
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ===== Closing CTA (dark) ===== */}
      <section style={{ background: fwTokens.ink3, color: fwTokens.paper }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '104px 40px' }} className="fw-pad">
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
            <FWMark size={34} stroke={9} color="rgba(253,246,227,0.92)" />
          </div>
          <h2 style={{
            fontFamily: fwTokens.serif, fontWeight: 400, margin: '28px 0 0',
            fontSize: 'clamp(34px, 5vw, 60px)', lineHeight: 1.0, letterSpacing: '-0.02em',
            maxWidth: '15ch', textWrap: 'balance'
          }}>
            When it opens, <em style={{ fontStyle: 'italic', color: 'rgba(253,246,227,0.66)' }}>you'll be the first to know.</em>
          </h2>
          <p style={{ margin: '22px 0 36px', maxWidth: 520, fontSize: 17, lineHeight: 1.6, color: 'rgba(253,246,227,0.72)' }}>
            We're letting people in a few at a time, so the first sessions feel calm and
            unhurried. Leave your email and we'll save you a place.
          </p>
          <WaitlistForm
            accent={t.accent === 'curtain' ? fwTokens.oxblood : 'rgba(253,246,227,0.95)'}
            btnFg={t.accent === 'curtain' ? fwTokens.paper : fwTokens.ink3}
            dark />
        </div>
      </section>

      {/* ===== Colophon ===== */}
      <footer style={{ background: fwTokens.ink3, color: 'rgba(253,246,227,0.55)', borderTop: '1px solid rgba(253,246,227,0.12)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '36px 40px 0' }} className="fw-pad">
          <p style={{
            margin: 0, maxWidth: 720,
            fontFamily: fwTokens.serif, fontStyle: 'italic', fontSize: 16.5,
            lineHeight: 1.55, color: 'rgba(253,246,227,0.6)'
          }}>
            Fourth Wall is in its early days, and being built one careful piece at a time.
            What you see here is a work in progress — some of the design and the way things
            work are likely to change before it opens.
          </p>
        </div>
        <div style={{
          maxWidth: 1180, margin: '0 auto', padding: '28px 40px 56px', marginTop: 28,
          borderTop: '1px solid rgba(253,246,227,0.12)',
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24
        }} className="fw-foot">
          <Micro style={{ color: 'rgba(253,246,227,0.55)' }}>Fourth Wall · 2026</Micro>
          <Micro style={{ color: 'rgba(253,246,227,0.55)', textAlign: 'center' }}>The script · the warmup · the take</Micro>
          <Micro style={{ color: 'rgba(253,246,227,0.55)', textAlign: 'right' }}>Private beta</Micro>
        </div>
      </footer>

      {/* ===== Tweaks ===== */}
      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakSelect label="Headline" value={t.headline}
        options={[
        { value: 'avoiding', label: "Avoiding for three weeks" },
        { value: 'wall', label: 'Break the fourth wall' },
        { value: 'easier', label: 'Never been easier' }]
        }
        onChange={(v) => setTweak('headline', v)} />
        <TweakRadio label="Phone shows" value={t.heroScreen}
        options={[
        { value: 'record', label: 'Record' },
        { value: 'warmup', label: 'Warmup' },
        { value: 'home', label: 'Home' }]
        }
        onChange={(v) => setTweak('heroScreen', v)} />
        <TweakSection label="Style" />
        <TweakRadio label="Curtain accent" value={t.accent}
        options={[
        { value: 'reserved', label: 'Ink' },
        { value: 'curtain', label: 'Oxblood' }]
        }
        onChange={(v) => setTweak('accent', v)} />
        <TweakToggle label="Paper texture" value={t.texture}
        onChange={(v) => setTweak('texture', v)} />
      </TweaksPanel>

      <style>{`
        .fw-navlink:hover { color: ${fwTokens.ink} !important; }
        @media (max-width: 920px) {
          .fw-hero-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
          .fw-steps { grid-template-columns: 1fr 1fr !important; }
          .fw-grid-collapse { grid-template-columns: 1fr !important; gap: 18px !important; }
        }
        @media (max-width: 560px) {
          .fw-pad { padding-left: 22px !important; padding-right: 22px !important; }
          .fw-steps { grid-template-columns: 1fr !important; }
          .fw-foot { grid-template-columns: 1fr !important; gap: 10px !important; }
          .fw-foot > * { text-align: left !important; }
        }
      `}</style>
    </div>);

}

const _fwRoot = ReactDOM.createRoot(document.getElementById('root'));
_fwRoot.render(<LandingPage />);