/* global React, Icon, PicsBackdrop, PicsNav, PicsFooter, ProgressBar,
   StarRating, PhotoPlaceholder, PhotoTile, AxisRow, SwatchAxis,
   MetaStrip, IconBadge */
/* ============================================================
   .pics — screens 1-4 (Landing, Connect, Select, Train)
   Each screen takes optional props for variants.
   Components are pure presentational; interaction state is owned
   by the prototype shell.
   ============================================================ */

/* ============================================================
   SCREEN 1 — LANDING
   ============================================================ */
function LandingScreen({ variant = "default", mobile = false, onCta }) {
  // variants: 'default' (text-left 60/40 + gallery right)
  //           'gallery-led' (full-bleed gallery hero, text overlay bottom)
  //           'two-col-flush' (50/50 with edge-to-edge gallery)
  return (
    <div className="pics-page">
      <PicsNav mobile={mobile} />

      {/* HERO */}
      <section style={{
        padding: mobile ? "32px 20px 48px" : "72px 64px 80px",
        position: "relative",
      }}>
        {variant === "default" && <LandingHeroDefault mobile={mobile} onCta={onCta} />}
        {variant === "gallery-led" && <LandingHeroGalleryLed mobile={mobile} onCta={onCta} />}
        {variant === "two-col-flush" && <LandingHeroFlush mobile={mobile} onCta={onCta} />}
      </section>

      {/* HOW IT WORKS */}
      <section style={{ padding: mobile ? "32px 20px" : "60px 64px", position: "relative" }}>
        <div className="topic cyan">Section · 02 / How it works</div>
        <h2 className="pics-h2" style={{ marginBottom: 36 }}>Three steps, no prompts<span className="dot">.</span></h2>
        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)",
          gap: 18,
        }}>
          {[
            { n: "01", title: "Connect Photos", body: "Sign in with Google Photos. We never touch anything outside your library." },
            { n: "02", title: "Train your model", body: "We pick the 20 best photos. ~12 minutes of training. Email when done." },
            { n: "03", title: "Generate anywhere", body: "Pick a background, composition, and lighting. Iterate by tweaking one dial." },
          ].map((s) => (
            <div key={s.n} className="glass-card" style={{ padding: 24 }}>
              <div className="label-overline cyan" style={{ marginBottom: 14, fontSize: 10 }}>STEP · {s.n}</div>
              <h3 style={{ fontFamily: "var(--font-inter)", fontWeight: 600, fontSize: "1.2rem", margin: "0 0 8px" }}>{s.title}</h3>
              <p style={{ fontSize: "0.9rem", lineHeight: 1.55, color: "rgb(var(--text) / 0.65)", margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* SAMPLE STRIP (12-image marquee) */}
      <section style={{ padding: mobile ? "32px 0" : "60px 0", position: "relative" }}>
        <div style={{ padding: mobile ? "0 20px" : "0 64px", marginBottom: 24 }}>
          <div className="topic">Section · 03 / Outputs</div>
          <h2 className="pics-h2">Real photos. Curated styles<span className="dot">.</span></h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "repeat(2, 1fr)" : "repeat(6, 1fr)",
          gap: 8,
          padding: mobile ? "0 20px" : "0 32px",
        }}>
          {Array.from({ length: mobile ? 6 : 12 }).map((_, i) => (
            <PhotoTile key={i}
              slot={`landing-sample-${i}`}
              label={["Studio", "Outdoor", "Golden", "Editorial", "Headshot", "B&W"][i % 6]}
              showActions={false}
            />
          ))}
        </div>
      </section>

      {/* PRICING */}
      <section style={{ padding: mobile ? "40px 20px" : "80px 64px", position: "relative" }}>
        <div className="topic">Section · 04 / Pricing</div>
        <h2 className="pics-h2">Pay for the pack, not the plan<span className="dot">.</span></h2>
        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "1fr 1fr",
          gap: 18,
          marginTop: 36,
          maxWidth: 880,
        }}>
          {/* CREDIT PACK (highlighted) */}
          <div className="bedrock-card" style={{
            padding: 28,
            border: "1px solid rgb(var(--circuit-glow) / 0.45)",
            position: "relative", overflow: "hidden",
            boxShadow: "0 0 32px rgb(var(--circuit-glow) / 0.12)",
          }}>
            <div style={{
              position: "absolute", top: 0, left: 0, right: 0, height: 2,
              background: "rgb(var(--circuit-glow))",
            }}></div>
            <div className="between" style={{ marginBottom: 18 }}>
              <span className="label-overline cyan">Most popular</span>
              <span className="chip cyan">One-time</span>
            </div>
            <h3 style={{ fontFamily: "var(--font-inter)", fontWeight: 600, fontSize: "1.4rem", margin: "0 0 4px" }}>Credit pack</h3>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8, margin: "0 0 18px" }}>
              <span style={{ fontFamily: "var(--font-inter)", fontWeight: 900, fontSize: "3rem", letterSpacing: "-0.04em" }}>$30</span>
              <span className="muted" style={{ fontSize: "0.85rem" }}>one-time</span>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px", display: "flex", flexDirection: "column", gap: 10 }}>
              {["1 LoRA training", "30 stylized generations", "Iterate forever (1 credit / variant)", "HD downloads + share links"].map(f => (
                <li key={f} className="row gap-10" style={{ alignItems: "center", fontSize: "0.9rem" }}>
                  <Icon name="check" size={14} strokeWidth={2} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <a className="btn btn-cyan block lg">Get started — $30</a>
          </div>

          {/* PRO MONTHLY */}
          <div className="glass-card" style={{ padding: 28 }}>
            <div className="between" style={{ marginBottom: 18 }}>
              <span className="label-overline muted">Best for creators</span>
              <span className="chip">Subscription</span>
            </div>
            <h3 style={{ fontFamily: "var(--font-inter)", fontWeight: 600, fontSize: "1.4rem", margin: "0 0 4px" }}>Pro monthly</h3>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8, margin: "0 0 18px" }}>
              <span style={{ fontFamily: "var(--font-inter)", fontWeight: 900, fontSize: "3rem", letterSpacing: "-0.04em" }}>$25</span>
              <span className="muted" style={{ fontSize: "0.85rem" }}>/ month</span>
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px", display: "flex", flexDirection: "column", gap: 10 }}>
              {["50 fresh generations / mo", "Unlimited iteration on owned LoRAs", "Refresh model quarterly", "Priority queue + early styles"].map(f => (
                <li key={f} className="row gap-10" style={{ alignItems: "center", fontSize: "0.9rem" }}>
                  <Icon name="check" size={14} strokeWidth={2} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <a className="btn btn-outline block lg">Start Pro</a>
          </div>
        </div>
      </section>

      {/* SOCIAL PROOF COUNTER */}
      <section style={{ padding: mobile ? "32px 20px" : "60px 64px", position: "relative" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)",
          gap: 1,
          background: "var(--border)",
          border: "1px solid var(--border)",
          borderRadius: "var(--radius)",
          overflow: "hidden",
        }}>
          {[
            { v: "1,247", l: "Models trained" },
            { v: "38,902", l: "Photos generated" },
            { v: "12 sec", l: "Avg generation" },
            { v: "4.6 / 5", l: "Mean output rating" },
          ].map(m => (
            <div key={m.l} style={{
              padding: "28px 20px", textAlign: "center",
              background: "rgb(var(--basalt-deep))"
            }}>
              <div style={{
                fontFamily: "var(--font-inter)", fontWeight: 900, fontSize: "2rem",
                letterSpacing: "-0.03em", lineHeight: 1,
                background: "linear-gradient(180deg, rgb(var(--text)) 0%, rgb(var(--text) / 0.55) 100%)",
                WebkitBackgroundClip: "text", backgroundClip: "text",
                WebkitTextFillColor: "transparent",
              }}>{m.v}</div>
              <div className="label-overline muted" style={{ marginTop: 10, fontSize: 10 }}>{m.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: mobile ? "32px 20px 60px" : "60px 64px 80px", position: "relative" }}>
        <div className="topic cyan">Section · 05 / FAQ</div>
        <h2 className="pics-h2">Things you might ask<span className="dot">.</span></h2>
        <div style={{ maxWidth: 720, marginTop: 36, display: "flex", flexDirection: "column", gap: 1 }}>
          {[
            { q: "Where do my photos go?", a: "Encrypted at rest in our EU+US storage. Raw uploads auto-delete 30 days after your model trains. Delete on demand from settings — purged within 7 days." },
            { q: "Do I need to upload a zip?", a: "No. You sign in with Google Photos and we auto-pick 20 face photos. Review them, swap any you don't love, then we train." },
            { q: "How long does training take?", a: "Around 12 minutes. You can close the tab — we'll email you when it's done." },
            { q: "What if the photos are mid?", a: "Auto-regenerate is free for any output you rate 1-2 stars. We tweak the prompt scaffolding behind the scenes." },
          ].map((f, i) => (
            <div key={f.q} style={{
              padding: "18px 20px",
              borderTop: "1px solid var(--border)",
              borderBottom: i === 3 ? "1px solid var(--border)" : undefined,
            }}>
              <div className="between" style={{ alignItems: "flex-start" }}>
                <h4 style={{ fontFamily: "var(--font-inter)", fontWeight: 500, fontSize: "0.98rem", margin: 0 }}>{f.q}</h4>
                <Icon name="plus" size={16} />
              </div>
              {i === 0 && (
                <p style={{ fontSize: "0.88rem", lineHeight: 1.6, color: "rgb(var(--text) / 0.65)", margin: "12px 0 0" }}>{f.a}</p>
              )}
            </div>
          ))}
        </div>
      </section>

      <PicsFooter />
    </div>
  );
}

/* -- Hero variant: default (text-left 60/40) -- */
function LandingHeroDefault({ mobile, onCta }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: mobile ? "1fr" : "1.2fr 1fr",
      gap: 48,
      alignItems: "center",
    }}>
      <div>
        <div className="topic">Section · 01 / aaas.pics</div>
        <h1 className="pics-h1">
          Your personal<br/>photo studio<span className="dot">.</span>
        </h1>
        <p className="pics-sub" style={{ fontSize: mobile ? "1rem" : "1.15rem" }}>
          Connect Google Photos. We pick the 20 best. You pick the style.
          Get a polished photo library in roughly fifteen minutes.
        </p>
        <div className="row gap-12" style={{ marginBottom: 24, flexWrap: "wrap" }}>
          <button className="btn btn-primary lg" onClick={onCta}>
            <Icon name="google" size={16} /> Connect Google Photos
          </button>
          <button className="btn btn-outline lg">See sample outputs</button>
        </div>
        <div className="row gap-12" style={{ alignItems: "center", fontSize: "0.8rem", color: "rgb(var(--text) / 0.55)" }}>
          <span className="status-dot dual"></span>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.1em" }}>
            <span style={{ textTransform: "uppercase" }}>1,247 models trained</span> · <span className="fg-cyan">10 active now</span>
          </span>
        </div>
      </div>
      {!mobile && (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
          <PhotoTile slot="landing-hero-1" label="Studio · headshot" showActions={false} />
          <PhotoTile slot="landing-hero-2" label="Golden · 3/4" showActions={false} />
          <PhotoTile slot="landing-hero-3" label="Editorial · B&W" showActions={false} />
          <PhotoTile slot="landing-hero-4" label="Outdoor · soft" showActions={false} />
        </div>
      )}
    </div>
  );
}

