/* ========================================================================
   screens-auth.jsx — login, signup, forgot, onboarding
   ====================================================================== */

const AuthShell = ({ children, side }) => (
  <div style={{ height: "100%", background: "#1A1813", display: "grid", gridTemplateColumns: "1fr 1fr" }}>
    {/* left form */}
    <div style={{ padding: "40px 56px", display: "flex", flexDirection: "column", gap: 24 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ width: 32, height: 32, borderRadius: 6, background: "#EFFF00", display: "grid", placeItems: "center" }}>
          <BoltMini size={18} color="#1A1813" />
        </div>
        <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 22, letterSpacing: "0.02em", color: "#FFF" }}>BOLTKIT</div>
      </div>
      {children}
    </div>
    {/* right side panel */}
    <div style={{ background: "#201E18", borderLeft: "1px solid #3A372F", padding: "40px 48px", 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: "48px 48px", maskImage: "radial-gradient(60% 50% at 50% 30%, #000, transparent 90%)", WebkitMaskImage: "radial-gradient(60% 50% at 50% 30%, #000, transparent 90%)" }} />
      <div style={{ position: "absolute", top: "30%", right: "-12%", width: 460, height: 110, background: "repeating-linear-gradient(135deg, #EFFF00 0 14px, #201E18 14px 28px)", transform: "rotate(-12deg)", opacity: 0.14 }} />
      {side}
    </div>
  </div>
);

