/* ========================================================================
   pages-packs.jsx — Social, Video, App Store, Ads, Landing, SEO
   ====================================================================== */

/* ---------------------------------------------------------------- helpers */
function PackHeader({ eyebrow, title, hl, sub, icon = "sparkle", actions }) {
  return (
    <div className="page-header">
      <div className="row gap-16" style={{ minWidth: 0 }}>
        <div style={{ width: 52, height: 52, borderRadius: 13, background: "var(--yellow)", display: "grid", placeItems: "center", flex: "none", boxShadow: "inset 0 -1.5px 0 var(--yellow-deep)" }}>
          <Icon name={icon} size={22} color="var(--yellow-ink)" stroke={2.2} />
        </div>
        <div>
          <div className="page-eyebrow">{eyebrow}</div>
          <h1 className="page-title">{title} <span className="hl">{hl}</span></h1>
          {sub && <p className="page-sub">{sub}</p>}
        </div>
      </div>
      <div className="row gap-8">{actions}</div>
    </div>
  );
}

function PostCard({ pill, score, hook, body, tail, kind = "default" }) {
  return (
    <div className="card card-pad-lg" style={{ position: "relative" }}>
      <div className="row-between mb-12" style={{ flexWrap: "wrap", gap: 8 }}>
        <div className="row gap-8">{pill}{score != null && <Pill icon="dot">Quality {score}</Pill>}</div>
        <div className="row gap-4"><IconBtn icon="copy" /><IconBtn icon="refresh" /><IconBtn icon="star" /></div>
      </div>
      {hook && <div className="fw-8" style={{ fontSize: 17, letterSpacing: "-0.015em", lineHeight: 1.3 }}>{hook}</div>}
      {body && <div className="mt-8 text-sm" style={{ whiteSpace: "pre-line", lineHeight: 1.6, color: "var(--fg)" }}>{body}</div>}
      {tail}
    </div>
  );
}

