// pagebird waiting list — section components
// Editorial, warm, restrained. One italic accent. One coral moment per surface.

const { useState, useEffect, useRef } = React;

// ─── shared bits ────────────────────────────────────────────────────────────
const Eyebrow = ({ num, children, color }) =>
<div style={{
  fontFamily: "'Inter', system-ui, sans-serif",
  fontSize: 12, letterSpacing: "0.32em", textTransform: "uppercase",
  fontWeight: 600, color: color || "var(--pb-green)",
  display: "flex", alignItems: "baseline", gap: 14
}}>
    {num != null &&
  <span style={{ color: "var(--pb-coral)", fontWeight: 700 }}>{num}</span>
  }
    <span>{children}</span>
  </div>;


// Render a headline string like "Where readers/*flock.*"
// '/' = line break, '*...*' = italic coral accent.
function renderHeadline(str) {
  if (!str) return null;
  const lines = str.split("/");
  return lines.map((line, li) => {
    const parts = line.split(/(\*[^*]+\*)/g).filter(Boolean);
    return (
      <span key={li} style={{ display: "block" }}>
        {parts.map((p, i) => p.startsWith("*") && p.endsWith("*") ?
        <em key={i} style={{ fontStyle: "italic", color: "var(--pb-coral)" }}>{p.slice(1, -1)}</em> :
        <span key={i}>{p}</span>)}
      </span>);

  });
}

// ─── HERO ───────────────────────────────────────────────────────────────────
function HeroSection({ C, theme, hero, headline, sub, accent, count, onSubmit }) {
  const isDark = theme === "dark";
  const isSplit = hero === "1";

  return (
    <section data-screen-label="01 Hero" style={{
      position: "relative",
      background: `linear-gradient(165deg, ${C.green} 0%, ${C.greenDeep} 60%, ${C.greenDark} 100%)`,
      color: C.cream,
      borderRadius: "0 0 28px 28px",
      overflow: "hidden",
      padding: isSplit ? "44px 56px 96px" : "44px 56px 120px"
    }}>
      <window.GoldLinework opacity={0.5} color={C.gold} />

      {/* Top bar */}
      <div style={{
        position: "relative", zIndex: 2,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        maxWidth: 1240, margin: "0 auto"
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <window.PageBirdMark size={36} />
          <span style={{
            fontFamily: "var(--pb-font-display)", fontStyle: "italic",
            fontSize: 26, fontWeight: 400, letterSpacing: "-0.02em",
            color: C.cream, lineHeight: 1
          }}>pagebird</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
          <a href="#what" style={navLink(C)}>What you get</a>
          <a href="#preview" style={navLink(C)}>Preview</a>
          <a href="#faq" style={navLink(C)}>FAQ</a>
          <a href="#join" style={{
            ...navLink(C),
            border: `1px solid ${C.gold}`, color: C.gold,
            padding: "8px 16px", borderRadius: 999
          }}>Join the flock</a>
        </div>
      </div>

      {/* Hero content */}
      <div style={{
        position: "relative", zIndex: 1,
        maxWidth: 1240, margin: "80px auto 0",
        display: "grid",
        gridTemplateColumns: isSplit ? "1.2fr 1fr" : "1fr",
        gap: 56, alignItems: "center"
      }}>
        <div style={{ textAlign: isSplit ? "left" : "center", maxWidth: isSplit ? "none" : 880, marginInline: isSplit ? 0 : "auto" }}>
          <div style={{ display: "flex", justifyContent: isSplit ? "flex-start" : "center" }}>
            <Eyebrow num="01" color={C.gold}>Now boarding · private beta</Eyebrow>
          </div>
          <h1 style={{
            fontFamily: "var(--pb-font-display)",
            fontSize: "clamp(64px, 9vw, 132px)",
            fontWeight: 400, lineHeight: 0.94,
            letterSpacing: "-0.03em",
            margin: "22px 0 22px",
            color: C.cream,
            textWrap: "balance"
          }}>{renderHeadline(headline)}</h1>
          <p style={{
            fontFamily: "var(--pb-font-display)",
            fontWeight: 300, fontSize: 22, lineHeight: 1.5,
            color: "rgba(244,235,220,0.82)",
            maxWidth: 56 + "ch",
            margin: isSplit ? "0 0 36px" : "0 auto 36px"
          }}>{sub}</p>

          <EmailForm C={C} onSubmit={onSubmit} centered={!isSplit} />

          <FlockCount C={C} count={count} centered={!isSplit} />
        </div>

        {isSplit &&
        <div style={{ display: "flex", justifyContent: "center" }}>
            <window.PageBirdHero size={420} accentColor={C.coral} greenColor={C.greenLight} greenLightColor={C.gold} />
          </div>
        }
      </div>

      {!isSplit &&
      <div style={{
        position: "relative", zIndex: 1, marginTop: 64,
        display: "flex", justifyContent: "center"
      }}>
          <window.PageBirdHero size={360} accentColor={C.coral} greenColor={C.greenLight} greenLightColor={C.gold} />
        </div>
      }
    </section>);

}

const navLink = (C) => ({
  fontFamily: "var(--pb-font-ui)",
  fontSize: 13, fontWeight: 600,
  letterSpacing: "0.04em",
  color: "rgba(244,235,220,0.78)",
  textDecoration: "none"
});

// ─── EMAIL FORM ─────────────────────────────────────────────────────────────
function EmailForm({ C, onSubmit, centered, dark = true, compact = false }) {
  const [email, setEmail] = useState("");
  const [state, setState] = useState("idle"); // idle | submitting | done | error
  const [error, setError] = useState("");

  const submit = async (e) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setError("That doesn't look like an email.");
      setState("error");
      return;
    }
    setError("");
    setState("submitting");

    const KIT_FORM_ID = "9401647";
    try {
      const body = new FormData();
      body.append("email_address", email);
      const res = await fetch(`https://app.kit.com/forms/${KIT_FORM_ID}/subscriptions`, {
        method: "POST",
        body
      });
      if (!res.ok) throw new Error("Subscription failed");
      setState("done");
      onSubmit && onSubmit(email);
    } catch (err) {
      setError("Something went wrong. Please try again.");
      setState("error");
    }
  };

  if (state === "done") {
    return (
      <div style={{
        display: "flex", alignItems: "center", gap: 14,
        justifyContent: centered ? "center" : "flex-start",
        padding: "18px 22px",
        background: dark ? "rgba(244,235,220,0.10)" : "rgba(31,61,49,0.06)",
        border: `1px solid ${dark ? "rgba(217,180,92,0.5)" : "rgba(31,61,49,0.18)"}`,
        borderRadius: 16,
        maxWidth: compact ? "none" : 560,
        marginInline: centered ? "auto" : 0,
        fontFamily: "var(--pb-font-display)", fontWeight: 300, fontSize: 17,
        color: dark ? C.cream : C.text
      }}>
        <span style={{
          width: 28, height: 28, borderRadius: 999,
          display: "grid", placeItems: "center",
          background: C.gold, color: C.greenDark,
          fontFamily: "var(--pb-font-ui)", fontWeight: 800, fontSize: 14
        }}>✓</span>
        <span>You're on the list. Look for a quiet hello soon.</span>
      </div>);

  }

  return (
    <form onSubmit={submit} style={{
      display: "flex", gap: 10, flexWrap: "wrap",
      maxWidth: compact ? "none" : 560,
      marginInline: centered ? "auto" : 0,
      justifyContent: centered ? "center" : "flex-start"
    }}>
      <input
        type="email"
        value={email}
        onChange={(e) => {setEmail(e.target.value);if (state === "error") setState("idle");}}
        placeholder="your@email.com"
        style={{
          flex: "1 1 240px",
          padding: "16px 20px",
          fontFamily: "var(--pb-font-display)",
          fontWeight: 300,
          fontSize: 17,
          background: dark ? "rgba(244,235,220,0.08)" : "var(--pb-paper)",
          border: `1px solid ${state === "error" ? C.coral : dark ? "rgba(244,235,220,0.22)" : "rgba(31,61,49,0.16)"}`,
          borderRadius: 14,
          color: dark ? C.cream : C.text,
          outline: "none"
        }} />
      
      <button type="submit" disabled={state === "submitting"} style={{
        padding: "16px 26px",
        fontFamily: "var(--pb-font-ui)",
        fontWeight: 700, fontSize: 14, letterSpacing: "0.06em",
        background: C.coral, color: "#FFF8F0",
        border: "none", borderRadius: 14, cursor: "pointer",
        boxShadow: "0 6px 20px rgba(232,133,107,0.35)",
        whiteSpace: "nowrap"
      }}>
        {state === "submitting" ? "Sending…" : "Join the flock →"}
      </button>
      {error &&
      <div style={{
        width: "100%",
        fontFamily: "var(--pb-font-ui)", fontSize: 13,
        color: C.coral, paddingLeft: 4
      }}>{error}</div>
      }
    </form>);

}