/* -- Hero variant: gallery-led (full-bleed grid, text overlays) -- */
function LandingHeroGalleryLed({ mobile, onCta }) {
  return (
    <div style={{ position: "relative" }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: mobile ? "repeat(2, 1fr)" : "repeat(8, 1fr)",
        gap: 6,
        marginBottom: 32,
      }}>
        {Array.from({ length: mobile ? 4 : 8 }).map((_, i) => (
          <PhotoTile key={i} slot={`hero-led-${i}`}
            label={["Studio", "Golden", "Editorial", "Outdoor", "Headshot", "Profile", "Side-lit", "B&W"][i]}
            showActions={false}
          />
        ))}
      </div>
      <div style={{ maxWidth: 800 }}>
        <div className="topic">Section · 01 / aaas.pics</div>
        <h1 className="pics-h1">
          A photo studio in your pocket<span className="dot">.</span>
        </h1>
        <p className="pics-sub" style={{ fontSize: mobile ? "1rem" : "1.15rem", maxWidth: 620 }}>
          Train your face. Pick a style. Generate a library of professional photos
          without the studio, the camera, or the prompt engineering.
        </p>
        <div className="row gap-12" style={{ flexWrap: "wrap" }}>
          <button className="btn btn-cyan lg" onClick={onCta}>
            <Icon name="google" size={16} /> Connect Google Photos
          </button>
          <button className="btn btn-ghost lg">$30 · See pricing</button>
        </div>
      </div>
    </div>
  );
}

