/* ========================================================================
   screens-mobile.jsx — mobile variants for key flows
   These render INSIDE a frame-phone, so they occupy 100% w/h.
   ====================================================================== */

const MobileBottomNav = ({ active = "home" }) => (
  <div className="mb-tab">
    {[
      { id: "home",     l: "HOME",     i: "grid"     },
      { id: "projects", l: "FILES",    i: "folder"   },
      { id: "gen",      l: "CREATE",   i: "sparkle", center: true },
      { id: "sched",    l: "POSTS",    i: "insta"    },
      { id: "me",       l: "ME",       i: "user"     },
    ].map(it => (
      <div key={it.id} className={"it " + (active === it.id ? "active" : "") + (it.center ? " center" : "")}>
        {it.center ? (
          <div className="fab"><BoltMini size={20} color="#1A1813" /></div>
        ) : (
          <Icon name={it.i} size={18} stroke={2} />
        )}
        <span className="l">{it.l}</span>
      </div>
    ))}
  </div>
);

/* Mobile landing — hero */
const MobileLanding = () => (
  <div style={{ width: "100%", height: "100%", overflowY: "auto", background: "#1A1813", color: "#FFF", paddingBottom: 80, position: "relative" }} className="scroll-fade-bottom">
    {/* top bar */}
    <div style={{ padding: "20px 18px 0", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <div style={{ width: 26, height: 26, borderRadius: 5, background: "#EFFF00", display: "grid", placeItems: "center" }}>
          <BoltMini size={15} color="#1A1813" />
        </div>
        <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 17, letterSpacing: "0.02em" }}>BOLTKIT</div>
      </div>
      <Icon name="menu" size={20} stroke={2} />
    </div>

    {/* broadcast */}
    <div style={{ margin: "20px 18px 0", padding: "7px 12px", background: "#26241E", border: "1px solid #333", fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: "0.18em", fontWeight: 800, display: "flex", alignItems: "center", gap: 10 }}>
      <span style={{ width: 7, height: 7, borderRadius: 50, background: "#FF4D5E", boxShadow: "0 0 0 4px rgba(255,77,94,0.2)" }} />
      <span>LAUNCH PACK · LIVE</span>
      <span style={{ color: "#EFFF00" }}>03:51</span>
    </div>

    {/* hero */}
    <div style={{ padding: "24px 18px 0" }}>
      <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontWeight: 400, fontSize: 56, lineHeight: 0.88, letterSpacing: "-0.005em", textTransform: "uppercase", margin: 0 }}>
        UPLOAD<br />YOUR<br />APP.<br />
        <span style={{ background: "#EFFF00", color: "#1A1813", padding: "0 6px 2px", display: "inline-block", transform: "skewX(-4deg)", marginTop: 4 }}>GENERATE</span><br />
        <span style={{ background: "#EFFF00", color: "#1A1813", padding: "0 6px 2px", display: "inline-block", transform: "skewX(-4deg)", marginTop: 4 }}>THE PACK<span style={{ marginLeft: 4 }}>⚡</span></span>
      </h1>
      <p style={{ color: "#C8C8C5", fontSize: 13.5, lineHeight: 1.5, marginTop: 16 }}>BoltKit turns screenshots, brand kit and app URL into social posts, scripts, ads, store copy, SEO &amp; Codex prompts.</p>

      <button className="btn btn-primary" style={{ width: "100%", marginTop: 16, padding: "14px 16px", justifyContent: "center" }}>
        <BoltMini size={14} color="#1A1813" /> Start Building
      </button>
      <button className="btn btn-secondary" style={{ width: "100%", marginTop: 8, padding: "14px 16px", justifyContent: "center" }}>
        <Icon name="play" size={12} stroke={2.2} /> View Demo
      </button>
    </div>

    {/* mockup */}
    <div style={{ margin: "26px 18px 0", background: "linear-gradient(180deg, #0E0E0E, #060606)", border: "1px solid #333", overflow: "hidden", position: "relative" }}>
      <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 12px", borderBottom: "1px solid #3A372F" }}>
        <div style={{ display: "flex", gap: 5 }}>
          <span style={{ width: 8, height: 8, borderRadius: 50, background: "#FF4D5E" }} />
          <span style={{ width: 8, height: 8, borderRadius: 50, background: "#FFB23F" }} />
          <span style={{ width: 8, height: 8, borderRadius: 50, background: "#EFFF00" }} />
        </div>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#EFFF00", letterSpacing: "0.16em" }}>GENERATING · 78%</span>
      </div>
      <div style={{ padding: 14 }}>
        <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 20, letterSpacing: "0.02em" }}>RENOO · LAUNCH PACK</div>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#8A8A8A", letterSpacing: "0.14em", marginTop: 4 }}>132 ASSETS · READINESS 87</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 12 }}>
          {[
            { l: "Social", v: 100 },
            { l: "Video",  v: 92 },
            { l: "Ads",    v: 80 },
            { l: "Store",  v: 64 },
          ].map(b => (
            <div key={b.l} style={{ display: "grid", gridTemplateColumns: "60px 1fr 40px", gap: 8, alignItems: "center" }}>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#8A8A8A", letterSpacing: "0.12em", textTransform: "uppercase" }}>{b.l}</span>
              <div style={{ height: 5, background: "#2C2A23" }}><div style={{ width: b.v + "%", height: "100%", background: "#EFFF00" }} /></div>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#FFF", textAlign: "right" }}>{b.v}%</span>
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* ticker */}
    <div style={{ background: "#EFFF00", color: "#1A1813", padding: "10px 0", marginTop: 26, transform: "rotate(-1deg)", overflow: "hidden" }}>
      <div style={{ display: "flex", gap: 22, whiteSpace: "nowrap", fontFamily: "'Anton', Impact, sans-serif", fontSize: 16, letterSpacing: "0.04em", textTransform: "uppercase" }}>
        {Array.from({ length: 2 }).map((_, i) => ["SOCIAL POSTS","VIDEO","ADS","STORE","SEO","CODEX","CLAUDE"].map(t => <span key={t + i} style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><BoltMini size={11} color="#1A1813" /> {t}</span>))}
      </div>
    </div>

    {/* features mini */}
    <div style={{ padding: "26px 18px 0" }}>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, marginBottom: 10 }}>· WHAT YOU GET</div>
      <h2 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 32, lineHeight: 0.92, textTransform: "uppercase", margin: 0 }}>One folder. Every channel.</h2>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginTop: 16 }}>
        {[
          { i: "insta", l: "30 IG Posts" },
          { i: "video", l: "Reel Scripts" },
          { i: "megaphone", l: "Paid Ads" },
          { i: "shop",  l: "Store Pack" },
          { i: "layout", l: "Landing Copy" },
          { i: "cmd",   l: "Codex Prompts" },
        ].map(f => (
          <div key={f.l} style={{ padding: 14, background: "#26241E", border: "1px solid #3A372F", display: "flex", flexDirection: "column", gap: 8 }}>
            <div style={{ width: 30, height: 30, background: "rgba(239,255,0,0.1)", border: "1px solid rgba(239,255,0,0.3)", display: "grid", placeItems: "center", color: "#EFFF00" }}>
              <Icon name={f.i} size={14} stroke={2} />
            </div>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 16, letterSpacing: "0.02em" }}>{f.l}</div>
          </div>
        ))}
      </div>
    </div>

    {/* CTA */}
    <div style={{ margin: "26px 18px 0", background: "#EFFF00", color: "#1A1813", padding: 22, position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(135deg, transparent 0 16px, rgba(0,0,0,0.04) 16px 32px)" }} />
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.22em", fontWeight: 800, position: "relative" }}>READY TO SHIP?</div>
      <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 36, lineHeight: 0.9, marginTop: 6, textTransform: "uppercase", position: "relative" }}>One folder. Built to launch.</div>
      <button className="btn btn-dark" style={{ width: "100%", marginTop: 16, position: "relative", padding: "12px 16px", justifyContent: "center" }}>
        <BoltMini size={12} color="#EFFF00" /> Start Building
      </button>
    </div>
  </div>
);