// ─── FLOCK COUNT ────────────────────────────────────────────────────────────
function FlockCount({ C, count, centered }) {
  return (
    <div style={{
      marginTop: 28,
      display: "flex", alignItems: "center", gap: 14,
      justifyContent: centered ? "center" : "flex-start",
      fontFamily: "var(--pb-font-ui)",
      fontSize: 12, fontWeight: 700,
      letterSpacing: "0.18em", textTransform: "uppercase",
      color: "rgba(244,235,220,0.72)"
    }}>
      <span style={{ display: "flex" }}>
        {[0, 1, 2, 3].map((i) =>
        <span key={i} style={{
          width: 22, height: 22, borderRadius: 999,
          background: [C.gold, C.coral, C.pink, C.greenLight][i],
          border: `2px solid ${C.greenDeep}`,
          marginLeft: i === 0 ? 0 : -8
        }} />
        )}
      </span>
      <span><span style={{ color: C.gold, fontFamily: "var(--pb-font-display)", fontStyle: "italic", fontWeight: 400, fontSize: 16, letterSpacing: 0, textTransform: "none" }}>{count.toLocaleString()}</span> &nbsp;readers waiting</span>
    </div>);

}

// ─── MANIFESTO ──────────────────────────────────────────────────────────────
function ManifestoSection({ C }) {
  return (
    <section data-screen-label="02 Manifesto" style={{
      padding: "120px 56px",
      background: C.bg,
      color: C.text
    }}>
      <div style={{ maxWidth: 1080, margin: "0 auto" }}>
        <Eyebrow num="02">A note from the founders</Eyebrow>
        <h2 style={{
          fontFamily: "var(--pb-font-display)",
          fontSize: "clamp(40px, 5vw, 72px)",
          fontWeight: 400, letterSpacing: "-0.02em", lineHeight: 1.05,
          margin: "28px 0 0",
          color: C.text,
          maxWidth: "20ch",
          textWrap: "balance"
        }}>
          Book clubs deserve a <em style={{ color: C.coral, fontStyle: "italic" }}>better</em> home than a group chat.
        </h2>

        <div style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56,
          fontFamily: "var(--pb-font-display)", fontWeight: 300,
          fontSize: 19, lineHeight: 1.6, color: C.text
        }}>
          <p style={{ margin: 0 }}>
            We love book clubs. The slow ones, the wine ones, the work ones.
            But the tools are scattered — a spreadsheet for the reading list,
            a thread for the meetup, a doc for the questions, a calendar invite
            no one finds. Conversations get lost. People stop coming.
          </p>
          <p style={{ margin: 0, color: "var(--pb-ink-soft)" }}>
            Pagebird is a quiet, beautiful place to gather around a book.
            Pick the next read together. Schedule the meetup. Keep the
            discussion. Remember what your friends thought of chapter four.
            One app, made for readers, made by readers.
          </p>
        </div>

        <div style={{
          marginTop: 56, paddingTop: 28,
          borderTop: `1px solid ${C.border}`,
          display: "flex", alignItems: "center", gap: 16,
          fontFamily: "var(--pb-font-ui)", fontSize: 13,
          color: "var(--pb-ink-muted)",
          letterSpacing: "0.04em"
        }}>
          <span style={{ fontFamily: "var(--pb-font-display)", fontStyle: "italic", fontSize: 16, color: C.text }}>— The Pagebird team</span>
          <span style={{ width: 4, height: 4, borderRadius: 999, background: C.coral }} />
          <span>Tampa, FL</span>
        </div>
      </div>
    </section>);

}

