/* global React, Icon, PicsBackdrop, PicsNav, PicsFooter, ProgressBar,
   StarRating, PhotoPlaceholder, PhotoTile, AxisRow, SwatchAxis,
   MetaStrip, IconBadge */
/* ============================================================
   .pics — screens 5-7 (Studio, Results, Billing)
   Studio has 3 variants: 'standard' (stacked dropdowns),
   'swatch' (visual axis tiles), 'recipe' (camera-dial + recipe card)
   ============================================================ */

const STUDIO_AXES = {
  background: {
    label: "Background",
    options: [
      { id: "studio-white", label: "Studio · white" },
      { id: "studio-gray",  label: "Studio · gray" },
      { id: "outdoor-urban", label: "Outdoor · urban" },
      { id: "outdoor-golden", label: "Golden hour" },
      { id: "abstract-bokeh", label: "Bokeh" },
      { id: "branded-custom", label: "Branded" },
    ]
  },
  composition: {
    label: "Composition",
    options: [
      { id: "headshot",       label: "Headshot" },
      { id: "three-quarter",  label: "3/4 shot" },
      { id: "full-body",      label: "Full body" },
      { id: "environmental",  label: "Environmental" },
    ]
  },
  angle: {
    label: "Camera angle",
    options: [
      { id: "eye-level",  label: "Eye level" },
      { id: "low-angle",  label: "Low angle" },
      { id: "high-angle", label: "High angle" },
      { id: "dutch",      label: "Dutch tilt" },
    ]
  },
  lighting: {
    label: "Lighting",
    options: [
      { id: "softbox",   label: "Studio softbox" },
      { id: "natural-soft", label: "Natural soft" },
      { id: "side-lit",  label: "Dramatic side-lit" },
      { id: "golden",    label: "Golden hour" },
    ]
  }
};

/* ============================================================
   SCREEN 5 — STUDIO
   variants: 'standard' | 'swatch' | 'recipe'
   ============================================================ */
function StudioScreen({ mobile = false, variant = "standard", selections, onGenerate, generatingCount = 0 }) {
  selections = selections || {
    background: 0, composition: 0, angle: 0, lighting: 0,
  };

  return (
    <div className="pics-page">
      <PicsNav authed credits={23} mobile={mobile} current="studio" />
      <main style={{
        padding: mobile ? "16px 20px 40px" : "24px 32px 60px",
        maxWidth: 1600, margin: "0 auto",
      }}>
        {/* HEADER */}
        <div className="between" style={{ marginBottom: 24, flexWrap: "wrap", gap: 14 }}>
          <div>
            <div className="topic cyan">Studio · variant {variant === "standard" ? "A" : variant === "swatch" ? "B" : "C"}</div>
            <h1 className="pics-h1 smaller" style={{ marginBottom: 6 }}>What are we making today<span className="dot">?</span></h1>
            <div className="row gap-12" style={{ alignItems: "center", flexWrap: "wrap" }}>
              <div className="chip lavender">
                <span className="status-dot" style={{ background: "rgb(var(--pastel-lavender))", boxShadow: "0 0 6px rgb(var(--pastel-lavender))" }}></span>
                Your model · v1 · trained 4d ago
              </div>
              <button className="pics-nav-link"><Icon name="refresh" size={11} /> Refresh model ($10)</button>
            </div>
          </div>
        </div>

        {/* BODY GRID */}
        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : (variant === "recipe" ? "420px 1fr" : "320px 1fr"),
          gap: 24,
        }}>
          {/* LEFT RAIL — VARIANT */}
          <aside>
            {variant === "standard" && <StudioStandardRail selections={selections} onGenerate={onGenerate} />}
            {variant === "swatch"   && <StudioSwatchRail selections={selections} onGenerate={onGenerate} />}
            {variant === "recipe"   && <StudioRecipeRail selections={selections} onGenerate={onGenerate} />}
          </aside>

          {/* RIGHT — RECENT GENERATIONS GRID */}
          <section>
            <div className="between" style={{ marginBottom: 14, flexWrap: "wrap", gap: 10 }}>
              <div className="row gap-10" style={{ alignItems: "center" }}>
                <span className="label-overline cyan">SESSION</span>
                <span className="muted text-sm">12 generations · 4 variations open</span>
              </div>
              <div className="row gap-8">
                <button className="chip">All</button>
                <button className="chip cyan">Latest</button>
                <button className="chip">Favorites</button>
              </div>
            </div>
            <div style={{
              display: "grid",
              gridTemplateColumns: mobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)",
              gap: 10,
            }}>
              {Array.from({ length: 4 }).map((_, i) => (
                <div key={`gen-${i}`} className="photo-tile is-picked">
                  <div className="ph-frame">
                    {i === 0 && generatingCount > 0 ? (
                      <StudioStreamingTile />
                    ) : (
                      <PhotoTile slot={`studio-gen-new-${i}`} label="Generating…" showActions={false} />
                    )}
                  </div>
                  {!(i === 0 && generatingCount > 0) && (
                    <div className="ph-meta">
                      <span className="ph-score">Studio · Eye · Softbox</span>
                      <span className="chip" style={{ padding: "3px 8px", fontSize: 9, background: "rgb(var(--basalt-deep) / 0.78)" }}>
                        <Icon name="star" size={10} /> Rate
                      </span>
                    </div>
                  )}
                </div>
              ))}
              {Array.from({ length: mobile ? 6 : 12 }).map((_, i) => (
                <PhotoTile key={`recent-${i}`}
                  slot={`studio-recent-${i}`}
                  label={["Studio","Outdoor","Golden","Editorial","B&W","Side-lit"][i % 6]}
                  showActions={false}
                />
              ))}
            </div>
          </section>
        </div>
      </main>
    </div>
  );
}

