// English That Works — main site components

const { useState, useEffect, useRef } = React;

// ============================================================
// TOP BAR
// ============================================================
function TopBar() {
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a href="index.html" className="brand">
          <span className="brand-mark">TW</span>
          <span className="brand-words">
            <span className="brand-words-1">THAT WORKS</span>
            <span className="brand-words-2">STUDIO</span>
          </span>
        </a>
        <nav className="topnav">
          <a href="index.html">Studio</a>
          <a href="About.html">About</a>
          <a href="index.html#newsletter" className="topnav-cta">Join the waitlist</a>
        </nav>
      </div>
      <div className="topbar-rule"></div>
    </header>
  );
}

// ============================================================
// HERO
// ============================================================
function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero-grid">
        <div className="hero-meta">
          <div className="hero-mono">FIRST EDITION · 2026 · BRITISH ENGLISH</div>
          <div className="hero-mono">VOLUME 01 OF THAT WORKS STUDIO</div>
        </div>

        <div className="hero-cover-col">
          <window.SamplePreviewer
            pdfUrl="assets/EnglishThatWorks_Sample.pdf"
            downloadName="EnglishThatWorks_Sample.pdf"
            storageKey="etw_book_sample_email"
            maxPages={30}
            label="READ A SAMPLE"
            anchor="hero-sample"
            endTitle="Want to know when it launches?"
            endTag="END OF PREVIEW"
            buyUrl="index.html#newsletter"
            buyLabel="Join the waitlist"
            sampleBadge={true}
            coverImage="assets/cover.png"
          />
        </div>

        <div className="hero-words">
          <p className="hero-eyebrow">A practical fluency guide for Italian speakers</p>
          <h1 className="hero-title">
            <span>Stop</span>
            <span>translating</span>
            <span className="hero-rust">Italian.</span>
            <span>Start sounding</span>
            <span>natural in English.</span>
          </h1>
          <div className="hero-meta-row">
            <div className="hero-meta-item">
              <div className="page-mono dim">CHAPTERS</div>
              <div className="hero-stat">61<span className="hero-stat-sub">+12 bonus</span></div>
            </div>
            <div className="hero-meta-item">
              <div className="page-mono dim">THEMATIC PARTS</div>
              <div className="hero-stat">06</div>
            </div>
            <div className="hero-meta-item">
              <div className="page-mono dim">LEVEL</div>
              <div className="hero-stat">B1–B2</div>
            </div>
          </div>

          <div className="hero-ctas">
            <a href="index.html#newsletter" className="btn-primary">Join the waitlist →</a>
            <a href="#anatomy" className="btn-ghost">What's inside</a>
          </div>
        </div>
      </div>

      <div className="hero-strip" aria-hidden="true">
        <div className="hero-strip-track">
          {Array.from({ length: 4 }).map((_, i) => (
            <span key={i} className="hero-strip-row">
              <span>STOP TRANSLATING</span>
              <span className="dot">●</span>
              <span>START THINKING</span>
              <span className="dot">●</span>
              <span>SOUND NATURAL</span>
              <span className="dot">●</span>
              <span>ENGLISH THAT WORKS</span>
              <span className="dot">●</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// THE PREMISE
// ============================================================
function Premise() {
  return (
    <section className="premise" id="premise" data-screen-label="02 The Premise">
      <SectionHead num="01" label="THE PREMISE" />
      <div className="premise-grid">
        <div className="premise-left">
          <h2 className="section-h">
            You studied English at school.<br/>
            You read articles. You watch films.<br/>
            But you still <em>translate</em> in your head.
          </h2>
        </div>
        <div className="premise-right">
          <p className="premise-lead">
            Most grammar books explain English on its own terms.
            <b> English That Works</b> is structured around the specific
            gaps between Italian and English — because that's where
            Italian speakers actually get stuck.
          </p>
          <p className="premise-lead">
            Every chapter answers the same question:
            <span className="premise-pull"> "Why does the Italian way I'd naturally say this not work in English?"</span>
          </p>
        </div>
      </div>

      <div className="premise-pairs">
        <div className="pair-head">
          <span className="page-mono">FIVE LIVE EXAMPLES FROM THE BOOK</span>
        </div>
        <div className="pair-list">
          {[
            ["What are you speaking about?", "What are you talking about?", "<i>Speak</i> is for languages and formal contexts. Everyday conversation = <i>talk</i>. Italian <i>parlare</i> covers both, so this trips up almost everyone."],
            ["I'm doing a course of Spanish.", "I'm taking a Spanish course.", "You <b>take</b> a course in English. And it's <i>a Spanish course</i>, not <i>a course of Spanish</i> — adjective before noun."],
            ["What are you doing this weekend?", "What are you up to this weekend?", "Both work — but <b>what are you up to?</b> is what people actually say between friends and colleagues. Warmer, conversational, unmistakably native."],
            ["It's a long time that I don't see her.", "I haven't seen her in ages.", "<i>È da tanto che non la vedo</i> doesn't translate word for word. English flips: negative verb + Present Perfect + <b>in ages</b>."],
            ["I have visited Paris three times in my life.", "I've been to Paris three times.", "<i>In my life</i> is redundant — the Present Perfect already implies it. And <b>been to</b> is the natural verb for visiting places. <i>Visited</i> sounds like a CV."]
          ].map(([wrong, right, why], idx) => (
            <article className="pair" key={idx}>
              <div className="pair-n page-mono">{String(idx + 1).padStart(2, "0")}</div>
              <div className="pair-wrong">
                <span className="wr-tag wrong">✗</span> {wrong}
              </div>
              <div className="pair-right">
                <span className="wr-tag right">✓</span> {right}
              </div>
              <div className="pair-why" dangerouslySetInnerHTML={{ __html: why }}></div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ANATOMY — chapter format
// ============================================================
function Anatomy() {
  const [active, setActive] = useState(null); // index or null = collapsed

  const steps = [
    {
      t: "Real-Life Goal",
      s: "what you'll be able to do after reading the chapter",
      preview: (
        <>
          <p>
            The Present Simple is the tense you'll use more than any other in English.
            It's how you talk about your job, your routines, where you live, what you
            like, how things work, and what's true in general.
          </p>
          <p className="anatomy-pull">
            If you can use the Present Simple well, you can already handle small talk,
            introductions, job interviews, and most everyday conversations.
          </p>
        </>
      )
    },
    {
      t: "Core Rule",
      s: "the underlying pattern in plain terms",
      preview: (
        <>
          <div className="anatomy-rules">
            <div><span className="sign plus">+</span>I / you / we / they <b>work</b></div>
            <div><span className="sign plus">+</span>he / she / it <b>works</b> <span className="muted">← add -s</span></div>
            <div><span className="sign minus">−</span>I <b>don't</b> work · she <b>doesn't</b> work</div>
            <div><span className="sign qmark">?</span><b>Do</b> you work? · <b>Does</b> he work?</div>
          </div>
          <p className="anatomy-list-h">One pattern, three uses:</p>
          <ul className="anatomy-list">
            <li><b>Habits and routines:</b> <i>I check my emails every morning.</i></li>
            <li><b>Permanent facts:</b> <i>My sister lives in Berlin.</i></li>
            <li><b>General truths:</b> <i>Water boils at 100°C.</i></li>
          </ul>
        </>
      )
    },
    {
      t: "How English Thinks",
      s: "the deeper logic, contrasted with Italian",
      preview: (
        <>
          <p>
            In Italian, the <i>presente</i> covers two situations: things in general
            (<i>lavoro a Milano</i>) and things happening right now (<i>lavoro adesso</i>).
            English splits these into <b>two different tenses</b>.
          </p>
          <div className="wr-row"><span className="wr-tag wrong">✗</span><span>I work now. <span className="muted">(general routine?)</span></span></div>
          <div className="wr-row"><span className="wr-tag right">✓</span><span>I'm working now. <span className="muted">(right this moment)</span></span></div>
          <p className="anatomy-pull">
            The Present Simple is for things that are <b>true even when you're not doing them</b>.
            You still "live in Rome" while you're asleep. You still "work at Google" on a Saturday.
          </p>
        </>
      )
    },
    {
      t: "Common Italian Mistakes",
      s: "wrong / right pairs with WHY explanations",
      preview: (
        <>
          <div className="anatomy-mistakes">
            <div className="anatomy-m">
              <div><span className="wr-tag wrong">✗</span> I am work in Milan.</div>
              <div><span className="wr-tag right">✓</span> I work in Milan.</div>
              <p className="muted">Italians add "am/is/are" because of <i>sto / sono</i>. Don't.</p>
            </div>
            <div className="anatomy-m">
              <div><span className="wr-tag wrong">✗</span> Where you live?</div>
              <div><span className="wr-tag right">✓</span> Where <b>do</b> you live?</div>
              <p className="muted">Questions need do/does. In Italian you just change intonation.</p>
            </div>
            <div className="anatomy-m">
              <div><span className="wr-tag wrong">✗</span> What means this word?</div>
              <div><span className="wr-tag right">✓</span> What <b>does</b> this word <b>mean</b>?</div>
              <p className="muted">Even with question words, do/does still comes first.</p>
            </div>
          </div>
        </>
      )
    },
    {
      t: "Real Examples",
      s: "short, realistic sentences by life context",
      preview: (
        <>
          <div className="anatomy-examples">
            {[
              ["WORK", "I manage a small team of designers."],
              ["INTERVIEW", "I don't have much experience with React, but I learn quickly."],
              ["SMALL TALK", "I'm from Naples but I live in London now."],
              ["TRAVEL", "The train leaves at 7.42 — we should hurry."],
              ["DAILY LIFE", "I don't drink coffee after midday or I can't sleep."],
              ["SOCIAL", "How often do you go to the gym? — Maybe twice a week, if I'm honest."]
            ].map(([c, ex], i) => (
              <div className="anatomy-ex" key={i}>
                <span className="page-mono rust">{c}</span>
                <span>{ex}</span>
              </div>
            ))}
          </div>
        </>
      )
    },
    {
      t: "Sound More Natural",
      s: "upgrading textbook English to native English",
      preview: (
        <>
          <div className="anatomy-natural">
            <div className="anatomy-n-row">
              <div><span className="page-mono dim">LESS NATURAL</span> I have 35 years.</div>
              <div><span className="page-mono rust">MORE NATURAL</span> I'm 35.</div>
              <p className="muted">Age uses <b>to be</b>, not <b>to have</b>.</p>
            </div>
            <div className="anatomy-n-row">
              <div><span className="page-mono dim">LESS NATURAL</span> I am agree with you.</div>
              <div><span className="page-mono rust">MORE NATURAL</span> I agree with you.</div>
              <p className="muted">"Agree" is already a full verb. Drop the "am".</p>
            </div>
            <div className="anatomy-n-row">
              <div><span className="page-mono dim">LESS NATURAL</span> I go often to the cinema.</div>
              <div><span className="page-mono rust">MORE NATURAL</span> I often go to the cinema.</div>
              <p className="muted">Adverbs of frequency go before the main verb in English.</p>
            </div>
          </div>
        </>
      )
    },
    {
      t: "Quick Practice",
      s: "practice exercises with answer key",
      preview: (
        <>
          <p className="anatomy-list-h">A. Fix the mistake:</p>
          <ol className="anatomy-list compact">
            <li>My brother live in Manchester.</li>
            <li>Where she works?</li>
            <li>What time opens the shop?</li>
          </ol>
          <p className="anatomy-list-h">B. Translate naturally:</p>
          <ol className="anatomy-list compact">
            <li>Di cosa ti occupi?</li>
            <li>Ogni quanto vai a Roma?</li>
            <li>Non capisco cosa intendi.</li>
          </ol>
          <p className="anatomy-pull small">
            <b>Answers:</b> A. lives · Where does she work? · What time does the shop open?
            B. What do you do? · How often do you go to Rome? · I don't understand what you mean.
          </p>
        </>
      )
    },
    {
      t: "Quick Recap",
      s: "the takeaways in bullet form",
      preview: (
        <>
          <ul className="anatomy-list">
            <li>Present Simple = routines, facts, general truths — not what's happening right now.</li>
            <li>Third person singular needs <b>-s</b>. He works, she goes, it costs.</li>
            <li>Questions and negatives need <b>do / does</b>. The main verb stays in the infinitive.</li>
            <li>Adverbs of frequency go <b>before the main verb</b> (but after "to be").</li>
            <li>For age, use <b>to be</b>, not <b>to have</b>.</li>
          </ul>
        </>
      )
    },
    {
      t: "Mini Takeaway",
      s: "one high-impact insight to remember",
      preview: (
        <div className="anatomy-takeaway">
          <span className="page-mono rust">MINI TAKEAWAY</span>
          <p>If it's true on Tuesday, on a holiday, and at 3 a.m. — it's Present Simple.</p>
        </div>
      )
    }
  ];

  // Keyboard nav when a step is open
  useEffect(() => {
    if (active === null) return;
    const onKey = (e) => {
      if (e.key === "ArrowDown" || e.key === "ArrowRight") {
        e.preventDefault();
        setActive((a) => Math.min(steps.length - 1, (a ?? 0) + 1));
      } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
        e.preventDefault();
        setActive((a) => Math.max(0, (a ?? 0) - 1));
      } else if (e.key === "Escape") {
        setActive(null);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [active, steps.length]);

  return (
    <section className="anatomy" id="anatomy" data-screen-label="03 Anatomy">
      <SectionHead num="02" label="ANATOMY OF A CHAPTER" />

      <div className="anatomy-grid">
        <div className="anatomy-left">
          <h2 className="section-h">
            Nine sections.<br/>
            Same shape, every chapter.
          </h2>
          <p className="anatomy-lead">
            Read it linear like a study guide — or open it at the chapter
            that matches the question of the moment. Either way, the
            navigation feels familiar from page one.
          </p>
          <div className="anatomy-stats">
            <div><div className="big-num">73</div><div className="page-mono dim">CHAPTERS</div></div>
            <div><div className="big-num">06</div><div className="page-mono dim">PARTS</div></div>
          </div>
        </div>

        <div className="anatomy-right">
          <ol className="anatomy-steps">
            {steps.map((step, i) => {
              const isOpen = active === i;
              return (
                <li
                  key={i}
                  className={`anatomy-step ${isOpen ? "open" : ""}`}
                >
                  <button
                    type="button"
                    className="anatomy-step-head"
                    onClick={() => setActive(isOpen ? null : i)}
                    aria-expanded={isOpen}
                    aria-controls={`anatomy-panel-${i}`}
                  >
                    <span className="anatomy-n page-mono">{String(i + 1).padStart(2, "0")}</span>
                    <div className="anatomy-text">
                      <div className="anatomy-t">{step.t}</div>
                      <div className="anatomy-s">{step.s}</div>
                    </div>
                    <span className={`anatomy-toggle ${isOpen ? "open" : ""}`} aria-hidden="true">
                      <span></span>
                      <span></span>
                    </span>
                  </button>
                  <div
                    id={`anatomy-panel-${i}`}
                    className={`anatomy-panel ${isOpen ? "open" : ""}`}
                    role="region"
                    aria-hidden={!isOpen}
                  >
                    <div className="anatomy-panel-inner">
                      <div className="anatomy-panel-head">
                        <span className="page-mono dim">FROM CHAPTER 1 · PRESENT SIMPLE</span>
                        <span className="page-mono dim">§ {String(i + 1).padStart(2, "0")} / 09</span>
                      </div>
                      <div className="anatomy-panel-body">
                        {step.preview}
                      </div>
                      <div className="anatomy-panel-nav">
                        <button
                          className="anatomy-nav-btn"
                          onClick={(e) => { e.stopPropagation(); setActive(Math.max(0, i - 1)); }}
                          disabled={i === 0}
                        >← Previous</button>
                        <button
                          className="anatomy-nav-btn"
                          onClick={(e) => { e.stopPropagation(); setActive(Math.min(steps.length - 1, i + 1)); }}
                          disabled={i === steps.length - 1}
                        >Next →</button>
                      </div>
                    </div>
                  </div>
                </li>
              );
            })}
          </ol>
        </div>
      </div>

      <div className="parts-strip">
        <div className="page-mono dim">SIX THEMATIC PARTS</div>
        <div className="parts-rows">
          {[
            ["PART 1", "Core English Patterns", "Tenses, modals, basic structures"],
            ["PART 2", "Natural English", "Get, Keep, Make/Do, Say/Tell, Still/Yet"],
            ["PART 3", "Common Italian Mistakes", "False friends, Explain me, Actually, Since/For"],
            ["PART 4", "Real-Life Situations", "Meetings, interviews, emails, small talk"],
            ["PART 5", "English That Sounds Better", "Tag questions, softeners, hedging, collocations"],
            ["PART 6", "Survival Grammar Reference", "Tense map, irregulars, conditionals, articles"]
          ].map(([p, t, d], i) => (
            <div className="parts-row" key={i}>
              <span className="parts-p page-mono">{p}</span>
              <span className="parts-t">{t}</span>
              <span className="parts-d">{d}</span>
            </div>
          ))}
          <div className="parts-row bonus">
            <span className="parts-p page-mono rust">BONUS</span>
            <span className="parts-t">Beyond the Sixty-One</span>
            <span className="parts-d">Phrasal verbs, comparatives, reported speech, +9 more</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CROSS-SELL: Digest companion banner
// ============================================================
function DigestBanner() {
  return (
    <section className="digest-banner" id="digest" data-screen-label="03 Digest companion">
      <div className="digest-banner-inner">
        <div className="digest-banner-left">
          <span className="page-mono rust">THE POCKET COMPANION · SOLD SEPARATELY</span>
          <h2 className="digest-banner-h">
            Same 73 chapters,<br/>stripped to <em>four blocks.</em>
          </h2>
          <p className="digest-banner-lead">
            The <b>Tips &amp; Tricks Digest</b> is the condensed companion to this book.
            Built for fast revision — before a meeting, before a call, before an email.
          </p>
        </div>
        <div className="digest-banner-right">
          <a href="Digest.html" className="digest-banner-btn">See the Digest →</a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// THE STUDIO / COLLANA
// ============================================================
function Studio() {
  const upcoming = [
    ["VOL. 03", "Prompting That Works", "How to brief an AI. Specifications, constraints, taste."],
    ["VOL. 04", "Spanish That Works", "Stop translating Italian. Start sounding natural in Spanish."]
  ];

  return (
    <section className="studio" id="studio" data-screen-label="06 Studio">
      <div className="studio-header">
        <SectionHead num="04" label="MORE FROM THE STUDIO" white />
        <h2 className="studio-h">
          Practical books<br/>
          for the gap between<br/>
          <span className="rust">knowing</span> and <span className="rust">doing</span>.
        </h2>
        <p className="studio-lead">
          That Works Studio is an independent editorial project for adults,
          professionals, expats, and modern learners looking for practical fluency
          rather than academic study. <b>English That Works</b> and the
          <b> Tips &amp; Tricks Digest</b> are the first two volumes — with two more on the way.
        </p>
      </div>

      <div className="studio-list">
        <div className="studio-row current">
          <span className="page-mono">VOL. 01 · 2026</span>
          <span className="studio-t">English That Works</span>
          <span className="studio-d">Stop translating Italian. Start sounding natural in English.</span>
          <span className="page-mono status">↳ LAUNCHING SOON</span>
        </div>
        <div className="studio-row companion">
          <span className="page-mono">VOL. 02 · 2026</span>
          <span className="studio-t">Tips &amp; Tricks Digest</span>
          <span className="studio-d">Practical English, in your pocket. Companion to Vol. 01.</span>
          <span className="page-mono status">↳ LAUNCHING SOON</span>
        </div>
        {upcoming.map(([v, t, d], i) => (
          <div className="studio-row" key={i}>
            <span className="page-mono dim2">{v}</span>
            <span className="studio-t dim2">{t}</span>
            <span className="studio-d dim2">{d}</span>
            <span className="page-mono status dim2">↳ FORTHCOMING</span>
          </div>
        ))}
      </div>

      <p className="studio-note page-mono">
        ※ TWO VOLUMES LAUNCHING SOON. TWO MORE IN PROGRESS.
        JOIN THE WAITLIST TO HEAR WHEN THEY GO ON SALE.
      </p>
    </section>
  );
}

// ============================================================
// JOIN THE LIST — newsletter (primary CTA)
// ============================================================
function Join() {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  const [touched, setTouched] = useState(false);
  const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  const submit = (e) => {
    e.preventDefault();
    setTouched(true);
    if (!valid) return;
    setDone(true);
  };

  return (
    <section className="join" id="join" data-screen-label="07 Join">
      <SectionHead num="05" label="JOIN THE LIST" />
      <div className="join-grid">
        <div className="join-left">
          <h2 className="join-h">
            Get the free sample.
          </h2>
          <p className="join-lead">
            Drop your email and we'll send you the first 8 pages of <b>English That Works</b> as a PDF — the same sample you can flip through at the top of this page. Then, occasional notes from the studio when there's something worth reading.
          </p>
          <p className="join-insta page-mono">
            » Daily visual learning cards on <b>Instagram</b> — free for everyone.
          </p>
        </div>

        <div className="join-right">
          {!done ? (
            <form className="join-form" onSubmit={submit} noValidate>
              <label className="join-label page-mono">YOUR EMAIL</label>
              <div className="join-row">
                <input
                  type="email"
                  className="join-input"
                  placeholder="you@example.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  onBlur={() => setTouched(true)}
                />
                <button type="submit" className="join-btn">Subscribe →</button>
              </div>
              {touched && !valid && email.length > 0 && (
                <div className="join-err">That doesn't look like a valid email yet.</div>
              )}
              <div className="join-fine page-mono">
                ※ We'll only email you about That Works Studio.
                Unsubscribe in one click.
              </div>
            </form>
          ) : (
            <div className="join-done">
              <div className="join-done-tag page-mono rust">✓ SAMPLE ON THE WAY</div>
              <h3 className="join-done-h">Check your inbox.</h3>
              <p>We've sent the free sample PDF to <b>{email}</b>. Check your inbox — it should land within a minute.</p>
              <button className="join-back" onClick={() => { setDone(false); setEmail(""); setTouched(false); }}>← Use a different email</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-top">
        <div className="footer-brand">
          <span className="brand-mark big">TW</span>
          <div>
            <div className="brand-words-1 big">THAT WORKS</div>
            <div className="brand-words-2 big">STUDIO</div>
          </div>
        </div>
        <div className="footer-tag">
          Practical books for the gap between knowing and doing.
        </div>
      </div>
      <div className="footer-grid three">
        <div>
          <div className="page-mono dim">CATALOGUE</div>
          <ul>
            <li><a href="english-that-works.html">English That Works <span style={{opacity: 0.5, fontSize: "12px"}}>— Vol.&nbsp;01</span></a></li>
            <li><a href="Digest.html">Tips &amp; Tricks Digest <span style={{opacity: 0.5, fontSize: "12px"}}>— companion to Vol.&nbsp;01</span></a></li>
            <li className="dim2">Prompting That Works · 2027</li>
            <li className="dim2">Spanish That Works · 2027</li>
          </ul>
        </div>
        <div>
          <div className="page-mono dim">STUDIO</div>
          <ul>
            <li><a href="About.html">About</a></li>
            <li><a href="https://www.instagram.com/thatworkstudio/" target="_blank" rel="noopener">Instagram</a></li>
          </ul>
        </div>
        <div>
          <div className="page-mono dim">CONTACT</div>
          <ul>
            <li>info@thatworkstudio.com</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span className="page-mono dim">© 2026 THAT WORKS STUDIO · ALL RIGHTS RESERVED</span>
        <span className="page-mono dim">INDEPENDENTLY PUBLISHED</span>
      </div>
    </footer>
  );
}

// ============================================================
// STICKY CTA — bottom bar, appears after hero
// ============================================================
function StickyCTA() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const max = document.documentElement.scrollHeight - window.innerHeight;
      // show after we've scrolled past hero (~600px) and hide near the join section
      const join = document.getElementById("join");
      const joinTop = join ? join.getBoundingClientRect().top + window.scrollY - 200 : Infinity;
      setShow(y > 700 && y < joinTop);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className={`sticky-cta ${show ? "show" : ""}`}>
      <div className="sticky-inner">
        <div className="sticky-left">
          <span className="page-mono dim">ENGLISH THAT WORKS · VOL. 01</span>
          <span className="sticky-t">Be the first to read it.</span>
        </div>
        <a href="#join" className="sticky-btn">Join the list →</a>
      </div>
    </div>
  );
}

// ============================================================
// Reusable section header
// ============================================================
function SectionHead({ num, label, rust, white }) {
  return (
    <div className={`section-head ${rust ? "rust" : ""} ${white ? "white" : ""}`}>
      <span className="section-num page-mono">§ {num}</span>
      <span className="section-rule"></span>
      <span className="section-label page-mono">{label}</span>
    </div>
  );
}

// ============================================================
// APP
// ============================================================
function App() {
  // Smooth scroll for hash links
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest("a[href^='#']");
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  // Scroll-reveal: add .in-view to section-head/section-h when visible
  useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) e.target.classList.add("in-view");
        });
      },
      { threshold: 0.15 }
    );
    document.querySelectorAll(".reveal, .section-head, .section-h, .premise-pairs, .anatomy-grid, .parts-strip, .quotes-stage, .studio-list, .join-grid").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div className="site">
      <TopBar />
      <Hero />
      <Premise />
      <Anatomy />
      <DigestBanner />
      <Studio />
      <Join />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);