// ─── WHAT YOU GET ───────────────────────────────────────────────────────────
function WhatSection({ C }) {
  const items = [
  {
    n: "i",
    title: "A reading list, voted on",
    body: "Members suggest. Members vote. The next read picks itself, gracefully."
  },
  {
    n: "ii",
    title: "Meetups people actually attend",
    body: "Schedule once, send to phones, RSVP without a thread. Nudges that don't nag."
  },
  {
    n: "iii",
    title: "Discussion that survives the night",
    body: "Threaded chapters. Spoiler-aware. Your favorite line, saved for next year's reread."
  },
  {
    n: "iv",
    title: "A reading shelf you'll keep",
    body: "Every book your flock has read together — annotated, ranked, remembered."
  }];


  return (
    <section id="what" data-screen-label="03 What you get" style={{
      padding: "120px 56px",
      background: "var(--pb-paper)",
      color: C.text,
      borderTop: `1px solid ${C.border}`
    }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 24 }}>
          <div>
            <Eyebrow num="03">What's inside</Eyebrow>
            <h2 style={{
              fontFamily: "var(--pb-font-display)",
              fontSize: "clamp(40px, 5vw, 64px)",
              fontWeight: 400, letterSpacing: "-0.02em", lineHeight: 1.05,
              margin: "20px 0 0", textWrap: "balance",
              color: C.text, maxWidth: "16ch"
            }}>
              Four things, done <em style={{ color: C.coral, fontStyle: "italic" }}>well.</em>
            </h2>
          </div>
          <p style={{
            fontFamily: "var(--pb-font-display)", fontWeight: 300,
            fontSize: 18, lineHeight: 1.5, color: "var(--pb-ink-soft)",
            maxWidth: "40ch", margin: 0
          }}>
            We resisted the urge to ship a hundred features. Here's what every
            book club actually needs.
          </p>
        </div>

        <div style={{
          marginTop: 72,
          display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "1px",
          background: C.border,
          border: `1px solid ${C.border}`,
          borderRadius: 24, overflow: "hidden"
        }}>
          {items.map((it, i) =>
          <div key={i} style={{
            padding: "44px 40px",
            background: "var(--pb-paper)",
            minHeight: 240
          }}>
              <div style={{
              fontFamily: "var(--pb-font-display)", fontStyle: "italic",
              fontSize: 18, color: C.coral, fontWeight: 400,
              letterSpacing: "0.04em"
            }}>{it.n}</div>
              <h3 style={{
              fontFamily: "var(--pb-font-display)",
              fontSize: 30, fontWeight: 400, letterSpacing: "-0.015em",
              lineHeight: 1.15, color: C.text,
              margin: "10px 0 14px", maxWidth: "18ch"
            }}>{it.title}</h3>
              <p style={{
              fontFamily: "var(--pb-font-display)", fontWeight: 300,
              fontSize: 17, lineHeight: 1.55,
              color: "var(--pb-ink-soft)",
              margin: 0, maxWidth: "32ch"
            }}>{it.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── APP PREVIEW (phone mocks) ──────────────────────────────────────────────
function PhoneFrame({ C, children, label, n, tilt = 0 }) {
  return (
    <div style={{
      transform: `rotate(${tilt}deg)`,
      transformOrigin: "center bottom"
    }}>
      <div style={{
        width: 280, height: 580,
        borderRadius: 44,
        background: C.greenDark,
        padding: 10,
        boxShadow: "var(--pb-shadow-phone)",
        position: "relative"
      }}>
        <div style={{
          width: "100%", height: "100%",
          borderRadius: 36, overflow: "hidden",
          background: C.cream, position: "relative"
        }}>
          {/* Notch */}
          <div style={{
            position: "absolute", top: 10, left: "50%", transform: "translateX(-50%)",
            width: 100, height: 24, borderRadius: 999, background: C.greenDark, zIndex: 5
          }} />
          {children}
        </div>
      </div>
      {label &&
      <div style={{
        marginTop: 24, textAlign: "center",
        fontFamily: "var(--pb-font-ui)", fontSize: 11, fontWeight: 700,
        letterSpacing: "0.24em", textTransform: "uppercase",
        color: "var(--pb-ink-muted)"
      }}>
          <span style={{ color: C.coral, marginRight: 10 }}>{n}</span>{label}
        </div>
      }
    </div>);

}

function PhoneScreen_ReadingList({ C }) {
  const books = [
  { t: "Tomorrow, and Tomorrow, and Tomorrow", a: "Gabrielle Zevin", v: 8, color: C.coral },
  { t: "Trust", a: "Hernan Diaz", v: 5, color: C.gold },
  { t: "The Bee Sting", a: "Paul Murray", v: 4, color: C.greenLight },
  { t: "Demon Copperhead", a: "Barbara Kingsolver", v: 2, color: C.pinkDeep }];

  return (
    <div style={{ padding: "44px 18px 18px", height: "100%", overflow: "hidden", color: C.text }}>
      <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 10, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: C.coral }}>
        Reading list · Voting
      </div>
      <h4 style={{ fontFamily: "var(--pb-font-display)", fontSize: 26, fontWeight: 400, letterSpacing: "-0.02em", margin: "6px 0 4px", lineHeight: 1.05 }}>
        Pick our <em style={{ fontStyle: "italic", color: C.coral }}>July</em> read
      </h4>
      <div style={{ fontFamily: "var(--pb-font-display)", fontWeight: 300, fontSize: 13, color: "var(--pb-ink-muted)", marginBottom: 14 }}>
        Closes Sunday · 12 votes in
      </div>
      {books.map((b, i) =>
      <div key={i} style={{
        background: "var(--pb-paper)", border: `1px solid ${C.border}`,
        borderRadius: 14, padding: "10px 12px", marginBottom: 8,
        display: "flex", alignItems: "center", gap: 10
      }}>
          <div style={{
          width: 34, height: 46, borderRadius: 4, flexShrink: 0,
          background: b.color, position: "relative",
          boxShadow: "0 2px 6px rgba(0,0,0,0.15)"
        }}>
            <div style={{ position: "absolute", left: 4, right: 4, top: 6, height: 1, background: "rgba(255,255,255,0.5)" }} />
            <div style={{ position: "absolute", left: 4, right: 8, bottom: 6, height: 1, background: "rgba(255,255,255,0.4)" }} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: "var(--pb-font-display)", fontSize: 12, fontWeight: 400, lineHeight: 1.2, color: C.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{b.t}</div>
            <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 10, color: "var(--pb-ink-muted)", marginTop: 2 }}>{b.a}</div>
          </div>
          <div style={{
          display: "flex", flexDirection: "column", alignItems: "center", gap: 2
        }}>
            <div style={{
            width: 26, height: 26, borderRadius: 8,
            background: i === 0 ? C.coral : "transparent",
            border: i === 0 ? "none" : `1px solid ${C.border}`,
            display: "grid", placeItems: "center",
            fontFamily: "var(--pb-font-ui)", fontSize: 12, fontWeight: 700,
            color: i === 0 ? "#fff" : C.text
          }}>↑</div>
            <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 9, fontWeight: 700, color: i === 0 ? C.coral : "var(--pb-ink-muted)" }}>{b.v}</div>
          </div>
        </div>
      )}
    </div>);

}