/* Mobile dashboard */
const MobileDashboard = () => (
  <div style={{ width: "100%", height: "100%", overflowY: "auto", background: "#1A1813", color: "#FFF", paddingBottom: 80, position: "relative" }} className="scroll-fade-bottom">
    {/* top */}
    <div style={{ padding: "20px 18px 0", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <div style={{ width: 28, height: 28, borderRadius: 99, background: "#EFFF00", color: "#1A1813", display: "grid", placeItems: "center", fontFamily: "'Anton', Impact, sans-serif", fontSize: 13 }}>JL</div>
        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#8A8A8A", letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 800 }}>FRI · 09:14</div>
          <div style={{ fontSize: 13, fontWeight: 800, color: "#FFF" }}>Joel · BoltKit</div>
        </div>
      </div>
      <Icon name="bell" size={20} stroke={2} color="#C8C8C5" />
    </div>

    {/* hero card */}
    <div style={{ margin: "20px 18px 0", padding: 18, background: "linear-gradient(160deg, #1A1A0A, #1A1813)", border: "1px solid #3A372F", position: "relative", overflow: "hidden" }}>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800 }}>BEGINNER MODE</div>
      <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 34, lineHeight: 0.95, textTransform: "uppercase", marginTop: 6 }}>Make content from what you already have.</div>
      <div style={{ color: "#D8D6CD", fontSize: 12.5, lineHeight: 1.45, marginTop: 10 }}>Upload photos, logos, screenshots, websites or post designs. BoltKit turns them into captions, ideas, adverts and a simple posting plan.</div>
      <div style={{ display: "flex", gap: 14, marginTop: 14, alignItems: "center" }}>
        <RingScore score={87} size={68} label="READINESS" />
        <div style={{ display: "flex", flexDirection: "column", gap: 6, flex: 1 }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#C8C8C5" }}><span>Workspaces</span><span style={{ color: "#FFF", fontWeight: 800 }}>6</span></div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#C8C8C5" }}><span>Content packs</span><span style={{ color: "#FFF", fontWeight: 800 }}>11</span></div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#C8C8C5" }}><span>Posts planned</span><span style={{ color: "#FFF", fontWeight: 800 }}>28</span></div>
        </div>
      </div>
    </div>

    <div style={{ margin: "12px 18px 0", display: "grid", gap: 8 }}>
      {[
        ["Assets = your files", "Photos, videos, logos, screenshots and designs."],
        ["Brand style = your look", "Colours, voice and rules so posts sound like you."],
        ["Content pack = finished ideas", "Captions, hooks, ads, scripts and calendar posts."]
      ].map(item => (
        <div key={item[0]} style={{ padding: 12, background: "#201E18", border: "1px solid #3A372F", borderLeft: "3px solid #EFFF00" }}>
          <div style={{ color: "#FFF", fontSize: 12.5, fontWeight: 800 }}>{item[0]}</div>
          <div style={{ color: "#B9B7AE", fontSize: 11.5, lineHeight: 1.4, marginTop: 3 }}>{item[1]}</div>
        </div>
      ))}
    </div>

    {/* quick generate */}
    <div style={{ margin: "20px 18px 0" }}>
      <button className="btn btn-primary" style={{ width: "100%", padding: "14px 16px", justifyContent: "center" }}>
        <BoltMini size={14} color="#1A1813" /> Start with my business
      </button>
    </div>

    {/* projects */}
    <div style={{ margin: "26px 18px 0" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "#8A8A8A", fontWeight: 800, textTransform: "uppercase" }}>YOUR PROJECTS</span>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#EFFF00", letterSpacing: "0.14em", fontWeight: 800, textTransform: "uppercase" }}>SEE ALL</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          { nm: "Renoo · Notes",       ic: "RN", bg: "#FF6B35", st: "ACTIVE", score: 94, packs: 11 },
          { nm: "Lofti · Audio rooms", ic: "LF", bg: "#4DA8FF", st: "BRAND",  score: 78, packs: 6  },
          { nm: "Atelier · Design",    ic: "AT", bg: "#EFFF00", st: "ACTIVE", score: 88, packs: 9  },
        ].map(p => (
          <div key={p.nm} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, alignItems: "center", padding: 12, background: "#26241E", border: "1px solid #3A372F" }}>
            <AppIco size={42} bg={p.bg} color={p.bg === "#EFFF00" ? "#1A1813" : "#FFF"} letter={p.ic} />
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 800, color: "#FFF" }}>{p.nm}</div>
              <div style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 4 }}>
                <span className={"pill " + (p.st === "ACTIVE" ? "pill-yellow" : "pill-amber")} style={{ fontSize: 8.5 }}>{p.st}</span>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#8A8A8A", letterSpacing: "0.1em" }}>{p.packs} PACKS</span>
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 8.5, color: "#8A8A8A", letterSpacing: "0.14em" }}>READY</div>
              <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 22, color: "#EFFF00", lineHeight: 1 }}>{p.score}</div>
            </div>
          </div>
        ))}
      </div>
    </div>

    {/* recent packs */}
    <div style={{ margin: "26px 18px 0" }}>
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "#8A8A8A", fontWeight: 800, textTransform: "uppercase" }}>RECENT PACKS</span>
      <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 10 }}>
        {[
          { i: "insta",     n: "Renoo · IG Pack",     t: "9:02", s: 94 },
          { i: "video",     n: "Renoo · Reel scripts",t: "9:01", s: 88 },
          { i: "layout",    n: "Atelier · Landing",   t: "8:54", s: 92 },
        ].map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 10, padding: 10, background: "#201E18", border: "1px solid #3A372F", alignItems: "center" }}>
            <div style={{ width: 28, height: 28, background: "rgba(239,255,0,0.1)", display: "grid", placeItems: "center", color: "#EFFF00" }}><Icon name={r.i} size={13} stroke={2} /></div>
            <div>
              <div style={{ fontSize: 12, color: "#FFF", fontWeight: 700 }}>{r.n}</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#8A8A8A", letterSpacing: "0.1em", marginTop: 2 }}>{r.t} · QS {r.s}</div>
            </div>
            <Icon name="chevron_right" size={12} stroke={2} color="#5C5C5C" />
          </div>
        ))}
      </div>
    </div>

    <MobileBottomNav active="home" />
  </div>
);