/* -- Hero variant: flush 50/50 with edge gallery -- */
function LandingHeroFlush({ mobile, onCta }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: mobile ? "1fr" : "1fr 1fr",
      gap: mobile ? 32 : 48,
      alignItems: "center",
    }}>
      <div>
        <div className="topic">Section · 01 / aaas.pics</div>
        <h1 className="pics-h1">
          Headshots from<br/>your phone library<span className="dot">.</span>
        </h1>
        <p className="pics-sub" style={{ fontSize: mobile ? "1rem" : "1.15rem" }}>
          No zip uploads. No prompt engineering. We pick 20 photos from Google Photos,
          train a model of just you, then run it through curated style packs.
        </p>
        <div className="row gap-12" style={{ marginBottom: 28, flexWrap: "wrap" }}>
          <button className="btn btn-primary lg" onClick={onCta}>Get started — $30</button>
          <button className="btn btn-outline lg"><Icon name="play" size={12} /> Watch 30s demo</button>
        </div>
        <div className="row gap-20" style={{ paddingTop: 18, borderTop: "1px solid var(--border)" }}>
          <div className="col gap-4">
            <span style={{ fontFamily: "var(--font-inter)", fontWeight: 900, fontSize: "1.3rem", letterSpacing: "-0.02em" }}>12 min</span>
            <span className="label-overline muted" style={{ fontSize: 9 }}>TRAINING</span>
          </div>
          <div className="col gap-4">
            <span style={{ fontFamily: "var(--font-inter)", fontWeight: 900, fontSize: "1.3rem", letterSpacing: "-0.02em", color: "rgb(var(--circuit-glow))" }}>4.6 ★</span>
            <span className="label-overline muted" style={{ fontSize: 9 }}>MEAN RATING</span>
          </div>
          <div className="col gap-4">
            <span style={{ fontFamily: "var(--font-inter)", fontWeight: 900, fontSize: "1.3rem", letterSpacing: "-0.02em" }}>$30</span>
            <span className="label-overline muted" style={{ fontSize: 9 }}>1 PACK</span>
          </div>
        </div>
      </div>
      {!mobile && (
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6,
        }}>
          {Array.from({ length: 9 }).map((_, i) => (
            <PhotoTile key={i} slot={`hero-flush-${i}`}
              label={["Studio","Outdoor","Golden","Editorial","Side-lit","B&W","Soft","Dramatic","Profile"][i]}
              showActions={false}
            />
          ))}
        </div>
      )}
    </div>
  );
}