function PhoneScreen_Meetup({ C }) {
  return (
    <div style={{ height: "100%", color: C.text, position: "relative", overflow: "hidden" }}>
      <div style={{
        background: `linear-gradient(160deg, ${C.green}, ${C.greenDeep})`,
        color: C.cream, padding: "44px 18px 24px", borderRadius: "0 0 24px 24px",
        position: "relative", overflow: "hidden"
      }}>
        <div style={{ position: "absolute", inset: 0, opacity: 0.4 }}>
          <window.GoldLinework opacity={0.4} color={C.gold} />
        </div>
        <div style={{ position: "relative" }}>
          <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 10, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: C.gold }}>
            Sunday · 7 pm
          </div>
          <h4 style={{ fontFamily: "var(--pb-font-display)", fontSize: 22, fontWeight: 400, letterSpacing: "-0.02em", margin: "8px 0 4px", lineHeight: 1.1 }}>
            Chapter <em style={{ fontStyle: "italic", color: C.gold }}>seven</em><br />at Maya's
          </h4>
          <div style={{ fontFamily: "var(--pb-font-display)", fontWeight: 300, fontSize: 13, color: "rgba(244,235,220,0.7)", marginTop: 6 }}>
            812 Highland Ave · bring a snack
          </div>
        </div>
      </div>

      <div style={{ padding: "18px 18px" }}>
        <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 10, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: C.coral, marginBottom: 10 }}>
          7 going · 1 maybe
        </div>
        <div style={{ display: "flex", marginBottom: 16 }}>
          {[C.gold, C.coral, C.pinkDeep, C.greenLight, C.gold, C.coral, C.pink].map((bg, i) =>
          <div key={i} style={{
            width: 32, height: 32, borderRadius: 999,
            background: bg, border: `2.5px solid var(--pb-paper)`,
            marginLeft: i === 0 ? 0 : -10,
            fontFamily: "var(--pb-font-display)", fontStyle: "italic", fontSize: 13,
            fontWeight: 400, color: C.greenDark,
            display: "grid", placeItems: "center"
          }}>{["m", "j", "a", "r", "s", "l", "e"][i]}</div>
          )}
        </div>

        <div style={{
          padding: 14, background: "var(--pb-paper)", borderRadius: 14,
          border: `1px solid ${C.border}`, marginBottom: 10
        }}>
          <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 10, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--pb-ink-muted)", marginBottom: 6 }}>
            Discussion prep
          </div>
          <div style={{ fontFamily: "var(--pb-font-display)", fontSize: 14, lineHeight: 1.4, fontWeight: 400, color: C.text }}>
            "Did the chapter four reveal land for you, or feel earned too quickly?"
          </div>
        </div>

        <button style={{
          width: "100%", padding: "12px",
          background: C.coral, color: "#fff",
          border: "none", borderRadius: 12,
          fontFamily: "var(--pb-font-ui)", fontWeight: 700, fontSize: 12, letterSpacing: "0.08em"
        }}>I'M GOING →</button>
      </div>
    </div>);

}