/* Mobile Instagram scheduler */
const MobileInstagram = () => (
  <div style={{ width: "100%", height: "100%", overflowY: "auto", background: "#1A1813", color: "#FFF", paddingBottom: 80, position: "relative" }} className="scroll-fade-bottom">
    <div style={{ padding: "20px 18px 0", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <Icon name="arrow_left" size={20} stroke={2} />
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: "0.18em", color: "#EFFF00", fontWeight: 800 }}>RENOO · IG QUEUE</div>
      <Icon name="more" size={20} stroke={2} />
    </div>

    <div style={{ padding: "16px 18px 0" }}>
      <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 36, lineHeight: 1, textTransform: "uppercase", margin: 0 }}>30 posts · 22 scheduled</h1>
      <div style={{ marginTop: 10, display: "flex", gap: 6, alignItems: "center", flexWrap: "wrap" }}>
        <SyncChip state="sync" />
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#FFB23F", letterSpacing: "0.14em", fontWeight: 800 }}>· IG NOT CONNECTED</span>
      </div>
    </div>

    {/* tabs */}
    <div style={{ display: "flex", gap: 5, padding: "16px 18px 0", overflowX: "auto" }}>
      {["ALL · 30","DRAFT · 6","READY · 2","SCHED · 22"].map((t, i) => (
        <span key={t} className={"chip " + (i === 0 ? "active chip-yellow" : "")} style={{ fontSize: 9.5, padding: "5px 10px" }}>{t}</span>
      ))}
    </div>

    {/* compact rows */}
    <div style={{ padding: "12px 18px 0", display: "flex", flexDirection: "column", gap: 6 }}>
      {[
        { i: 1, t: "linear-gradient(135deg, #FF6B35, #C9522A)", cap: "One folder. Every idea.",       d: "MON 06", w: "09:00", s: "scheduled" },
        { i: 2, t: "linear-gradient(135deg, #4DA8FF, #1E5FCC)", cap: "3 founders. 4 weeks. Zero…",     d: "TUE 07", w: "09:00", s: "scheduled" },
        { i: 3, t: "linear-gradient(135deg, #EFFF00, #ADC700)", cap: "Why your last app died.",        d: "WED 08", w: "09:00", s: "ready" },
        { i: 4, t: "linear-gradient(135deg, #1E1E1E, #1A1813)", cap: "Streak or starve.",              d: "THU 09", w: "09:00", s: "scheduled" },
        { i: 5, t: "linear-gradient(135deg, #A86BFF, #6B3DCC)", cap: "Notes that compile.",            d: "FRI 10", w: "09:00", s: "scheduled" },
        { i: 6, t: "linear-gradient(135deg, #4ADE80, #1FA659)", cap: "Day 1 of building in public.",   d: "SAT 11", w: "10:30", s: "draft" },
      ].map(p => (
        <div key={p.i} className={"ig-post-row " + p.s} style={{ gridTemplateColumns: "16px 44px 1fr auto" }}>
          <div className="grip"><span /><span /><span /></div>
          <div className="thumb" style={{ background: p.t, width: 44, height: 44 }}>
            <span className="ix" style={{ fontSize: 7.5 }}>{String(p.i).padStart(2, "0")}</span>
          </div>
          <div style={{ minWidth: 0 }}>
            <div className="cap" style={{ fontSize: 11.5 }}>{p.cap}</div>
            <div className="meta" style={{ fontSize: 8.5 }}>
              <span>{p.s}</span><span>·</span><span style={{ color: "#EFFF00" }}>QS 94</span>
            </div>
          </div>
          <div className="when" style={{ fontSize: 10 }}>
            <span className="d" style={{ fontSize: 8 }}>{p.d}</span>
            <span>{p.w}</span>
          </div>
        </div>
      ))}
    </div>

    {/* sticky generate */}
    <div style={{ position: "sticky", bottom: 78, padding: "12px 18px", background: "linear-gradient(180deg, transparent, #1A1813 30%)", zIndex: 5 }}>
      <button className="btn btn-primary" style={{ width: "100%", padding: "13px 16px", justifyContent: "center" }}>
        <BoltMini size={13} color="#1A1813" /> Generate 30 captions
      </button>
    </div>

    <MobileBottomNav active="sched" />
  </div>
);

