// meta-ads.jsx — main playbook page

function App() {
  return (
    <div>
      <ExportBar />
      <PageHeader />
      <SprintPlan />
      <Strategy />
      <AudienceMatrix />
      <FeedAds />
      <FeedInContext />
      <StoryAds />
      <Carousel />
      <VideoStoryboards />
      <CopyBank />
      <RetargetingFunnel />
      <LaunchPlan />
      <PageFooter />
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// EXPORT BAR — sticky top: shows asset count, downloads everything
// ───────────────────────────────────────────────────────────────
function ExportBar() {
  const count = useAssetCount();
  const [busy, setBusy] = React.useState(false);
  const [prog, setProg] = React.useState(null);

  const downloadAllPack = async () => {
    setBusy(true); setProg({ current: 0, total: count, name: "" });
    try {
      const blob = await buildAssetPack({
        copyBlocks: window.__COPY_BLOCKS__ || [],
        onProgress: (p) => setProg(p),
      });
      triggerDownload(blob, "scribbly-meta-ads-pack.zip");
    } catch (e) {
      console.error(e);
      alert("Export failed — see console");
    } finally {
      setBusy(false); setTimeout(() => setProg(null), 1200);
    }
  };

  const downloadCopyOnly = () => {
    const blocks = window.__COPY_BLOCKS__ || [];
    let txt = "SCRIBBLY · LITTLE LEAGUE — META ADS COPY BANK\n===========================================\n\n";
    for (const block of blocks) {
      txt += `# ${block.name}\n\n`;
      for (const l of block.lines) txt += `[${l.role.toUpperCase()}] ${l.text}\n`;
      txt += "\n";
    }
    const blob = new Blob([txt], { type: "text/plain" });
    triggerDownload(blob, "scribbly-copy-bank.txt");
  };

  const pct = prog ? Math.round((prog.current / Math.max(1, prog.total)) * 100) : 0;

  return (
    <div className="export-bar">
      <div className="export-bar-meta">
        <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".14em", color: "var(--red)" }}>◆ ASSET PACK</span>
        <span className="dot">·</span>
        <span><b>{count}</b> visuals ready</span>
        <span className="dot">·</span>
        <span>full copy bank</span>
        <span className="dot">·</span>
        <span>1-click implement</span>
      </div>
      {prog && (
        <div style={{ display: "flex", alignItems: "center", gap: 10, flex: 1, maxWidth: 360 }}>
          <div className="export-progress"><div style={{ width: `${pct}%` }} /></div>
          <span className="export-progress-label">
            {prog.stage === "zipping" ? "Zipping…" : `${prog.current}/${prog.total} · ${prog.name || ""}`}
          </span>
        </div>
      )}
      <div className="export-bar-actions">
        <button className="export-btn secondary" onClick={downloadCopyOnly} disabled={busy}>
          ↓ Copy bank (.txt)
        </button>
        <button className="export-btn primary" onClick={downloadAllPack} disabled={busy}>
          {busy ? "Building pack…" : "↓ Download everything (.zip)"}
        </button>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
// $100K SPRINT PLAN — the math + 7-day calendar
// ───────────────────────────────────────────────────────────────
function SprintPlan() {
  const scenarios = [
    {
      name: "Single Push",
      aov: 58, orders: 1724, spend: 41376, roas: 2.42,
      desc: "Mostly individual orders, parent-targeted. The safest path — most ad-spend dependent.",
      mix: "75% single · 25% bundle",
      risk: "Burns budget fastest if CPA drifts.",
      accent: "var(--brand)",
    },
    {
      name: "Bundle Hunt",
      aov: 468, orders: 214, spend: 20000, roas: 5.00,
      desc: "Hunt coaches & team moms in GroupMe-adjacent interests. Higher LTV, slower close.",
      mix: "100% team bundles",
      risk: "Long cycle — start week 1 Monday, expect closes Thurs–Sun.",
      accent: "var(--red)",
    },
    {
      name: "Hybrid (recommended)",
      aov: 92, orders: 1087, spend: 34000, roas: 2.94,
      desc: "1,000 singles + ~110 bundles. Best balance of volume and revenue-per-dollar.",
      mix: "70% single · 30% bundle",
      risk: "Requires daily creative rotation by audience.",
      accent: "var(--gold)",
      featured: true,
    },
  ];

  const calendar = [
    { day: "MON", title: "Light the funnel", actions: ["Launch A, B, C, F at $1,500/day each (broad parents)", "Pixel + CAPI smoke test · Catalog feed live", "Email blast to existing list w/ 20% off bundle code"] },
    { day: "TUE", title: "Audit + cull", actions: ["Kill anything < 0.9% CTR by 9am", "Layer Story creatives S1 + S3 at $400/day", "DM 30 team moms manually — coach bundle outreach"] },
    { day: "WED", title: "Bundle push", actions: ["Promote D (Coach bundle) into Top 2 audience clusters", "Influencer micro-drop: 5 baseball moms on IG with code", "Launch retargeting (warm 7-day) at $600/day"] },
    { day: "THU", title: "Scale winners", actions: ["2× spend on top 2 creatives via CBO", "Press email: tip Romper, Apartment Therapy on the angle", "Add carousel into existing top-performing audience"] },
    { day: "FRI", title: "Urgency wave", actions: ["Switch primary copy to \"Order by Sunday for Father's Day\"", "Email #2 to list — abandoned-preview reminder", "Story poll: \"Single or whole team?\""] },
    { day: "SAT", title: "Weekend volume", actions: ["Highest CPM day — verify spend pacing every 2hrs", "Add SMS retargeting to abandoned cart cohort", "Launch UGC reel (S2) if cleared"] },
    { day: "SUN", title: "Close & cash", actions: ["Final 12 hours: \"Last call\" copy across all warm audiences", "Final list email — 4PM and 7PM sends", "Tally · screenshot the dashboard · party"] },
  ];

  return (
    <section className="ads-section" style={{ background: "var(--brand-ink)", color: "white", paddingBlock: "80px 80px", borderBottom: 0 }}>
      <div className="halftone" aria-hidden style={{ position: "absolute", inset: 0, opacity: .12, backgroundImage: "radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.6px)", backgroundSize: "12px 12px", pointerEvents: "none" }} />
      <div className="wrap" style={{ position: "relative" }}>
        <div className="ads-section-eyebrow" style={{ color: "var(--red)" }}>◆ THIS WEEK · 7-DAY SPRINT</div>
        <h2 className="section-h" style={{ color: "white" }}>
          $100,000<br/>
          <span style={{ color: "var(--red)" }}>in seven days.</span>
        </h2>
        <p style={{ marginTop: 16, fontSize: 18, color: "rgba(255,255,255,.78)", maxWidth: 720, lineHeight: 1.55 }}>
          Three paths to the number, the math behind each, and the day-by-day calendar.
          The hybrid plan is what we'd ship Monday morning.
        </p>

        {/* Math card scenarios */}
        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {scenarios.map((s, i) => (
            <div key={i} style={{
              background: s.featured ? "white" : "rgba(255,255,255,.06)",
              color: s.featured ? "var(--ink)" : "white",
              border: s.featured ? "2px solid var(--red)" : "1px solid rgba(255,255,255,.14)",
              borderRadius: 14, padding: 24,
              position: "relative",
              transform: s.featured ? "translateY(-6px)" : "none",
              boxShadow: s.featured ? "0 30px 60px -20px rgba(0,0,0,.5)" : "none",
            }}>
              {s.featured && (
                <div style={{
                  position: "absolute", top: -12, left: 18,
                  background: "var(--red)", color: "white",
                  padding: "5px 10px", borderRadius: 999,
                  fontSize: 10, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase",
                }}>★ Pick this</div>
              )}
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: ".14em", color: s.accent, textTransform: "uppercase" }}>Scenario {String.fromCharCode(65 + i)}</div>
              <h3 className="display" style={{ fontSize: 30, textTransform: "uppercase", marginTop: 6, lineHeight: 1, color: s.featured ? "var(--navy)" : "white" }}>{s.name}</h3>

              <div style={{
                marginTop: 18, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12,
                borderBlock: s.featured ? "1px solid var(--line)" : "1px solid rgba(255,255,255,.15)",
                padding: "16px 0",
              }}>
                <Stat label="AOV" value={`$${s.aov}`} featured={s.featured} />
                <Stat label="Orders" value={s.orders.toLocaleString()} featured={s.featured} />
                <Stat label="Ad spend" value={`$${(s.spend / 1000).toFixed(1)}k`} featured={s.featured} />
                <Stat label="ROAS" value={`${s.roas.toFixed(2)}×`} featured={s.featured} />
              </div>

              <div style={{ marginTop: 14, fontSize: 13, lineHeight: 1.55, color: s.featured ? "var(--ink-2)" : "rgba(255,255,255,.85)" }}>
                {s.desc}
              </div>
              <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 6, fontSize: 12 }}>
                <Row label="Mix" value={s.mix} featured={s.featured} />
                <Row label="Risk" value={s.risk} featured={s.featured} />
              </div>
            </div>
          ))}
        </div>

        {/* 7-day calendar */}
        <div style={{ marginTop: 48 }}>
          <div className="ads-section-eyebrow" style={{ color: "var(--red)" }}>◆ THE 7-DAY CALENDAR</div>
          <h3 className="display" style={{ fontSize: 40, color: "white", textTransform: "uppercase", marginTop: 8 }}>
            What you do, when.
          </h3>
          <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 10 }}>
            {calendar.map((d, i) => (
              <div key={d.day} style={{
                background: "rgba(255,255,255,.05)",
                border: "1px solid rgba(255,255,255,.12)",
                borderRadius: 10, padding: 14,
              }}>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
                  <span className="display" style={{ fontSize: 22, color: "var(--red)", letterSpacing: ".05em" }}>{d.day}</span>
                  <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, color: "rgba(255,255,255,.5)" }}>D{i + 1}</span>
                </div>
                <div className="display" style={{ marginTop: 4, fontSize: 16, color: "white", textTransform: "uppercase", lineHeight: 1.05 }}>{d.title}</div>
                <ul style={{ marginTop: 10, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 6 }}>
                  {d.actions.map((a, j) => (
                    <li key={j} style={{ display: "flex", gap: 6, fontSize: 11.5, color: "rgba(255,255,255,.85)", lineHeight: 1.45 }}>
                      <span style={{ color: "var(--gold)", flexShrink: 0 }}>◆</span>
                      <span>{a}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* Risk / stretch levers */}
        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 18 }}>
          <div style={{
            background: "rgba(216,35,42,.12)", border: "1px solid rgba(216,35,42,.4)",
            borderRadius: 12, padding: 22,
          }}>
            <div className="ads-section-eyebrow" style={{ color: "var(--red)", marginBottom: 6 }}>⚠ HONEST RISKS</div>
            <ul style={{ padding: 0, margin: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                "$100k in a week from cold-start Meta is aggressive. With an existing list of 5k+ engaged emails, very doable. Cold-only: closer to $40–60k.",
                "Bundle path needs warm intros — DM 30 team moms manually before relying on ad clicks.",
                "Apparel/keepsake Q2 CPMs run high; assume $18–24 CPM, not $14.",
                "Gemini-generated previews must look like the example. If output quality wobbles, refunds spike — pause spend until fixed.",
              ].map((t, i) => (
                <li key={i} style={{ display: "flex", gap: 10, fontSize: 13.5, color: "rgba(255,255,255,.9)", lineHeight: 1.55 }}>
                  <span style={{ color: "var(--red)", fontWeight: 700 }}>•</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{
            background: "rgba(232,184,51,.12)", border: "1px solid rgba(232,184,51,.4)",
            borderRadius: 12, padding: 22,
          }}>
            <div className="ads-section-eyebrow" style={{ color: "var(--gold)", marginBottom: 6 }}>⚡ STRETCH LEVERS</div>
            <ul style={{ padding: 0, margin: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                "Manually email 20 youth-league commissioners with a custom \"Coach of the Year\" offer — one yes = 200+ posters.",
                "Time-boxed flash: 24-hr Father's Day collection (push to grandparents).",
                "Affiliate kickback to 5 baseball-mom IG creators — $5/order, no cap.",
                "Bundle floor: free shipping above $200 cart, no exceptions.",
              ].map((t, i) => (
                <li key={i} style={{ display: "flex", gap: 10, fontSize: 13.5, color: "rgba(255,255,255,.9)", lineHeight: 1.55 }}>
                  <span style={{ color: "var(--gold)", fontWeight: 700 }}>↗</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ label, value, featured }) {
  return (
    <div>
      <div style={{
        fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase",
        color: featured ? "var(--muted)" : "rgba(255,255,255,.55)",
      }}>{label}</div>
      <div className="display" style={{ fontSize: 30, color: featured ? "var(--navy)" : "white", lineHeight: 1, marginTop: 2 }}>{value}</div>
    </div>
  );
}
function Row({ label, value, featured }) {
  return (
    <div style={{ display: "flex", gap: 8, alignItems: "baseline" }}>
      <span style={{
        fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: ".1em",
        color: featured ? "var(--muted)" : "rgba(255,255,255,.55)",
        textTransform: "uppercase", flexShrink: 0, minWidth: 36,
      }}>{label}</span>
      <span style={{ color: featured ? "var(--ink)" : "rgba(255,255,255,.88)", lineHeight: 1.4 }}>{value}</span>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
function PageHeader() {
  return (
    <header className="ads-header">
      <div className="halftone" />
      <div className="ads-header-content">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
            <img src="assets/scribbly-logo.webp" alt="Scribbly" style={{ height: 26, filter: "brightness(0) invert(1)" }} />
            <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".18em", color: "rgba(255,255,255,.55)" }}>
              // PAID MEDIA · 2026
            </span>
          </div>
          <h1 className="display" style={{ fontSize: "clamp(64px, 8vw, 120px)", textTransform: "uppercase", color: "white", lineHeight: .9 }}>
            Meta Ads<br/>
            <span style={{ color: "var(--red)" }}>Playbook.</span>
          </h1>
          <p style={{ marginTop: 22, fontSize: 18, color: "rgba(255,255,255,.78)", maxWidth: 560, lineHeight: 1.5 }}>
            The full creative + copy + targeting stack for launching Scribbly Little League
            on Facebook & Instagram. Cold-to-conversion, parent-to-coach, story-to-checkout.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <KPI num="$0.84" label="Target CPC · Cold" />
          <KPI num="3.2×" label="Target ROAS · Day 14" />
          <KPI num="$18" label="Target CPA · Single" />
          <KPI num="$42" label="Target CPA · Bundle" />
        </div>
      </div>
    </header>
  );
}

function KPI({ num, label }) {
  return (
    <div style={{
      background: "rgba(255,255,255,.06)",
      border: "1px solid rgba(255,255,255,.14)",
      backdropFilter: "blur(8px)",
      borderRadius: 12, padding: 18,
      color: "white",
    }}>
      <div style={{ fontFamily: "var(--f-display)", fontSize: 38, color: "white", lineHeight: 1 }}>{num}</div>
      <div style={{ marginTop: 6, fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", opacity: .65 }}>{label}</div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
function Strategy() {
  const cols = [
    { tag: "01 · POSITIONING", title: "Heirloom, not merch.", body: "Every line of copy and every visual leans into permanence — \"forever gift\", \"on the wall in twenty years\", \"hand-finished in Vermont\". The thing we are not is a printable. We don't run price ads; we run keepsake ads." },
    { tag: "02 · CORE HOOK", title: "20 seconds, no payment.", body: "Friction is the enemy. The whole funnel front-loads the free preview — no card, no commitment. Most cold creatives end on this beat, and the landing CTAs match the ad CTAs verbatim." },
    { tag: "03 · PROOF", title: "100% 5-star + parent voice.", body: "2,140 reviews · 4.96 rating · zero refunds asked. We over-index on UGC-style testimonial creatives — they cost the least to make and convert the best for emotional-keepsake products." },
    { tag: "04 · ANGLE STACK", title: "Three buyers, three doors.", body: "Parents (mostly moms), grandparents, and team coordinators each get their own creative variant + landing path. We don't try to write one ad for all three." },
  ];
  return (
    <section className="ads-section" style={{ background: "white" }}>
      <div className="wrap">
        <div className="ads-section-eyebrow">◆ 01 · STRATEGY</div>
        <h2 className="section-h">The bet.</h2>
        <p style={{ marginTop: 14, fontSize: 18, color: "var(--ink-2)", maxWidth: 720, lineHeight: 1.55 }}>
          Bottom of funnel: a single creative archetype (testimonial + product) we ride for 90 days.
          Top of funnel: a four-corner exploration of hooks across audience × emotion × format. Mid-funnel:
          retargeting that picks up the abandoned preview, every time.
        </p>
        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
          {cols.map((c, i) => (
            <div key={i} className="card" style={{ padding: 22 }}>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--red)", letterSpacing: ".14em" }}>{c.tag}</div>
              <h3 className="display" style={{ marginTop: 8, fontSize: 28, color: "var(--navy)", textTransform: "uppercase", lineHeight: 1 }}>{c.title}</h3>
              <p style={{ marginTop: 10, fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55 }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
function AudienceMatrix() {
  const rows = [
    {
      audience: "Parents (mostly moms)",
      detail: "28–45 · interests: youth sports, Little League, mom blogs · lookalike of past buyers (1%)",
      angles: ["Make your kid a legend", "Mom, am I a legend?", "Phone pic → museum print"],
      placements: "Feed · Reels · Story",
      cta: "Shop Now",
      lp: "/start",
      kpi: "CPA < $24",
    },
    {
      audience: "Grandparents",
      detail: "55–70 · interests: grandkids, gifts, scrapbooking · geo: continental US",
      angles: ["The gift grandma won't shut up about", "Trophy in the closet. Poster on the wall.", "100% 5-star"],
      placements: "Feed · Right rail",
      cta: "Shop Now",
      lp: "/gifts",
      kpi: "CPA < $32",
    },
    {
      audience: "Team mom · Coach",
      detail: "30–55 · interests: team admin tools, GroupMe, league coordinator pages",
      angles: ["12 kids. 12 posters. 1 grateful coach.", "End-of-season team gift", "Code DUGOUT20"],
      placements: "Feed · Reels",
      cta: "Learn More",
      lp: "/bundles",
      kpi: "CPA < $48",
    },
    {
      audience: "Warm visitors (no preview)",
      detail: "Site visitors past 14d, did not start a preview",
      angles: ["20 seconds. No payment.", "He hasn't taken it off his wall.", "Free preview, free regenerations"],
      placements: "All placements",
      cta: "Try It Free",
      lp: "/start",
      kpi: "ROAS > 3.0",
    },
    {
      audience: "Abandoned preview",
      detail: "Started intake, did not complete · 7-day window",
      angles: ["Your draft is waiting.", "Pick up where you left off.", "Your kid, hand-illustrated, ready"],
      placements: "Feed · Story",
      cta: "Continue",
      lp: "/resume",
      kpi: "ROAS > 5.0",
    },
    {
      audience: "Past buyers",
      detail: "Purchased single · 90+ days · sibling cross-sell + bundle",
      angles: ["The other kid wants one too.", "Order the team bundle.", "Christmas / Father's Day teaser"],
      placements: "Feed · Email-matched",
      cta: "Shop Now",
      lp: "/sibling",
      kpi: "ROAS > 4.0",
    },
  ];
  return (
    <section className="ads-section" style={{ background: "var(--cream)" }}>
      <div className="wrap">
        <div className="ads-section-eyebrow">◆ 02 · AUDIENCE × ANGLE</div>
        <h2 className="section-h">Six audiences,<br/>six creative tracks.</h2>
        <div style={{ marginTop: 32, borderRadius: 14, overflow: "hidden", boxShadow: "var(--shadow-sm)", border: "1px solid var(--line)" }}>
          <table className="matrix">
            <thead>
              <tr>
                <th>Audience</th>
                <th>Targeting detail</th>
                <th>Angles in rotation</th>
                <th>Placements</th>
                <th>CTA · LP</th>
                <th>Target</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 700, color: "var(--navy)" }}>{r.audience}</td>
                  <td style={{ color: "var(--ink-2)" }}>{r.detail}</td>
                  <td>
                    <div className="tag-row">
                      {r.angles.map(a => <span key={a} className="pill" style={{ background: "var(--cream-2)", color: "var(--navy)", borderColor: "transparent" }}>{a}</span>)}
                    </div>
                  </td>
                  <td style={{ color: "var(--muted)", fontSize: 12 }}>{r.placements}</td>
                  <td>
                    <div style={{ fontWeight: 700, color: "var(--brand)" }}>{r.cta}</div>
                    <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--muted)" }}>{r.lp}</div>
                  </td>
                  <td><span className="spec mono">{r.kpi}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
function FeedAds() {
  const ads = [
    { Comp: CreativeReveal,      label: "A · The Reveal",       angle: "Kid reaction · transformation", best: "Hero — workhorse" },
    { Comp: CreativeBeforeAfter, label: "B · Phone → Poster",   angle: "Cold · proof of transform",    best: "Top of funnel" },
    { Comp: CreativeTeamBundle,  label: "C · Team party reveal",angle: "End-of-year team gift",        best: "Bundle revenue" },
    { Comp: CreativeTestimonial, label: "D · 5-star quote",     angle: "Warm + cold",                  best: "Retargeting" },
    { Comp: CreativeLegend,      label: "E · Brand hero",       angle: "Cold · all parents",           best: "Brand build" },
    { Comp: CreativeKidQuote,    label: "F · \"That's ME?!\"",  angle: "Kid quote · emotional",        best: "Reels crossover" },
  ];
  return (
    <section className="ads-section" style={{ background: "white" }}>
      <div className="wrap">
        <div className="ads-section-eyebrow">◆ 03 · FEED CREATIVE</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 24, flexWrap: "wrap" }}>
          <h2 className="section-h">Feed (1:1).<br/>Six angles to test.</h2>
          <div style={{ display: "flex", gap: 6 }}>
            <span className="spec">1080×1080</span>
            <span className="spec alt">PNG</span>
            <span className="spec mono">≤30MB</span>
          </div>
        </div>
        <p style={{ marginTop: 12, fontSize: 16, color: "var(--ink-2)", maxWidth: 680 }}>
          Launch all six on day 1. Kill anything under 1.0% CTR at the 24-hr mark. Promote the top two
          into a $50/day campaign by week 2.
        </p>

        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
          {ads.map((a, i) => (
            <div key={i} className="ad-card">
              <Asset id={`feed-${i}`} group="Feed" name={a.label} spec="1080×1080">
                <a.Comp />
              </Asset>
              <div className="ad-card-body">
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--red)", letterSpacing: ".12em", textTransform: "uppercase" }}>{a.label}</div>
                <div className="ad-card-title">{a.angle}</div>
                <div className="ad-card-meta">
                  <span className="pill pill-cream">{a.best}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
function FeedInContext() {
  return (
    <section className="ads-section" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <div className="ads-section-eyebrow">◆ 04 · IN-FEED</div>
        <h2 className="section-h">How it sits in the feed.</h2>
        <p style={{ marginTop: 14, fontSize: 16, color: "var(--ink-2)", maxWidth: 680 }}>
          The unit users actually see. Primary text appears above the image; headline + description + CTA below.
          Mobile is the primary battleground — review every creative in this exact frame.
        </p>

        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
          <Asset id="ctx-a" group="In-feed" name="In-feed-A-reveal" spec="Feed mock">
            <FBPost
              text={`Watch their jaw drop.\n\nOne phone photo, one custom-illustrated poster, one moment your kid will not shut up about. 20 seconds to your free preview — we don't ask for a card until you love it. ⚾`}
              headline="Kids lose their minds."
              desc="Free preview · 5-day ship"
              cta="Shop Now"
              domain="scribblylittleleague.com"
              Creative={CreativeReveal}
            />
          </Asset>
          <Asset id="ctx-c" group="In-feed" name="In-feed-C-team-party" spec="Feed mock">
            <FBPost
              text={`End-of-year team party is around the corner. The gift card is fine. The poster is unforgettable.\n\nBundle the whole roster — each parent uploads their own photo, we ship them all to one address. Save 20%. Free Coach of the Year poster on us. Code DUGOUT20.`}
              headline="The pizza-night reveal"
              desc="20% off bundles of 12+"
              cta="Learn More"
              domain="scribblylittleleague.com/team"
              Creative={CreativeTeamBundle}
            />
          </Asset>
          <Asset id="ctx-d" group="In-feed" name="In-feed-D-testimonial" spec="Feed mock">
            <FBPost
              text={`"His jaw hit the floor. Ran around the kitchen for ten minutes straight." — Mike T., dad of #11\n\n100% 5-star on Trustpilot. 2,140 happy families. Hand-illustrated in Vermont.`}
              headline="Kids go nuts. Parents do too."
              desc="4.96★ on Trustpilot"
              cta="Shop Now"
              domain="scribblylittleleague.com"
              Creative={CreativeTestimonial}
            />
          </Asset>
        </div>
      </div>
    </section>
  );
}

function FBPost({ text, headline, desc, cta, domain, Creative }) {
  return (
    <div className="fb-chrome">
      <div className="fb-head">
        <div className="fb-av">S</div>
        <div className="fb-meta">
          <b>Scribbly</b>
          <div>Sponsored · <span>🌎</span></div>
        </div>
        <div className="fb-dots">···</div>
      </div>
      <div className="fb-text">{text}</div>
      <div style={{ position: "relative" }}>
        <Creative />
      </div>
      <div className="fb-cta-bar">
        <div>
          <div className="meta" style={{ textTransform: "uppercase", fontSize: 11, letterSpacing: ".04em" }}>{domain}</div>
          <div style={{ fontWeight: 700, fontSize: 15, color: "#050505", marginTop: 2 }}>{headline}</div>
          <div className="meta">{desc}</div>
        </div>
        <button className="fb-cta-btn">{cta}</button>
      </div>
      <div className="fb-actions">
        <div>👍 Like</div>
        <div>💬 Comment</div>
        <div>↗ Share</div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
function StoryAds() {
  const stories = [
    { Comp: StoryReveal,    label: "S1 · The reveal",     angle: "Watch their jaw drop" },
    { Comp: StoryLegend,    label: "S2 · Brand hero",     angle: "Stadium dark · brand drop" },
    { Comp: StoryUnbox,     label: "S3 · Unbox tease",    angle: "Imitates an unboxing moment" },
    { Comp: StoryStat,      label: "S4 · 2,140 stat",     angle: "Social-proof first" },
  ];
  return (
    <section className="ads-section" style={{ background: "var(--brand-ink)", color: "white" }}>
      <div className="wrap">
        <div className="ads-section-eyebrow" style={{ color: "var(--red)" }}>◆ 05 · STORY · REEL</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 24, flexWrap: "wrap" }}>
          <h2 className="section-h" style={{ color: "white" }}>Story & Reel<br/>(9:16).</h2>
          <div style={{ display: "flex", gap: 6 }}>
            <span className="spec">1080×1920</span>
            <span className="spec alt">MP4 / PNG</span>
            <span className="spec mono">≤15s</span>
          </div>
        </div>
        <p style={{ marginTop: 14, fontSize: 16, color: "rgba(255,255,255,.75)", maxWidth: 680 }}>
          Mobile-only placement, biggest scroll-stop volume. The CTA bar at the bottom anchors every frame —
          the visual above earns the swipe.
        </p>

        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
          {stories.map((s, i) => (
            <div key={i}>
              <div style={{ maxWidth: 280, marginInline: "auto" }}>
                <Asset id={`story-${i}`} group="Story" name={s.label} spec="1080×1920">
                  <s.Comp />
                </Asset>
              </div>
              <div style={{ marginTop: 14 }}>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--red)", letterSpacing: ".12em" }}>{s.label}</div>
                <div style={{ marginTop: 4, fontFamily: "var(--f-display)", fontSize: 22, textTransform: "uppercase", color: "white", lineHeight: 1 }}>{s.angle}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
function Carousel() {
  const slides = [
    {
      bg: "var(--navy)", fg: "white",
      title: "Send one photo.",
      sub: "Any phone snap of your slugger.",
      visual: "📸",
    },
    {
      bg: "var(--brand)", fg: "white",
      title: "We illustrate it.",
      sub: "Our artists. 12 seconds. Free.",
      visual: "🎨",
    },
    {
      bg: "var(--red)", fg: "white",
      title: "You approve it.",
      sub: "Tweak anything. Regenerate free.",
      visual: "✓",
    },
    {
      bg: "var(--paper)", fg: "var(--navy)", border: true,
      title: "We print & ship.",
      sub: "Museum matte. 5-day ship from VT.",
      visual: "📦",
    },
    {
      bg: "var(--navy)", fg: "white",
      title: "Forever on the wall.",
      sub: "Start your free preview ▸",
      visual: null,
      isLast: true,
    },
  ];
  return (
    <section className="ads-section" style={{ background: "white" }}>
      <div className="wrap">
        <div className="ads-section-eyebrow">◆ 06 · CAROUSEL</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 24, flexWrap: "wrap" }}>
          <h2 className="section-h">Carousel · the process.</h2>
          <div style={{ display: "flex", gap: 6 }}>
            <span className="spec">1080×1080 × 5</span>
            <span className="spec alt">Tap-through</span>
          </div>
        </div>
        <p style={{ marginTop: 14, fontSize: 16, color: "var(--ink-2)", maxWidth: 680 }}>
          The "explain how it works" unit. Each slide is its own ad with its own headline — the deck CTR
          tells us which step parents stall on, then we recut around it.
        </p>

        <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
          {slides.map((s, i) => (
            <Asset key={i} id={`carousel-${i}`} group="Carousel" name={`Slide-${String(i + 1).padStart(2, "0")}-${s.title}`} spec="1080×1080">
              <CarouselSlide {...s} index={i} />
            </Asset>
          ))}
        </div>

        {/* dots */}
        <div style={{ marginTop: 20, display: "flex", justifyContent: "center", gap: 6 }}>
          {slides.map((_, i) => (
            <div key={i} style={{
              width: i === 0 ? 22 : 8, height: 8, borderRadius: 999,
              background: i === 0 ? "var(--brand)" : "var(--line)",
            }} />
          ))}
        </div>
      </div>
    </section>
  );
}

function CarouselSlide({ bg, fg, title, sub, visual, border, index, isLast }) {
  return (
    <div style={{
      position: "relative", aspectRatio: "1/1", borderRadius: 10,
      background: bg, color: fg,
      padding: 20, display: "flex", flexDirection: "column", justifyContent: "space-between",
      border: border ? "1.5px solid var(--line)" : "none",
      overflow: "hidden",
    }}>
      <div style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: ".12em", opacity: .6 }}>
        {String(index + 1).padStart(2, "0")} / 05
      </div>
      {visual && (
        <div style={{ position: "absolute", top: 32, right: 18, fontSize: 50, opacity: .75 }}>{visual}</div>
      )}
      {isLast && (
        <img src={POSTER} style={{
          position: "absolute", left: "50%", top: "45%",
          transform: "translate(-50%, -50%) rotate(-3deg)",
          width: "70%", borderRadius: 4, boxShadow: "0 14px 30px -10px rgba(0,0,0,.5)",
        }} />
      )}
      <div style={{ position: "relative" }}>
        <div className="display" style={{ fontSize: 26, textTransform: "uppercase", lineHeight: .95, color: fg }}>{title}</div>
        <div style={{ marginTop: 6, fontSize: 12, opacity: .85, lineHeight: 1.4 }}>{sub}</div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
function VideoStoryboards() {
  const scenes15 = [
    { t: "0–2s", cap: "Phone screen — a casual snap of a kid in uniform.", on: "[ phone photo ]" },
    { t: "2–4s", cap: "Quick brush sweep across photo → painted poster fills in.", on: "transition" },
    { t: "4–7s", cap: "Reveal: coach hands the rolled poster to a kid at team party.", on: "[ the handoff ]" },
    { t: "7–10s", cap: "Kid unrolls it. Jaw drops. Teammates erupt cheering.", on: "\"WAIT — that's ME?!\"" },
    { t: "10–13s", cap: "Stencil card: \"Kids lose their minds.\" Five-star ribbon.", on: "KIDS LOSE THEIR MINDS." },
    { t: "13–15s", cap: "Logo + URL + 20-second hook.", on: "scribbly · 20s preview" },
  ];

  const scenes30 = [
    { t: "0–3s",   cap: "Cold open: kid raises hand at team party as coach reads names.", on: "[ team party ]" },
    { t: "3–6s",   cap: "Coach hands over rolled tube. Quick cut.", on: "[ the tube ]" },
    { t: "6–10s",  cap: "Slow unroll. Reveal poster. Jaw drops.", on: "\"WAIT what?!\"" },
    { t: "10–14s", cap: "Cut to second kid getting handed his. Eyes wide.", on: "every kid. every face." },
    { t: "14–18s", cap: "Cut to third kid showing teammates — pile-on hugs.", on: "[ the swarm ]" },
    { t: "18–22s", cap: "Stencil card: \"The end-of-year team gift, solved.\"", on: "TEAM GIFT, SOLVED." },
    { t: "22–26s", cap: "Free preview promise on cream halftone.", on: "20 SECONDS. NO PAYMENT." },
    { t: "26–30s", cap: "Logo, URL, soft CTA tag.", on: "scribbly · little league" },
  ];

  return (
    <section className="ads-section" style={{ background: "var(--cream)" }}>
      <div className="wrap">
        <div className="ads-section-eyebrow">◆ 07 · VIDEO</div>
        <h2 className="section-h">Storyboards.</h2>
        <p style={{ marginTop: 14, fontSize: 16, color: "var(--ink-2)", maxWidth: 680 }}>
          Two cuts — a 15-second feed-and-reels mover and a 30-second pre-roll / Watch placement.
          Live recording covers the parent reactions and coach moments; everything else is product + motion typography.
        </p>

        <Storyboard title="15-second cut" sub="Top of funnel · Reels & Feed" scenes={scenes15} />
        <Storyboard title="30-second cut" sub="Connected TV · in-stream video" scenes={scenes30} />
      </div>
    </section>
  );
}

function Storyboard({ title, sub, scenes }) {
  return (
    <div style={{ marginTop: 40 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 14 }}>
        <h3 className="display" style={{ fontSize: 28, color: "var(--navy)", textTransform: "uppercase" }}>{title}</h3>
        <span style={{ color: "var(--muted)", fontSize: 13 }}>{sub}</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${scenes.length}, 1fr)`, gap: 10 }}>
        {scenes.map((s, i) => (
          <Asset key={i} id={`sb-${title}-${i}`} group="Storyboard" name={`${title}-${s.t}-${s.on.slice(0, 24)}`} spec="16:9">
            <div className="sb-frame">
              <div className="sb-t">{s.t}</div>
              <div style={{ textAlign: "center" }}>
                <div className="display" style={{ fontSize: 20, color: "white", textTransform: "uppercase", lineHeight: 1 }}>{s.on}</div>
              </div>
              <div className="sb-cap">{s.cap}</div>
            </div>
          </Asset>
        ))}
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────
function CopyBank() {
  const groups = [
    {
      name: "A · The Reveal · Hero",
      lines: [
        { role: "Primary", text: "Kids lose their minds when they see it. One phone photo, one custom-illustrated poster, one jaw-drop moment. 20 seconds to your free preview. No payment until you love it." },
        { role: "Headline", text: "Watch their jaw drop" },
        { role: "Headline", text: "Kids lose their minds." },
        { role: "Headline", text: "One photo. One legend." },
        { role: "Desc", text: "Free preview · 5-day ship" },
        { role: "CTA", text: "Shop Now" },
      ],
    },
    {
      name: "B · Phone → Poster · Demo",
      lines: [
        { role: "Primary", text: "Phone snapshot in. Hand-illustrated poster out. Custom Little League keepsakes from your team in Vermont. 20 seconds to preview. No payment until you approve. 100% 5-star, 2,140 happy families." },
        { role: "Headline", text: "Phone pic → Legend" },
        { role: "Headline", text: "Snapshot → Keepsake" },
        { role: "Desc", text: "Hand-illustrated in Vermont" },
        { role: "CTA", text: "Try It Free" },
      ],
    },
    {
      name: "C · Team party reveal · Coach / Team mom",
      lines: [
        { role: "Primary", text: "The end-of-year team gift, finally solved. Each parent uploads their own photo — we hand-illustrate every poster and ship them all to one address. Bundle the whole roster, save 20%, free Coach of the Year poster on us. Hand them out at pizza night. Watch the kids lose it." },
        { role: "Headline", text: "End-of-year team gift" },
        { role: "Headline", text: "The pizza-night reveal" },
        { role: "Headline", text: "Coach: skip the gift card" },
        { role: "Desc", text: "20% off bundles of 12+" },
        { role: "CTA", text: "Learn More" },
      ],
    },
    {
      name: "D · 5-star testimonial · Workhorse",
      lines: [
        { role: "Primary", text: "\"His jaw hit the floor. Ran around the kitchen for ten minutes straight.\" — Mike T., dad of #11. 100% 5-star on Trustpilot. Custom Little League posters from one phone photo." },
        { role: "Headline", text: "100% 5-star on Trustpilot" },
        { role: "Headline", text: "Kids go nuts. Parents do too." },
        { role: "Desc", text: "4.96★ · 2,140 reviews" },
        { role: "CTA", text: "Shop Now" },
      ],
    },
    {
      name: "E · Brand hero · Cold",
      lines: [
        { role: "Primary", text: "Send us one phone photo. We'll send back a museum-quality poster of your slugger — custom-illustrated, hand-finished, made in America. 20 seconds to your free preview. No payment until you love it." },
        { role: "Headline", text: "Make your kid a legend" },
        { role: "Headline", text: "Your kid, hand-illustrated" },
        { role: "Headline", text: "Custom Little League posters" },
        { role: "Desc", text: "Free preview · 5-day ship" },
        { role: "CTA", text: "Shop Now" },
      ],
    },
    {
      name: "F · Grandparent angle",
      lines: [
        { role: "Primary", text: "Birthdays. Christmas. End-of-season. The one gift grandma puts above her TV and won't shut up about. Custom Little League posters, ships in 5 days." },
        { role: "Headline", text: "The gift grandma talks about" },
        { role: "Headline", text: "For the grandparents' wall" },
        { role: "Desc", text: "Ships in 5 business days" },
        { role: "CTA", text: "Shop Now" },
      ],
    },
    {
      name: "G · Abandoned preview · Retarget",
      lines: [
        { role: "Primary", text: "Your draft is still in the dugout. Pick up where you left off — your photo is saved and the free preview is still on the house." },
        { role: "Headline", text: "Your draft is waiting" },
        { role: "Headline", text: "Step back into the box" },
        { role: "Desc", text: "Resume your free preview" },
        { role: "CTA", text: "Continue" },
      ],
    },
    {
      name: "H · Visitor · No preview yet",
      lines: [
        { role: "Primary", text: "20 seconds. No payment. The free preview that 2,140 families saw before they ordered. You looked. Now show your kid." },
        { role: "Headline", text: "20 seconds. No payment." },
        { role: "Headline", text: "See your kid, free" },
        { role: "Desc", text: "Free regenerations, always" },
        { role: "CTA", text: "Try It Free" },
      ],
    },
  ];

  // Register globally so the master ExportBar can include them in the zip
  React.useEffect(() => { window.__COPY_BLOCKS__ = groups; }, []);

  const buildTrackText = (g) => {
    let txt = `# ${g.name}\n\n`;
    for (const l of g.lines) txt += `[${l.role.toUpperCase()}] ${l.text}\n`;
    return txt;
  };

  return (
    <section className="ads-section" style={{ background: "white" }}>
      <div className="wrap">
        <div className="ads-section-eyebrow">◆ 08 · COPY BANK</div>
        <h2 className="section-h">Every line, every angle.</h2>
        <p style={{ marginTop: 14, fontSize: 16, color: "var(--ink-2)", maxWidth: 680 }}>
          Eight named creative tracks. Tap <b>Copy</b> on any line or grab the whole track —
          everything flows straight into Ads Manager.
        </p>

        <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32 }}>
          {groups.map((g, i) => (
            <div key={i} className="card" style={{ padding: 24 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start", gap: 12 }}>
                <h3 className="display" style={{ fontSize: 24, color: "var(--navy)", textTransform: "uppercase", marginBottom: 4, lineHeight: 1 }}>
                  {g.name}
                </h3>
                <CopyButton text={buildTrackText(g)} label="Copy track" />
              </div>
              <div style={{ height: 2, background: "var(--red)", width: 40, marginBlock: "8px 14px" }} />
              {g.lines.map((l, j) => (
                <div key={j} className="copy-line">
                  <div className="role">{l.role}</div>
                  <div className="text" style={{ display: "flex", gap: 10, alignItems: "start", justifyContent: "space-between" }}>
                    <span style={{ flex: 1 }}>
                      {l.text}
                      {l.role !== "Primary" && (
                        <span className="chars">{l.text.length} ch</span>
                      )}
                    </span>
                    <CopyButton text={l.text} label="Copy" />
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
function RetargetingFunnel() {
  const stages = [
    { stage: "Awareness", sub: "Cold prospecting", spend: 60, color: "var(--brand)", impressions: "1M+", target: "CPM < $14" },
    { stage: "Consideration", sub: "Watched 50%+ video", spend: 22, color: "var(--red)", impressions: "180k", target: "CTR > 1.4%" },
    { stage: "Start preview", sub: "Clicked, didn't submit", spend: 9, color: "var(--gold)", impressions: "42k", target: "CPV < $0.80" },
    { stage: "Abandoned cart", sub: "Result viewed, no checkout", spend: 6, color: "#1F8A5B", impressions: "11k", target: "ROAS > 5.0" },
    { stage: "Past buyers", sub: "Sibling / bundle cross-sell", spend: 3, color: "#7A5AE0", impressions: "4k", target: "ROAS > 4.0" },
  ];
  return (
    <section className="ads-section" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <div className="ads-section-eyebrow">◆ 09 · FUNNEL</div>
        <h2 className="section-h">Spend allocation.</h2>
        <p style={{ marginTop: 14, fontSize: 16, color: "var(--ink-2)", maxWidth: 680 }}>
          Initial monthly budget: <b>$24,000</b>. 60% cold prospecting to feed the funnel; the rest stacked
          on retargeting where ROAS is best. Re-evaluate weekly.
        </p>

        <div style={{ marginTop: 32, background: "white", borderRadius: 14, padding: "8px 24px 16px", border: "1px solid var(--line)" }}>
          {stages.map((s, i) => (
            <div key={i} className="funnel-row">
              <div className="funnel-stage">{s.stage}<small>{s.sub}</small></div>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div className="funnel-bar" style={{ width: `${s.spend}%`, background: s.color, minWidth: 30 }} />
                <span style={{ fontFamily: "var(--f-display)", fontSize: 24, color: "var(--navy)" }}>{s.spend}%</span>
                <span style={{ fontSize: 12, color: "var(--muted)" }}>· {s.impressions} imp / mo</span>
              </div>
              <div style={{ textAlign: "right" }}>
                <span className="spec mono">{s.target}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
function LaunchPlan() {
  const weeks = [
    {
      w: "Week 1",
      sub: "Light up & learn",
      bullets: [
        "Launch A, B, C, F at $50/day each — broad targeting",
        "Pixel + Conversions API audit · Catalog feed live",
        "Kill anything < 1.0% CTR by 24h",
      ],
    },
    {
      w: "Week 2",
      sub: "Audience split",
      bullets: [
        "Layer parent / grandparent / coach audience sets",
        "Launch Story creatives (S1, S3) at $30/day",
        "Begin warm retargeting on site-visitors-no-preview",
      ],
    },
    {
      w: "Week 3",
      sub: "Bundle push",
      bullets: [
        "Push D (Coach bundle) hard into team-mom interests",
        "Launch carousel into top performing audiences",
        "First UGC reel test from past customer footage",
      ],
    },
    {
      w: "Week 4",
      sub: "Scale & seasonal",
      bullets: [
        "2× spend on top 2 creatives (CBO)",
        "Launch E (Trophy / Poster) for end-of-season window",
        "Email + Meta retargeting sequence on abandoned cart",
      ],
    },
  ];
  return (
    <section className="ads-section" style={{ background: "var(--brand)", color: "white" }}>
      <div className="wrap">
        <div className="ads-section-eyebrow" style={{ color: "white", opacity: .65 }}>◆ 10 · 30-DAY LAUNCH</div>
        <h2 className="section-h" style={{ color: "white" }}>The first month.</h2>
        <p style={{ marginTop: 14, fontSize: 16, color: "rgba(255,255,255,.78)", maxWidth: 680 }}>
          Day 1 we ship six creatives and learn fast. Day 30 we're scaling whatever moves and rebuilding what didn't.
        </p>

        <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
          {weeks.map((w, i) => (
            <div key={i} style={{
              background: "rgba(255,255,255,.07)",
              border: "1px solid rgba(255,255,255,.14)",
              borderRadius: 12, padding: 22, backdropFilter: "blur(6px)",
            }}>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, color: "rgba(255,255,255,.65)", letterSpacing: ".14em" }}>{w.w.toUpperCase()}</div>
              <h3 className="display" style={{ fontSize: 26, color: "white", textTransform: "uppercase", lineHeight: 1, marginTop: 6 }}>{w.sub}</h3>
              <ul style={{ marginTop: 14, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                {w.bullets.map(b => (
                  <li key={b} style={{ display: "flex", gap: 8, fontSize: 13, color: "rgba(255,255,255,.92)", lineHeight: 1.5 }}>
                    <span style={{ color: "var(--gold)" }}>◆</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────────────────────────────────────────────────────────────
function PageFooter() {
  return (
    <footer style={{ background: "var(--brand-ink)", color: "rgba(255,255,255,.55)", padding: "32px 28px", textAlign: "center" }}>
      <div style={{ fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase" }}>
        ◆ Scribbly Little League · Meta Ads Playbook · Internal · 2026
      </div>
    </footer>
  );
}

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