function PhoneScreen_Discussion({ C }) {
  return (
    <div style={{ padding: "44px 0 0", height: "100%", color: C.text, display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "0 18px 12px", borderBottom: `1px solid ${C.border}` }}>
        <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 10, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: C.coral }}>
          Discussion · Ch. 4
        </div>
        <h4 style={{ fontFamily: "var(--pb-font-display)", fontSize: 18, fontWeight: 400, letterSpacing: "-0.015em", margin: "6px 0 0", lineHeight: 1.1 }}>
          The <em style={{ fontStyle: "italic", color: C.coral }}>letter</em> scene
        </h4>
      </div>

      <div style={{ padding: "14px 18px", flex: 1, overflow: "hidden", display: "flex", flexDirection: "column", gap: 10 }}>
        {[
        { name: "Jules", color: C.gold, t: "Couldn't put it down. The way he addresses her — that's the whole novel in one paragraph.", time: "2h" },
        { name: "Aria", color: C.coral, t: "I'm not so sure. Felt like the author tipped their hand. Anyone else?", time: "1h" },
        { name: "Maya", color: C.greenLight, t: "Aria — same. But I came around when I reread. The narrator is *unreliable* on purpose.", time: "32m" }].
        map((m, i) =>
        <div key={i} style={{ display: "flex", gap: 10 }}>
            <div style={{
            width: 28, height: 28, borderRadius: 999, flexShrink: 0,
            background: m.color, color: C.greenDark,
            display: "grid", placeItems: "center",
            fontFamily: "var(--pb-font-display)", fontStyle: "italic", fontWeight: 400, fontSize: 13
          }}>{m.name[0].toLowerCase()}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 11, fontWeight: 700, color: C.text }}>{m.name}</div>
                <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 9, color: "var(--pb-ink-muted)" }}>{m.time}</div>
              </div>
              <div style={{ fontFamily: "var(--pb-font-display)", fontWeight: 300, fontSize: 12.5, lineHeight: 1.45, color: C.text, marginTop: 2 }}
            dangerouslySetInnerHTML={{ __html: m.t.replace(/\*([^*]+)\*/g, `<em style="color:${C.coral};font-style:italic">$1</em>`) }} />
            
            </div>
          </div>
        )}
      </div>

      <div style={{ padding: 12, borderTop: `1px solid ${C.border}`, display: "flex", gap: 8, alignItems: "center" }}>
        <div style={{
          flex: 1, height: 34, borderRadius: 999, border: `1px solid ${C.border}`,
          background: "var(--pb-paper)", padding: "0 14px",
          display: "flex", alignItems: "center",
          fontFamily: "var(--pb-font-display)", fontWeight: 300, fontSize: 12,
          color: "var(--pb-ink-muted)"
        }}>Quote a line…</div>
      </div>
    </div>);

}

