/* ========================================================================
   landing.jsx — BoltKit marketing landing page
   High-energy hero · diagonal panels · ticker · broadcast HUDs
   ====================================================================== */

function LandingMarketingPage() {
  const { go, runGeneration } = React.useContext(AppCtx);
  const [tick, setTick] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);

  // synthetic broadcast clock 03:51 counting down
  const baseSecs = 3*60 + 51;
  const remain = ((baseSecs - tick) % baseSecs + baseSecs) % baseSecs;
  const mm = String(Math.floor(remain/60)).padStart(2, "0");
  const ss = String(remain%60).padStart(2, "0");

  return (
    <div className="lp">
      <LandingNav onTry={() => go("signup")} onDemo={() => go("demo")} />

      {/* ====================================================== HERO ====== */}
      <section className="lp-hero">
        <div className="lp-hero-grid" aria-hidden="true" />
        <div className="lp-hero-noise" aria-hidden="true" />
        <div className="lp-diag" aria-hidden="true" />

        {/* broadcast eyebrow */}
        <div className="lp-broadcast">
          <span className="lp-broadcast-dot" />
          <span className="lp-broadcast-label">LAUNCH PACK · LIVE</span>
          <span className="lp-broadcast-time mono">{mm}:{ss}</span>
          <span className="lp-broadcast-sep" />
          <span className="lp-broadcast-meta">v1.4 · 132 ASSETS · 6 PROJECTS</span>
        </div>

        <div className="lp-hero-row">
          <div className="lp-hero-copy">
            <h1 className="lp-h1">
              <span className="lp-h1-line">UPLOAD</span>
              <span className="lp-h1-line">YOUR APP.</span>
              <span className="lp-h1-line lp-h1-hl">GENERATE</span>
              <span className="lp-h1-line lp-h1-hl">THE LAUNCH</span>
              <span className="lp-h1-line lp-h1-hl">PACK<span className="bolt-inline" aria-hidden="true">⚡</span></span>
            </h1>
            <p className="lp-sub">
              BoltKit turns your screenshots, brand kit and app URL into <b>social posts</b>, <b>video scripts</b>, <b>ads</b>, <b>app store copy</b>, <b>landing page copy</b>, <b>SEO packs</b> and <b>Codex prompts</b>. One folder. Built to ship.
            </p>
            <div className="lp-cta-row">
              <button className="lp-btn lp-btn-primary" onClick={() => go("signup")}>
                <BoltMark size={16} color="var(--yellow-ink)" slice="var(--yellow-ink)" />
                <span>Start Building</span>
              </button>
              <button className="lp-btn lp-btn-ghost" onClick={() => go("demo")}>
                <Icon name="play" size={14} stroke={2.2} />
                <span>View Demo</span>
              </button>
            </div>

            <div className="lp-trust">
              <div className="lp-trust-stars">★★★★★</div>
              <div className="lp-trust-meta">Used to launch <b>6 apps</b> · <b>132 assets</b> shipped this week</div>
            </div>
          </div>

          {/* HERO MOCKUP — broadcast-card stack */}
          <div className="lp-mock">
            <div className="lp-mock-corner lp-mock-corner-tl" />
            <div className="lp-mock-corner lp-mock-corner-tr" />
            <div className="lp-mock-corner lp-mock-corner-bl" />
            <div className="lp-mock-corner lp-mock-corner-br" />

            <div className="lp-mock-head">
              <div className="row gap-6"><span className="lp-dot rd" /><span className="lp-dot am" /><span className="lp-dot gn" /></div>
              <div className="mono text-xs" style={{ opacity: 0.6 }}>boltkit.studio/demo</div>
              <div className="mono text-xs" style={{ opacity: 0.6 }}>GENERATING</div>
            </div>

            <div className="lp-mock-body">
              <div className="lp-mock-title">BOLTKIT · FULL LAUNCH PACK</div>
              <div className="lp-mock-meta mono">132 ASSETS · READINESS 92 · BRAND-LOCKED v1</div>

              <div className="lp-mock-bars">
                {[
                  { l: "Social posts",    v: 100, n: "48/48" },
                  { l: "Video scripts",   v: 100, n: "12/12" },
                  { l: "Paid ads (A/B)",  v: 92,  n: "28/30" },
                  { l: "App Store copy",  v: 80,  n: "12/15" },
                  { l: "SEO pack",        v: 64,  n: "13/20" },
                  { l: "Codex prompts",   v: 28,  n: "3/9"  },
                ].map((b, i) => (
                  <div key={b.l} className="lp-mock-row">
                    <div className="lp-mock-row-l mono">{b.l}</div>
                    <div className="lp-mock-row-bar"><span style={{ width: b.v + "%", animationDelay: (i * 0.12) + "s" }} /></div>
                    <div className="lp-mock-row-n mono">{b.n}</div>
                  </div>
                ))}
              </div>

              <div className="lp-mock-foot">
                <div className="lp-tile">
                  <div className="lp-tile-l mono">EXPORT</div>
                  <div className="lp-tile-v">.ZIP</div>
                </div>
                <div className="lp-tile">
                  <div className="lp-tile-l mono">SIZE</div>
                  <div className="lp-tile-v">8.4 MB</div>
                </div>
                <div className="lp-tile lp-tile-y">
                  <div className="lp-tile-l mono">STATUS</div>
                  <div className="lp-tile-v">READY</div>
                </div>
              </div>
            </div>

            {/* floating HUD chip */}
            <div className="lp-hud">
              <div className="lp-hud-l mono">AI PACK GENERATING</div>
              <div className="lp-hud-bar"><span /></div>
              <div className="lp-hud-r mono">EXPORT ZIP READY</div>
            </div>
          </div>
        </div>
      </section>

      {/* ====================================================== TICKER ==== */}
      <Ticker />

      {/* ====================================================== PROBLEM === */}
      <section className="lp-sec">
        <div className="lp-eyebrow"><span /> 01 · THE PROBLEM</div>
        <div className="lp-row-2">
          <div>
            <h2 className="lp-h2">BUILDING THE APP IS HALF<br/>THE JOB.</h2>
          </div>
          <div className="lp-lead">
            <p>Every project still needs landing page copy, social posts, videos, ads, app store text, SEO, launch emails and implementation prompts.</p>
            <p><b>BoltKit creates the whole launch folder from your assets.</b> One upload, one pack, one ZIP.</p>
          </div>
        </div>

        <div className="lp-probs">
          {[
            { n: "47", l: "ASSETS per launch", s: "social, ads, app store, SEO, prompts" },
            { n: "11", l: "PLATFORMS to ship", s: "IG, TikTok, Meta, Google, YT, LI, AS, blog" },
            { n: "6h",  l: "of copywriting", s: "before a single post goes live" },
            { n: "0",  l: "TIME for marketing", s: "while you're still building the app" },
          ].map(p => (
            <div key={p.l} className="lp-prob">
              <div className="lp-prob-n">{p.n}</div>
              <div className="lp-prob-l mono">{p.l}</div>
              <div className="lp-prob-s">{p.s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ====================================================== HOW IT ==== */}
      <section className="lp-sec lp-sec-dark">
        <div className="lp-eyebrow"><span /> 02 · HOW IT WORKS</div>
        <h2 className="lp-h2">FIVE STEPS. ONE FOLDER.</h2>
        <div className="lp-steps">
          {[
            { n: "01", t: "UPLOAD",      d: "Drag in screenshots, logo, app icon and brand kit. Auto-organised by room and screen.",  i: "upload" },
            { n: "02", t: "ADD URL",     d: "Paste your app URL plus a few notes on audience, tone and core features.",                 i: "globe" },
            { n: "03", t: "AI ANALYSE", d: "BoltKit extracts positioning, pain points, benefits, marketing angles and a readiness score.", i: "brain" },
            { n: "04", t: "GENERATE",   d: "Pick a pack. AI ships social, video, ads, landing, app store, SEO, Claude + Codex prompts.",  i: "sparkle" },
            { n: "05", t: "EXPORT",     d: "Download as Markdown, CSV calendar, JSON, PDF or one tidy ZIP folder.",                       i: "download" },
          ].map((s, i) => (
            <div key={s.n} className="lp-step">
              <div className="lp-step-tape">STEP {s.n}</div>
              <div className="lp-step-ico"><Icon name={s.i} size={22} stroke={2.2} color="var(--yellow)" /></div>
              <div className="lp-step-t">{s.t}</div>
              <div className="lp-step-d">{s.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ====================================================== WHAT IT GENS */}
      <section className="lp-sec">
        <div className="lp-eyebrow"><span /> 03 · WHAT BOLTKIT GENERATES</div>
        <h2 className="lp-h2">ONE PROJECT. SEVENTEEN<br/>OUTPUTS. EVERY TIME.</h2>
        <div className="lp-cards">
          {[
            { c: "SOCIAL",  i: "insta",   t: "Instagram posts", s: "Hooks + caption + 5 hashtags" },
            { c: "SOCIAL",  i: "layers",  t: "Carousel copy",   s: "6-slide stories with covers" },
            { c: "VIDEO",   i: "tiktok",  t: "TikTok scripts",  s: "Hook → reveal → CTA in 30s" },
            { c: "VIDEO",   i: "video",   t: "Reels scripts",   s: "Vertical, captioned, shot-listed" },
            { c: "VIDEO",   i: "youtube", t: "YT Shorts",       s: "Voiceover + overlay + thumbnail" },
            { c: "VIDEO",   i: "youtube", t: "YouTube outlines",s: "Long-form chapter scripts" },
            { c: "ADS",     i: "meta",    t: "Meta ads",        s: "Headline · primary · CTA × A/B" },
            { c: "ADS",     i: "google",  t: "Google ads",      s: "Search RSAs with sitelinks" },
            { c: "STORE",   i: "shop",    t: "App Store copy",  s: "Title · subtitle · keywords" },
            { c: "WEB",     i: "layout",  t: "Landing page",    s: "Hero · features · FAQ · CTAs" },
            { c: "WEB",     i: "hash",    t: "SEO pack",        s: "Titles · meta · blog ideas" },
            { c: "LAUNCH",  i: "bolt",    t: "Product Hunt",    s: "Tagline · post · gallery copy" },
            { c: "LAUNCH",  i: "doc",     t: "Press kit",       s: "One-liners · founder bio · facts" },
            { c: "PROMPTS", i: "sparkle", t: "Claude prompts",  s: "Design dashboards, screens, brand" },
            { c: "PROMPTS", i: "code",    t: "Codex prompts",   s: "Frontend, backend, API, exports" },
            { c: "PROMPTS", i: "check_circle", t: "QA prompts", s: "Edge cases · a11y · mobile" },
            { c: "EXPORT",  i: "zip",     t: "ZIP folder",      s: "MD · CSV · JSON · PDF bundled" },
          ].map(card => (
            <div key={card.t} className="lp-card">
              <div className="lp-card-cat mono">{card.c}</div>
              <div className="lp-card-ico"><Icon name={card.i} size={20} stroke={2.2} /></div>
              <div className="lp-card-t">{card.t}</div>
              <div className="lp-card-s">{card.s}</div>
              <div className="lp-card-arrow" aria-hidden="true">→</div>
            </div>
          ))}
        </div>
      </section>

      {/* ====================================================== BRAND INT === */}
      <section className="lp-sec lp-split">
        <div>
          <div className="lp-eyebrow"><span /> 04 · BRAND INTELLIGENCE</div>
          <h2 className="lp-h2">EVERY PACK STAYS<br/>ON-BRAND.</h2>
          <p className="lp-lead">BoltKit reads your logo, screenshots and brand kit, then guardrails every generation against your colours, fonts, voice rules and banned phrases. No more "seamless", no more "game-changer".</p>
          <ul className="lp-bullets">
            <li><Icon name="check" size={13} stroke={3} color="var(--yellow)" /> Extracts colour palette from logo + screenshots</li>
            <li><Icon name="check" size={13} stroke={3} color="var(--yellow)" /> Locks fonts, voice and banned phrases</li>
            <li><Icon name="check" size={13} stroke={3} color="var(--yellow)" /> Scores each output for brand match</li>
            <li><Icon name="check" size={13} stroke={3} color="var(--yellow)" /> Re-runs if a generation drifts below 70</li>
          </ul>
        </div>
        <BrandPanel />
      </section>

      {/* ====================================================== SCREEN INT === */}
      <section className="lp-sec lp-split lp-split-r">
        <ScreenPanel />
        <div>
          <div className="lp-eyebrow"><span /> 05 · SCREENSHOT INTELLIGENCE</div>
          <h2 className="lp-h2">YOUR SCREENS,<br/>READ AT A GLANCE.</h2>
          <p className="lp-lead">BoltKit classifies every screenshot by screen type, surfaces what's on it, and suggests the best place to use it — App Store slot, hero shot, Instagram carousel, paid ad creative, video b-roll.</p>
          <ul className="lp-bullets">
            <li><Icon name="check" size={13} stroke={3} color="var(--yellow)" /> Detects onboarding, dashboard, list, detail and empty-state</li>
            <li><Icon name="check" size={13} stroke={3} color="var(--yellow)" /> Pulls features and copy directly off the screen</li>
            <li><Icon name="check" size={13} stroke={3} color="var(--yellow)" /> Recommends App Store screenshot order</li>
            <li><Icon name="check" size={13} stroke={3} color="var(--yellow)" /> Flags missing assets before launch</li>
          </ul>
        </div>
      </section>

      {/* ====================================================== VIDEO PACK == */}
      <section className="lp-sec lp-sec-dark">
        <div className="lp-eyebrow"><span /> 06 · VIDEO + SOCIAL PACK</div>
        <h2 className="lp-h2">SHORTS, REELS, TIKTOK,<br/>YOUTUBE — IN ONE GO.</h2>
        <VideoPackPanel />
      </section>

      {/* ====================================================== PROMPT PACK = */}
      <section className="lp-sec">
        <div className="lp-eyebrow"><span /> 07 · PROMPT PACK FOR CLAUDE AND CODEX</div>
        <div className="lp-row-2">
          <h2 className="lp-h2">SHIP THE APP <br/>WITH THE LAUNCH.</h2>
          <p className="lp-lead">BoltKit doesn't just write the marketing — it writes the prompts to build the next version. Paste straight into Claude Design or Codex and pick up where you left off.</p>
        </div>
        <div className="lp-prompts">
          <PromptBlock kind="claude" />
          <PromptBlock kind="codex" />
        </div>
      </section>

      {/* ====================================================== EXPORT ==== */}
      <section className="lp-sec lp-sec-dark">
        <div className="lp-eyebrow"><span /> 08 · EXPORT CENTRE</div>
        <h2 className="lp-h2">ONE ZIP. ZERO MESS.</h2>
        <ExportPanel />
      </section>

      {/* ====================================================== DEMO PROJ == */}
      <section className="lp-sec">
        <div className="lp-eyebrow"><span /> 09 · DEMO PROJECT</div>
        <h2 className="lp-h2">SEE A REAL PACK. <br/>BUILT WITH BOLTKIT.</h2>
        <p className="lp-lead">The demo workspace runs the full BoltKit pipeline on BoltKit itself. Brand pack, app URL, assets, generated packs, exports and prompts all stay editable, copyable and brand-locked.</p>
        <button className="lp-btn lp-btn-primary lp-btn-lg" onClick={() => go("overview")}>
          <Icon name="external" size={15} stroke={2.2} />
          <span>Open BoltKit demo project</span>
        </button>
      </section>

      {/* ====================================================== FINAL CTA == */}
      <section className="lp-final">
        <div className="lp-final-checker" aria-hidden="true" />
        <div className="lp-final-inner">
          <div className="lp-eyebrow lp-eyebrow-dark"><span /> READY?</div>
          <h2 className="lp-final-h">
            <span className="lp-final-line">BUILD THE APP.</span>
            <span className="lp-final-line lp-final-hl">BOLTKIT BUILDS</span>
            <span className="lp-final-line lp-final-hl">THE LAUNCH.</span>
          </h2>
          <div className="lp-cta-row">
            <button className="lp-btn lp-btn-primary lp-btn-lg" onClick={() => go("signup")}>
              <BoltMark size={16} color="var(--yellow-ink)" slice="var(--yellow-ink)" />
              <span>Start Building</span>
            </button>
            <button className="lp-btn lp-btn-ghost lp-btn-lg" onClick={() => go("demo")}>
              <Icon name="play" size={14} stroke={2.4} />
              <span>View Demo</span>
            </button>
          </div>
        </div>
      </section>

      {/* ====================================================== FOOTER ==== */}
      <footer className="lp-foot">
        <div className="lp-foot-l">
          <div className="row gap-10">
            <div className="brand-mark" style={{ width: 28, height: 28 }}>
              <BoltMark size={16} color="var(--yellow-ink)" slice="var(--yellow)" />
            </div>
            <div style={{ fontFamily: "Anton, Impact, sans-serif", letterSpacing: "0.06em", fontSize: 18 }}>BOLT<span style={{ color: "var(--yellow)" }}>KIT</span></div>
          </div>
          <div className="muted text-xs mt-12 mono">v1.4.0 · single-seat workspace · private use</div>
        </div>
        <div className="lp-foot-r mono text-xs">
          <span>BOLT IT.</span><span>BRAND IT.</span><span>LAUNCH IT.</span>
        </div>
      </footer>
    </div>
  );
}

/* -- nav -- */
function LandingNav({ onTry, onDemo }) {
  return (
    <header className="lp-nav">
      <div className="lp-nav-l">
        <div className="brand-mark" style={{ width: 32, height: 32, transform: "rotate(-3deg)" }}>
          <BoltMark size={18} color="var(--yellow-ink)" slice="var(--yellow)" />
        </div>
        <div style={{ fontFamily: "Anton, Impact, sans-serif", letterSpacing: "0.06em", fontSize: 22 }}>BOLT<span style={{ color: "var(--yellow)" }}>KIT</span></div>
        <span className="lp-nav-pill mono">v1.4 · BETA</span>
      </div>
      <nav className="lp-nav-c">
        <a href="#how">HOW IT WORKS</a>
        <a href="#gens">WHAT IT GENERATES</a>
        <a href="#prompts">PROMPTS</a>
        <a href="#demo">DEMO</a>
      </nav>
      <div className="lp-nav-r">
        <button className="lp-link" onClick={onDemo}>VIEW DEMO</button>
        <button className="lp-btn lp-btn-primary lp-btn-sm" onClick={onTry}>
          <BoltMark size={13} color="var(--yellow-ink)" slice="var(--yellow-ink)" />
          <span>START BUILDING</span>
        </button>
      </div>
    </header>
  );
}

/* -- ticker -- */
function Ticker() {
  const items = ["BOLT IT", "BRAND IT", "LAUNCH IT", "132 ASSETS / WEEK", "ZIP EXPORT READY", "v1.4 LIVE", "AI PACK STREAMING", "8 PROJECTS SHIPPED", "READINESS 87"];
  const row = [...items, ...items, ...items];
  return (
    <div className="lp-ticker" aria-hidden="true">
      <div className="lp-ticker-track">
        {row.map((t, i) => (
          <span key={i} className="lp-ticker-item">
            <BoltMark size={12} color="var(--yellow-ink)" slice="var(--yellow-ink)" /> {t}
          </span>
        ))}
      </div>
    </div>
  );
}

/* -- brand panel -- */
function BrandPanel() {
  return (
    <div className="lp-brand-panel">
      <div className="lp-bp-head mono">EXTRACTED · BOLTKIT BRAND PACK</div>
      <div className="lp-bp-swatches">
        {[
          { h: "#EFFF00", n: "Acid"  },
          { h: "#050505", n: "Black" },
          { h: "#0B0B0B", n: "Ink"   },
          { h: "#F4F4F0", n: "Off-white" },
        ].map(s => (
          <div key={s.h} className="lp-bp-sw">
            <div className="lp-bp-sw-c" style={{ background: s.h }} />
            <div className="lp-bp-sw-n">{s.n}</div>
            <div className="lp-bp-sw-h mono">{s.h}</div>
          </div>
        ))}
      </div>
      <div className="lp-bp-row mono"><span>HEADINGS</span><span>ANTON</span></div>
      <div className="lp-bp-row mono"><span>BODY</span><span>INTER</span></div>
      <div className="lp-bp-row mono"><span>VOICE</span><span>FAST · PRACTICAL</span></div>
      <div className="lp-bp-row mono"><span>GUARDRAIL</span><span>NO GENERIC SAAS FILLER</span></div>
      <div className="lp-bp-bar">
        <div className="lp-bp-bar-l mono">BRAND MATCH</div>
        <div className="lp-bp-bar-track"><span style={{ width: "94%" }} /></div>
        <div className="lp-bp-bar-v mono">94</div>
      </div>
    </div>
  );
}

/* -- screen panel -- */
function ScreenPanel() {
  return (
    <div className="lp-screen-panel">
      <div className="lp-sp-head mono">ASSETS · 24 DETECTED</div>
      <div className="lp-sp-grid">
        {[
          { l: "DASHBOARD",  use: "Landing hero" },
          { l: "GENERATOR",  use: "Product demo" },
          { l: "OUTPUTS",    use: "Instagram carousel" },
          { l: "EXPORTS",    use: "Reel B-roll" },
          { l: "BRAND PACK", use: "App Store · slot 3" },
          { l: "SETTINGS",   use: "Skip · low value" },
        ].map((s, i) => (
          <div key={s.l} className="lp-sp-cell">
            <div className="lp-sp-cell-thumb">
              <span className="mono fw-8 text-xs" style={{ opacity: 0.4 }}>SCREEN {String(i+1).padStart(2,"0")}</span>
            </div>
            <div className="lp-sp-cell-l mono">{s.l}</div>
            <div className="lp-sp-cell-u">{s.use}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* -- video pack panel -- */
function VideoPackPanel() {
  return (
    <div className="lp-vp">
      {[
        { p: "YT SHORT", t: "I uploaded one app and got a launch folder", d: "0:38", c: 4, q: 91 },
        { p: "REEL",     t: "From screenshots to paid ads in minutes",  d: "0:24", c: 3, q: 86 },
        { p: "TIKTOK",   t: "The blank launch doc is dead",   d: "0:42", c: 5, q: 84 },
        { p: "YT LONG",  t: "How to launch your app with BoltKit",    d: "11:20",c: 9, q: 78 },
      ].map((v, i) => (
        <div key={i} className="lp-vp-card">
          <div className="lp-vp-thumb">
            <div className="lp-vp-tape">{v.p}</div>
            <div className="lp-vp-play" aria-hidden="true">▶</div>
            <div className="lp-vp-dur mono">{v.d}</div>
          </div>
          <div className="lp-vp-meta">
            <div className="lp-vp-t">{v.t}</div>
            <div className="lp-vp-sub mono">{v.c} SCENES · VO · OVERLAY · THUMB · Q{v.q}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* -- prompt block -- */
function PromptBlock({ kind }) {
  const c = kind === "claude"
    ? { tape: "CLAUDE DESIGN", t: "Full app dashboard", body: `# Claude Design — BoltKit dashboard
role: senior product designer · premium SaaS launch tool
audience: app founders, SaaS builders, no-code builders
do:
  - lead with Launch Command Centre
  - foreground readiness, missing assets and quick generate
  - use brand tokens from boltkit.brand.v1
  - keep type in Anton, Inter and JetBrains Mono
don't:
  - generic SaaS filler · soft gradients · stock illustrations
deliver:
  one HTML file · two artboards · token panel` }
    : { tape: "CODEX", t: "Frontend build · Next.js + Tailwind", body: `// Codex — BoltKit marketing site
goal: ship boltkit.app using brand tokens + landing-pack v3
stack: next@15 · tailwind@4 · shadcn/ui forms
tasks:
  1. scaffold app router + /marketing route group
  2. wire boltkit.brand.v1 into tailwind.config.ts
  3. build <Hero/>, <Features/>, <FAQ/>, <CTA/>
  4. seo: title, meta, og image, FAQPage schema
  5. ship Storybook per section
rules:
  - server components by default
  - no animation libs · CSS only
  - voice: fast · practical · premium` };
  return (
    <div className="lp-prompt">
      <div className="lp-prompt-head">
        <div className="lp-prompt-tape">{c.tape}</div>
        <div className="lp-prompt-t">{c.t}</div>
        <button className="lp-prompt-copy mono">COPY</button>
      </div>
      <pre className="lp-prompt-body mono">{c.body}</pre>
    </div>
  );
}

/* -- export panel -- */
function ExportPanel() {
  return (
    <div className="lp-export">
      <div className="lp-export-formats">
        {[
          { l: "MARKDOWN", s: ".md", n: "13 files" },
          { l: "PDF",      s: ".pdf", n: "4.8 MB", hl: true },
          { l: "CSV",      s: ".csv", n: "30-day calendar" },
          { l: "JSON",     s: ".json", n: "project tree" },
          { l: "ZIP",      s: ".zip", n: "8.4 MB · all of it", hl: true },
        ].map(f => (
          <div key={f.l} className={"lp-export-fmt" + (f.hl ? " hl" : "")}>
            <div className="lp-export-fmt-l mono">{f.l}</div>
            <div className="lp-export-fmt-s mono">{f.s}</div>
            <div className="lp-export-fmt-n mono">{f.n}</div>
          </div>
        ))}
      </div>
      <pre className="lp-tree mono">{`BoltKit Export/
├── brand-summary.md
├── launch-pack.md
├── instagram-posts.md
├── video-scripts.md
├── paid-ads.md
├── app-store-copy.md
├── landing-page-copy.md
├── seo-pack.md
├── claude-prompts.md
├── codex-prompts.md
├── content-calendar.csv
└── project-data.json`}</pre>
    </div>
  );
}

Object.assign(window, { LandingMarketingPage });