function StudioStreamingTile() {
  return (
    <div className="ph-placeholder" style={{
      background: "repeating-linear-gradient(135deg, rgb(var(--circuit-glow) / 0.06) 0 12px, rgb(var(--basalt-surface) / 0.5) 12px 24px)",
      animation: "pics-pulse 2.4s ease-in-out infinite",
    }}>
      <div className="glyph" style={{ borderColor: "rgb(var(--circuit-glow) / 0.4)" }}>
        <Icon name="sparkles" size={16} strokeWidth={1.4} />
      </div>
      <div className="label" style={{ color: "rgb(var(--circuit-glow))" }}>Generating…</div>
      <div style={{ position: "absolute", bottom: 10, left: 10, right: 10, height: 2, borderRadius: 1, background: "rgb(var(--text) / 0.1)", overflow: "hidden" }}>
        <div style={{ width: "62%", height: "100%", background: "rgb(var(--circuit-glow))", boxShadow: "0 0 8px rgb(var(--circuit-glow))" }}></div>
      </div>
    </div>
  );
}

/* -- Studio variant A: standard stacked dropdowns -- */
function StudioStandardRail({ selections, onGenerate }) {
  return (
    <div className="glass-card" style={{ padding: 20, position: "sticky", top: 100 }}>
      <div className="label-overline cyan" style={{ marginBottom: 10 }}>STYLE AXES</div>
      <AxisRow label="Background" value={STUDIO_AXES.background.options[selections.background].label} previewSlot={`axis-bg-${selections.background}`} />
      <AxisRow label="Composition" value={STUDIO_AXES.composition.options[selections.composition].label} previewSlot={`axis-comp-${selections.composition}`} />
      <AxisRow label="Camera angle" value={STUDIO_AXES.angle.options[selections.angle].label} previewSlot={`axis-angle-${selections.angle}`} />
      <AxisRow label="Lighting" value={STUDIO_AXES.lighting.options[selections.lighting].label} previewSlot={`axis-light-${selections.lighting}`} />

      <div className="divider" style={{ margin: "18px 0" }}></div>

      <div className="between" style={{ marginBottom: 14 }}>
        <span className="label-overline muted">Variations</span>
        <div className="row gap-8" style={{ alignItems: "center" }}>
          <button className="btn-ghost" style={{
            width: 28, height: 28, borderRadius: 8, padding: 0,
            background: "rgb(var(--basalt-bright) / 0.4)", border: "1px solid var(--border)",
            display: "flex", alignItems: "center", justifyContent: "center", color: "rgb(var(--text))",
          }}><Icon name="minus" size={12} /></button>
          <span style={{ fontFamily: "var(--font-inter)", fontWeight: 700, fontSize: "1.1rem", minWidth: 20, textAlign: "center" }}>4</span>
          <button style={{
            width: 28, height: 28, borderRadius: 8, padding: 0,
            background: "rgb(var(--basalt-bright) / 0.4)", border: "1px solid var(--border)",
            display: "flex", alignItems: "center", justifyContent: "center", color: "rgb(var(--text))", cursor: "pointer",
          }}><Icon name="plus" size={12} /></button>
        </div>
      </div>

      <button className="btn btn-cyan block lg" onClick={onGenerate}>
        <Icon name="sparkles" size={14} /> Generate — 4 credits
      </button>
      <p className="muted text-xs" style={{ textAlign: "center", marginTop: 10, marginBottom: 0 }}>
        Out of credits? <span className="fg-cyan">Top up →</span>
      </p>
    </div>
  );
}