function PreviewSection({ C }) {
  return (
    <section id="preview" data-screen-label="04 Preview" style={{
      position: "relative",
      padding: "128px 56px 140px",
      background: `linear-gradient(165deg, ${C.green} 0%, ${C.greenDeep} 100%)`,
      color: C.cream, overflow: "hidden"
    }}>
      <window.GoldLinework opacity={0.35} color={C.gold} />

      <div style={{ position: "relative", maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <Eyebrow num="04" color={C.gold}>A first look</Eyebrow>
          <h2 style={{
            fontFamily: "var(--pb-font-display)",
            fontSize: "clamp(40px, 5.5vw, 72px)",
            fontWeight: 400, letterSpacing: "-0.025em", lineHeight: 1.05,
            margin: "20px auto 0",
            color: C.cream, maxWidth: "20ch", textWrap: "balance"
          }}>
            Built for the way book clubs <em style={{ fontStyle: "italic", color: C.gold }}>actually</em> meet.
          </h2>
        </div>

        <div style={{
          display: "flex", justifyContent: "center", alignItems: "flex-end",
          gap: 32, flexWrap: "wrap"
        }}>
          <PhoneFrame C={C} label="Reading list" n="i" tilt={-3}>
            <PhoneScreen_ReadingList C={C} />
          </PhoneFrame>
          <PhoneFrame C={C} label="Meetup" n="ii" tilt={0}>
            <PhoneScreen_Meetup C={C} />
          </PhoneFrame>
          <PhoneFrame C={C} label="Discussion" n="iii" tilt={3}>
            <PhoneScreen_Discussion C={C} />
          </PhoneFrame>
        </div>
      </div>
    </section>);

}

// ─── QUIETLY INTELLIGENT ────────────────────────────────────────────────────
function IntelligentSection({ C }) {
  const moments = [
  {
    kicker: "Before the meetup",
    title: "A few questions, ready to go.",
    body: "Pagebird drafts three discussion prompts the night before, drawn from the chapters your group is on. Use one, edit them, or ignore them entirely.",
    preview:
    <div style={{
      padding: 18, background: "var(--pb-paper)",
      border: `1px solid ${C.border}`, borderRadius: 14,
      display: "flex", flexDirection: "column"
    }}>
          <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 10, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: C.coral, marginBottom: 10 }}>
            Suggested prompts · ch. 4–7
          </div>
          {[
      "Did the chapter four reveal land for you, or feel earned too quickly?",
      "Whose interior monologue is doing the most work here?",
      "Where do you think the unreliable narrator first slips?"].
      map((q, i) =>
      <div key={i} style={{
        padding: "10px 12px", marginTop: i === 0 ? 0 : 8,
        background: i === 0 ? `${C.coral}14` : "transparent",
        border: `1px solid ${i === 0 ? `${C.coral}55` : C.border}`,
        borderRadius: 10,
        fontFamily: "var(--pb-font-display)", fontWeight: 300, fontSize: 14, lineHeight: 1.4,
        color: C.text,
        display: "flex", alignItems: "baseline", gap: 10
      }}>
              <span style={{
          fontFamily: "var(--pb-font-display)", fontStyle: "italic",
          color: C.coral, fontSize: 13, fontWeight: 400
        }}>{String(i + 1).padStart(2, "0")}</span>
              <span>{q}</span>
            </div>
      )}
        </div>

  },
  {
    kicker: "After you read",
    title: "What might come next.",
    body: "When your club closes a book, Pagebird quietly suggests two or three you might love — based on what your flock has read together, not what's trending.",
    preview:
    <div style={{
      padding: 18, background: "var(--pb-paper)",
      border: `1px solid ${C.border}`, borderRadius: 14,
      display: "flex", flexDirection: "column"
    }}>
          <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 10, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: C.coral, marginBottom: 12 }}>
            For your flock, next
          </div>
          {[
      { t: "The Bee Sting", a: "Paul Murray", why: "Big family, shifting voices — like Trust", c: C.greenLight },
      { t: "Birnam Wood", a: "Eleanor Catton", why: "You loved a slow build", c: C.gold },
      { t: "The Fraud", a: "Zadie Smith", why: "Picks up a thread from Demon Copperhead", c: C.pinkDeep }].
      map((b, i) =>
      <div key={i} style={{
        display: "flex", gap: 12, alignItems: "center",
        padding: "10px 0",
        borderTop: i === 0 ? "none" : `1px solid ${C.border}`
      }}>
              <div style={{
          width: 30, height: 42, borderRadius: 3, flexShrink: 0,
          background: b.c, boxShadow: "0 2px 4px rgba(0,0,0,0.15)",
          position: "relative"
        }}>
                <div style={{ position: "absolute", left: 3, right: 3, top: 5, height: 1, background: "rgba(255,255,255,0.5)" }} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: "var(--pb-font-display)", fontSize: 15, fontWeight: 400, lineHeight: 1.2, color: C.text }}>{b.t}</div>
                <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 11, color: "var(--pb-ink-muted)", marginTop: 2 }}>{b.a}</div>
                <div style={{ fontFamily: "var(--pb-font-display)", fontStyle: "italic", fontWeight: 300, fontSize: 12, color: C.coral, marginTop: 4 }}>{b.why}</div>
              </div>
            </div>
      )}
        </div>

  },
  {
    kicker: "If you fall behind",
    title: "A spoiler-safe catch-up.",
    body: "Stuck on chapter three when the group is on seven? A short, gentle recap of what you've read so far. Never ahead of where you are.",
    preview:
    <div style={{
      padding: 18, background: "var(--pb-paper)",
      border: `1px solid ${C.border}`, borderRadius: 14,
      display: "flex", flexDirection: "column"
    }}>
          <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        marginBottom: 12
      }}>
            <div style={{ fontFamily: "var(--pb-font-ui)", fontSize: 10, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: C.coral }}>
              Your catch-up
            </div>
            <div style={{
          fontFamily: "var(--pb-font-ui)", fontSize: 10, fontWeight: 700,
          padding: "3px 8px", borderRadius: 999,
          background: `${C.greenLight}22`, color: C.green,
          letterSpacing: "0.12em", textTransform: "uppercase"
        }}>Through ch. 3</div>
          </div>
          <div style={{
        fontFamily: "var(--pb-font-display)", fontWeight: 300, fontSize: 14, lineHeight: 1.55,
        color: C.text
      }}>
            We open in <em style={{ fontStyle: "italic", color: C.coral }}>Brooklyn</em>, late September,
            and meet Ada — a translator who's just lost the only person who reads her work. Three chapters in,
            she's accepted a strange commission from a stranger who knows her late editor. The book is
            taking its time; that seems to be the point.
          </div>
          <div style={{
        marginTop: 12, paddingTop: 10, borderTop: `1px solid ${C.border}`,
        fontFamily: "var(--pb-font-ui)", fontSize: 10,
        color: "var(--pb-ink-muted)", letterSpacing: "0.06em"
      }}>
            ↑ Stops at your bookmark · won't peek ahead
          </div>
        </div>

  }];


  return (
    <section data-screen-label="04 Quietly intelligent" style={{
      padding: "120px 56px",
      background: C.bg,
      color: C.text,
      borderTop: `1px solid ${C.border}`
    }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56,
          alignItems: "end", marginBottom: 80
        }}>
          <div>
            <Eyebrow num="04">Quietly intelligent</Eyebrow>
            <h2 style={{
              fontFamily: "var(--pb-font-display)",
              fontSize: "clamp(40px, 5vw, 68px)",
              fontWeight: 400, letterSpacing: "-0.025em", lineHeight: 1.05,
              margin: "20px 0 0", textWrap: "balance",
              color: C.text, maxWidth: "18ch"
            }}>
              A little help, only when it <em style={{ fontStyle: "italic", color: C.coral }}>helps.</em>
            </h2>
          </div>
          <p style={{
            fontFamily: "var(--pb-font-display)", fontWeight: 300,
            fontSize: 19, lineHeight: 1.55,
            color: "var(--pb-ink-soft)",
            maxWidth: "44ch", margin: 0
          }}>
            Pagebird has a soft hand on the wheel. Three small moments where it
            steps in — to draft a question, suggest a next read, or recap what
            you've read so far. Always optional. Never spoiler-y. Never selling
            you anything.
          </p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: 32, alignItems: "stretch"
        }}>
          {moments.map((m, i) =>
          <div key={i} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              {React.cloneElement(m.preview, {
              style: { ...m.preview.props.style, flex: 1, height: "auto" }
            })}
              <div style={{ minHeight: 175 }}>
                <div style={{
                fontFamily: "var(--pb-font-ui)", fontSize: 11, fontWeight: 700,
                letterSpacing: "0.22em", textTransform: "uppercase",
                color: C.coral, marginBottom: 10
              }}>{m.kicker}</div>
                <h3 style={{
                fontFamily: "var(--pb-font-display)",
                fontSize: 24, fontWeight: 400, letterSpacing: "-0.015em",
                lineHeight: 1.15, color: C.text,
                margin: "0 0 10px", maxWidth: "20ch"
              }}>{m.title}</h3>
                <p style={{
                fontFamily: "var(--pb-font-display)", fontWeight: 300,
                fontSize: 16, lineHeight: 1.55,
                color: "var(--pb-ink-soft)",
                margin: 0, maxWidth: "34ch"
              }}>{m.body}</p>
              </div>
            </div>
          )}
        </div>

        {/* Footnote — privacy posture */}
        <div style={{
          marginTop: 72, paddingTop: 24,
          borderTop: `1px solid ${C.border}`,
          display: "flex", alignItems: "baseline", gap: 18,
          fontFamily: "var(--pb-font-display)", fontWeight: 300,
          fontSize: 15, lineHeight: 1.5,
          color: "var(--pb-ink-muted)",
          maxWidth: "72ch"
        }}>
          <span style={{
            fontFamily: "var(--pb-font-display)", fontStyle: "italic",
            color: C.coral, fontSize: 14, fontWeight: 400, flexShrink: 0
          }}>note</span>
          <span>
            Your discussions, annotations, and reading list are yours. Pagebird
            never trains on your conversations and never reads ahead of where
            you are in a book.
          </span>
        </div>
      </div>
    </section>);

}