/* ============================================================
   SCREEN 2 — CONNECT
   ============================================================ */
function ConnectScreen({ mobile = false, onCta }) {
  return (
    <div className="pics-page">
      <PicsNav mobile={mobile} />
      <main style={{
        padding: mobile ? "20px 20px 40px" : "40px 64px 80px",
        maxWidth: 1100, margin: "0 auto",
      }}>
        <ProgressBar current={1} steps={["Connect", "Review", "Train"]} />

        <div style={{ marginTop: 32 }}>
          <div className="topic cyan">Step · 01 / Connect</div>
          <h1 className="pics-h1 smaller">Connect your Google Photos<span className="dot">.</span></h1>
          <p className="pics-sub">
            We'll pick the 20 best photos for your model. You review before anything is trained.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "1.2fr 1fr",
          gap: 24,
          marginTop: 36,
        }}>
          {/* TRUST */}
          <div className="glass-card" style={{ padding: 28 }}>
            <div className="label-overline cyan" style={{ marginBottom: 16 }}>WHAT YOU'RE AGREEING TO</div>
            <div style={{
              display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 18,
            }}>
              <div>
                <div className="row gap-8" style={{ alignItems: "center", marginBottom: 10 }}>
                  <span style={{ color: "rgb(var(--accent-teal))" }}><Icon name="check" size={14} strokeWidth={2} /></span>
                  <span className="label-overline" style={{ color: "rgb(var(--accent-teal))" }}>WE READ</span>
                </div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: "0.85rem", lineHeight: 1.5 }}>
                  <li>Photos in your library that include faces</li>
                  <li>Date and camera metadata (for selection)</li>
                  <li>Low-res thumbnails (during selection)</li>
                </ul>
              </div>
              <div>
                <div className="row gap-8" style={{ alignItems: "center", marginBottom: 10 }}>
                  <span style={{ color: "rgb(var(--accent-red))" }}><Icon name="x" size={14} strokeWidth={2} /></span>
                  <span className="label-overline" style={{ color: "rgb(var(--accent-red))" }}>WE DON'T READ</span>
                </div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: "0.85rem", lineHeight: 1.5 }}>
                  <li>Messages, contacts, calendar</li>
                  <li>Location data</li>
                  <li>Photos without faces (landscapes, screenshots)</li>
                </ul>
              </div>
            </div>
            <div style={{
              marginTop: 24, padding: 14, borderRadius: "var(--radius)",
              background: "rgb(var(--basalt-bright) / 0.4)",
              border: "1px solid var(--border)",
              display: "flex", gap: 10, alignItems: "flex-start",
            }}>
              <span style={{ color: "rgb(var(--circuit-glow))", marginTop: 2 }}><Icon name="shield" size={14} /></span>
              <p style={{ fontSize: "0.8rem", lineHeight: 1.5, margin: 0, color: "rgb(var(--text) / 0.7)" }}>
                We use the minimum required scope (<code className="mono">photoslibrary.readonly</code>).
                Revoke access anytime in your Google account. Read our privacy policy →
              </p>
            </div>
          </div>

          {/* ACTION */}
          <div className="bedrock-card" style={{ padding: 28, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div>
              <div className="label-overline muted" style={{ marginBottom: 16 }}>READY?</div>
              <p style={{ fontSize: "0.95rem", lineHeight: 1.55, marginTop: 0 }}>
                Continue with your Google account.
                You'll see Google's consent screen next — we never see your password.
              </p>
            </div>
            <button className="btn btn-google block lg" onClick={onCta}>
              <Icon name="google" size={18} /> Continue with Google Photos
            </button>
            <p style={{
              marginTop: 14, fontSize: "0.72rem", color: "rgb(var(--text) / 0.5)",
              lineHeight: 1.5,
            }}>
              By continuing you agree to our{" "}
              <span style={{ color: "rgb(var(--circuit-glow))" }}>Terms</span> and{" "}
              <span style={{ color: "rgb(var(--circuit-glow))" }}>Privacy Policy</span>,
              including processing of biometric features for personal photo generation.
            </p>
          </div>
        </div>

        {/* PRIVACY-BY-DESIGN STRIP */}
        <div style={{
          marginTop: 32, display: "grid",
          gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)", gap: 14,
        }}>
          {[
            { icon: "lock", title: "Encrypted at rest", body: "Customer-managed keys. EU + US datacenter, region of your choice." },
            { icon: "refresh", title: "Auto-deleted", body: "Raw uploads purged 30 days after training completes." },
            { icon: "eye-off", title: "Never shared", body: "Your LoRA is yours alone. No cross-user model sharing, ever." },
          ].map(b => (
            <div key={b.title} style={{ padding: 18, borderTop: "1px solid var(--border)" }}>
              <div className="row gap-10" style={{ alignItems: "center", color: "rgb(var(--circuit-glow))", marginBottom: 8 }}>
                <Icon name={b.icon} size={16} />
                <span className="label-overline">{b.title}</span>
              </div>
              <p style={{ fontSize: "0.85rem", lineHeight: 1.5, margin: 0, color: "rgb(var(--text) / 0.7)" }}>{b.body}</p>
            </div>
          ))}
        </div>
      </main>
      <PicsFooter />
    </div>
  );
}

