// Respoken — landing v8: mint editorial, sommelier voice, refit per brief.
// Sequence: case → voice-as-voice → many rooms → the compact (privacy fused with corpus learning)
//           → four passages → manifesto teaser (links to /manifesto.html)
//           → voices → invitation. No SaaS pill band, no manifesto-less dead links.

const Landing = () => {
  // ── palette — mint paper × navy ink × deep petrol ─────────────
  const mint      = '#dbe8d6';
  const mintSoft  = '#e4ecde';
  const mintDeep  = '#c6d8c2';
  const ink       = '#1a2747';
  const muted     = 'rgba(26,39,71,0.62)';
  const subtle    = 'rgba(26,39,71,0.42)';
  const mutedDk   = 'rgba(211,231,214,0.66)';
  const subtleDk  = 'rgba(211,231,214,0.42)';
  const gold      = 'oklch(0.40 0.075 205)';
  const goldSft   = 'oklch(0.66 0.085 205)';
  const rule      = 'rgba(26,39,71,0.13)';
  const ruleDk    = 'rgba(211,231,214,0.18)';

  // ── type primitives ──────────────────────────────────────────
  const Display = ({ children, style, ...rest }) => (
    <span style={{ fontFamily: '"Fraunces", serif', fontWeight: 300, letterSpacing: '-0.018em', fontVariationSettings: '"SOFT" 60', ...style }} {...rest}>{children}</span>
  );
  const Body = ({ children, style, ...rest }) => (
    <span style={{ fontFamily: '"Source Serif 4", "Source Serif Pro", Georgia, serif', fontWeight: 400, ...style }} {...rest}>{children}</span>
  );
  // Eyebrow / label primitive. Previously JetBrains Mono — which
  // read tech-product rather than editorial-magazine. Now a
  // tracked-out Inter in caps; same "this is a label" affordance,
  // closer to how literary magazines treat small headers.
  // (Name kept as `Mono` to avoid a wide rename — it's now a
  // misnomer in spirit, accurate in role.)
  const Mono = ({ children, style, ...rest }) => (
    <span style={{ fontFamily: '"Inter", system-ui, sans-serif', fontWeight: 500, fontSize: 11.5, letterSpacing: '0.16em', textTransform: 'uppercase', ...style }} {...rest}>{children}</span>
  );

  // UI primitive — buttons, microcopy, anywhere a sans is the right
  // call. Inter for the same reason as above: modern, restrained, no
  // serif-on-a-button awkwardness. Body prose stays Source Serif 4.
  const UI = ({ children, style, ...rest }) => (
    <span style={{ fontFamily: '"Inter", system-ui, sans-serif', ...style }} {...rest}>{children}</span>
  );

  // ── rotating personas + verbs ────────────────────────────────
  const personas = [
    'writers', 'authors', 'storytellers',
    'essayists', 'journalists', 'newsletter authors',
    'podcasters', 'media creators', 'influencers',
    'screenwriters', 'ghostwriters', 'comedians',
    'researchers', 'marketers', 'founders',
  ];
  const verbs = ['find', 'grow', 'protect', 'curate', 'nurture', 'evolve'];
  const pickNext = (list, curr) => {
    if (list.length < 2) return 0;
    let n = curr; while (n === curr) n = Math.floor(Math.random() * list.length);
    return n;
  };
  const [pIdx, setPIdx] = React.useState(0);
  const [vIdx, setVIdx] = React.useState(0);
  const [growInit, setGrowInit] = React.useState(true);
  React.useEffect(() => {
    const t  = setInterval(() => setPIdx(i => pickNext(personas, i)), 1900);
    const tv = setInterval(() => setVIdx(i => pickNext(verbs, i)), 1900);
    const r  = requestAnimationFrame(() => requestAnimationFrame(() => setGrowInit(false)));
    return () => { clearInterval(t); clearInterval(tv); cancelAnimationFrame(r); };
  }, []);

  // ── waitlist field ───────────────────────────────────────────
  const [email, setEmail] = React.useState('');
  const [sent, setSent]   = React.useState(false);
  const submit = (e) => { e.preventDefault?.(); if (email.includes('@')) setSent(true); };

  // ── primitives ───────────────────────────────────────────────
  const Rule = ({ ornament = '✦', dark = false }) => (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, padding: '24px 0' }}>
      <div style={{ flex: 1, height: 1, background: dark ? ruleDk : rule }}></div>
      <span style={{ fontFamily: '"Fraunces", serif', fontSize: 18, color: dark ? mutedDk : muted, fontStyle: 'italic' }}>{ornament}</span>
      <div style={{ flex: 1, height: 1, background: dark ? ruleDk : rule }}></div>
    </div>
  );

  const SectionMark = ({ n, label, color }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28 }}>
      <Mono style={{ color: color || gold }}>{n}</Mono>
      <div style={{ width: 36, height: 1, background: color || gold, opacity: 0.5 }}></div>
      <Mono style={{ color: color || gold, opacity: 0.75 }}>{label}</Mono>
    </div>
  );

  const WaitlistField = ({ dark = false }) => (
    <form onSubmit={submit} style={{
      display: 'flex', alignItems: 'stretch',
      border: `1px solid ${dark ? 'rgba(211,231,214,0.35)' : ink}`,
      borderRadius: 999, overflow: 'hidden',
      background: dark ? 'transparent' : mintSoft,
      maxWidth: 540, width: '100%',
    }}>
      <input
        type="email"
        value={sent ? '' : email}
        onChange={e => setEmail(e.target.value)}
        placeholder={sent ? 'Thank you. We’ll write when there’s a seat.' : 'your@email.com'}
        disabled={sent}
        style={{
          flex: 1, padding: '18px 24px',
          background: 'transparent', border: 'none', outline: 'none',
          color: dark ? mint : ink,
          // Was Source Serif 4 — serif on form fields read too
          // novelist; Inter feels right for UI.
          fontFamily: '"Inter", system-ui, sans-serif', fontSize: 16, fontWeight: 400,
          fontStyle: sent ? 'italic' : 'normal',
        }}
      />
      <button type="submit" disabled={sent} style={{
        padding: '18px 28px',
        background: dark ? mint : ink,
        color: dark ? ink : mint,
        border: 'none', cursor: sent ? 'default' : 'pointer',
        // Was Source Serif 4 — serif on buttons read heavy. Inter
        // medium reads as confident sans without being shouty.
        fontFamily: '"Inter", system-ui, sans-serif', fontSize: 15, fontWeight: 500, letterSpacing: '0.01em',
        whiteSpace: 'nowrap',
      }}>{sent ? 'On the list ✓' : 'Join the waitlist'}</button>
    </form>
  );

  return (
    <div style={{ background: mint, color: ink, fontFamily: '"Source Serif 4", Georgia, serif', width: '100%' }}>
      <style>{`
        @keyframes rspFlip {
          0%   { opacity: 0; transform: translateY(12px); filter: blur(3px); }
          100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
        }
        .rsp-flip { display: inline-block; animation: rspFlip .7s cubic-bezier(.2,.7,.3,1) both; }
        .rsp-grow {
          position: relative; display: inline-block; font-style: italic;
          background: linear-gradient(${gold}, ${gold}) left bottom / 100% 0.16em no-repeat;
          /* Sit the underline flush under the letters. Iterated:
             0.04em was inside the letterforms; 0.16em floated low
             past the descender; 0.08em was close but still a hair
             low; 0.074em (one pixel up at 156px font) lands flush. */
          padding: 0 0.04em 0.074em;
          transition: background-size 1.4s cubic-bezier(.2,.7,.3,1);
        }
        .rsp-grow.rsp-grow-init { background-size: 0% 0.16em; }
        .drop::first-letter {
          font-family: "Fraunces", serif; font-weight: 300;
          float: left; font-size: 5.2em; line-height: 0.85;
          padding: 0.06em 0.12em 0 0;
          color: ${gold};
        }
        .vignette { position: relative; overflow: hidden; }
        .vignette .fpwm {
          position: absolute; right: -24px; bottom: -24px;
          width: 220px; height: 220px; opacity: 0.06; pointer-events: none;
        }
      `}</style>

      {/* ── NAV ─────────────────────────────────────────────── */}
      <nav style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '24px 56px', borderBottom: `1px solid ${rule}`,
      }}>
        <a href="index.html" style={{ display: 'inline-flex', alignItems: 'center', textDecoration: 'none' }}>
          <img src="assets/respoken-wordmark-navy.png" alt="Respoken" style={{ height: 38, width: 'auto', display: 'block' }} />
        </a>
        <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          <a href="manifesto.html" style={{ color: ink, opacity: 0.78, textDecoration: 'none', fontSize: 16 }}>Manifesto</a>
          <a href="pricing.html"   style={{ color: ink, opacity: 0.78, textDecoration: 'none', fontSize: 16 }}>Pricing</a>
          <a href="#waitlist"      style={{ color: ink, opacity: 0.78, textDecoration: 'none', fontSize: 16 }}>Waitlist</a>
          <span style={{ width: 1, height: 16, background: rule }}></span>
          <a href="#waitlist" style={{
            border: `1px solid ${ink}`, color: ink, padding: '10px 20px',
            textDecoration: 'none', fontSize: 14.5, borderRadius: 999,
          }}>Join the waitlist</a>
        </div>
      </nav>

      {/* ── HERO ────────────────────────────────────────────── */}
      <section style={{ padding: '88px 64px 96px', borderBottom: `1px solid ${rule}` }}>
        <Mono style={{ color: gold, display: 'block', marginBottom: 36 }}>The studio for —</Mono>

        <Display style={{ fontSize: 156, lineHeight: 0.9, letterSpacing: '-0.035em', display: 'block', maxWidth: 1500 }}>
          <span style={{ fontStyle: 'italic', color: gold, display: 'inline-block', minWidth: '0.1em' }}>
            <span key={pIdx} className="rsp-flip">{personas[pIdx]}</span>
          </span>
          <br />
          who want to{' '}
          <span style={{ fontStyle: 'italic', color: gold, display: 'inline-block', minWidth: '0.1em' }}>
            <span key={'v'+vIdx} className="rsp-flip">{verbs[vIdx]}</span>
          </span><br />
          their <span className={`rsp-grow${growInit ? ' rsp-grow-init' : ''}`}>unique</span> voice.
        </Display>

        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 96, marginTop: 80, alignItems: 'end' }}>
          <Body style={{ fontSize: 23, lineHeight: 1.5, color: ink, maxWidth: 620, display: 'block' }}>
            The writing studio for creators. Your voice &mdash; studied, kept private, never lent to someone else&rsquo;s machine.
          </Body>
          <div style={{ justifySelf: 'end', maxWidth: 540, width: '100%' }}>
            <Mono style={{ color: muted, display: 'block', marginBottom: 14 }}>The waitlist</Mono>
            <WaitlistField />
            <UI style={{ fontSize: 13, color: muted, display: 'block', marginTop: 14, fontStyle: 'italic', fontWeight: 400 }}>
              We&rsquo;re letting people in slowly, on purpose.
            </UI>
          </div>
        </div>
      </section>

      {/* ── i. THE CASE ─────────────────────────────────────── */}
      <section style={{ padding: '160px 64px', borderBottom: `1px solid ${rule}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionMark n="i." label="The case" />
          <Display style={{ fontSize: 78, lineHeight: 1.05, letterSpacing: '-0.025em', display: 'block', marginBottom: 56 }}>
            The web is filling with sentences that <span style={{ fontStyle: 'italic', color: gold }}>no one wrote</span> and no one wanted.
          </Display>
          <Body style={{ fontSize: 23, lineHeight: 1.65, color: ink, display: 'block', maxWidth: 860 }} className="drop">
            Right now, the easy way to write is to give your work to a stranger and let it come back averaged. The result reads — well, it reads like everyone else. The feed is louder, the writing thinner, and somewhere in there, your voice is getting harder to hear.
          </Body>
        </div>
      </section>

      {/* ── ii. VOICE AS VOICE ──────────────────────────────── */}
      <section style={{ padding: '160px 64px', borderBottom: `1px solid ${rule}`, background: mintSoft }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 96, alignItems: 'start', maxWidth: 1500, margin: '0 auto' }}>
          <div style={{ position: 'sticky', top: 40 }}>
            <SectionMark n="ii." label="The voice" />
            <Display style={{ fontSize: 76, lineHeight: 1.0, display: 'block', letterSpacing: '-0.02em' }}>
              A voice is mostly<br />
              what you <span style={{ fontStyle: 'italic', color: gold }}>don&rsquo;t</span> say.
            </Display>
          </div>
          <div style={{ paddingTop: 12 }}>
            <Body style={{ fontSize: 22, lineHeight: 1.65, color: ink, display: 'block', marginBottom: 28 }} className="drop">
              It&rsquo;s the contractions you favor. The slang you earned. The way you start a paragraph with <em>Now,</em> even though a teacher once underlined it. The em dash in the middle of a thought. The swearing if you swear. The sentence that runs on because the thought wasn&rsquo;t finished.
            </Body>
            <Body style={{ fontSize: 19, lineHeight: 1.7, color: muted, display: 'block', marginBottom: 28 }}>
              Most tools quietly smooth all of that out. They mistake your voice for an error and your style for a draft. The result is fluent. It&rsquo;s also no longer yours.
            </Body>
            <Rule />
            <Body style={{ fontSize: 22, lineHeight: 1.6, color: ink, display: 'block', fontStyle: 'italic' }}>
              Respoken is built on the opposite assumption. The quirks aren&rsquo;t bugs — they&rsquo;re the part of the writing that makes it worth reading. They stay on the page, exactly where you put them.
            </Body>
          </div>
        </div>
      </section>

      {/* ── iii. MANY ROOMS, ONE WRITER ─────────────────────── */}
      <section style={{ padding: '160px 64px', borderBottom: `1px solid ${rule}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionMark n="iii." label="The craft" />
          <Display style={{ fontSize: 78, lineHeight: 1.05, letterSpacing: '-0.025em', display: 'block', marginBottom: 56 }}>
            Voice is yours. <span style={{ fontStyle: 'italic', color: gold }}>Form is ours.</span>
          </Display>
          <Body style={{ fontSize: 23, lineHeight: 1.65, color: ink, display: 'block', maxWidth: 860, marginBottom: 28 }} className="drop">
            What makes a LinkedIn post get read isn&rsquo;t what makes a newsletter get opened, isn&rsquo;t what makes a long essay get finished. Each room has its own conventions &mdash; the openings that pull, the structures that hold, the closes that land &mdash; and the studio has been built to know them.
          </Body>
          <div style={{ maxWidth: 860 }}>
            <Rule />
            <Body style={{ fontSize: 19, lineHeight: 1.7, color: muted, display: 'block' }}>
              <strong style={{ color: ink, fontWeight: 500 }}>Your voice carries through.</strong> The shape it takes is informed by the room &mdash; the patterns of the form, the conventions of the platform, the things a working editor would notice without making a show of noticing them.
            </Body>
          </div>
        </div>
      </section>

      {/* ── iv. MANY ROOMS, ONE WRITER ────────────────── */}
      <section style={{ padding: '160px 64px', background: ink, color: mint }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionMark n="iv." label="Many rooms, when you need them" color={goldSft} />
          <Display style={{ fontSize: 78, lineHeight: 1.05, letterSpacing: '-0.025em', display: 'block', marginBottom: 56, color: mint }}>
            One voice today.<br /><span style={{ fontStyle: 'italic', color: goldSft }}>More when the work calls for them.</span>
          </Display>
          <div style={{ maxWidth: 860 }}>
            <Body style={{ fontSize: 22, lineHeight: 1.65, color: mint, opacity: 0.92, display: 'block', marginBottom: 28 }}>
              Some creators write in a single voice. Others have several &mdash; a public voice for the platforms, a looser one for the newsletter, the wry one in the script, the considered one for the long essay. The studio is built for both, and grows with the work.
            </Body>
            <Body style={{ fontSize: 19, lineHeight: 1.7, color: mintDeep, display: 'block' }}>
              Each voice keeps its own audience, its own register, its own habits &mdash; the way it opens a sentence, the way it lands one. Switch rooms; switch voices; you stay the same writer, speaking where you mean to.
            </Body>
          </div>
        </div>
      </section>

      {/* ── v. THE PACT — corpus + privacy fused ─────────────── */}
      <section style={{ padding: '160px 64px', borderBottom: `1px solid ${rule}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 96, alignItems: 'start', maxWidth: 1500, margin: '0 auto' }}>
          <div style={{ position: 'sticky', top: 40 }}>
            <SectionMark n="v." label="The pact" />
            <Display style={{ fontSize: 72, lineHeight: 1.0, display: 'block', letterSpacing: '-0.02em' }}>
              Your <span style={{ fontStyle: 'italic', color: gold }}>voice</span><br />
              grows from what<br />
              you&rsquo;ve already<br />
              <span style={{ fontStyle: 'italic' }}>written</span>.
            </Display>
          </div>
          <div style={{ paddingTop: 12 }}>
            <Body style={{ fontSize: 22, lineHeight: 1.65, color: ink, display: 'block', marginBottom: 36, fontWeight: 400 }}>
              <strong style={{ color: ink, fontWeight: 500 }}>The studio learns by reading.</strong> The essays you&rsquo;ve already published. The newsletters you&rsquo;ve sent. The talks you&rsquo;ve given, the threads you&rsquo;ve posted, the chapters you&rsquo;ve drafted in the dark. Bring a few; bring an archive&rsquo;s worth. The more the studio reads, the more recognizably <em>you</em> the new work becomes.
            </Body>
            <Rule />
            <Body style={{ fontSize: 19, lineHeight: 1.7, color: muted, display: 'block', marginBottom: 28 }}>
              <strong style={{ color: ink, fontWeight: 500 }}>Your work, your archive, your account.</strong> Held privately under your name, visible only to you. Never pooled with anyone else&rsquo;s writing. Never used to train a model someone else gets to use.
            </Body>
            <Body style={{ fontSize: 19, lineHeight: 1.7, color: muted, display: 'block' }}>
              <strong style={{ color: ink, fontWeight: 500 }}>And when you decide to leave, you take everything with you.</strong> The drafts, the references, the voice the studio built around your work &mdash; yours to keep, yours to take. We close the account on your word alone.
            </Body>
          </div>
        </div>
      </section>

      {/* ── v. THE STUDIO — 4 PASSAGES ──────────────────────── */}
      <section style={{ padding: '160px 64px', borderBottom: `1px solid ${rule}`, background: mintSoft }}>
        <div style={{ maxWidth: 1500, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'end', marginBottom: 80 }}>
            <div>
              <SectionMark n="vi." label="The studio" />
              <Display style={{ fontSize: 78, lineHeight: 1.0, display: 'block', letterSpacing: '-0.025em' }}>
                Three rooms,<br />
                all in the same <span style={{ fontStyle: 'italic', color: gold }}>key</span>.
              </Display>
            </div>
            <Body style={{ fontSize: 20, lineHeight: 1.6, color: muted, display: 'block', maxWidth: 520, fontStyle: 'italic' }}>
              Described in the only register that matters: what they feel like to write inside.
            </Body>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, border: `1px solid ${rule}` }}>
            {[
              {
                kind: 'create',
                eyebrow: 'i — to create',
                title: <>A place to <span style={{ fontStyle: 'italic', color: gold }}>create</span>, refine, and augment.</>,
                body: 'A working surface where your voice and your ideas meet. Drafting, polishing, shaping the companion pieces around a central one — all of it inside the same calm space, none of it losing the feel of you on the page.',
              },
              {
                kind: 'grow',
                eyebrow: 'ii — to grow',
                title: <>A learning system that <span style={{ fontStyle: 'italic', color: gold }}>nurtures</span> your voice.</>,
                body: 'A patient companion that reads what you’ve already written and learns by attention, not by survey. The more it reads, the more the new work sounds like you wrote it on a good day — even on the days you didn’t.',
              },
              {
                kind: 'know',
                eyebrow: 'iii — to know',
                title: <>The materials your writing <span style={{ fontStyle: 'italic', color: gold }}>draws from</span>.</>,
                body: <>Research notes. Interview transcripts. Source documents. The books you&rsquo;ve underlined and the briefs you&rsquo;ve kept. The studio holds them all, ready the moment the writing reaches for them.<br /><br /><em>The studio sounds like you. It also knows what you&rsquo;ve read.</em></>,
              },
            ].map((v, i) => (
              <div key={i} className="vignette" style={{
                padding: '64px 48px',
                borderRight: i < 2 ? `1px solid ${rule}` : 'none',
                background: i === 1 ? mintDeep : mint,
                position: 'relative',
              }}>
                <img src="assets/respoken-icon-navy.png" alt="" className="fpwm" />
                <div style={{ position: 'relative', zIndex: 1 }}>
                  {/* Eyebrow only — geometric SVG icons removed. The
                      gold italic verb in the headline + the fingerprint
                      watermark behind the card are doing the visual
                      work; small SVG marks were redundant on top and
                      pulled the page toward a SaaS feature-grid feel. */}
                  <Mono style={{ color: gold, display: 'block', marginBottom: 28 }}>
                    {v.eyebrow}
                  </Mono>
                  {/* Reserve two lines of headline height so all three
                      card titles end at the same y-coordinate, even if
                      a wrap break happens to land differently per card.
                      ~38px font × ~1.05 line-height × 2 lines = ~80px. */}
                  <Display style={{
                    fontSize: 38, lineHeight: 1.05,
                    display: 'block', marginBottom: 22,
                    letterSpacing: '-0.02em',
                    minHeight: '80px',
                  }}>
                    {v.title}
                  </Display>
                  <Body style={{ fontSize: 17, lineHeight: 1.7, color: muted, display: 'block' }}>
                    {v.body}
                  </Body>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── vi. MANIFESTO TEASER ────────────────────────────── */}
      <section style={{ background: ink, color: mint, padding: '160px 64px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
          <SectionMark n="vii." label="By creators, for creators" color={goldSft} />
          <Display style={{ fontSize: 92, lineHeight: 1.0, display: 'block', color: mint, marginBottom: 48, letterSpacing: '-0.025em' }}>
            We built the studio<br />
            we wanted to <span style={{ fontStyle: 'italic', color: goldSft }}>write in</span>.
          </Display>
          <Rule dark />
          <Body style={{ fontSize: 22, lineHeight: 1.6, color: mint, opacity: 0.92, display: 'block', marginTop: 36, marginBottom: 8, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto', fontStyle: 'italic' }}>
            Respoken was made by creators who got tired of fighting their own tools. We built a room organized around the writer, not the model — and around the long-held idea that the work belongs to the person who wrote it.
          </Body>
          <a href="manifesto.html" style={{
            display: 'inline-block', marginTop: 32,
            color: goldSft,
            fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 24,
            textDecoration: 'underline', textUnderlineOffset: 6, textDecorationThickness: 1,
          }}>Read the manifesto →</a>
        </div>
      </section>

      {/* ── vii. VOICE SAMPLES — pull-quotes ────────────────── */}
      <section style={{ padding: '160px 64px', borderBottom: `1px solid ${rule}`, background: mintDeep }}>
        <div style={{ maxWidth: 1500, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 80 }}>
            <SectionMark n="viii." label="Overheard" />
            <Display style={{ fontSize: 78, lineHeight: 1.05, display: 'block', letterSpacing: '-0.025em' }}>
              Voices in their<br />
              <span style={{ fontStyle: 'italic', color: gold }}>own</span> voice.
            </Display>
            <Mono style={{ color: subtle, display: 'block', marginTop: 28, fontSize: 10.5 }}>
              Placeholder until beta voices are collected.
            </Mono>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1, background: rule, border: `1px solid ${rule}` }}>
            {[
              { quote: <>I sat down to write a cold email I would have regretted by Friday. I sent something better instead.</>, who: 'L.B.', meta: 'founder' },
              { quote: <>It writes the way I talk to my older brother. It figured that out faster than my last editor did.</>, who: 'R.S.', meta: 'essayist' },
              { quote: <>For the first time in two years, I read something I&rsquo;d written and didn&rsquo;t wonder if a machine had been in the room.</>, who: 'N.K.', meta: 'newsletter author' },
              { quote: <>The drafts come faster, but they sound more like me. I didn&rsquo;t expect both at once.</>, who: 'A.M.', meta: 'podcaster' },
              { quote: <>It reads me back to me. Not flattened, not sanded — just sharper than I was on Tuesday.</>, who: 'L.S.', meta: 'novelist' },
              { quote: <>Three pieces a week, none of which sound like the others I&rsquo;ve seen this morning. That is the whole product, and it works.</>, who: 'J.P.', meta: 'content lead' },
            ].map((v, i) => (
              <div key={i} style={{
                padding: '56px 44px',
                background: mintSoft,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                minHeight: 320,
              }}>
                <Display style={{ fontSize: 26, lineHeight: 1.32, fontStyle: 'italic', display: 'block', marginBottom: 32 }}>
                  &ldquo;{v.quote}&rdquo;
                </Display>
                <div>
                  <Body style={{ fontSize: 15, color: ink, fontWeight: 500, display: 'block' }}>— {v.who}</Body>
                  <Mono style={{ color: muted, marginTop: 4, fontSize: 10.5 }}>{v.meta}</Mono>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── viii. THE INVITATION ────────────────────────────── */}
      <section id="waitlist" style={{ padding: '160px 64px', background: mint }}>
        <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <SectionMark n="ix." label="The invitation" />
          <Display style={{ fontSize: 108, lineHeight: 0.95, display: 'block', letterSpacing: '-0.03em', marginBottom: 40 }}>
            Pour yourself<br />
            a <span style={{ fontStyle: 'italic', color: gold }}>draft</span>.
          </Display>
          <UI style={{ fontSize: 17, lineHeight: 1.5, color: ink, opacity: 0.72, display: 'block', marginBottom: 48, maxWidth: 620, marginLeft: 'auto', marginRight: 'auto', fontStyle: 'italic', fontWeight: 400 }}>
            We&rsquo;re letting people in slowly, on purpose. Leave your name; we&rsquo;ll write when there&rsquo;s a seat.
          </UI>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <WaitlistField />
          </div>
        </div>
      </section>

      {/* ── FOOTER ──────────────────────────────────────────── */}
      <footer style={{ background: ink, color: mint, padding: '64px 64px 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, alignItems: 'start', marginBottom: 56 }}>
          <div>
            <img src="assets/respoken-wordmark-navy.png" alt="Respoken" style={{ height: 40, width: 'auto', display: 'block', marginBottom: 22, filter: 'brightness(0) invert(1)' }} />
            <UI style={{ fontSize: 14, color: mutedDk, display: 'block', maxWidth: 320, lineHeight: 1.65, fontStyle: 'italic', fontWeight: 400 }}>
              Your voice. Sharper. Yours.
            </UI>
          </div>
          <div>
            <Mono style={{ color: subtleDk, display: 'block', marginBottom: 14 }}>Read</Mono>
            <a href="manifesto.html" style={{ color: mint, opacity: 0.82, textDecoration: 'none', display: 'block', fontSize: 15, marginBottom: 8 }}>Manifesto</a>
            <a href="pricing.html"   style={{ color: mint, opacity: 0.82, textDecoration: 'none', display: 'block', fontSize: 15, marginBottom: 8 }}>Pricing</a>
            <a href="#waitlist"      style={{ color: mint, opacity: 0.82, textDecoration: 'none', display: 'block', fontSize: 15 }}>Waitlist</a>
          </div>
          <div>
            <Mono style={{ color: subtleDk, display: 'block', marginBottom: 14 }}>Quiet things</Mono>
            <a href="privacy.html"             style={{ color: mint, opacity: 0.82, textDecoration: 'none', display: 'block', fontSize: 15, marginBottom: 8 }}>Privacy</a>
            <a href="#"                        style={{ color: mint, opacity: 0.82, textDecoration: 'none', display: 'block', fontSize: 15, marginBottom: 8 }}>Terms</a>
            <a href="mailto:hello@respoken.ai" style={{ color: mint, opacity: 0.82, textDecoration: 'none', display: 'block', fontSize: 15 }}>Contact</a>
          </div>
          <div>
            <Mono style={{ color: subtleDk, display: 'block', marginBottom: 14 }}>Elsewhere</Mono>
            <a href="#" style={{ color: mint, opacity: 0.82, textDecoration: 'none', display: 'block', fontSize: 15, marginBottom: 8 }}>Notes</a>
            <a href="#" style={{ color: mint, opacity: 0.82, textDecoration: 'none', display: 'block', fontSize: 15 }}>Letters</a>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 32, borderTop: `1px solid ${ruleDk}` }}>
          <Mono style={{ color: subtleDk }}>respoken.ai · mmxxvi</Mono>
          <Mono style={{ color: subtleDk, fontStyle: 'italic' }}>— your voice. sharper. yours.</Mono>
        </div>
      </footer>
    </div>
  );
};

window.Landing = Landing;