// ─── QUOTE / SOCIAL PROOF ───────────────────────────────────────────────────
function QuoteSection({ C }) {
  return (
    <section data-screen-label="05 Quote" style={{
      padding: "120px 56px",
      background: C.bg
    }}>
      <div style={{ maxWidth: 980, margin: "0 auto", textAlign: "center" }}>
        <window.CoralSquiggle color={C.coral} style={{
          width: 140, height: 56, margin: "0 auto 20px",
          opacity: 0.8
        }} />
        <blockquote style={{
          fontFamily: "var(--pb-font-display)",
          fontWeight: 300,
          fontSize: "clamp(28px, 3.6vw, 44px)",
          lineHeight: 1.2,
          letterSpacing: "-0.015em",
          color: C.text,
          margin: 0,
          textWrap: "balance"
        }}>
          "Our group used six different apps to keep one book club going.
          Pagebird is the <em style={{ fontStyle: "italic", color: C.coral }}>first thing</em> that
          felt like it was made for us."
        </blockquote>
        <div style={{
          marginTop: 32,
          fontFamily: "var(--pb-font-ui)", fontSize: 12, fontWeight: 700,
          letterSpacing: "0.18em", textTransform: "uppercase",
          color: "var(--pb-ink-muted)"
        }}>
          <span style={{ fontFamily: "var(--pb-font-display)", fontStyle: "italic", fontSize: 16, color: C.text, fontWeight: 400, letterSpacing: 0, textTransform: "none", marginRight: 14 }}>Hilary S.

          </span>
          Beta reader · 4-year book club
        </div>
      </div>
    </section>);

}