/* Mobile project wizard */
const MobileWizard = () => (
  <div style={{ width: "100%", height: "100%", overflowY: "auto", background: "#1A1813", color: "#FFF", paddingBottom: 100, position: "relative" }} className="scroll-fade-bottom">
    <div style={{ padding: "20px 18px 0", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <Icon name="arrow_left" size={20} stroke={2} />
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: "0.18em", color: "#EFFF00", fontWeight: 800 }}>STEP 1 / 5</div>
      <Icon name="close" size={20} stroke={2} />
    </div>

    {/* step strip */}
    <div style={{ padding: "16px 18px 0", display: "flex", gap: 4 }}>
      {[1,2,3,4,5].map(n => (
        <div key={n} style={{ flex: 1, height: 4, background: n === 1 ? "#EFFF00" : "#2C2A23" }} />
      ))}
    </div>

    <div style={{ padding: "20px 18px 0" }}>
      <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 36, lineHeight: 1, textTransform: "uppercase", margin: 0 }}>The Basics</h1>
      <div style={{ color: "#8A8A8A", fontSize: 12.5, marginTop: 6 }}>Drop a URL or paste your idea. We'll pull the rest.</div>
    </div>

    <div style={{ padding: "20px 18px 0", display: "flex", flexDirection: "column", gap: 16 }}>
      <div>
        <label className="field-label">PROJECT NAME</label>
        <input className="input" defaultValue="Renoo · Notes for builders" />
      </div>
      <div>
        <label className="field-label">WEBSITE / APP URL</label>
        <div className="input-with-icon">
          <Icon name="link" size={14} stroke={2} className="ico" />
          <input className="input" defaultValue="https://renoo.app" style={{ paddingLeft: 32 }} />
        </div>
        <button className="btn btn-secondary btn-sm" style={{ marginTop: 8, width: "100%", justifyContent: "center", padding: "9px 12px" }}>
          <BoltMini size={11} color="#EFFF00" /> Draw information
        </button>
      </div>
      <div>
        <label className="field-label">SHORT DESCRIPTION</label>
        <textarea className="textarea" style={{ minHeight: 80 }} defaultValue="Daily notes app for builders shipping under chaos." />
      </div>
      <div>
        <label className="field-label">STATUS</label>
        <select className="select"><option>Building · pre-launch</option></select>
      </div>
    </div>

    {/* sticky CTA */}
    <div style={{ position: "fixed", bottom: 0, left: 0, right: 0, padding: 18, background: "rgba(5,5,5,0.92)", backdropFilter: "blur(12px)", borderTop: "1px solid #3A372F" }}>
      <button className="btn btn-primary" style={{ width: "100%", padding: "13px 16px", justifyContent: "center" }}>
        Continue · Audience <Icon name="arrow_right" size={13} stroke={2.4} />
      </button>
    </div>
  </div>
);