const LoginScreen = () => (
  <AuthShell side={
    <div style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", justifyContent: "center" }}>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, marginBottom: 14 }}>· LIVE WORKSPACE</div>
      <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 64, color: "#FFF", lineHeight: 0.92, textTransform: "uppercase", letterSpacing: "-0.005em" }}>132 assets shipped this week.</div>
      <div style={{ marginTop: 14, color: "#8A8A8A", fontSize: 14, maxWidth: "44ch" }}>Creators, influencers, founders and brands are planning content in BoltKit. Welcome back.</div>

      <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
        {[
          { l: "PROJECTS", v: "1,284" },
          { l: "PACKS",    v: "18.4k" },
          { l: "POSTS",    v: "92k" },
        ].map(t => (
          <div key={t.l} style={{ background: "#26241E", border: "1px solid #3A372F", padding: 14, position: "relative" }}>
            <div style={{ position: "absolute", top: 0, left: 0, width: 22, height: 3, background: "#EFFF00" }} />
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.2em", color: "#8A8A8A", fontWeight: 800 }}>{t.l}</div>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 30, color: "#FFF", marginTop: 6 }}>{t.v}</div>
          </div>
        ))}
      </div>
    </div>
  }>
    <div>
      <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 56, lineHeight: 0.92, textTransform: "uppercase", color: "#FFF", margin: 0 }}>Welcome back<span style={{ color: "#EFFF00" }}>.</span></h1>
      <div style={{ color: "#8A8A8A", fontSize: 14, marginTop: 8 }}>Log in to your launch workspace.</div>
    </div>

    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <button className="btn btn-secondary" style={{ width: "100%", padding: "12px 16px", justifyContent: "flex-start", gap: 10 }}>
        <Icon name="google" size={14} stroke={2} /> Continue with Google
        <span className="pill pill-dark" style={{ marginLeft: "auto", fontSize: 9 }}>SOON</span>
      </button>
      <button className="btn btn-secondary" style={{ width: "100%", padding: "12px 16px", justifyContent: "flex-start", gap: 10 }}>
        <Icon name="apple" size={14} stroke={2} /> Continue with Apple
        <span className="pill pill-dark" style={{ marginLeft: "auto", fontSize: 9 }}>SOON</span>
      </button>
    </div>

    <div style={{ display: "flex", alignItems: "center", gap: 12, color: "#5C5C5C", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 800 }}>
      <span style={{ flex: 1, height: 1, background: "#3A372F" }} />
      OR EMAIL
      <span style={{ flex: 1, height: 1, background: "#3A372F" }} />
    </div>

    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div>
        <label className="field-label">EMAIL</label>
        <input className="input" defaultValue="joel@boltkit.co.uk" />
      </div>
      <div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <label className="field-label">PASSWORD</label>
          <a style={{ fontSize: 10, fontFamily: "'JetBrains Mono', monospace", color: "#EFFF00", letterSpacing: "0.14em", fontWeight: 800, textTransform: "uppercase" }}>Forgot?</a>
        </div>
        <input className="input" type="password" defaultValue="••••••••••••" />
      </div>
      <button className="btn btn-primary" style={{ marginTop: 4 }}><BoltMini size={13} color="#1A1813" /> Log in</button>
      <div style={{ color: "#5C5C5C", fontSize: 11.5, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.06em", textAlign: "center", marginTop: 4 }}>
        No account? <a style={{ color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", letterSpacing: "0.14em", fontSize: 10 }}>Create one</a>
      </div>
    </div>

    {/* demo mode strip */}
    <div style={{ marginTop: "auto", background: "#26241E", border: "1px solid #3A372F", padding: 14, display: "flex", alignItems: "center", gap: 12 }}>
      <div style={{ width: 36, height: 36, background: "rgba(239,255,0,0.08)", border: "1px solid rgba(239,255,0,0.25)", display: "grid", placeItems: "center", color: "#EFFF00" }}>
        <Icon name="play" size={15} stroke={2} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.16em", color: "#EFFF00", fontWeight: 800 }}>DEMO WORKSPACE</div>
        <div style={{ fontSize: 12, color: "#C8C8C5", marginTop: 2 }}>No account needed. Try the full app locally.</div>
      </div>
      <button className="btn btn-secondary btn-sm">Open demo</button>
    </div>
  </AuthShell>
);

const OnboardingScreen = () => (
  <div style={{ height: "100%", background: "#1A1813", padding: "40px 56px", overflowY: "auto", color: "#F4F4F0" }}>
    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 32 }}>
      <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: 20, letterSpacing: "0.02em", color: "#FFF" }}>BOLTKIT</div>
      <div style={{ marginLeft: "auto", fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.18em", color: "#8A8A8A", fontWeight: 800, textTransform: "uppercase" }}>STEP 2 / 3 · ACCOUNT SETUP</div>
    </div>

    {/* welcome */}
    <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, fontFamily: "'JetBrains Mono', monospace", marginBottom: 12 }}><span style={{ width: 22, height: 2, background: "#EFFF00" }} />FIRST-RUN</div>
    <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 72, lineHeight: 0.9, textTransform: "uppercase", margin: 0, color: "#FFF", maxWidth: "18ch" }}>Tell us what you're shipping.</h1>
    <p style={{ color: "#C8C8C5", marginTop: 14, fontSize: 14, maxWidth: "60ch" }}>BoltKit tailors your generators around how you build. You can change any of this later from Settings.</p>

    <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 28 }}>
      {/* form */}
      <div style={{ background: "#201E18", border: "1px solid #3A372F", padding: 24 }}>
        <label className="field-label">What are you building?</label>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginBottom: 18 }}>
          {[
            { i: "package", l: "Mobile app",   on: true },
            { i: "globe",   l: "Web / SaaS",   on: false },
            { i: "shop",    l: "Marketplace",  on: false },
            { i: "brain",   l: "AI tool",      on: false },
            { i: "users",   l: "Agency client",on: false },
            { i: "more",    l: "Something else",on:false },
          ].map(c => (
            <div key={c.l} style={{ padding: 14, background: c.on ? "#EFFF00" : "#26241E", color: c.on ? "#1A1813" : "#FFF", border: c.on ? "1px solid #ADC700" : "1px solid #3A372F", cursor: "pointer", display: "flex", flexDirection: "column", gap: 8 }}>
              <Icon name={c.i} size={18} stroke={2} />
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.14em", fontWeight: 800, textTransform: "uppercase" }}>{c.l}</div>
            </div>
          ))}
        </div>

        <label className="field-label">Where are you in your launch?</label>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6, marginBottom: 18 }}>
          {["Idea","Building","Soft launch","Launched"].map((s, i) => (
            <div key={s} style={{ padding: "10px 12px", background: i === 1 ? "#EFFF00" : "#26241E", color: i === 1 ? "#1A1813" : "#FFF", border: i === 1 ? "1px solid #ADC700" : "1px solid #3A372F", textAlign: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.12em", fontWeight: 800, textTransform: "uppercase" }}>{s}</div>
          ))}
        </div>

        <label className="field-label">How do you build?</label>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 22 }}>
          {[
            { l: "Claude", on: true }, { l: "Codex", on: true },
            { l: "Cursor", on: false }, { l: "Replit", on: false }, { l: "Lovable", on: false },
            { l: "v0", on: false }, { l: "No-code", on: false }, { l: "Hand-rolled", on: false },
          ].map(t => (
            <span key={t.l} style={{ padding: "6px 11px", background: t.on ? "#FFF" : "#26241E", color: t.on ? "#1A1813" : "#C8C8C5", border: t.on ? "1px solid #FFF" : "1px solid #3A372F", fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, fontWeight: 800, letterSpacing: "0.12em", textTransform: "uppercase" }}>{t.l}</span>
          ))}
        </div>

        <label className="field-label">Workspace mode</label>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 18 }}>
          <div style={{ background: "#26241E", border: "1px solid #EFFF00", padding: 14, position: "relative" }}>
            <div style={{ position: "absolute", top: -8, left: 10, background: "#EFFF00", color: "#1A1813", padding: "2px 7px", fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.14em", fontWeight: 800 }}>SELECTED</div>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 22, color: "#FFF", marginTop: 4 }}>PRIVATE MVP</div>
            <div style={{ fontSize: 11.5, color: "#8A8A8A", marginTop: 4 }}>Your projects, your data. Synced to Supabase.</div>
          </div>
          <div style={{ background: "#26241E", border: "1px solid #3A372F", padding: 14 }}>
            <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 22, color: "#FFF" }}>AGENCY</div>
            <div style={{ fontSize: 11.5, color: "#8A8A8A", marginTop: 4 }}>Multi-client workspaces. Team seats. <span className="pill pill-dark" style={{ fontSize: 9, marginLeft: 4 }}>PRO</span></div>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", gap: 10, marginTop: 18 }}>
          <button className="btn btn-ghost">Back</button>
          <button className="btn btn-primary">Continue · Create first project <Icon name="arrow_right" size={12} stroke={2.4} /></button>
        </div>
      </div>

      {/* preview side */}
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        <div style={{ background: "#26241E", border: "1px solid #3A372F", padding: 20 }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.18em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", marginBottom: 6 }}>PREVIEW · YOUR LAUNCH OS</div>
          <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 28, color: "#FFF", textTransform: "uppercase", lineHeight: 1 }}>BoltKit Studio</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 14 }}>
            {[
              { l: "Mobile app · iOS / Android",     v: 100 },
              { l: "Brand-locked voice generator",   v: 85 },
              { l: "Codex / Claude prompt packs",    v: 92 },
              { l: "Instagram bulk scheduler",       v: 78 },
            ].map(r => (
              <div key={r.l} style={{ display: "grid", gridTemplateColumns: "1fr 100px", gap: 10, alignItems: "center" }}>
                <div style={{ fontSize: 11.5, color: "#C8C8C5" }}>{r.l}</div>
                <Meter v={r.v} />
              </div>
            ))}
          </div>
        </div>

        <div style={{ background: "#EFFF00", color: "#1A1813", padding: 18, position: "relative", overflow: "hidden" }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", fontWeight: 800, marginBottom: 4 }}>WHAT YOU'LL UNLOCK</div>
          <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 26, textTransform: "uppercase", lineHeight: 1, letterSpacing: "0.02em" }}>12 brand-locked packs in ~22s.</div>
        </div>
      </div>
    </div>
  </div>
);

Object.assign(window, { LoginScreen, OnboardingScreen, AuthShell });