/* ========================================================================
   screens-marketing.jsx — landing, features, pricing, demo, terms
   ====================================================================== */

const LandingScreen = () => (
  <div style={{ background: "#1A1813", color: "#F4F4F0", height: "100%", overflowY: "auto" }} className="scroll-fade-bottom">
    {/* nav */}
    <div style={{
      position: "sticky", top: 0, zIndex: 20,
      background: "rgba(5,5,5,0.85)", backdropFilter: "blur(10px)",
      borderBottom: "1px solid #3A372F",
      padding: "12px 26px",
      display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 20, alignItems: "center",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ width: 30, height: 30, borderRadius: 6, background: "#EFFF00", display: "grid", placeItems: "center" }}>
          <BoltMini size={18} color="#1A1813" />
        </div>
        <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 19, letterSpacing: "0.02em", color: "#FFF" }}>BOLTKIT</div>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, padding: "2px 6px", border: "1px solid #333", color: "#EFFF00", letterSpacing: "0.14em" }}>v1.4</span>
      </div>
      <div style={{ display: "flex", gap: 22, justifyContent: "center" }}>
        {["Features","Pricing","Demo","Changelog","Docs"].map(l => (
          <a key={l} style={{ color: "#8A8A8A", fontSize: 11, letterSpacing: "0.16em", fontWeight: 700, textTransform: "uppercase" }}>{l}</a>
        ))}
      </div>
      <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
        <span style={{ color: "#C8C8C5", fontSize: 11, letterSpacing: "0.14em", fontWeight: 700, textTransform: "uppercase" }}>Log in</span>
        <button className="btn btn-primary btn-sm"><BoltMini size={11} color="#1A1813" /> Start building</button>
      </div>
    </div>

    {/* HERO */}
    <section style={{ padding: "56px 40px 64px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)", backgroundSize: "64px 64px", maskImage: "radial-gradient(80% 60% at 30% 30%, #000, transparent 90%)", WebkitMaskImage: "radial-gradient(80% 60% at 30% 30%, #000, transparent 90%)", pointerEvents: "none" }} />
      <div style={{ position: "absolute", top: "12%", right: "-8%", width: 540, height: 130, background: "repeating-linear-gradient(135deg, #EFFF00 0 14px, #201E18 14px 28px)", transform: "rotate(-12deg)", opacity: 0.16, pointerEvents: "none" }} />

      {/* broadcast badge */}
      <div style={{ display: "inline-flex", alignItems: "center", gap: 12, padding: "7px 14px", background: "#26241E", border: "1px solid #333", fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.18em", fontWeight: 800, marginBottom: 32, position: "relative", zIndex: 2 }}>
        <span style={{ width: 8, height: 8, borderRadius: 50, background: "#FF4D5E", boxShadow: "0 0 0 4px rgba(255,77,94,0.2)" }} />
        <span style={{ color: "#FFF" }}>CONTENT ENGINE · LIVE</span>
        <span style={{ color: "#EFFF00", fontSize: 12, fontWeight: 800 }}>03:51</span>
        <span style={{ width: 1, height: 11, background: "#333" }} />
        <span style={{ color: "#8A8A8A" }}>v1.4 · 132 ASSETS · 6 PROJECTS</span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 40, alignItems: "start", position: "relative", zIndex: 2 }}>
        <div>
          <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontWeight: 400, fontSize: 96, lineHeight: 0.86, letterSpacing: "-0.005em", textTransform: "uppercase", color: "#FFF", margin: 0 }}>
            <div>UPLOAD</div>
            <div>YOUR BRAND.</div>
            <div style={{ display: "inline-block", background: "#EFFF00", color: "#1A1813", padding: "0 12px 4px", transform: "skewX(-4deg)", marginTop: 6 }}>GENERATE</div><br />
            <div style={{ display: "inline-block", background: "#EFFF00", color: "#1A1813", padding: "0 12px 4px", transform: "skewX(-4deg)", marginTop: 6 }}>THE CONTENT</div><br />
            <div style={{ display: "inline-block", background: "#EFFF00", color: "#1A1813", padding: "0 12px 4px", transform: "skewX(-4deg)", marginTop: 6 }}>PACK<span style={{ marginLeft: 6, fontSize: "0.85em" }}>⚡</span></div>
          </h1>
          <p style={{ margin: "26px 0 28px", color: "#C8C8C5", fontSize: 15, lineHeight: 1.55, maxWidth: "52ch" }}>
            BoltKit turns your ideas, brand kit, social links, product photos, screenshots and content notes into <b style={{ color: "#FFF" }}>social posts</b>, <b style={{ color: "#FFF" }}>video scripts</b>, <b style={{ color: "#FFF" }}>ads</b>, <b style={{ color: "#FFF" }}>captions</b>, <b style={{ color: "#FFF" }}>content calendars</b>, <b style={{ color: "#FFF" }}>campaign packs</b> and <b style={{ color: "#FFF" }}>export folders</b>. For creators, influencers, founders and brands.
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <button className="btn btn-primary"><BoltMini size={13} color="#1A1813" /> Start Creating</button>
            <button className="btn btn-secondary"><Icon name="play" size={12} stroke={2.2} /> View Demo</button>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 24 }}>
            <div style={{ color: "#EFFF00", letterSpacing: "0.16em", fontSize: 13 }}>★★★★★</div>
            <div style={{ color: "#8A8A8A", fontSize: 12 }}>Built for <b style={{ color: "#FFF" }}>creators</b>, <b style={{ color: "#FFF" }}>founders</b> and <b style={{ color: "#FFF" }}>brands</b> · 132 assets shipped this week</div>
          </div>
        </div>

        {/* hero mockup */}
        <div style={{ position: "relative", background: "linear-gradient(180deg, #0E0E0E, #060606)", border: "1px solid #333", padding: 0, overflow: "hidden", boxShadow: "0 40px 80px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.04)", transform: "perspective(1400px) rotateY(-4deg) rotateX(2deg)" }}>
          {[
            { c: "tl", s: { top: -1, left: -1, borderRight: 0, borderBottom: 0 } },
            { c: "tr", s: { top: -1, right: -1, borderLeft: 0, borderBottom: 0 } },
            { c: "bl", s: { bottom: -1, left: -1, borderRight: 0, borderTop: 0 } },
            { c: "br", s: { bottom: -1, right: -1, borderLeft: 0, borderTop: 0 } },
          ].map(c => <div key={c.c} style={{ position: "absolute", width: 14, height: 14, border: "2px solid #EFFF00", ...c.s }} />)}

          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center", padding: "10px 14px", borderBottom: "1px solid #3A372F", background: "rgba(255,255,255,0.02)" }}>
            <div style={{ display: "flex", gap: 5 }}>
              <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#FF4D5E" }} />
              <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#FFB23F" }} />
              <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#EFFF00" }} />
            </div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.6 }}>boltkit.studio/creator</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#EFFF00", letterSpacing: "0.18em" }}>GENERATING</div>
          </div>
          <div style={{ padding: "20px 22px" }}>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 26, letterSpacing: "0.02em" }}>CREATOR BRAND · CONTENT PACK</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, color: "#8A8A8A", letterSpacing: "0.18em", marginTop: 4 }}>132 ASSETS · READINESS 87 · BRAND-LOCKED v3</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 9, marginTop: 18 }}>
              {[
                { 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: "Content calendar", v: 80,  n: "12/15" },
                { l: "SEO pack",        v: 64,  n: "13/20" },
                { l: "Codex prompts",   v: 28,  n: "3/9"  },
              ].map(b => (
                <div key={b.l} style={{ display: "grid", gridTemplateColumns: "100px 1fr 50px", gap: 10, alignItems: "center" }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: "0.14em", color: "#8A8A8A", textTransform: "uppercase" }}>{b.l}</div>
                  <div style={{ height: 7, background: "#2C2A23", border: "1px solid #3A372F", overflow: "hidden" }}>
                    <div style={{ width: b.v + "%", height: "100%", background: "linear-gradient(90deg, #EFFF00, #C8FF00)", boxShadow: "0 0 12px rgba(239,255,0,0.32)" }} />
                  </div>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, textAlign: "right", color: "#FFF" }}>{b.n}</div>
                </div>
              ))}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 6, marginTop: 18 }}>
              <div style={{ padding: 10, background: "#2C2A23", border: "1px solid #3A372F" }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8.5, letterSpacing: "0.18em", color: "#8A8A8A", textTransform: "uppercase" }}>BRAND</div>
                <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 18 }}>v3.2</div>
              </div>
              <div style={{ padding: 10, background: "#2C2A23", border: "1px solid #3A372F" }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8.5, letterSpacing: "0.18em", color: "#8A8A8A", textTransform: "uppercase" }}>VOICE</div>
                <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 18 }}>CREATOR</div>
              </div>
              <div style={{ padding: 10, background: "#EFFF00", color: "#1A1813" }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8.5, letterSpacing: "0.18em", opacity: 0.7, textTransform: "uppercase" }}>EXPORT</div>
                <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 18 }}>READY</div>
              </div>
            </div>
          </div>
          <div style={{ position: "absolute", left: 14, right: 14, bottom: 12, display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 10, alignItems: "center", padding: "8px 12px", background: "rgba(0,0,0,0.7)", border: "1px solid #EFFF00", backdropFilter: "blur(8px)" }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: "0.16em", color: "#EFFF00" }}>EXTRACTING…</div>
            <div style={{ height: 3, background: "#2C2A23", position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", top: 0, bottom: 0, width: "38%", background: "#EFFF00", left: "30%" }} />
            </div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: "0.16em", color: "#EFFF00" }}>78%</div>
          </div>
        </div>
      </div>
    </section>

    {/* TICKER */}
    <div style={{ background: "#EFFF00", color: "#1A1813", padding: "14px 0", borderTop: "2px solid #1A1813", borderBottom: "2px solid #1A1813", overflow: "hidden", transform: "rotate(-1deg)", margin: "-10px 0" }}>
      <div style={{ display: "flex", gap: 36, whiteSpace: "nowrap", fontFamily: "'Anton', Impact, sans-serif", fontSize: 22, letterSpacing: "0.04em", textTransform: "uppercase" }}>
        {["SOCIAL POSTS","REELS SCRIPTS","PAID ADS","CONTENT CALENDAR","CAPTIONS","HASHTAGS","CREATOR PACKS","BRAND VOICE","INSTAGRAM SCHEDULER","BRAND PACK","POST DESIGNS"].map((t, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <BoltMini size={14} color="#1A1813" /> {t}
          </span>
        ))}
      </div>
    </div>

    {/* PROBLEM */}
    <section style={{ padding: "72px 40px", borderBottom: "1px solid #3A372F" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, fontFamily: "'JetBrains Mono', monospace", marginBottom: 16 }}><span style={{ width: 22, height: 2, background: "#EFFF00" }} />THE CONTENT TRAP</div>
      <h2 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 64, lineHeight: 0.92, textTransform: "uppercase", margin: 0, maxWidth: "20ch", color: "#FFF" }}>You have ideas. Now you need a month of content.</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 36 }}>
        {[
          { n: "01", l: "PLAN 30 POSTS",     s: "Ideas everywhere, calendar still empty." },
          { n: "02", l: "WRITE CAPTIONS",    s: "Hooks, hashtags and CTAs take too long." },
          { n: "03", l: "SHOOT REELS",       s: "No hook, no script, no clean plan." },
          { n: "04", l: "STAY CONSISTENT",   s: "Posting stops as soon as life gets busy." },
        ].map(p => (
          <div key={p.n} style={{ padding: 22, background: "#26241E", border: "1px solid #333", position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", top: 0, left: 0, width: "100%", height: 3, background: "#EFFF00" }} />
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 68, lineHeight: 0.9, color: "#EFFF00", letterSpacing: "-0.01em" }}>{p.n}</div>
            <div style={{ fontSize: 11, letterSpacing: "0.18em", color: "#FFF", marginTop: 10, fontWeight: 800, fontFamily: "'JetBrains Mono', monospace" }}>{p.l}</div>
            <div style={{ fontSize: 12.5, color: "#8A8A8A", marginTop: 6, lineHeight: 1.5 }}>{p.s}</div>
          </div>
        ))}
      </div>
    </section>

    {/* HOW IT WORKS */}
    <section style={{ padding: "72px 40px", borderBottom: "1px solid #3A372F", background: "#201E18" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, fontFamily: "'JetBrains Mono', monospace", marginBottom: 16 }}><span style={{ width: 22, height: 2, background: "#EFFF00" }} />HOW IT WORKS</div>
      <h2 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 0.92, textTransform: "uppercase", margin: 0, maxWidth: "22ch", color: "#FFF" }}>From idea to content calendar in five steps.</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8, marginTop: 36 }}>
        {[
          { n: "STEP 01", t: "DROP A LINK",  s: "Website, Instagram, TikTok, YouTube or product page.", i: "link" },
          { n: "STEP 02", t: "UPLOAD ASSETS", s: "Brand pack, photos, videos, screenshots or HTML exports.", i: "image" },
          { n: "STEP 03", t: "SET YOUR VOICE", s: "Tone, colours, hooks and rules so content sounds like you.", i: "palette" },
          { n: "STEP 04", t: "GENERATE",     s: "Captions, scripts, hashtags, CTAs and calendar ideas.", i: "sparkle" },
          { n: "STEP 05", t: "SCHEDULE",     s: "Choose days, export files or copy posts when ready.", i: "calendar" },
        ].map((s, i) => (
          <div key={i} style={{ padding: "20px 16px", background: "#26241E", border: "1px solid #333", position: "relative" }}>
            <div style={{ position: "absolute", top: -10, left: 12, background: "#EFFF00", color: "#1A1813", padding: "3px 7px", fontSize: 9, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.14em", fontWeight: 800, transform: "rotate(-2deg)" }}>{s.n}</div>
            <div style={{ width: 38, height: 38, border: "1px solid #EFFF00", display: "grid", placeItems: "center", margin: "6px 0 14px", background: "#2C2A23", color: "#EFFF00" }}>
              <Icon name={s.i} size={16} stroke={2} />
            </div>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 22, letterSpacing: "0.02em", color: "#FFF" }}>{s.t}</div>
            <div style={{ color: "#8A8A8A", fontSize: 11.5, lineHeight: 1.5, marginTop: 6 }}>{s.s}</div>
          </div>
        ))}
      </div>
    </section>

    {/* WHAT BOLTKIT GENERATES */}
    <section style={{ padding: "72px 40px", borderBottom: "1px solid #3A372F" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, fontFamily: "'JetBrains Mono', monospace", marginBottom: 16 }}><span style={{ width: 22, height: 2, background: "#EFFF00" }} />WHAT YOU GET</div>
      <h2 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 0.92, textTransform: "uppercase", margin: 0, maxWidth: "22ch", color: "#FFF" }}>One folder. Twelve packs. Every channel.</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginTop: 36 }}>
        {[
          { i: "insta",     l: "Instagram Pack",    n: "30/60/90 captions" },
          { i: "video",     l: "Video Scripts",     n: "Reels · TikTok · Shorts" },
          { i: "megaphone", l: "Paid Ads",          n: "Meta · TikTok · Google" },
          { i: "calendar",  l: "Content Calendar",  n: "7 / 14 / 30 day plans" },
          { i: "layout",    l: "Link-in-bio Copy",  n: "Offers · links · profile bio" },
          { i: "globe",     l: "SEO Pack",          n: "Keywords · meta · blog" },
          { i: "code",      l: "Claude Prompts",    n: "Design briefs" },
          { i: "cmd",       l: "Creator Prompts",   n: "Ideas · hooks · scripts" },
          { i: "scan",      l: "QA Prompts",        n: "Test plans" },
          { i: "brain",     l: "Strategy",          n: "7 / 14 / 30 day plan" },
          { i: "type",      l: "Voice Pack",        n: "Tone, do/don'ts" },
          { i: "zip",       l: "Full Export ZIP",   n: "Markdown · CSV · JSON" },
        ].map((c, i) => (
          <div key={i} style={{ padding: 18, background: "#26241E", border: "1px solid #333", position: "relative", cursor: "pointer" }}>
            <div style={{ width: 32, height: 32, background: "rgba(239,255,0,0.08)", border: "1px solid rgba(239,255,0,0.3)", display: "grid", placeItems: "center", color: "#EFFF00" }}>
              <Icon name={c.i} size={16} stroke={2} />
            </div>
            <div style={{ marginTop: 12, fontFamily: "'Anton', Impact, sans-serif", fontSize: 18, color: "#FFF", letterSpacing: "0.02em" }}>{c.l}</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, color: "#8A8A8A", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 6 }}>{c.n}</div>
          </div>
        ))}
      </div>
    </section>

    {/* PRICING preview */}
    <section style={{ padding: "72px 40px", borderBottom: "1px solid #3A372F", background: "#201E18" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, fontFamily: "'JetBrains Mono', monospace", marginBottom: 16 }}><span style={{ width: 22, height: 2, background: "#EFFF00" }} />PRICING</div>
      <h2 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 0.92, textTransform: "uppercase", margin: 0, maxWidth: "22ch", color: "#FFF" }}>Free to start. Grow into your content engine.</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginTop: 36 }}>
        {[
          { n: "Free",    p: "0",  per: "ever",       u: ["1 workspace","Basic content pack","Limited exports"], cta: "Start free", hl: false },
          { n: "Starter", p: "12", per: "mo",         u: ["5 workspaces","Social packs","Export ZIP","Brand kit"], cta: "Start trial", hl: false },
          { n: "Pro",     p: "29", per: "mo",         u: ["Unlimited workspaces","30-day calendars","Video scripts","AI improvement tools","Advanced exports"], cta: "Start trial", hl: true },
          { n: "Agency",  p: "89", per: "mo · seat",  u: ["Client workspaces","Multiple brands","Team features","White-label exports","Priority support"], cta: "Talk to us", hl: false },
        ].map(t => (
          <div key={t.n} style={{ padding: 20, background: t.hl ? "#EFFF00" : "#26241E", border: t.hl ? "1px solid #ADC700" : "1px solid #333", color: t.hl ? "#1A1813" : "#FFF", position: "relative" }}>
            {t.hl && <div style={{ position: "absolute", top: -10, right: 14, background: "#1A1813", color: "#EFFF00", padding: "3px 8px", fontSize: 9, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.18em", fontWeight: 800 }}>POPULAR</div>}
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 800, opacity: t.hl ? 0.7 : 1, color: t.hl ? "#1A1813" : "#EFFF00" }}>{t.n}</div>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 1, marginTop: 6 }}>£{t.p}<span style={{ fontSize: 14, marginLeft: 4, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.1em", opacity: 0.7 }}>/ {t.per}</span></div>
            <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 18px", display: "flex", flexDirection: "column", gap: 7 }}>
              {t.u.map(li => <li key={li} style={{ display: "flex", gap: 7, alignItems: "flex-start", fontSize: 12, opacity: t.hl ? 0.9 : 1 }}><Icon name="check" size={12} stroke={2.6} /> {li}</li>)}
            </ul>
            <button className={"btn " + (t.hl ? "btn-dark" : "btn-primary")} style={{ width: "100%" }}>{t.cta} <Icon name="arrow_right" size={12} stroke={2.4} /></button>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 18, fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.18em", color: "#8A8A8A", textTransform: "uppercase", display: "flex", gap: 14, flexWrap: "wrap" }}>
        <span>· Payments coming soon</span>
        <span>· Annual save 20%</span>
        <span>· Cancel any time</span>
      </div>
    </section>

    {/* FAQ + CTA */}
    <section style={{ padding: "72px 40px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, fontFamily: "'JetBrains Mono', monospace", marginBottom: 16 }}><span style={{ width: 22, height: 2, background: "#EFFF00" }} />FAQ</div>
          <h2 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 0.92, textTransform: "uppercase", margin: 0, maxWidth: "18ch", color: "#FFF" }}>Things creators actually ask.</h2>
          <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 1, background: "#3A372F" }}>
            {[
              "Will it match my brand voice?",
              "Does it auto-post to Instagram?",
              "Can I export to Markdown / ZIP?",
              "Do I need OpenAI / Anthropic keys?",
              "Is my data private?",
              "Can I use it for clients or multiple brands?",
            ].map((q, i) => (
              <div key={i} style={{ background: "#26241E", padding: "14px 16px", display: "flex", alignItems: "center", justifyContent: "space-between", cursor: "pointer" }}>
                <span style={{ fontSize: 13, color: "#FFF", fontWeight: 600 }}>{q}</span>
                <Icon name="chevron_down" size={14} stroke={2} color="#8A8A8A" />
              </div>
            ))}
          </div>
        </div>
        <div style={{ background: "#EFFF00", color: "#1A1813", padding: 36, position: "relative", overflow: "hidden", alignSelf: "start" }}>
          <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(135deg, transparent 0 22px, rgba(0,0,0,0.04) 22px 44px)", pointerEvents: "none" }} />
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.22em", fontWeight: 800, position: "relative" }}>READY TO CREATE?</div>
          <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 68, lineHeight: 0.9, margin: "10px 0 16px", letterSpacing: "-0.005em", textTransform: "uppercase", position: "relative" }}>One upload. A month of content.</div>
          <div style={{ fontSize: 14, lineHeight: 1.55, maxWidth: "44ch", position: "relative" }}>Drop in a link or brand pack. Set your voice. Generate posts, scripts and a content calendar.</div>
          <div style={{ display: "flex", gap: 10, marginTop: 24, position: "relative" }}>
            <button className="btn btn-dark"><BoltMini size={12} color="#EFFF00" /> Start Creating</button>
            <button className="btn btn-ghost" style={{ color: "#1A1813" }}>View live demo</button>
          </div>
        </div>
      </div>
    </section>

    {/* footer */}
    <div style={{ padding: "32px 40px", borderTop: "1px solid #3A372F", display: "flex", justifyContent: "space-between", alignItems: "center", color: "#5C5C5C", fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase" }}>
      <div>© 2026 BoltKit · Made in the UK</div>
      <div style={{ display: "flex", gap: 18 }}>
        <span>Terms</span><span>Privacy</span><span>Changelog</span><span>Status</span>
      </div>
    </div>
  </div>
);

/* FEATURES PAGE */
const FeaturesScreen = () => (
  <div style={{ background: "#1A1813", color: "#F4F4F0", height: "100%", overflowY: "auto", padding: "56px 40px" }}>
    <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, fontFamily: "'JetBrains Mono', monospace", marginBottom: 16 }}><span style={{ width: 22, height: 2, background: "#EFFF00" }} />FEATURES · COMPLETE</div>
    <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 96, lineHeight: 0.88, textTransform: "uppercase", margin: 0, maxWidth: "17ch", color: "#FFF" }}>Every tool a creator needs to stay consistent.</h1>
    <p style={{ color: "#C8C8C5", fontSize: 16, marginTop: 24, maxWidth: "60ch" }}>BoltKit turns scattered ideas, links, brand assets and media into a clean content plan you can edit, export and schedule.</p>

    <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
      {[
        { i: "scan",     t: "Link Importer",             d: "Pulls title, copy, favicon, logo candidates, colours, positioning and content themes from websites or social links." },
        { i: "palette",  t: "Brand Pack Analyzer",       d: "Reads brand PDFs, design exports and image packs, then extracts colours, fonts, tone and brand rules into reusable kits." },
        { i: "image",    t: "Media Analyzer",            d: "Understands screenshots, product photos and post designs so the AI can match captions to real visuals." },
        { i: "brain",    t: "Content Strategy Generator", d: "Generates a 7 / 14 / 30 day content plan with daily posts, hooks and channel-specific ideas." },
        { i: "insta",    t: "Instagram Pack",            d: "30 / 60 / 90 post bulk generator. Captions, hooks, hashtags, CTAs, first comment and alt text — brand-locked." },
        { i: "video",    t: "Video Script Generator",    d: "10s reel scripts with hooks, shot lists, voiceovers and on-screen text. Optional Sora render integration." },
        { i: "megaphone",t: "Ad Generator",              d: "Meta, TikTok and Google Ads variations — pain / benefit / CTA matrices with A/B hooks scored." },
        { i: "calendar", t: "Calendar Planner",          d: "Pick frequency, days and goals. BoltKit creates a schedule you can edit before publishing anywhere." },
        { i: "layout",   t: "Profile + Link Copy",       d: "Bios, profile CTAs, link-in-bio sections and offer copy locked to your brand voice and target audience." },
        { i: "globe",    t: "SEO Pack",                  d: "Keyword clusters, meta titles & descriptions, blog ideas and FAQ schema copy for organic launch." },
        { i: "cmd",      t: "Creator Prompt Packs",      d: "Reusable prompts for hooks, scripts, campaigns, photoshoots, design briefs and repurposing workflows." },
        { i: "trend",    t: "Readiness Score",           d: "Continuously scores your assets, brand clarity, screenshots and content completeness from 0 to 100." },
        { i: "users",    t: "Creator Research",          d: "Paste competitor or inspiration URLs. Get angles, gaps and recurring formats you can make your own." },
        { i: "type",     t: "Voice Training",            d: "Upload previous posts. BoltKit learns your voice and regenerates everything in your own tone." },
        { i: "spark2",   t: "Content Improver",          d: "Punchier · shorter · more premium · more viral · stronger CTA · platform rewrite — one click each." },
        { i: "target",   t: "A/B Testing",               d: "Generate, score and compare hooks. Pick winners. Track which open lines and CTAs actually convert." },
      ].map((f, i) => (
        <div key={i} style={{ padding: 20, background: "#26241E", border: "1px solid #3A372F", display: "grid", gridTemplateColumns: "40px 1fr", gap: 16, alignItems: "start" }}>
          <div style={{ width: 40, height: 40, background: "rgba(239,255,0,0.08)", border: "1px solid rgba(239,255,0,0.25)", display: "grid", placeItems: "center", color: "#EFFF00" }}>
            <Icon name={f.i} size={18} stroke={2} />
          </div>
          <div>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 22, color: "#FFF", letterSpacing: "0.02em" }}>{f.t}</div>
            <div style={{ color: "#8A8A8A", fontSize: 13, marginTop: 6, lineHeight: 1.55 }}>{f.d}</div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { LandingScreen, FeaturesScreen });