/* ============================================================
   SCREEN 3 — SELECT (auto-select review)
   ============================================================ */
function SelectScreen({ mobile = false, density = "default", onCta }) {
  // density variants: 'default' 5x4, 'dense' 6x4 (smaller tiles + side preview),
  // 'editorial' 4x5 with larger tiles + metadata on hover
  const cols = density === "dense" ? (mobile ? 3 : 6) : density === "editorial" ? (mobile ? 2 : 4) : (mobile ? 2 : 5);
  const rows = density === "dense" ? (mobile ? 7 : 4) : density === "editorial" ? (mobile ? 10 : 5) : (mobile ? 10 : 4);
  const total = cols * rows;
  const scores = [5,5,4,5,4,5,3,4,5,4,5,5,3,4,5,4,5,4,3,4,4,5,4,3];

  return (
    <div className="pics-page">
      <PicsNav mobile={mobile} />
      <main style={{ padding: mobile ? "20px 20px 40px" : "32px 48px 60px", maxWidth: 1600, margin: "0 auto" }}>
        <ProgressBar current={2} steps={["Connect", "Review", "Train"]} />

        <div className="between" style={{ marginTop: 24, marginBottom: 24, flexWrap: "wrap", gap: 14 }}>
          <div>
            <div className="topic cyan">Step · 02 / Review</div>
            <h1 className="pics-h1 smaller" style={{ marginBottom: 8 }}>Your 20 best photos<span className="dot">.</span></h1>
            <p style={{ fontSize: "0.95rem", color: "rgb(var(--text) / 0.7)", maxWidth: 640, margin: 0 }}>
              We picked these for face clarity, angle variety, and lighting diversity. Swap any tile you don't love.
            </p>
          </div>
          <div className="row gap-10" style={{ flexWrap: "wrap" }}>
            <button className="btn btn-ghost sm"><Icon name="refresh" size={12} /> Reset to auto-pick</button>
            <button className="btn btn-primary" onClick={onCta}>Start training →</button>
          </div>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: density === "editorial" ? "1fr" : (mobile ? "1fr" : "1fr 280px"),
          gap: 20,
        }}>
          {/* GRID */}
          <div style={{
            display: "grid",
            gridTemplateColumns: `repeat(${cols}, 1fr)`,
            gap: density === "dense" ? 6 : 10,
          }}>
            {Array.from({ length: total }).map((_, i) => (
              <PhotoTile
                key={i}
                slot={`select-tile-${i}`}
                label={`#${i+1}`}
                score={scores[i % scores.length]}
                isPicked={i < 18}
                isUser={i === 4 || i === 11}
                showActions={density !== "dense"}
                showX={false}
              />
            ))}
          </div>

          {/* SIDE PREVIEW (default + dense only) */}
          {density !== "editorial" && !mobile && (
            <aside className="glass-card" style={{ padding: 20, alignSelf: "flex-start", position: "sticky", top: 100 }}>
              <div className="label-overline cyan" style={{ marginBottom: 14 }}>QUALITY PREVIEW</div>
              <div className="col gap-16">
                <PreviewMeter label="Face clarity" value={92} color="cyan" />
                <PreviewMeter label="Angle diversity" value={78} color="cyan" />
                <PreviewMeter label="Lighting variety" value={64} color="gold" />
                <PreviewMeter label="Date spread" value={86} color="cyan" />
              </div>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
                <div className="label-overline muted" style={{ marginBottom: 10 }}>RECOMMENDATION</div>
                <p style={{ fontSize: "0.85rem", lineHeight: 1.55, margin: 0 }}>
                  Strong set. Consider swapping <span className="fg-cyan">#7</span> for an outdoor angle
                  to boost lighting variety.
                </p>
              </div>
            </aside>
          )}
        </div>
      </main>
      <PicsFooter />
    </div>
  );
}