// ─── FAQ ───────────────────────────────────────────────────────────────────
function FAQSection({ C }) {
  const items = [
  {
    q: "When does pagebird launch?",
    a: "We're rolling out invites starting this summer, in small flocks. The waiting list goes first, in order — older clubs and bigger groups slightly ahead."
  },
  {
    q: "How much will it cost?",
    a: "The core club — reading list, meetups, discussion — will always be free for groups up to ten. A modest monthly plan covers larger flocks and shared shelves."
  },
  {
    q: "Will there be an iPhone and Android app?",
    a: "Yes, both iOS and Android will follow shortly after public launch. The web app works everywhere in the meantime."
  },
  {
    q: "Can I bring my existing book club?",
    a: "Please do. We'll import your reading list from a spreadsheet, Goodreads, or just a copy-paste. Invite your group with a single link."
  }];

  const [open, setOpen] = useState(0);

  return (
    <section id="faq" data-screen-label="06 FAQ" style={{
      padding: "120px 56px",
      background: "var(--pb-paper)",
      color: C.text,
      borderTop: `1px solid ${C.border}`
    }}>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>
        <Eyebrow num="05">Questions</Eyebrow>
        <h2 style={{
          fontFamily: "var(--pb-font-display)",
          fontSize: "clamp(40px, 5vw, 64px)",
          fontWeight: 400, letterSpacing: "-0.02em", lineHeight: 1.05,
          margin: "20px 0 56px",
          color: C.text, maxWidth: "16ch", textWrap: "balance"
        }}>
          Asked <em style={{ fontStyle: "italic", color: C.coral }}>often.</em>
        </h2>

        <div style={{ borderTop: `1px solid ${C.border}` }}>
          {items.map((it, i) =>
          <div key={i} style={{ borderBottom: `1px solid ${C.border}` }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
              width: "100%",
              padding: "26px 0",
              background: "transparent", border: "none", cursor: "pointer",
              display: "flex", alignItems: "baseline", justifyContent: "space-between",
              gap: 24, textAlign: "left"
            }}>
                <span style={{ display: "flex", alignItems: "baseline", gap: 18 }}>
                  <span style={{
                  fontFamily: "var(--pb-font-display)", fontStyle: "italic",
                  fontSize: 14, color: C.coral, fontWeight: 400,
                  minWidth: 24
                }}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{
                  fontFamily: "var(--pb-font-display)",
                  fontSize: 22, fontWeight: 400, letterSpacing: "-0.01em",
                  color: C.text
                }}>{it.q}</span>
                </span>
                <span style={{
                fontFamily: "var(--pb-font-display)", fontStyle: "italic",
                fontSize: 22, color: "var(--pb-ink-muted)",
                transform: open === i ? "rotate(45deg)" : "none",
                transition: "transform 0.2s",
                flexShrink: 0
              }}>+</span>
              </button>
              {open === i &&
            <div style={{
              paddingLeft: 42, paddingRight: 40, paddingBottom: 28,
              fontFamily: "var(--pb-font-display)", fontWeight: 300,
              fontSize: 18, lineHeight: 1.55,
              color: "var(--pb-ink-soft)",
              maxWidth: "62ch"
            }}>
                  {it.a}
                </div>
            }
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── FOOTER w/ secondary capture ────────────────────────────────────────────
function FooterSection({ C, count, onSubmit }) {
  return (
    <section id="join" data-screen-label="07 Footer CTA" style={{
      position: "relative",
      padding: "128px 56px 64px",
      background: `linear-gradient(170deg, ${C.greenDeep} 0%, ${C.greenDark} 100%)`,
      color: C.cream, overflow: "hidden"
    }}>
      <window.GoldLinework opacity={0.4} color={C.gold} />

      <div style={{ position: "relative", maxWidth: 1080, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <Eyebrow num="06" color={C.gold}>Where readers flock</Eyebrow>
            <h2 style={{
              fontFamily: "var(--pb-font-display)",
              fontSize: "clamp(44px, 5.5vw, 80px)",
              fontWeight: 400, letterSpacing: "-0.025em", lineHeight: 1.0,
              margin: "20px 0 24px",
              color: C.cream, textWrap: "balance",
              maxWidth: "16ch"
            }}>
              Save your <em style={{ fontStyle: "italic", color: C.gold }}>seat</em> at the table.
            </h2>
            <p style={{
              fontFamily: "var(--pb-font-display)", fontWeight: 300,
              fontSize: 19, lineHeight: 1.5,
              color: "rgba(244,235,220,0.78)",
              maxWidth: "46ch", margin: "0 0 32px"
            }}>
              We're letting in small flocks at a time. The earlier you join,
              the sooner your club gets its invite.
            </p>
            <EmailForm C={C} onSubmit={onSubmit} centered={false} dark={true} />
            <div style={{
              marginTop: 24,
              fontFamily: "var(--pb-font-ui)", fontSize: 12, fontWeight: 700,
              letterSpacing: "0.18em", textTransform: "uppercase",
              color: "rgba(244,235,220,0.6)"
            }}>
              <span style={{ color: C.gold, fontFamily: "var(--pb-font-display)", fontStyle: "italic", fontSize: 17, letterSpacing: 0, textTransform: "none", fontWeight: 400, marginRight: 12 }}>
                {count.toLocaleString()}
              </span>
              readers already on the list
            </div>
          </div>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <window.PageBirdHero size={360} accentColor={C.coral} greenColor={C.greenLight} greenLightColor={C.gold} />
          </div>
        </div>

        {/* Footer chrome */}
        <div style={{
          marginTop: 96, paddingTop: 32,
          borderTop: `1px solid rgba(244,235,220,0.18)`,
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 24,
          fontFamily: "var(--pb-font-ui)", fontSize: 13,
          color: "rgba(244,235,220,0.6)"
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <window.PageBirdMark size={28} />
            <span style={{ fontFamily: "var(--pb-font-display)", fontStyle: "italic", fontSize: 18, color: C.cream }}>pagebird</span>
            <span>·</span>
            <span>Made in Tampa, FL</span>
          </div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="privacy.html" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
            <a href="mailto:hello@pagebird.ai" style={{ color: "inherit", textDecoration: "none" }}>hello@pagebird.ai</a>
          </div>
        </div>
      </div>
    </section>);

}

// ─── EXPORT ─────────────────────────────────────────────────────────────────
Object.assign(window, {
  HeroSection, ManifestoSection, WhatSection, IntelligentSection, PreviewSection,
  QuoteSection, FAQSection, FooterSection,
  EmailForm, FlockCount
});