/* -- Studio variant B: visual swatch grid -- */
function StudioSwatchRail({ selections, onGenerate }) {
  return (
    <div className="glass-card" style={{ padding: 20, position: "sticky", top: 100 }}>
      <div className="label-overline cyan" style={{ marginBottom: 10 }}>VISUAL CHOOSER</div>
      <SwatchAxis
        label="Background"
        selectedIdx={selections.background}
        options={STUDIO_AXES.background.options.map((o, i) => ({ ...o, slot: `swatch-bg-${i}` }))}
      />
      <SwatchAxis
        label="Composition"
        selectedIdx={selections.composition}
        options={STUDIO_AXES.composition.options.map((o, i) => ({ ...o, slot: `swatch-comp-${i}` }))}
      />
      <SwatchAxis
        label="Lighting"
        selectedIdx={selections.lighting}
        options={STUDIO_AXES.lighting.options.map((o, i) => ({ ...o, slot: `swatch-light-${i}` }))}
      />
      <SwatchAxis
        label="Angle"
        selectedIdx={selections.angle}
        options={STUDIO_AXES.angle.options.map((o, i) => ({ ...o, slot: `swatch-angle-${i}` }))}
      />

      <div className="divider" style={{ margin: "18px 0" }}></div>
      <button className="btn btn-cyan block lg" onClick={onGenerate}>
        <Icon name="sparkles" size={14} /> Generate 4 — 4 credits
      </button>
    </div>
  );
}