/* Mobile output viewer / generate */
const MobileOutputViewer = () => (
  <div style={{ width: "100%", height: "100%", overflowY: "auto", background: "#1A1813", color: "#FFF", paddingBottom: 80, position: "relative" }} className="scroll-fade-bottom">
    <div style={{ padding: "20px 18px 0", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <Icon name="arrow_left" size={20} stroke={2} />
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: "0.18em", color: "#EFFF00", fontWeight: 800 }}>RENOO · LAUNCH PACK</div>
      <Icon name="download" size={20} stroke={2} />
    </div>

    <div style={{ padding: "16px 18px 0" }}>
      <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 32, lineHeight: 1, textTransform: "uppercase", margin: 0 }}>Full launch pack</h1>
      <div style={{ display: "flex", gap: 8, marginTop: 8, alignItems: "center" }}>
        <Pill tone="green">QS 94</Pill>
        <Pill tone="yellow-soft">BRAND 92</Pill>
        <span style={{ marginLeft: "auto", fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#8A8A8A", letterSpacing: "0.14em" }}>132 ASSETS · 22s</span>
      </div>
    </div>

    {/* tabs */}
    <div style={{ marginTop: 14, padding: "0 18px", display: "flex", gap: 4, overflowX: "auto", borderBottom: "1px solid #3A372F" }}>
      {["OVERVIEW","IG","VIDEO","ADS","STORE","SEO","CODEX"].map((t, i) => (
        <div key={t} style={{ padding: "10px 12px", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 800, letterSpacing: "0.12em", color: i === 0 ? "#1A1813" : "#8A8A8A", background: i === 0 ? "#EFFF00" : "transparent", flex: "none", borderBottom: i === 0 ? "2px solid #ADC700" : 0 }}>{t}</div>
      ))}
    </div>

    {/* output card */}
    <div style={{ padding: "16px 18px 0" }}>
      <div className="out-card" style={{ padding: 14 }}>
        <div className="quality">QS 94 · BM 92</div>
        <div className="h">IG · POST 02 · CAPTION</div>
        <div className="body" style={{ fontSize: 12.5 }}>One folder. Every idea. Builders die from forgotten ideas, not bad ones. <b>Renoo is a 4-second capture app for builders shipping under chaos.</b></div>
        <div style={{ marginTop: 10, display: "flex", gap: 4, flexWrap: "wrap" }}>
          {["#indiehacker","#buildinpublic","#codex"].map(h => (
            <span key={h} style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, color: "#EFFF00", background: "rgba(239,255,0,0.08)", padding: "2px 6px", fontWeight: 700 }}>{h}</span>
          ))}
        </div>
        <div className="actions" style={{ flexWrap: "wrap" }}>
          <button>Copy</button><button>Improve</button><button>Punchier</button><button>A/B</button>
        </div>
      </div>
    </div>

    {/* improve sticky bar */}
    <div style={{ padding: "14px 18px 0", display: "flex", gap: 4, overflowX: "auto" }}>
      {["Punchier","Shorter","More premium","Stronger CTA","Founder voice","Viral"].map(t => (
        <button key={t} className="chip" style={{ background: "#2C2A23", color: "#C8C8C5", border: "1px solid #333", fontSize: 9.5, padding: "5px 10px", flex: "none" }}>{t}</button>
      ))}
    </div>

    <MobileBottomNav active="gen" />
  </div>
);

Object.assign(window, { MobileLanding, MobileDashboard, MobileInstagram, MobileWizard, MobileOutputViewer, MobileBottomNav });