/* ========================================================================
   screens-generate.jsx — AI generate hub + AI analysis + output viewer
                          + ad studio + video studio
   ====================================================================== */

const GenerateHubScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="generate" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar />
      <div style={{ flex: 1, overflowY: "auto", padding: "24px 28px 40px" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
          <span style={{ width: 18, height: 1, background: "#EFFF00" }} />AI · GENERATE
        </div>
        <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 0.94, textTransform: "uppercase", margin: "0 0 6px", color: "#FFF" }}>Create your <span style={{ background: "#EFFF00", color: "#1A1813", padding: "0 8px", display: "inline-block", transform: "skewX(-6deg)" }}><span style={{ display: "inline-block", transform: "skewX(6deg)" }}>Content</span></span></h1>
        <div style={{ color: "#8A8A8A", fontSize: 13, marginBottom: 22 }}>Choose a pack, set a goal, and generate brand-locked posts, scripts, captions and calendar ideas.</div>

        {/* big hero card */}
        <div className="ai-surface" style={{ padding: 22, marginBottom: 18, display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 18, alignItems: "center" }}>
          <div style={{ width: 60, height: 60, background: "#EFFF00", display: "grid", placeItems: "center", color: "#1A1813", borderRadius: 8 }}>
            <Icon name="package" size={28} stroke={2} />
          </div>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800 }}>CREATOR PACK</div>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 36, color: "#FFF", textTransform: "uppercase", lineHeight: 1 }}>30-Day Content Pack</div>
            <div style={{ color: "#C8C8C5", fontSize: 13, marginTop: 4 }}>Posts · scripts · hooks · captions · hashtags · calendar · brand voice</div>
          </div>
          <button className="btn btn-primary"><BoltMini size={14} color="#1A1813" /> Generate calendar</button>
        </div>

        {/* grid of packs */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
          {[
            { i: "calendar",   l: "30-Day Calendar",       d: "Daily post ideas with dates, goals and CTAs", t: "FREE" },
            { i: "insta",      l: "Instagram Pack",        d: "30 / 60 / 90 brand-locked captioned posts",  t: "FREE" },
            { i: "users",      l: "Multi-Platform Pack",   d: "Instagram, TikTok, Shorts, LinkedIn, Facebook",  t: "STARTER" },
            { i: "video",      l: "Video Script Pack",     d: "10s reels with hooks, shots, voiceover",     t: "PRO" },
            { i: "link",       l: "Link-in-Bio Pack",      d: "Profile bio, offers, link CTAs and mini page copy", t: "STARTER" },
            { i: "megaphone",  l: "Paid Ads Pack",         d: "Meta · TikTok · Google · A/B variations",    t: "PRO" },
            { i: "layout",     l: "Offer Copy Pack",       d: "Bio, landing page, product, service or lead magnet copy", t: "STARTER" },
            { i: "globe",      l: "SEO + Blog Pack",       d: "Keywords, blog ideas and search-friendly captions", t: "STARTER" },
            { i: "brain",      l: "Ideas Pack",            d: "Hooks, angles, series ideas and recurring formats", t: "PRO" },
            { i: "cmd",        l: "Prompt Pack",           d: "Reusable prompts for content, design and batching", t: "PRO" },
            { i: "scan",       l: "Repurpose Pack",        d: "Turn one post, video or blog into 12 channel versions", t: "PRO" },
            { i: "trend",      l: "Growth Strategy",       d: "7 / 14 / 30 day creator growth plan",         t: "PRO" },
          ].map((p, i) => (
            <div key={i} className="pack-card" style={{ padding: 16 }}>
              {p.t === "PRO" && <div style={{ position: "absolute", top: 10, right: 10, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, padding: "2px 6px", background: "#1A1813", color: "#EFFF00", letterSpacing: "0.18em", fontWeight: 800, border: "1px solid #333" }}>{p.t}</div>}
              <div className="ico-wrap"><Icon name={p.i} size={16} stroke={2} /></div>
              <div className="nm">{p.l}</div>
              <div className="ds">{p.d}</div>
              <div className="ft">
                <span>~14s</span>
                <button style={{ background: "transparent", color: "#EFFF00", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.14em", fontWeight: 800, textTransform: "uppercase" }}>Generate →</button>
              </div>
            </div>
          ))}
        </div>

        {/* AI options */}
        <div className="card" style={{ marginTop: 18, padding: 18 }}>
          <div className="card-title" style={{ marginBottom: 12 }}>Optimisation toggles</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
            {[
              "Optimise for clicks","Optimise for likes","Optimise for saves","Optimise for shares","Optimise for comments","Creator voice","Premium tone","Viral hook","Strong CTA",
            ].map((t, i) => (
              <label key={t} style={{ display: "flex", alignItems: "center", gap: 8, background: "#201E18", border: "1px solid #3A372F", padding: "9px 11px", fontSize: 12, color: "#FFF", cursor: "pointer" }}>
                <span style={{ width: 16, height: 16, borderRadius: 3, background: i < 4 ? "#EFFF00" : "#1A1813", border: i < 4 ? "1px solid #ADC700" : "1px solid #333", display: "grid", placeItems: "center", color: "#1A1813" }}>{i < 4 && <Icon name="check" size={11} stroke={2.8} />}</span>
                {t}
              </label>
            ))}
          </div>
        </div>
      </div>
    </div>
  </div>
);

const OutputViewerScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="packs" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar project="Renoo · Notes" />

      {/* header strip */}
      <div style={{ padding: "18px 28px 6px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase" }}>PACK · RENOO · v3.2 · BRAND-LOCKED</div>
            <h2 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 44, lineHeight: 1, textTransform: "uppercase", margin: "6px 0 4px", color: "#FFF" }}>Full Launch Pack</h2>
            <div style={{ display: "flex", gap: 10, alignItems: "center", color: "#8A8A8A", fontSize: 12 }}>
              <span>Generated 09:02 · ~22s · 132 assets</span>
              <span>·</span>
              <span style={{ color: "#4ADE80", fontFamily: "'JetBrains Mono', monospace", fontWeight: 800, letterSpacing: "0.14em", textTransform: "uppercase" }}>QS 94</span>
              <span>·</span>
              <span style={{ color: "#EFFF00", fontFamily: "'JetBrains Mono', monospace", fontWeight: 800, letterSpacing: "0.14em", textTransform: "uppercase" }}>BRAND MATCH 92</span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-secondary"><Icon name="copy" size={12} stroke={2} /> Copy all</button>
            <button className="btn btn-secondary"><Icon name="refresh" size={12} stroke={2} /> Regenerate</button>
            <button className="btn btn-primary"><Icon name="download" size={12} stroke={2} /> Export ZIP</button>
          </div>
        </div>
      </div>

      {/* tabs */}
      <div className="out-tab-row" style={{ padding: "0 28px", overflowX: "auto" }}>
        {["Overview","Instagram","Video","Ads","App Store","Landing","SEO","Claude","Codex"].map((t, i) => (
          <div key={t} className={"t" + (i === 0 ? " active" : "")}>{t}</div>
        ))}
      </div>

      {/* body — 2 col layout: list + editor */}
      <div style={{ flex: 1, overflow: "hidden", display: "grid", gridTemplateColumns: "320px 1fr", gap: 0 }}>
        <div style={{ borderRight: "1px solid #3A372F", overflowY: "auto", padding: 12, background: "#1A1813" }}>
          {[
            { g: "Hooks · 8" },
            { g: "Captions · 30" },
            { g: "Hashtag stacks · 6" },
            { g: "First comments · 30" },
          ].map(s => (
            <div key={s.g} style={{ marginBottom: 12 }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: "0.2em", color: "#8A8A8A", fontWeight: 800, textTransform: "uppercase", padding: "4px 6px" }}>{s.g}</div>
              {[0,1,2,3,4].map(i => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 8, padding: "8px 8px", background: i === 1 ? "#2C2A23" : "transparent", borderRadius: 4, alignItems: "center", cursor: "pointer", marginBottom: 1 }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, color: "#8A8A8A", fontWeight: 800, letterSpacing: "0.1em" }}>{String(i + 1).padStart(2, "0")}</span>
                  <span style={{ fontSize: 12, color: i === 1 ? "#FFF" : "#C8C8C5", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{["30 ideas from one brand pack.","One folder. Every post.","Captions that sound like you.","Batch now, post calmly.","Stop guessing what to post."][i]}</span>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, color: "#4ADE80", fontWeight: 800 }}>{[91,94,88,82,78][i]}</span>
                </div>
              ))}
            </div>
          ))}
        </div>

        <div style={{ overflowY: "auto", padding: 22, background: "#201E18" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 280px", gap: 16 }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
                <span className="ai-chip"><Icon name="sparkle" size={11} stroke={2} /> EDIT</span>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A", letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800 }}>INSTAGRAM · POST 02 · CAPTION</span>
                <div style={{ marginLeft: "auto", display: "flex", gap: 4 }}>
                  <span className="pill pill-yellow" style={{ fontSize: 9 }}>QS 94</span>
                  <span className="pill pill-yellow-soft" style={{ fontSize: 9 }}>BM 92</span>
                </div>
              </div>
              <div style={{ background: "#1A1813", border: "1px solid #3A372F", padding: 18 }}>
                <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 24, color: "#FFF", textTransform: "uppercase", lineHeight: 1.05, marginBottom: 12 }}>One folder. Every post.</div>
                <div style={{ color: "#C8C8C5", fontSize: 13.5, lineHeight: 1.65 }}>
                  Your best ideas are already sitting in links, notes, screenshots and camera roll chaos. BoltKit turns them into a clear content plan. <b style={{ color: "#FFF" }}>One folder, every post — ready when you are.</b><br/><br/>
                  → Upload your assets. <br/>→ Pick your goal. <br/>→ Schedule the week calmly.
                </div>
                <div style={{ marginTop: 14, display: "flex", gap: 6, flexWrap: "wrap" }}>
                  {["#contentcreator","#instagramtips","#socialmediatips","#creatorbusiness","#smallbusiness","#reelsideas","#contentcalendar","#brandvoice"].map(h => (
                    <span key={h} style={{ background: "rgba(239,255,0,0.08)", color: "#EFFF00", padding: "3px 8px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700 }}>{h}</span>
                  ))}
                </div>
                <div style={{ marginTop: 14, paddingTop: 12, borderTop: "1px dashed #3A372F", fontSize: 11.5, color: "#8A8A8A" }}>
                  <b style={{ color: "#C8C8C5" }}>First comment:</b> Want the batching checklist? Comment CONTENT.
                </div>
              </div>

              {/* improve toolbar */}
              <div style={{ marginTop: 14, display: "flex", gap: 6, flexWrap: "wrap" }}>
                {["Punchier","Shorter","More premium","More viral","Stronger CTA","Rewrite for X","Rewrite for LinkedIn","A/B 5 hooks"].map(t => (
                  <button key={t} className="chip" style={{ background: "#2C2A23", color: "#C8C8C5", border: "1px solid #333" }}>{t}</button>
                ))}
              </div>
            </div>

            {/* preview phone */}
            <div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", marginBottom: 8 }}>LIVE PREVIEW</div>
              <div style={{ background: "#2C2A23", border: "1px solid #333", padding: 12, borderRadius: 6 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 11, color: "#FFF", fontWeight: 700 }}>
                  <div style={{ width: 24, height: 24, borderRadius: 99, background: "#FF6B35" }} />
                  <span>boltkit.creator</span>
                  <Icon name="check_circle" size={11} color="#4DA8FF" />
                </div>
                <div style={{ height: 220, marginTop: 8, background: "#FF6B35", display: "grid", placeItems: "center", borderRadius: 4, color: "#FFF", fontFamily: "'Anton', Impact, sans-serif", fontSize: 28, textTransform: "uppercase", letterSpacing: "0.02em" }}>POST · 1</div>
                <div style={{ marginTop: 8, fontSize: 11.5, color: "#C8C8C5", lineHeight: 1.5 }}>
                  <b style={{ color: "#FFF" }}>boltkit.creator</b> One folder. Every post. Your next content batch starts here…
                </div>
              </div>

              <div style={{ marginTop: 14, background: "#26241E", border: "1px solid #3A372F", padding: 12 }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "#8A8A8A", fontWeight: 800, textTransform: "uppercase", marginBottom: 6 }}>VERSIONS</div>
                {["v3 · 09:02 · current","v2 · 08:54","v1 · 08:41"].map((v, i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", fontSize: 12, color: i === 0 ? "#EFFF00" : "#8A8A8A", fontWeight: i === 0 ? 700 : 500, borderTop: i ? "1px dashed #3A372F" : 0 }}>
                    <span>{v}</span>
                    <button style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: "0.14em", color: "#8A8A8A", fontWeight: 800, textTransform: "uppercase", background: "transparent" }}>Open</button>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const VideoStudioScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="video" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar />
      <div style={{ flex: 1, overflowY: "auto", padding: "24px 28px 40px" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
          <span style={{ width: 18, height: 1, background: "#EFFF00" }} />VIDEO STUDIO · 10s SOCIAL
        </div>
        <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 0.94, textTransform: "uppercase", margin: "0 0 22px", color: "#FFF" }}>Reels · Shorts · TikTok</h1>

        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 16 }}>
          <div className="card has-corners" style={{ padding: 20 }}>
            <div style={{ display: "flex", gap: 6, marginBottom: 14 }}>
              {[
                { l: "REELS", on: true,  i: "insta" },
                { l: "TIKTOK", on: false, i: "tiktok" },
                { l: "SHORTS", on: false, i: "youtube" },
              ].map(p => (
                <div key={p.l} style={{ padding: "8px 12px", background: p.on ? "#EFFF00" : "#26241E", color: p.on ? "#1A1813" : "#FFF", border: p.on ? "1px solid #ADC700" : "1px solid #3A372F", display: "flex", alignItems: "center", gap: 7, fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, fontWeight: 800, letterSpacing: "0.12em", textTransform: "uppercase" }}>
                  <Icon name={p.i} size={13} stroke={2} />{p.l}
                </div>
              ))}
            </div>
            <label className="field-label">Hook (line 1)</label>
            <input className="input" defaultValue="30 ideas from one brand pack." />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 14 }}>
              <div>
                <label className="field-label">Style</label>
                <select className="select"><option>Creator POV · jump-cut</option></select>
              </div>
              <div>
                <label className="field-label">Length</label>
                <select className="select"><option>10s · 5 cuts</option></select>
              </div>
            </div>

            {/* shot list */}
            <div style={{ marginTop: 18 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
                <span className="ai-chip"><Icon name="sparkle" size={11} stroke={2} /> AI SHOT LIST</span>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A", letterSpacing: "0.14em", fontWeight: 800, textTransform: "uppercase" }}>5 shots · ~10s</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                {[
                  { t: "0:00", s: "POV: camera roll full of unused posts", v: "30 ideas." },
                  { t: "0:02", s: "Cut: BoltKit calendar filling instantly", v: "One brand pack." },
                  { t: "0:04", s: "Phone preview · caption appears", v: "Ready to post." },
                  { t: "0:07", s: "Weekly schedule locks in", v: "Your week planned." },
                  { t: "0:09", s: "Logo + CTA card", v: "BoltKit. Create calmly." },
                ].map(s => (
                  <div key={s.t} style={{ display: "grid", gridTemplateColumns: "44px 1fr 1fr", gap: 10, alignItems: "center", padding: "10px 12px", background: "#201E18", border: "1px solid #3A372F" }}>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#EFFF00", letterSpacing: "0.08em", fontWeight: 800 }}>{s.t}</span>
                    <span style={{ color: "#C8C8C5", fontSize: 12 }}>{s.s}</span>
                    <span style={{ color: "#FFF", fontSize: 12, fontWeight: 700 }}>"{s.v}"</span>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ display: "flex", gap: 8, marginTop: 18, alignItems: "center" }}>
              <button className="btn btn-secondary"><Icon name="refresh" size={12} stroke={2} /> Regenerate</button>
              <button className="btn btn-secondary"><Icon name="copy" size={12} stroke={2} /> Copy script</button>
              <span style={{ marginLeft: "auto", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#FFB23F", fontWeight: 800, letterSpacing: "0.14em", textTransform: "uppercase" }}>RENDER · 25 CREDITS</span>
              <button className="btn btn-primary"><BoltMini size={13} color="#1A1813" /> Render with Sora</button>
            </div>
          </div>

          {/* preview phone */}
          <div className="card" style={{ padding: 20, display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span className="ai-chip-soft"><Icon name="video" size={11} stroke={2} /> PREVIEW</span>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A", letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800 }}>9:19 · MUTED</span>
            </div>
            <div style={{ background: "#2C2A23", border: "1px solid #333", aspectRatio: "9/16", position: "relative", display: "grid", placeItems: "center" }}>
              <div style={{ position: "absolute", top: 12, left: 12, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#FFF", padding: "4px 8px", background: "rgba(0,0,0,0.6)", fontWeight: 800, letterSpacing: "0.14em" }}>SHOT 02 · 0:02</div>
              <div style={{ position: "absolute", bottom: 16, left: 16, right: 16 }}>
                <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 38, color: "#FFF", textTransform: "uppercase", letterSpacing: "-0.005em", lineHeight: 0.95 }}>Zero<br />launches.</div>
              </div>
              <button style={{ width: 60, height: 60, borderRadius: 99, background: "rgba(239,255,0,0.95)", color: "#1A1813", display: "grid", placeItems: "center" }}>
                <Icon name="play" size={26} stroke={2} />
              </button>
            </div>
            <div style={{ background: "#201E18", border: "1px solid #3A372F", padding: 12 }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 800, marginBottom: 6 }}>RENDER QUEUE</div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 12, color: "#FFF" }}>
                <span>3 shots queued</span>
                <span style={{ color: "#EFFF00", fontFamily: "'JetBrains Mono', monospace", fontWeight: 800, letterSpacing: "0.1em" }}>~ 3min</span>
              </div>
              <div style={{ height: 4, background: "#2C2A23", marginTop: 8 }}>
                <div style={{ width: "62%", height: "100%", background: "#EFFF00" }} />
              </div>
            </div>
            <div style={{ fontSize: 11.5, color: "#8A8A8A", lineHeight: 1.5 }}>
              <b style={{ color: "#FFB23F" }}>Heads up:</b> Real-time video rendering is gated behind Pro &amp; available when your Sora / OpenAI key is connected.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { GenerateHubScreen, OutputViewerScreen, VideoStudioScreen });