/* -- Studio variant C: recipe / camera-dial -- */
function StudioRecipeRail({ selections, onGenerate }) {
  return (
    <div className="col gap-16" style={{ position: "sticky", top: 100 }}>
      {/* The "recipe card" */}
      <div className="bedrock-card" style={{
        padding: 24,
        border: "1px solid rgb(var(--circuit-glow) / 0.3)",
        position: "relative", overflow: "hidden",
      }}>
        <div className="between" style={{ marginBottom: 16 }}>
          <span className="label-overline cyan">RECIPE · 003</span>
          <span className="chip">Linkedin pack</span>
        </div>

        {/* Camera-dial style readout */}
        <div className="col gap-14" style={{ fontFamily: "var(--font-jetbrains)", fontSize: 13 }}>
          <DialReadout label="EV" value="Studio · white" hint="background" />
          <DialReadout label="FR" value="Headshot" hint="composition" />
          <DialReadout label="∠" value="Eye level" hint="angle" />
          <DialReadout label="LX" value="Studio softbox" hint="lighting" cyan />
        </div>

        <div className="divider" style={{ margin: "20px 0 16px" }}></div>

        {/* Prompt preview (mono code block) */}
        <div style={{
          padding: 12, borderRadius: 8,
          background: "rgb(var(--basalt-deep) / 0.6)",
          border: "1px solid var(--border)",
          fontFamily: "var(--font-jetbrains)", fontSize: 10.5, lineHeight: 1.55,
          color: "rgb(var(--text) / 0.7)",
        }}>
          <span style={{ color: "rgb(var(--accent-red))" }}>$ </span>
          <span style={{ color: "rgb(var(--circuit-glow))" }}>render</span>{" "}
          --subject={"<you>"} \<br/>
          {"  "}--bg=<span className="fg-cyan">studio-white</span> \<br/>
          {"  "}--frame=<span className="fg-cyan">headshot</span> \<br/>
          {"  "}--angle=<span className="fg-cyan">eye-level</span> \<br/>
          {"  "}--light=<span className="fg-cyan">softbox</span>
        </div>
      </div>

      {/* Dial controls */}
      <div className="glass-card" style={{ padding: 20 }}>
        <div className="label-overline muted" style={{ marginBottom: 12 }}>ADJUST DIALS</div>
        <div className="col gap-12">
          <DialControl label="Background" value="Studio · white" max={6} current={1} />
          <DialControl label="Composition" value="Headshot" max={4} current={1} />
          <DialControl label="Angle" value="Eye level" max={4} current={1} />
          <DialControl label="Lighting" value="Studio softbox" max={4} current={1} />
        </div>

        <div className="divider" style={{ margin: "18px 0" }}></div>
        <button className="btn btn-cyan block lg" onClick={onGenerate}>
          <Icon name="play" size={12} /> Run recipe — 4 credits
        </button>
        <button className="btn btn-ghost block sm" style={{ marginTop: 8 }}>
          <Icon name="plus" size={11} /> Save as preset
        </button>
      </div>
    </div>
  );
}

function DialReadout({ label, value, hint, cyan }) {
  return (
    <div className="between" style={{ alignItems: "center" }}>
      <div className="row gap-10" style={{ alignItems: "center" }}>
        <span style={{
          fontFamily: "var(--font-jetbrains)", fontSize: 11, fontWeight: 500,
          color: cyan ? "rgb(var(--circuit-glow))" : "var(--text-muted)",
          minWidth: 22, letterSpacing: "0.06em",
        }}>{label}</span>
        <span style={{ fontFamily: "var(--font-inter)", fontSize: 15, fontWeight: 500 }}>{value}</span>
      </div>
      <span className="label-overline muted" style={{ fontSize: 8 }}>{hint}</span>
    </div>
  );
}