function PreviewMeter({ label, value, color = "cyan" }) {
  const c = color === "gold" ? "var(--pastel-gold)" : color === "red" ? "var(--accent-red)" : "var(--circuit-glow)";
  return (
    <div>
      <div className="between" style={{ marginBottom: 6 }}>
        <span className="label-overline muted" style={{ fontSize: 9 }}>{label}</span>
        <span className="mono" style={{ fontSize: 10, color: `rgb(${c})` }}>{value}%</span>
      </div>
      <div style={{ height: 4, borderRadius: 2, background: "rgb(var(--text) / 0.06)", position: "relative", overflow: "hidden" }}>
        <div style={{
          position: "absolute", left: 0, top: 0, height: "100%", width: `${value}%`,
          background: `rgb(${c})`, boxShadow: `0 0 8px rgb(${c} / 0.5)`,
        }}></div>
      </div>
    </div>
  );
}

/* ============================================================
   SCREEN 4 — TRAIN (progress)
   ============================================================ */
function TrainScreen({ mobile = false, progress = 47, etaSeconds = 720, onCta }) {
  const r = 100, c = 2 * Math.PI * r;
  const offset = c * (1 - progress / 100);
  const mins = Math.floor(etaSeconds / 60);
  const secs = etaSeconds % 60;
  const stages = [
    { id: "prep",  label: "Preparing photos",  status: "done" },
    { id: "train", label: "Training your model", status: "active" },
    { id: "polish", label: "Final polish", status: "pending" },
  ];

  return (
    <div className="pics-page">
      <PicsNav mobile={mobile} />
      <main style={{ padding: mobile ? "20px 20px 40px" : "32px 64px 80px", maxWidth: 1100, margin: "0 auto" }}>
        <ProgressBar current={3} steps={["Connect", "Review", "Train"]} />

        <div style={{ textAlign: "center", marginTop: 48 }}>
          <div className="topic cyan" style={{ justifyContent: "center" }}>Step · 03 / Training</div>
          <h1 className="pics-h1 smaller">Training your photo model<span className="dot">.</span></h1>
          <p className="pics-sub" style={{ margin: "0 auto 32px" }}>
            We're teaching the model to recognize you across angles and lighting.
            It's safe to close this tab — we'll email when it's done.
          </p>
        </div>

        {/* PROGRESS ARC */}
        <div style={{ display: "flex", justifyContent: "center", marginTop: 24, marginBottom: 32 }}>
          <div className="train-arc">
            <svg viewBox="0 0 240 240">
              <circle className="track" cx="120" cy="120" r={r} />
              <circle className="fill" cx="120" cy="120" r={r}
                strokeDasharray={c} strokeDashoffset={offset} />
            </svg>
            <div className="label">
              <div className="pct">{progress}%</div>
              <div className="label-overline cyan">~{mins}m {secs}s remaining</div>
            </div>
          </div>
        </div>

        {/* STAGES */}
        <div style={{
          display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3, 1fr)", gap: 12,
          maxWidth: 720, margin: "0 auto 40px",
        }}>
          {stages.map((s, i) => (
            <div key={s.id} className="glass-card" style={{
              padding: 16,
              borderColor: s.status === "active" ? "rgb(var(--circuit-glow) / 0.4)" :
                           s.status === "done" ? "rgb(var(--accent-teal) / 0.3)" : undefined,
            }}>
              <div className="row gap-10" style={{ alignItems: "center" }}>
                <span style={{
                  width: 26, height: 26, borderRadius: "50%",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  background: s.status === "done" ? "rgb(var(--accent-teal) / 0.15)" :
                              s.status === "active" ? "rgb(var(--circuit-glow) / 0.15)" :
                              "rgb(var(--text) / 0.05)",
                  color: s.status === "done" ? "rgb(var(--accent-teal))" :
                         s.status === "active" ? "rgb(var(--circuit-glow))" : "var(--text-muted)",
                  flexShrink: 0,
                }}>
                  {s.status === "done" ? <Icon name="check" size={13} strokeWidth={2.2} /> :
                   s.status === "active" ? <span className="status-dot" style={{ animation: "pics-pulse 1.4s ease-in-out infinite" }}></span> :
                   <span className="mono" style={{ fontSize: 10 }}>{`0${i+1}`}</span>}
                </span>
                <div className="col gap-4" style={{ minWidth: 0 }}>
                  <span style={{ fontFamily: "var(--font-inter)", fontWeight: 500, fontSize: "0.92rem" }}>{s.label}</span>
                  <span className="label-overline muted" style={{ fontSize: 9 }}>
                    {s.status === "done" ? "Complete" : s.status === "active" ? "Running" : "Pending"}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* WHILE YOU WAIT — SAMPLE STYLES */}
        <div className="bedrock-card" style={{ padding: mobile ? 18 : 28 }}>
          <div className="between" style={{ marginBottom: 18, flexWrap: "wrap", gap: 12 }}>
            <div>
              <div className="label-overline cyan" style={{ marginBottom: 6 }}>WHILE YOU WAIT</div>
              <h3 style={{ fontFamily: "var(--font-inter)", fontWeight: 600, fontSize: "1.15rem", margin: 0 }}>Style previews from past trainings</h3>
            </div>
            <label className="row gap-10" style={{ alignItems: "center", fontSize: "0.85rem", cursor: "pointer" }}>
              <span style={{
                width: 32, height: 18, borderRadius: 9999,
                background: "rgb(var(--circuit-glow) / 0.4)",
                position: "relative",
              }}>
                <span style={{
                  position: "absolute", top: 2, right: 2,
                  width: 14, height: 14, borderRadius: "50%",
                  background: "rgb(var(--circuit-glow))",
                  boxShadow: "0 0 8px rgb(var(--circuit-glow))",
                }}></span>
              </span>
              <span>Email me when done</span>
            </label>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: mobile ? "repeat(3, 1fr)" : "repeat(6, 1fr)",
            gap: 8,
          }}>
            {Array.from({ length: mobile ? 6 : 12 }).map((_, i) => (
              <PhotoTile key={i} slot={`train-sample-${i}`} label={["Studio","Outdoor","Golden","Editorial","B&W","Soft"][i % 6]} showActions={false} />
            ))}
          </div>
        </div>

        <div style={{ textAlign: "center", marginTop: 32 }}>
          <button className="pics-nav-link" style={{ fontSize: 10, color: "var(--text-muted)" }}>Cancel training</button>
        </div>
      </main>
      <PicsFooter />
    </div>
  );
}

Object.assign(window, {
  LandingScreen, LandingHeroDefault, LandingHeroGalleryLed, LandingHeroFlush,
  ConnectScreen, SelectScreen, PreviewMeter, TrainScreen,
});