/* ---------------------------------------------------------------- SOCIAL */
function SocialPreview({ compact }) {
  return (
    <div className="col gap-16">
      <Card padding="lg">
        <div className="row-between mb-12">
          <div className="fw-8">Top performer prediction</div>
          <Pill variant="yellow">Quality 92</Pill>
        </div>
        <div className="grid" style={{ gridTemplateColumns: "minmax(0, 1fr) 220px", gap: 18 }}>
          <div>
            <div className="row gap-8"><Pill variant="dark"><Icon name="insta" size={11} stroke={2.2} />Instagram · single</Pill></div>
            <div className="fw-8 mt-12" style={{ fontSize: 20, letterSpacing: "-0.02em" }}>"The quote you almost signed."</div>
            <div className="text-sm mt-8" style={{ lineHeight: 1.6 }}>We ran 12 real renovation quotes through Renoo this week. 9 were over-priced by an average of £4,300. If you're getting quotes for a kitchen, bathroom or extension — send them to Renoo first.</div>
            <div className="muted text-xs mono mt-12">#renovation #ukhomes #renovating #homerenovation #renoapp</div>
          </div>
          <div className="thumb" style={{ aspectRatio: "1/1", background: "var(--yellow)", color: "var(--yellow-ink)", border: "1px solid var(--yellow-deep)" }}>
            <div className="col" style={{ alignItems: "center", textAlign: "center", padding: 16 }}>
              <span className="tape" style={{ background: "var(--fg)", color: "var(--yellow)" }}>£4,300</span>
              <div className="fw-8 mt-8" style={{ fontSize: 20, lineHeight: 1.1, letterSpacing: "-0.02em" }}>The quote you almost signed.</div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}

function SocialContentPage() {
  const { showToast, go } = React.useContext(AppCtx);
  const [tab, setTab] = React.useState("instagram");
  const tabs = [
    { id: "instagram", label: "Instagram", count: 12 },
    { id: "carousel", label: "Carousels", count: 4 },
    { id: "linkedin", label: "LinkedIn", count: 8 },
    { id: "facebook", label: "Facebook", count: 6 },
    { id: "founder", label: "Founder posts", count: 5 },
    { id: "calendar", label: "30-day calendar" },
  ];

  return (
    <div className="page">
      <PackHeader
        eyebrow="Generated · Renoo"
        title="Social Content"
        hl="Pack"
        icon="insta"
        sub="Forty-eight pieces across Instagram, LinkedIn, Facebook plus a 30-day content calendar — every caption brand-checked."
        actions={<>
          <Btn variant="secondary" icon="refresh" onClick={() => showToast("Regenerating Social pack…")}>Regenerate</Btn>
          <Btn variant="primary" icon="download" onClick={() => go("exports")}>Export pack</Btn>
        </>}
      />

      <div className="grid grid-4 mb-24">
        <StatTile label="Posts"        value="48" icon="insta" />
        <StatTile label="Carousels"    value="4 × 6"  icon="layers" />
        <StatTile label="Hashtag sets" value="9"  icon="hash" />
        <StatTile label="Quality avg." value="89" icon="star" delta="+6" />
      </div>

      <Tabs tabs={tabs} active={tab} onChange={setTab}
        right={<Btn size="sm" variant="ghost" icon="copy" onClick={() => showToast("Copied all captions")}>Copy all</Btn>} />

      <div className="mt-20">
        {tab === "instagram" && (
          <div className="grid grid-2 gap-16">
            {SAMPLE_INSTAGRAM.filter(p => p.kind === "single").concat(SAMPLE_INSTAGRAM.filter(p => p.kind === "single")).slice(0,4).map((p, i) => (
              <PostCard key={i} pill={<Pill variant="dark"><Icon name="insta" size={11} stroke={2.2} />Single post</Pill>} score={p.score}
                hook={p.hook} body={p.body} tail={<>
                  <div className="muted text-xs mono mt-12">{p.hashtags}</div>
                  <div className="row gap-8 mt-12">
                    <Pill icon="dot">Caption: 142 chars</Pill>
                    <Pill icon="dot">Hashtags: 5</Pill>
                    <Pill variant="green" icon="check">Brand-safe</Pill>
                  </div>
                </>} />
            ))}
          </div>
        )}
        {tab === "carousel" && (
          <div className="col gap-16">
            {SAMPLE_INSTAGRAM.filter(p => p.kind === "carousel").map((c, i) => (
              <Card padding="lg" key={i}>
                <div className="row-between mb-12">
                  <div className="row gap-8"><Pill variant="dark"><Icon name="insta" size={11} stroke={2.2} />Carousel · 6 slides</Pill><Pill>Quality {c.score}</Pill></div>
                  <div className="row gap-4"><IconBtn icon="copy" /><IconBtn icon="refresh" /></div>
                </div>
                <div className="fw-8" style={{ fontSize: 18 }}>"{c.hook}"</div>
                <div className="grid mt-12" style={{ gridTemplateColumns: "repeat(6, minmax(0,1fr))", gap: 8 }}>
                  {c.slides.map((s, idx) => (
                    <div key={s} className="thumb" style={{ aspectRatio: "1/1", background: idx === 0 ? "var(--yellow)" : "var(--surface-2)" }}>
                      <div className="col" style={{ alignItems: "center", textAlign: "center", padding: 8 }}>
                        <span className="mono text-xs muted">{String(idx+1).padStart(2,"0")}</span>
                        <div className="fw-8 mt-4" style={{ fontSize: 12, lineHeight: 1.2, color: idx === 0 ? "var(--yellow-ink)" : "var(--fg)" }}>{s}</div>
                      </div>
                    </div>
                  ))}
                </div>
                <div className="muted text-sm mt-12">{c.body}</div>
                <div className="muted text-xs mono mt-8">{c.hashtags}</div>
              </Card>
            ))}
          </div>
        )}
        {tab === "linkedin" && (
          <div className="col gap-12">
            {[
              { hook: "We sent 12 renovation quotes to AI. Nine were over-priced.", body: "We've been quietly running Renoo's Quote Checker on every quote our beta users sent in this month. The pattern was harder to ignore than we expected. Average overprice on a £40k kitchen: £4,300. Average overprice on a £8k bathroom: £1,150. The same trades, the same neighbourhoods, the same materials — three different prices.\n\nIf you're getting quotes right now, ask a tool to do a sanity check before you sign anything." },
              { hook: "Couples renovate twice. The first time, badly.", body: "There is a quiet truth about renovations that nobody tells first-time renovators: the project lives in three places at once. WhatsApp messages between you and your partner. WhatsApp messages between one of you and the builder. A glove box full of paper.\n\nRenoo is the third place — the one that holds together when the other two fall apart." },
            ].map((p, i) => (
              <PostCard key={i} pill={<Pill variant="blue"><Icon name="linkedin" size={11} stroke={2.2} />LinkedIn</Pill>} score={90 - i*3} hook={`"${p.hook}"`} body={p.body} />
            ))}
          </div>
        )}
        {tab === "facebook" && (
          <div className="grid grid-2 gap-16">
            {[
              { h: "For couples doing their first renovation.", b: "Renoo holds onto the quotes, paint codes, receipts and decisions — so the only place you actually have to argue is the kitchen showroom." },
              { h: "Every paint code, saved for life.", b: "Snap a tin. Renoo remembers the brand, code and which room it was used in. Three years later, you still have it." },
              { h: "The renovation companion you've been WhatsApping into existence.", b: "Calm, mobile-first and built for couples, landlords and small builders. Free for your first room." },
              { h: "Stop fighting about paint codes.", b: "Save them once, for life. Renoo is free for your first room." },
            ].map((p, i) => (
              <PostCard key={i} pill={<Pill variant="dark"><Icon name="facebook" size={11} stroke={2.2} />Facebook</Pill>} score={85 + ((i*3)%9)} hook={`"${p.h}"`} body={p.b} />
            ))}
          </div>
        )}
        {tab === "founder" && (
          <div className="col gap-12">
            {[
              { h: "I built Renoo on weekends because my own renovation broke me.", b: "Today it goes live in the App Store. We saved £4,300 on one quote with the prototype. Eight weekends, one bathroom finished, one app shipped. Reply if you want a beta invite — first hundred get it free." },
              { h: "The renovation app I wish I'd had two summers ago.", b: "I built Renoo on the weekends my last renovation didn't eat. It's calm, mobile-first, and remembers every paint code for you. v1.0 today." },
            ].map((p, i) => (
              <PostCard key={i} pill={<Pill variant="yellow"><Icon name="bolt" size={11} stroke={2.2} />Founder launch</Pill>} score={94 - i} hook={p.h} body={p.b}
                tail={<div className="row gap-8 mt-12"><Pill icon="dot">For X / LinkedIn</Pill><Pill icon="dot">Personal tone</Pill></div>} />
            ))}
          </div>
        )}
        {tab === "calendar" && <ContentCalendar />}
      </div>
    </div>
  );
}

function ContentCalendar() {
  const dows = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
  const types = [
    { d: 0,  k: "carousel", t: "Snags: 6 things forgotten" },
    { d: 1,  k: "single",   t: "Quote you almost signed" },
    { d: 2,  k: "reel",     t: "Receipt graveyard car" },
    { d: 3,  k: "founder",  t: "Built on weekends" },
    { d: 4,  k: "single",   t: "Paint codes for life" },
    { d: 6,  k: "story",    t: "Behind the scenes v1.4" },
    { d: 8,  k: "reel",     t: "Three taps of regret" },
    { d: 10, k: "carousel", t: "Couples renovating" },
    { d: 12, k: "single",   t: "Room Memory walkthrough" },
    { d: 14, k: "reel",     t: "Landlord 8 properties" },
    { d: 15, k: "single",   t: "Snagging from photos" },
    { d: 17, k: "story",    t: "Launch day countdown" },
    { d: 18, k: "founder",  t: "Press kit drop" },
    { d: 19, k: "single",   t: "How I priced Renoo" },
    { d: 21, k: "carousel", t: "Builder onboarding" },
    { d: 23, k: "reel",     t: "Snagging speed run" },
    { d: 25, k: "single",   t: "Weekly summary feature" },
    { d: 28, k: "founder",  t: "Month 1 in numbers" },
  ];
  const kindColor = (k) => k === "carousel" ? "var(--yellow)" : k === "reel" ? "var(--blue-soft)" : k === "founder" ? "var(--fg)" : k === "story" ? "var(--green-soft)" : "var(--surface-2)";
  const kindTextColor = (k) => k === "founder" ? "var(--yellow)" : "var(--fg)";
  return (
    <Card padding="lg" title="30-day content calendar" sub="One scheduled post a day, mix of carousels, reels and founder posts" action={<>
      <Btn size="sm" variant="ghost" icon="csv">Export CSV</Btn>
      <Btn size="sm" variant="secondary" icon="calendar">Open in calendar</Btn>
    </>}>
      <div className="grid mt-12" style={{ gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gap: 6 }}>
        {dows.map(d => <div key={d} className="text-xs muted fw-8 uppercase" style={{ letterSpacing: "0.12em", padding: "0 4px 6px" }}>{d}</div>)}
        {Array.from({ length: 30 }).map((_, i) => {
          const post = types.find(t => t.d === i);
          return (
            <div key={i} style={{ background: post ? kindColor(post.k) : "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, padding: 8, minHeight: 78, position: "relative", color: post ? kindTextColor(post.k) : "var(--fg)" }}>
              <div className="row-between text-xs" style={{ opacity: 0.7 }}>
                <span className="mono fw-8">{String(i+1).padStart(2,"0")}</span>
                {post && <Icon name={post.k === "carousel" ? "layers" : post.k === "reel" ? "video" : post.k === "founder" ? "bolt" : "image"} size={11} />}
              </div>
              {post && <div className="fw-7 mt-8" style={{ fontSize: 11.5, lineHeight: 1.3 }}>{post.t}</div>}
            </div>
          );
        })}
      </div>
    </Card>
  );
}

/* ---------------------------------------------------------------- VIDEO */
function VideoPreview() {
  const v = SAMPLE_VIDEOS[0];
  return (
    <Card padding="lg">
      <div className="grid" style={{ gridTemplateColumns: "260px minmax(0,1fr)", gap: 18 }}>
        <div className="thumb" style={{ aspectRatio: "9/16", background: "var(--fg)" }}>
          <div className="col" style={{ alignItems: "center", textAlign: "center", padding: 12 }}>
            <span className="tape" style={{ background: "var(--yellow)" }}>YT SHORT</span>
            <div className="fw-8 mt-12" style={{ fontSize: 18, color: "var(--yellow)", lineHeight: 1.1 }}>I sent a £42k kitchen quote to AI</div>
            <div className="mono mt-12" style={{ fontSize: 11, color: "white", opacity: 0.6 }}>0:38 · 4 scenes</div>
          </div>
        </div>
        <div>
          <div className="row gap-8 mb-12"><Pill variant="dark"><Icon name="youtube" size={11} stroke={2.2} />{v.kind}</Pill><Pill>Quality {v.score}</Pill></div>
          <div className="fw-8" style={{ fontSize: 18 }}>"{v.title}"</div>
          <div className="text-sm muted mt-8">A 38-second proof-of-value short. Opens with the receipt. Closes with the saved figure on screen.</div>
        </div>
      </div>
    </Card>
  );
}

function VideoScriptPage() {
  const { showToast, go } = React.useContext(AppCtx);
  const [tab, setTab] = React.useState("script");
  return (
    <div className="page">
      <PackHeader eyebrow="Generated · Renoo" title="Video Script" hl="Pack" icon="video"
        sub="Long-form YouTube, Shorts, Reels, TikTok and Facebook scripts — each with voiceover, shot list, overlay text and thumbnail copy."
        actions={<>
          <Btn variant="secondary" icon="refresh" onClick={() => showToast("Regenerating Video pack…")}>Regenerate</Btn>
          <Btn variant="primary" icon="download" onClick={() => go("exports")}>Export pack</Btn>
        </>} />

      <div className="grid grid-2 gap-16 mb-24">
        {SAMPLE_VIDEOS.map(v => (
          <div key={v.title} className="card card-pad-lg row gap-16" style={{ alignItems: "stretch" }}>
            <div style={{ width: 84, borderRadius: 10, background: v.kind === "yt-long" ? "var(--fg)" : "var(--yellow)", display: "grid", placeItems: "center", color: v.kind === "yt-long" ? "var(--yellow)" : "var(--yellow-ink)", flex: "none", padding: 8 }}>
              <Icon name={v.kind === "yt-long" ? "youtube" : v.kind === "tiktok" ? "tiktok" : v.kind === "fb" ? "facebook" : "video"} size={22} stroke={2.2} />
              <div className="mono fw-8 mt-8 text-xs">{v.duration}</div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="row-between"><Pill variant={v.kind === "yt-long" ? "dark" : "yellow"}>{
                v.kind === "yt-long" ? "YouTube" : v.kind === "yt-short" ? "YT Short" : v.kind === "reel" ? "Reel" : v.kind === "tiktok" ? "TikTok" : "Facebook"
              }</Pill><Pill icon="dot">Quality {v.score}</Pill></div>
              <div className="fw-8 mt-8" style={{ fontSize: 15, letterSpacing: "-0.01em" }}>{v.title}</div>
              <div className="muted text-xs mt-4">{v.scenes} scenes · voiceover · captions · thumbnail text</div>
              <div className="row gap-4 mt-12"><IconBtn icon="eye" /><IconBtn icon="copy" /><IconBtn icon="refresh" /><IconBtn icon="download" /></div>
            </div>
          </div>
        ))}
      </div>

      <Card padding="none">
        <Tabs tabs={[
          { id: "script", label: "Script" },
          { id: "vo",     label: "Voiceover" },
          { id: "shots",  label: "Shot list" },
          { id: "overlay",label: "Overlays / captions" },
          { id: "thumbs", label: "Thumbnail text" },
        ]} active={tab} onChange={setTab} />
        <div className="card-pad-lg">
          {tab === "script" && <VideoScript />}
          {tab === "vo" && <VoiceoverList />}
          {tab === "shots" && <ShotList />}
          {tab === "overlay" && <OverlayList />}
          {tab === "thumbs" && <ThumbnailList />}
        </div>
      </Card>
    </div>
  );
}

function VideoScript() {
  const scenes = [
    { sec: "0:00–0:05", h: "Cold open · receipt on table", vo: "This is a quote for a forty-two thousand pound kitchen.", cam: "Close-up of paper quote, kitchen out of focus." },
    { sec: "0:05–0:14", h: "Beat · the question",       vo: "I sent it to an AI built for trade quotes. Here's what it said.", cam: "Hand picks up phone, frames the Renoo Quote Checker." },
    { sec: "0:14–0:28", h: "Reveal · the number",       vo: "Cabinetry was eighteen percent above market. Two trades were missing from the breakdown.", cam: "Renoo screen-record. Numbers count up." },
    { sec: "0:28–0:38", h: "Close · the saved figure",  vo: "Eighteen hundred pounds back in the budget. Renoo. Free for your first room.", cam: "Logo lockup. Saved figure pulsing." },
  ];
  return (
    <div className="col gap-12">
      <div className="row-between"><div className="fw-8">YT Short · I sent a £42k kitchen quote to AI</div><div className="row gap-4"><Btn size="sm" variant="ghost" icon="copy">Copy</Btn><Btn size="sm" variant="ghost" icon="refresh">Regenerate</Btn></div></div>
      {scenes.map((s, i) => (
        <div key={i} className="grid" style={{ gridTemplateColumns: "120px 1fr 1.2fr", gap: 14, padding: 14, border: "1px solid var(--border)", borderRadius: 10, background: i === 0 ? "var(--yellow-soft)" : "var(--surface)" }}>
          <div>
            <div className="mono fw-8 text-xs">{s.sec}</div>
            <div className="text-xs muted fw-7 mt-4 uppercase" style={{ letterSpacing: "0.12em" }}>Scene {i+1}</div>
          </div>
          <div>
            <div className="text-xs muted fw-7 uppercase" style={{ letterSpacing: "0.12em" }}>VO</div>
            <div className="text-sm mt-4" style={{ lineHeight: 1.55 }}>"{s.vo}"</div>
          </div>
          <div>
            <div className="text-xs muted fw-7 uppercase" style={{ letterSpacing: "0.12em" }}>Camera</div>
            <div className="text-sm mt-4" style={{ lineHeight: 1.55 }}>{s.cam}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function VoiceoverList() {
  return (
    <div className="col gap-12">
      {[
        { title: "YT Short — Receipt cold open", words: 64, secs: 38, t: "This is a quote for a forty-two thousand pound kitchen. I sent it to an AI built for trade quotes. Here's what it said. Cabinetry was eighteen percent above market. Two trades were missing from the breakdown. Eighteen hundred pounds back in the budget. Renoo — free for your first room." },
        { title: "Reel — Three taps every renovation regrets", words: 38, secs: 24, t: "Skirting boards. Socket positions. Tile grout colour. Three things every renovation forgets — and three taps in Renoo to never forget them again." },
      ].map((v, i) => (
        <Card padding="lg" key={i}>
          <div className="row-between"><div><div className="fw-8">{v.title}</div><div className="muted text-xs mt-4">{v.words} words · ~{v.secs}s · neutral British female</div></div><Btn size="sm" variant="ghost" icon="copy">Copy</Btn></div>
          <div className="mt-12 text-sm" style={{ lineHeight: 1.7 }}>{v.t}</div>
        </Card>
      ))}
    </div>
  );
}

function ShotList() {
  const shots = [
    { n: 1, type: "Macro", desc: "Paper quote on kitchen counter, morning light, shallow DOF." },
    { n: 2, type: "Over-shoulder", desc: "Phone picks up Renoo. Quote Checker tab open." },
    { n: 3, type: "Screen-record", desc: "Drag-and-drop quote into Renoo. Numbers populate." },
    { n: 4, type: "Insert", desc: "Cabinetry line item flashes amber. Hand reaches in." },
    { n: 5, type: "Lockup", desc: "Logo on yellow. Saved figure £1,800. CTA: free for your first room." },
  ];
  return (
    <div className="grid grid-2 gap-12">
      {shots.map(s => (
        <div key={s.n} className="row gap-12" style={{ padding: 12, border: "1px solid var(--border)", borderRadius: 10 }}>
          <div style={{ width: 36, height: 36, borderRadius: 8, background: "var(--fg)", color: "var(--yellow)", display: "grid", placeItems: "center", flex: "none", fontWeight: 800 }}>{String(s.n).padStart(2,"0")}</div>
          <div style={{ flex: 1 }}>
            <div className="row gap-8"><Pill>{s.type}</Pill></div>
            <div className="text-sm fw-6 mt-8" style={{ lineHeight: 1.5 }}>{s.desc}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function OverlayList() {
  return (
    <div className="grid grid-3 gap-12">
      {[
        { t: "£42,317", s: "Opening text" },
        { t: "AI cross-checks 12,000 jobs", s: "Beat 1" },
        { t: "−£1,800 in 4 seconds", s: "Reveal" },
        { t: "Free for your first room", s: "CTA" },
        { t: "renoo.app", s: "Endcard" },
        { t: "Snags. Quotes. Receipts.", s: "Tagline" },
      ].map((o, i) => (
        <div key={i} className="card card-pad" style={{ background: i === 0 ? "var(--yellow)" : "var(--surface)" }}>
          <div className="text-xs muted fw-7 uppercase" style={{ letterSpacing: "0.12em", color: i === 0 ? "var(--yellow-ink)" : "var(--fg-muted)" }}>{o.s}</div>
          <div className="fw-8 mt-8" style={{ fontSize: 22, letterSpacing: "-0.02em", color: i === 0 ? "var(--yellow-ink)" : "var(--fg)" }}>{o.t}</div>
        </div>
      ))}
    </div>
  );
}

function ThumbnailList() {
  return (
    <div className="grid grid-3 gap-12">
      {["£42k quote → AI", "I broke my own kitchen", "Three taps of regret", "Save £1,800 in 4 seconds", "The receipt graveyard", "Snags from photos"].map((t, i) => (
        <div key={i} className="thumb" style={{ aspectRatio: "16/9", background: i % 2 === 0 ? "var(--yellow)" : "var(--fg)" }}>
          <div className="fw-8" style={{ fontSize: 20, letterSpacing: "-0.02em", color: i % 2 === 0 ? "var(--yellow-ink)" : "var(--yellow)", textAlign: "center", padding: 16, lineHeight: 1.1 }}>{t}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------------------------------------------------------------- APP STORE */
function AppStorePreview() {
  return (
    <Card padding="lg">
      <div className="grid" style={{ gridTemplateColumns: "minmax(0, 1fr) 220px", gap: 18 }}>
        <div>
          <Pill variant="dark"><Icon name="shop" size={11} stroke={2.2} />App Store</Pill>
          <div className="fw-8 mt-12" style={{ fontSize: 22, letterSpacing: "-0.02em" }}>{SAMPLE_APPSTORE.title}</div>
          <div className="muted text-sm mt-4">{SAMPLE_APPSTORE.subtitle}</div>
          <div className="mt-12 text-sm" style={{ lineHeight: 1.6, whiteSpace: "pre-line" }}>{SAMPLE_APPSTORE.description}</div>
        </div>
        <div className="col gap-8">
          <div className="text-xs muted fw-7 uppercase" style={{ letterSpacing: "0.12em" }}>Screenshot captions</div>
          {SAMPLE_APPSTORE.captions.slice(0,3).map((c, i) => (
            <div key={i} className="row gap-6 text-xs"><span className="mono fw-8">{String(i+1).padStart(2,"0")}</span><span className="fw-6">{c.split(" — ")[0]}</span></div>
          ))}
        </div>
      </div>
    </Card>
  );
}

function AppStorePage() {
  const { showToast, go } = React.useContext(AppCtx);
  return (
    <div className="page">
      <PackHeader eyebrow="Generated · Renoo" title="App Store" hl="Pack" icon="shop"
        sub="App Store + Play Store ready. Title, subtitle, description, keywords, screenshot captions and what's-new copy."
        actions={<>
          <Btn variant="secondary" icon="refresh" onClick={() => showToast("Regenerating App Store…")}>Regenerate</Btn>
          <Btn variant="primary" icon="download" onClick={() => go("exports")}>Export</Btn>
        </>} />

      <div className="grid" style={{ gridTemplateColumns: "minmax(0,1fr) 320px", gap: 20 }}>
        <div className="col gap-16">
          <Card padding="lg" title="Listing" action={<Btn size="sm" variant="ghost" icon="copy" onClick={() => showToast("Listing copied")}>Copy</Btn>}>
            <Field label="App name" hint={`${SAMPLE_APPSTORE.title.length}/30`}>
              <input className="input" defaultValue={SAMPLE_APPSTORE.title} />
            </Field>
            <div className="mt-16"><Field label="Subtitle" hint={`${SAMPLE_APPSTORE.subtitle.length}/30`}>
              <input className="input" defaultValue={SAMPLE_APPSTORE.subtitle} />
            </Field></div>
            <div className="mt-16"><Field label="Description" hint="3 of 4000">
              <textarea className="textarea" style={{ minHeight: 180 }} defaultValue={SAMPLE_APPSTORE.description} />
            </Field></div>
            <div className="mt-16"><Field label="What's new" hint="v1.4">
              <textarea className="textarea" defaultValue={SAMPLE_APPSTORE.whats_new} />
            </Field></div>
          </Card>

          <Card padding="lg" title="Screenshot captions" sub="Per slot · App Store + Play Store">
            <div className="grid" style={{ gridTemplateColumns: "repeat(5, minmax(0,1fr))", gap: 12 }}>
              {SAMPLE_APPSTORE.captions.map((c, i) => (
                <div key={i}>
                  <div className="thumb" style={{ aspectRatio: "9/19" }}>
                    <div className="col" style={{ alignItems: "center", textAlign: "center", padding: 10 }}>
                      <span className="tape">SCREEN {i+1}</span>
                      <div className="fw-8 mt-12" style={{ fontSize: 12.5, lineHeight: 1.25, color: "var(--fg)" }}>{c.split(" — ")[0]}</div>
                    </div>
                  </div>
                  <div className="muted text-xs mt-8" style={{ lineHeight: 1.4 }}>{c.split(" — ")[1]}</div>
                </div>
              ))}
            </div>
          </Card>
        </div>

        <div className="col gap-16">
          <Card title="Keywords" sub="100 of 100 characters" padding="lg">
            <div className="chip-row">
              {SAMPLE_APPSTORE.keywords.map(k => <span key={k} className="chip active chip-yellow">{k}</span>)}
            </div>
            <div className="muted text-xs mt-12">Optimised for UK App Store. CPI estimate £1.40 — £2.20.</div>
          </Card>
          <Card title="Listing scores">
            <div className="col gap-12 mt-4">
              <ScoreRow label="Title hookiness" value={86} tone="yellow" />
              <ScoreRow label="Keyword coverage" value={92} tone="green" />
              <ScoreRow label="Description clarity" value={89} tone="yellow" />
              <ScoreRow label="Compliance" value={100} tone="green" />
            </div>
          </Card>
          <Card title="Localisation">
            <div className="col gap-8">
              {[
                { c: "🇬🇧 UK English", s: "Source", v: "yellow" },
                { c: "🇺🇸 US English", s: "Translated", v: "green" },
                { c: "🇩🇪 German", s: "Queued", v: "amber" },
                { c: "🇪🇸 Spanish", s: "Queued", v: "amber" },
              ].map((l, i) => (
                <div key={i} className="row-between text-sm" style={{ padding: "6px 8px", borderRadius: 8, background: i === 0 ? "var(--yellow-soft)" : "transparent" }}>
                  <span className="fw-6">{l.c}</span>
                  <Pill variant={l.v}>{l.s}</Pill>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------- ADS */
function AdsPreview() {
  const ad = SAMPLE_ADS.meta[0];
  return (
    <Card padding="lg">
      <div className="grid" style={{ gridTemplateColumns: "minmax(0,1fr) 260px", gap: 18 }}>
        <div>
          <div className="row gap-8 mb-12"><Pill variant="dark"><Icon name="meta" size={11} stroke={2.2} />Meta · Cold audience</Pill><Pill variant="yellow">A/B variant A</Pill></div>
          <div className="fw-8" style={{ fontSize: 18, letterSpacing: "-0.015em" }}>"{ad.head}"</div>
          <div className="text-sm mt-8" style={{ lineHeight: 1.6 }}>{ad.body}</div>
          <div className="mt-12"><Btn variant="primary" size="sm">{ad.cta}</Btn></div>
        </div>
        <div className="thumb" style={{ aspectRatio: "4/5", background: "var(--fg)" }}>
          <div className="col" style={{ alignItems: "center", textAlign: "center", padding: 14 }}>
            <span className="tape">SAVE £1,800</span>
            <div className="fw-8 mt-12" style={{ fontSize: 18, color: "var(--yellow)", lineHeight: 1.1 }}>Stop guessing what your kitchen should cost.</div>
            <Btn variant="primary" size="sm" style={{ marginTop: 16 }}>Try Renoo</Btn>
          </div>
        </div>
      </div>
    </Card>
  );
}

function AdsPage() {
  const { showToast, go } = React.useContext(AppCtx);
  const [platform, setPlatform] = React.useState("meta");
  const plats = [
    { id: "meta",    label: "Meta", icon: "meta" },
    { id: "insta",   label: "Instagram", icon: "insta" },
    { id: "tiktok",  label: "TikTok", icon: "tiktok" },
    { id: "google",  label: "Google", icon: "google" },
    { id: "youtube", label: "YouTube", icon: "youtube" },
    { id: "linkedin",label: "LinkedIn", icon: "linkedin" },
  ];
  return (
    <div className="page">
      <PackHeader eyebrow="Generated · Renoo" title="Paid Ads" hl="Pack" icon="target"
        sub="Headlines, primary text, descriptions, CTAs, A/B variants across six platforms. Cold + retargeting variants included."
        actions={<>
          <Btn variant="secondary" icon="refresh" onClick={() => showToast("Regenerating ads…")}>Regenerate</Btn>
          <Btn variant="primary" icon="download" onClick={() => go("exports")}>Export</Btn>
        </>} />

      <div className="row gap-6 mb-24" style={{ flexWrap: "wrap" }}>
        {plats.map(p => (
          <button key={p.id} className={"chip" + (platform === p.id ? " active chip-yellow" : "")} onClick={() => setPlatform(p.id)}>
            <Icon name={p.icon} size={12} stroke={2.2} />
            {p.label}
          </button>
        ))}
      </div>

      {(platform === "meta" || platform === "insta") && (
        <div className="grid grid-2 gap-16">
          {SAMPLE_ADS.meta.map((ad, i) => (
            <Card padding="lg" key={i}>
              <div className="row-between mb-12">
                <div className="row gap-8"><Pill variant="dark"><Icon name={platform === "meta" ? "meta" : "insta"} size={11} stroke={2.2} />{platform === "meta" ? "Meta" : "Instagram"}</Pill><Pill variant="yellow">Variant {ad.v}</Pill></div>
                <div className="row gap-4"><IconBtn icon="copy" /><IconBtn icon="refresh" /></div>
              </div>
              <div className="text-xs muted fw-7 uppercase mb-4" style={{ letterSpacing: "0.12em" }}>Headline</div>
              <div className="fw-8" style={{ fontSize: 17 }}>"{ad.head}"</div>
              <div className="text-xs muted fw-7 uppercase mb-4 mt-12" style={{ letterSpacing: "0.12em" }}>Primary text</div>
              <div className="text-sm" style={{ lineHeight: 1.6 }}>{ad.body}</div>
              <div className="hr mt-16 mb-12" />
              <div className="row-between text-xs">
                <span className="muted">CTA</span>
                <Btn variant="primary" size="sm">{ad.cta}</Btn>
              </div>
            </Card>
          ))}
          <Card padding="lg" title="Retargeting set" sub="3 variants">
            <div className="col gap-10">
              {["You started a Renoo project. The quote you uploaded is still amber.", "There's still a paint code waiting in your Renoo. Don't lose it.", "Three rooms started. Take a weekend to close them out."].map((t, i) => (
                <div key={i} className="row gap-10" style={{ padding: 10, border: "1px solid var(--border)", borderRadius: 10 }}>
                  <span className="mono fw-8 text-xs">R{i+1}</span><span className="text-sm fw-6">"{t}"</span>
                </div>
              ))}
            </div>
          </Card>
          <Card padding="lg" title="Cold audience set">
            <div className="col gap-10">
              {["Stop guessing what your kitchen should cost.", "The renovation companion you've been WhatsApping into existence.", "Paint codes. Saved for life. Free for your first room."].map((t, i) => (
                <div key={i} className="row gap-10" style={{ padding: 10, border: "1px solid var(--border)", borderRadius: 10, background: "var(--yellow-soft)" }}>
                  <span className="mono fw-8 text-xs">C{i+1}</span><span className="text-sm fw-6">"{t}"</span>
                </div>
              ))}
            </div>
          </Card>
        </div>
      )}

      {platform === "tiktok" && (
        <div className="grid grid-2 gap-16">
          {SAMPLE_ADS.tiktok.concat(SAMPLE_ADS.tiktok).map((ad, i) => (
            <Card padding="lg" key={i}>
              <div className="row-between mb-12"><Pill variant="dark"><Icon name="tiktok" size={11} stroke={2.2} />TikTok Spark Ad</Pill><Pill variant="yellow">Hook · {i % 2 === 0 ? "Receipt" : "Quote"}</Pill></div>
              <div className="fw-8" style={{ fontSize: 17 }}>"{ad.hook}"</div>
              <div className="text-sm mt-8" style={{ lineHeight: 1.6 }}>{ad.body}</div>
              <Btn variant="primary" size="sm" style={{ marginTop: 12 }}>{ad.cta}</Btn>
            </Card>
          ))}
        </div>
      )}

      {platform === "google" && (
        <div className="grid grid-2 gap-16">
          {SAMPLE_ADS.google.map((g, i) => (
            <Card padding="lg" key={i}>
              <div className="row-between mb-12"><Pill variant="dark"><Icon name="google" size={11} stroke={2.2} />Google Search</Pill><Pill variant="yellow">Group {String.fromCharCode(65+i)}</Pill></div>
              <div className="text-xs muted">{g.url}</div>
              <div className="fw-8 mt-4" style={{ fontSize: 16, color: "oklch(0.4 0.18 240)" }}>{g.head1} | {g.head2}</div>
              <div className="text-sm mt-4" style={{ lineHeight: 1.5 }}>{g.desc}</div>
              <div className="row gap-4 mt-12"><IconBtn icon="copy" /><IconBtn icon="refresh" /></div>
            </Card>
          ))}
        </div>
      )}

      {platform === "youtube" && (
        <Card padding="lg">
          <div className="fw-8 mb-12">YouTube TrueView · 15s + 30s + 60s</div>
          {[
            { dur: "15s", h: "I sent a £42k kitchen quote to AI", b: "Renoo cross-references your quote against thousands of recent UK jobs. Try it — free for your first room." },
            { dur: "30s", h: "The renovation that broke my partner", b: "We built Renoo so the third renovation doesn't have to. Calm, mobile-first, free for your first room." },
            { dur: "60s", h: "Eight weekends, one bathroom, one app", b: "Founder narration over the build. Closes on the App Store CTA." },
          ].map((y, i) => (
            <div key={i} className="row gap-12" style={{ padding: 12, border: "1px solid var(--border)", borderRadius: 10, marginTop: 10 }}>
              <div style={{ width: 64, height: 64, borderRadius: 10, background: "var(--fg)", display: "grid", placeItems: "center", color: "var(--yellow)", flex: "none" }}>
                <Icon name="youtube" size={22} stroke={2.2} />
              </div>
              <div style={{ flex: 1 }}>
                <div className="row gap-8"><Pill>{y.dur}</Pill></div>
                <div className="fw-8 mt-4">{y.h}</div>
                <div className="text-sm muted mt-4">{y.b}</div>
              </div>
            </div>
          ))}
        </Card>
      )}

      {platform === "linkedin" && (
        <div className="grid grid-2 gap-16">
          {[
            { h: "How nine renovation quotes priced themselves wrong.", b: "An honest write-up of what Renoo found in twelve quotes we ran in the beta. For renovators, by a renovator.", cta: "Read the breakdown" },
            { h: "The third renovation that didn't break us.", b: "Built mobile-first because renovations don't live on a desktop. Calm, lightly premium, free for your first room.", cta: "Try Renoo" },
          ].map((l, i) => (
            <Card padding="lg" key={i}>
              <div className="row-between mb-12"><Pill variant="blue"><Icon name="linkedin" size={11} stroke={2.2} />LinkedIn Sponsored</Pill><Pill variant="yellow">Variant {String.fromCharCode(65+i)}</Pill></div>
              <div className="fw-8" style={{ fontSize: 17 }}>"{l.h}"</div>
              <div className="text-sm mt-8" style={{ lineHeight: 1.6 }}>{l.b}</div>
              <Btn variant="primary" size="sm" style={{ marginTop: 12 }}>{l.cta}</Btn>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---------------------------------------------------------------- LANDING */
function LandingPreview() {
  return (
    <Card padding="lg">
      <div className="fw-8" style={{ fontSize: 26, letterSpacing: "-0.025em", lineHeight: 1.1 }}>{SAMPLE_LANDING.hero_h}</div>
      <div className="muted text-sm mt-8" style={{ maxWidth: "62ch", lineHeight: 1.6 }}>{SAMPLE_LANDING.hero_sub}</div>
      <div className="row gap-8 mt-12"><Btn variant="primary" size="sm">{SAMPLE_LANDING.hero_cta}</Btn><Btn variant="secondary" size="sm">See how it works</Btn></div>
    </Card>
  );
}

function LandingPage() {
  const { showToast, go } = React.useContext(AppCtx);
  return (
    <div className="page">
      <PackHeader eyebrow="Generated · Renoo" title="Landing Page" hl="Copy" icon="layout"
        sub="Hero, value proposition, features, benefits, FAQ, CTAs plus the Claude Design and Codex prompts to ship it."
        actions={<>
          <Btn variant="secondary" icon="refresh" onClick={() => showToast("Regenerating landing copy…")}>Regenerate</Btn>
          <Btn variant="primary" icon="download" onClick={() => go("exports")}>Export</Btn>
        </>} />

      <div className="grid" style={{ gridTemplateColumns: "minmax(0,1fr) 320px", gap: 20 }}>
        <div className="col gap-16">
          <Card padding="lg" title="Hero section" action={<Btn size="sm" variant="ghost" icon="copy">Copy</Btn>}>
            <Field label="H1"><input className="input" defaultValue={SAMPLE_LANDING.hero_h} style={{ fontWeight: 800, fontSize: 17 }} /></Field>
            <div className="mt-12"><Field label="Sub"><textarea className="textarea" defaultValue={SAMPLE_LANDING.hero_sub} /></Field></div>
            <div className="row gap-8 mt-12">
              <Field label="Primary CTA"><input className="input" defaultValue={SAMPLE_LANDING.hero_cta} /></Field>
              <Field label="Secondary CTA"><input className="input" defaultValue="See how it works" /></Field>
            </div>
          </Card>
          <Card padding="lg" title="Value proposition">
            <div className="text-sm" style={{ lineHeight: 1.6 }}>{SAMPLE_LANDING.vp}</div>
          </Card>
          <Card padding="lg" title="Feature sections" sub="4 of 4 generated">
            <div className="col gap-12">
              {SAMPLE_LANDING.features.map((f, i) => (
                <div key={f.t} className="row gap-12" style={{ padding: 14, border: "1px solid var(--border)", borderRadius: 10 }}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: "var(--yellow)", display: "grid", placeItems: "center", flex: "none" }}>
                    <span className="mono fw-8" style={{ fontSize: 13, color: "var(--yellow-ink)" }}>{String(i+1).padStart(2,"0")}</span>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="fw-8">{f.t}</div>
                    <div className="text-sm muted mt-4">{f.b}</div>
                  </div>
                  <IconBtn icon="copy" />
                </div>
              ))}
            </div>
          </Card>
          <Card padding="lg" title="Problem / Solution">
            <div className="grid grid-2 gap-16">
              <div style={{ padding: 14, background: "var(--surface-2)", borderRadius: 10, border: "1px solid var(--border)" }}>
                <div className="text-xs muted fw-7 uppercase" style={{ letterSpacing: "0.12em" }}>The problem</div>
                <div className="text-sm fw-6 mt-8" style={{ lineHeight: 1.6 }}>Renovations spiral across WhatsApp, glove boxes and back-of-envelope decisions. Quotes get lost. Paint codes vanish. Three months in, nobody remembers what was agreed in the kitchen.</div>
              </div>
              <div style={{ padding: 14, background: "var(--yellow-soft)", borderRadius: 10, border: "1px solid oklch(0.88 0.1 102)" }}>
                <div className="text-xs muted fw-7 uppercase" style={{ letterSpacing: "0.12em" }}>The Renoo answer</div>
                <div className="text-sm fw-6 mt-8" style={{ lineHeight: 1.6 }}>One calm source of truth, organised by room. The AI does the boring bits — checking quotes, filing receipts, remembering paint codes, writing your snagging list from photos.</div>
              </div>
            </div>
          </Card>
          <Card padding="lg" title="FAQ" sub="3 of 3">
            <div className="col">
              {SAMPLE_LANDING.faq.map((f, i) => (
                <div key={i} style={{ padding: "14px 0", borderTop: i === 0 ? 0 : "1px solid var(--border)" }}>
                  <div className="fw-8">{f.q}</div>
                  <div className="text-sm muted mt-8" style={{ lineHeight: 1.6 }}>{f.a}</div>
                </div>
              ))}
            </div>
          </Card>
        </div>

        <div className="col gap-16">
          <Card title="SEO" padding="lg">
            <Field label="SEO title"><input className="input" defaultValue="Renoo — Calm Renovation Companion" /></Field>
            <div className="mt-12"><Field label="Meta description"><textarea className="textarea" defaultValue={SAMPLE_LANDING.vp.slice(0, 156)} /></Field></div>
          </Card>
          <Card title="Claude Design prompt" sub="Ready to paste" padding="lg">
            <div className="muted text-xs">Generate the landing page in Claude Design using the Renoo brand pack.</div>
            <Btn variant="secondary" icon="copy" style={{ marginTop: 12, width: "100%" }}>Copy prompt</Btn>
          </Card>
          <Card title="Codex implementation" sub="Next.js + Tailwind" padding="lg">
            <div className="muted text-xs">A Codex prompt to scaffold the landing in code.</div>
            <Btn variant="secondary" icon="copy" style={{ marginTop: 12, width: "100%" }}>Copy prompt</Btn>
          </Card>
        </div>
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------- SEO */
function SeoPreview() {
  return (
    <Card padding="lg">
      <div className="fw-8 mb-8">Top title candidate</div>
      <div className="fw-8" style={{ fontSize: 17, color: "oklch(0.4 0.18 240)" }}>{SAMPLE_SEO.titles[0]}</div>
      <div className="muted text-sm mt-8" style={{ lineHeight: 1.6 }}>{SAMPLE_SEO.meta}</div>
    </Card>
  );
}

function SEOPage() {
  const { showToast, go } = React.useContext(AppCtx);
  return (
    <div className="page">
      <PackHeader eyebrow="Generated · Renoo" title="SEO" hl="Pack" icon="hash"
        sub="Titles, meta descriptions, blog ideas, keyword clusters, comparison angles and FAQ schema copy."
        actions={<>
          <Btn variant="secondary" icon="refresh" onClick={() => showToast("Regenerating SEO…")}>Regenerate</Btn>
          <Btn variant="primary" icon="download" onClick={() => go("exports")}>Export</Btn>
        </>} />

      <div className="grid mb-24" style={{ gridTemplateColumns: "minmax(0,1fr) 320px", gap: 20 }}>
        <Card padding="lg" title="SEO titles & meta">
          {SAMPLE_SEO.titles.map((t, i) => (
            <div key={i} className="row-between" style={{ padding: "12px 0", borderBottom: i === SAMPLE_SEO.titles.length - 1 ? 0 : "1px solid var(--border)" }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="fw-7" style={{ fontSize: 14, color: "oklch(0.4 0.18 240)", letterSpacing: "-0.005em" }}>{t}</div>
                <div className="muted text-xs mt-4 mono">renoo.app/{t.toLowerCase().replace(/[^a-z0-9 ]/g, "").trim().split(" ").slice(0,4).join("-")}</div>
                {i === 0 && <div className="muted text-sm mt-8" style={{ lineHeight: 1.55 }}>{SAMPLE_SEO.meta}</div>}
              </div>
              <div className="row gap-4"><IconBtn icon="copy" /><IconBtn icon="edit" /></div>
            </div>
          ))}
        </Card>
        <Card padding="lg" title="Keyword clusters" sub="3 topical clusters">
          <div className="col gap-12">
            {SAMPLE_SEO.clusters.map(c => (
              <div key={c.topic}>
                <div className="fw-8 text-sm">{c.topic}</div>
                <div className="chip-row mt-8">
                  {c.terms.map(t => <span key={t} className="chip">{t}</span>)}
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <div className="grid grid-2 gap-16">
        <Card padding="lg" title="Blog ideas" sub="6 generated">
          <div className="col gap-8">
            {SAMPLE_SEO.blogs.map((b, i) => (
              <div key={i} className="row-between" style={{ padding: 10, border: "1px solid var(--border)", borderRadius: 10 }}>
                <div className="row gap-10">
                  <span className="mono fw-8 text-xs muted">{String(i+1).padStart(2,"0")}</span>
                  <span className="fw-7 text-sm">{b}</span>
                </div>
                <Pill icon="dot">{["Listicle", "Cost", "Walkthrough", "Compare", "Checklist", "Tips"][i]}</Pill>
              </div>
            ))}
          </div>
        </Card>
        <Card padding="lg" title="Other SEO copy">
          <div className="col gap-12">
            <div>
              <div className="text-xs muted fw-7 uppercase" style={{ letterSpacing: "0.12em" }}>Launch announcement blog</div>
              <div className="fw-7 text-sm mt-4">"Renoo, the calm renovation companion, is here — and free for your first room"</div>
            </div>
            <div>
              <div className="text-xs muted fw-7 uppercase" style={{ letterSpacing: "0.12em" }}>Comparison articles</div>
              <ul className="text-sm" style={{ paddingLeft: 18, margin: "4px 0 0", lineHeight: 1.6 }}>
                <li>Renoo vs Houzz for UK renovators</li>
                <li>Renoo vs Notion for renovation projects</li>
                <li>Renoo vs spreadsheets — when each wins</li>
              </ul>
            </div>
            <div>
              <div className="text-xs muted fw-7 uppercase" style={{ letterSpacing: "0.12em" }}>FAQ schema</div>
              <div className="mono text-xs muted mt-4">9 question/answer pairs · Schema.org/FAQPage ready</div>
            </div>
            <div>
              <div className="text-xs muted fw-7 uppercase" style={{ letterSpacing: "0.12em" }}>Help-article ideas</div>
              <ul className="text-sm" style={{ paddingLeft: 18, margin: "4px 0 0", lineHeight: 1.6 }}>
                <li>How the Quote Checker decides what's fair</li>
                <li>How to set up a room in 30 seconds</li>
                <li>Sharing a room with your builder</li>
              </ul>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, {
  SocialContentPage, SocialPreview,
  VideoScriptPage, VideoPreview,
  AppStorePage, AppStorePreview,
  AdsPage, AdsPreview,
  LandingPage, LandingPreview,
  SEOPage, SeoPreview,
});