function DialControl({ label, value, max, current }) {
  return (
    <div>
      <div className="between" style={{ marginBottom: 6 }}>
        <span className="label-overline muted" style={{ fontSize: 9 }}>{label}</span>
        <span className="mono" style={{ fontSize: 11, color: "rgb(var(--circuit-glow))" }}>{value}</span>
      </div>
      <div className="row gap-3" style={{ gap: 3 }}>
        {Array.from({ length: max }).map((_, i) => (
          <div key={i} style={{
            flex: 1, height: 6, borderRadius: 2,
            background: i <= current ? "rgb(var(--circuit-glow))" : "rgb(var(--text) / 0.1)",
            boxShadow: i <= current ? "0 0 4px rgb(var(--circuit-glow) / 0.4)" : undefined,
          }}></div>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   SCREEN 6 — RESULTS / DETAIL
   ============================================================ */
function ResultsScreen({ mobile = false, onCta }) {
  return (
    <div className="pics-page">
      <PicsNav authed credits={23} mobile={mobile} current="library" />
      <main style={{
        padding: mobile ? "16px 20px 40px" : "24px 32px 60px",
        maxWidth: 1400, margin: "0 auto",
      }}>
        {/* breadcrumb */}
        <div className="row gap-8" style={{ alignItems: "center", color: "var(--text-muted)", marginBottom: 18, fontSize: 11, fontFamily: "var(--font-jetbrains)", textTransform: "uppercase", letterSpacing: "0.12em" }}>
          <a className="pics-nav-link">Studio</a>
          <Icon name="chevron-right" size={12} />
          <a className="pics-nav-link">Session · feb 14</a>
          <Icon name="chevron-right" size={12} />
          <span className="fg-cyan">Gen #0142</span>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "1.4fr 1fr",
          gap: 24,
        }}>
          {/* HERO */}
          <div>
            <div style={{
              position: "relative", borderRadius: "var(--radius)",
              overflow: "hidden", aspectRatio: "4/5",
              border: "1px solid var(--border)",
              boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
            }}>
              <image-slot
                id="results-hero"
                style={{ width: "100%", height: "100%" }}
                shape="rounded"
                radius="12"
                placeholder="Drop hero generation"
              ></image-slot>
            </div>
            {/* META STRIP */}
            <div style={{ padding: "18px 0", borderTop: "1px solid var(--border)", marginTop: 18 }}>
              <MetaStrip items={[
                { label: "Background", value: "Studio · white" },
                { label: "Composition", value: "Headshot" },
                { label: "Angle", value: "Eye level" },
                { label: "Lighting", value: "Softbox" },
                { label: "Generated", value: "12 sec ago" },
              ]} />
            </div>
            {/* OTHERS STRIP */}
            <div className="col gap-10" style={{ marginTop: 18 }}>
              <div className="between">
                <span className="label-overline cyan">OTHER GENERATIONS · THIS SESSION</span>
                <a className="pics-nav-link">View all 12 →</a>
              </div>
              <div style={{
                display: "grid",
                gridTemplateColumns: "repeat(6, 1fr)",
                gap: 6,
              }}>
                {Array.from({ length: 6 }).map((_, i) => (
                  <PhotoTile key={i} slot={`results-other-${i}`} label="" showActions={false} />
                ))}
              </div>
            </div>
          </div>

          {/* ACTIONS PANEL */}
          <aside>
            <div className="glass-card" style={{ padding: 24, marginBottom: 14 }}>
              <h3 style={{ fontFamily: "var(--font-inter)", fontWeight: 600, fontSize: "1.1rem", margin: "0 0 14px" }}>This one's a keeper.</h3>
              <div className="col gap-10">
                <button className="btn btn-primary block lg">
                  <Icon name="download" size={14} /> Download HD
                </button>
                <button className="btn btn-outline block">
                  <Icon name="share" size={14} /> Share — copy link
                </button>
                <div className="row gap-10" style={{ marginTop: 4 }}>
                  <button className="btn btn-ghost flex-1 sm"><Icon name="star" size={11} /> Save</button>
                  <button className="btn btn-ghost flex-1 sm"><Icon name="x" size={11} /> Hide</button>
                </div>
              </div>
              <div style={{
                marginTop: 16, padding: 12, borderRadius: 8,
                background: "rgb(var(--basalt-bright) / 0.3)",
                border: "1px solid var(--border)",
              }}>
                <div className="row gap-10" style={{ alignItems: "center", marginBottom: 8 }}>
                  <Icon name="info" size={13} />
                  <span className="label-overline muted">SHARE LINK</span>
                </div>
                <p style={{ margin: 0, fontSize: 11, lineHeight: 1.5, color: "rgb(var(--text) / 0.7)" }}>
                  Public viewer-only page. Download requires sign-in.
                </p>
              </div>
            </div>

            {/* TWEAK PANEL */}
            <div className="bedrock-card" style={{ padding: 24 }}>
              <div className="between" style={{ marginBottom: 14 }}>
                <h3 style={{ fontFamily: "var(--font-inter)", fontWeight: 600, fontSize: "1.05rem", margin: 0 }}>Try a tweak</h3>
                <span className="chip cyan">1 credit / variant</span>
              </div>
              <p style={{ fontSize: 12.5, lineHeight: 1.55, color: "rgb(var(--text) / 0.7)", margin: "0 0 16px" }}>
                Same model. Change one dial. Regenerate.
              </p>
              <div className="col gap-10" style={{ marginBottom: 16 }}>
                <CompactAxis label="Background" value="Studio · white" tweak />
                <CompactAxis label="Composition" value="Headshot" />
                <CompactAxis label="Angle" value="Eye level" />
                <CompactAxis label="Lighting" value="Softbox" />
              </div>
              <button className="btn btn-cyan block" onClick={onCta}>
                <Icon name="refresh" size={12} /> Regenerate with tweak
              </button>
            </div>
          </aside>
        </div>
      </main>
      <PicsFooter />
    </div>
  );
}

function CompactAxis({ label, value, tweak }) {
  return (
    <div className="between" style={{
      padding: "10px 12px", borderRadius: 8,
      background: tweak ? "rgb(var(--accent-red) / 0.08)" : "rgb(var(--basalt-bright) / 0.3)",
      border: tweak ? "1px solid rgb(var(--accent-red) / 0.3)" : "1px solid var(--border)",
    }}>
      <div className="col gap-2">
        <span className="label-overline muted" style={{ fontSize: 9 }}>{label}</span>
        <span style={{ fontFamily: "var(--font-inter)", fontSize: 13, fontWeight: 500 }}>{value}</span>
      </div>
      <div className="row gap-6" style={{ alignItems: "center" }}>
        {tweak && <span className="chip red" style={{ padding: "3px 8px", fontSize: 9 }}>Changed</span>}
        <button className="btn-ghost" style={{
          width: 24, height: 24, borderRadius: 6, padding: 0, background: "transparent", border: "1px solid var(--border)",
          display: "flex", alignItems: "center", justifyContent: "center", color: "rgb(var(--text))",
        }}><Icon name="chevron-down" size={11} /></button>
      </div>
    </div>
  );
}

/* ============================================================
   SCREEN 7 — BILLING
   ============================================================ */
function BillingScreen({ mobile = false }) {
  return (
    <div className="pics-page">
      <PicsNav authed credits={23} mobile={mobile} current="billing" />
      <main style={{
        padding: mobile ? "16px 20px 40px" : "24px 64px 60px",
        maxWidth: 1200, margin: "0 auto",
      }}>
        <div className="topic cyan">Account · Credits</div>
        <h1 className="pics-h1 smaller">Credits & subscription<span className="dot">.</span></h1>

        {/* BALANCE */}
        <div className="bedrock-card" style={{
          padding: 28, marginTop: 32, marginBottom: 32,
          display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr 1fr", gap: 24,
          alignItems: "center",
        }}>
          <div>
            <div className="label-overline muted" style={{ marginBottom: 8 }}>CURRENT BALANCE</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
              <span style={{
                fontFamily: "var(--font-inter)", fontWeight: 900, fontSize: "3.6rem",
                letterSpacing: "-0.04em", lineHeight: 1,
                color: "rgb(var(--circuit-glow))",
                textShadow: "0 0 24px rgb(var(--circuit-glow) / 0.3)",
              }}>23</span>
              <span className="muted text-sm">credits</span>
            </div>
            <div className="row gap-10" style={{ marginTop: 12, alignItems: "center" }}>
              <span className="chip lavender">PRO · active</span>
              <span className="muted text-xs">Renews May 28</span>
            </div>
          </div>
          <div className="col gap-10">
            <div className="between">
              <span className="muted text-xs">Used this month</span>
              <span className="mono fg-cyan" style={{ fontSize: 12 }}>27 / 50</span>
            </div>
            <div style={{ height: 6, borderRadius: 3, background: "rgb(var(--text) / 0.06)", overflow: "hidden" }}>
              <div style={{ width: "54%", height: "100%", background: "rgb(var(--circuit-glow))", boxShadow: "0 0 8px rgb(var(--circuit-glow) / 0.4)" }}></div>
            </div>
            <div className="between" style={{ marginTop: 10 }}>
              <span className="muted text-xs">Models trained · lifetime</span>
              <span className="mono" style={{ fontSize: 12 }}>2</span>
            </div>
            <div className="between">
              <span className="muted text-xs">Generations · lifetime</span>
              <span className="mono" style={{ fontSize: 12 }}>148</span>
            </div>
          </div>
          <div className="col gap-8" style={{ alignItems: mobile ? "flex-start" : "flex-end" }}>
            <button className="btn btn-cyan">Top up — $30</button>
            <button className="pics-nav-link" style={{ fontSize: 10 }}>Manage subscription in Stripe →</button>
          </div>
        </div>

        {/* PRODUCTS */}
        <div className="between" style={{ marginBottom: 14, flexWrap: "wrap", gap: 10 }}>
          <h2 className="pics-h2" style={{ fontSize: "1.4rem" }}>Top up or upgrade<span className="dot">.</span></h2>
          <div className="row gap-6">
            <button className="chip cyan">One-time</button>
            <button className="chip">Monthly</button>
          </div>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)", gap: 16,
        }}>
          <BillingCard
            name="Credit pack"
            price="$30"
            cadence="one-time"
            features={["1 LoRA training", "30 generations", "HD downloads", "Share links"]}
            cta="Buy pack"
          />
          <BillingCard
            featured
            name="Pro monthly"
            price="$25"
            cadence="/ month"
            features={["50 fresh generations / mo", "Unlimited regenerations", "Quarterly model refresh", "Priority queue"]}
            cta="Stay on Pro"
            ribbon="Current"
          />
          <BillingCard
            name="Bulk pack"
            price="$80"
            cadence="one-time"
            features={["4 LoRA-equivalents", "150 generations", "Giftable to others", "Best $/credit value"]}
            cta="Buy bulk"
            badge="Best value"
          />
        </div>

        {/* USAGE HISTORY */}
        <div style={{ marginTop: 40 }}>
          <div className="between" style={{ marginBottom: 14, flexWrap: "wrap", gap: 10 }}>
            <h3 style={{ fontFamily: "var(--font-inter)", fontWeight: 600, fontSize: "1.2rem", margin: 0 }}>Recent activity</h3>
            <a className="pics-nav-link">Export CSV →</a>
          </div>
          <div className="bedrock-card" style={{ overflow: "hidden" }}>
            <div style={{
              display: "grid",
              gridTemplateColumns: mobile ? "1fr 70px 60px" : "100px 1fr 140px 80px 80px",
              padding: "12px 20px",
              borderBottom: "1px solid var(--border)",
              background: "rgb(var(--basalt-bright) / 0.3)",
              fontFamily: "var(--font-jetbrains)", fontSize: 9, textTransform: "uppercase", letterSpacing: "0.15em",
              color: "var(--text-muted)",
            }}>
              {!mobile && <div>Date</div>}
              <div>Action</div>
              {!mobile && <div>Detail</div>}
              <div style={{ textAlign: "right" }}>Credits</div>
              <div style={{ textAlign: "right" }}>Out</div>
            </div>
            {[
              { date: "May 28 · 14:02", action: "Generation", detail: "Studio · Headshot · Eye · Softbox", credits: -4, thumb: true },
              { date: "May 28 · 13:51", action: "Generation", detail: "Outdoor · 3/4 · Low · Golden hour", credits: -4, thumb: true },
              { date: "May 28 · 09:14", action: "Top-up",     detail: "Pro renewal",                          credits: +50, thumb: false },
              { date: "May 22 · 18:33", action: "Model refresh", detail: "Refreshed with 22 new photos",       credits: -10, thumb: false },
              { date: "May 04 · 12:01", action: "Training", detail: "Initial LoRA · v1",                       credits: -20, thumb: false },
            ].map((row, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: mobile ? "1fr 70px 60px" : "100px 1fr 140px 80px 80px",
                padding: "14px 20px",
                borderTop: i === 0 ? undefined : "1px solid var(--border)",
                alignItems: "center", fontSize: 13,
                background: i % 2 === 0 ? "transparent" : "rgb(var(--basalt-bright) / 0.18)",
              }}>
                {!mobile && <div className="mono muted" style={{ fontSize: 11 }}>{row.date}</div>}
                <div className="row gap-10" style={{ alignItems: "center" }}>
                  <span className={"chip " + (row.action === "Top-up" ? "teal" : row.action === "Training" ? "lavender" : row.action === "Model refresh" ? "gold" : "")}
                    style={{ padding: "3px 9px", fontSize: 9 }}>
                    {row.action}
                  </span>
                  {mobile && <span className="muted text-xs">{row.detail}</span>}
                </div>
                {!mobile && <div className="muted" style={{ fontSize: 12 }}>{row.detail}</div>}
                <div style={{ textAlign: "right", color: row.credits > 0 ? "rgb(var(--accent-teal))" : "rgb(var(--text))", fontFamily: "var(--font-jetbrains)" }}>
                  {row.credits > 0 ? "+" : ""}{row.credits}
                </div>
                <div style={{ textAlign: "right" }}>
                  {row.thumb && <div style={{ width: 28, height: 28, borderRadius: 4, background: "rgb(var(--basalt-bright))", marginLeft: "auto", border: "1px solid var(--border)" }}></div>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>
      <PicsFooter />
    </div>
  );
}

function BillingCard({ name, price, cadence, features, cta, featured, ribbon, badge }) {
  return (
    <div className={featured ? "bedrock-card" : "glass-card"} style={{
      padding: 24, position: "relative", overflow: "hidden",
      border: featured ? "1px solid rgb(var(--circuit-glow) / 0.45)" : undefined,
      boxShadow: featured ? "0 0 32px rgb(var(--circuit-glow) / 0.1)" : undefined,
    }}>
      {featured && (
        <div style={{
          position: "absolute", top: 0, left: 0, right: 0, height: 2,
          background: "rgb(var(--circuit-glow))",
        }}></div>
      )}
      {ribbon && (
        <div style={{
          position: "absolute", top: 16, right: 16,
        }}>
          <span className="chip cyan" style={{ fontSize: 9 }}>● {ribbon}</span>
        </div>
      )}
      {badge && (
        <div style={{ position: "absolute", top: 16, right: 16 }}>
          <span className="chip gold" style={{ fontSize: 9 }}>{badge}</span>
        </div>
      )}
      <h3 style={{ fontFamily: "var(--font-inter)", fontWeight: 600, fontSize: "1.2rem", margin: "0 0 6px" }}>{name}</h3>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 18 }}>
        <span style={{ fontFamily: "var(--font-inter)", fontWeight: 900, fontSize: "2.4rem", letterSpacing: "-0.03em" }}>{price}</span>
        <span className="muted text-sm">{cadence}</span>
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: "0 0 20px", display: "flex", flexDirection: "column", gap: 8 }}>
        {features.map(f => (
          <li key={f} className="row gap-10" style={{ alignItems: "center", fontSize: "0.85rem" }}>
            <Icon name="check" size={13} strokeWidth={2} />
            <span>{f}</span>
          </li>
        ))}
      </ul>
      <button className={"btn block " + (featured ? "btn-cyan" : "btn-outline")}>{cta}</button>
    </div>
  );
}

Object.assign(window, {
  StudioScreen, StudioStreamingTile, StudioStandardRail, StudioSwatchRail, StudioRecipeRail,
  DialReadout, DialControl, ResultsScreen, CompactAxis, BillingScreen, BillingCard, STUDIO_AXES,
});