// ──────────────────────────────────────────────────────────────────
// Main app screens — Home, Builder, Profile.
// HomeFeedScreen, BuilderGalleryScreen, BuilderCanvasScreen,
// ProfileScreen, AccountSettingsScreen.
// ──────────────────────────────────────────────────────────────────

// ── Home Feed ────────────────────────────────────────────────────
const HomeFeedScreen = ({ onTab, onOpenBuild, onOpenNotifications }) => {
  return (
    <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
      {/* Custom top bar */}
      <div
        style={{
          paddingTop: 56,
          paddingLeft: 20,
          paddingRight: 20,
          paddingBottom: 12,
          background: "var(--bg-primary)",
          borderBottom: "1px solid var(--border-subtle)",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between"
        }}>
        
        <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--text-primary)" }}>
          <img src="assets/tkdn-t.png" alt="" style={{ width: 24, height: 24, filter: "var(--logo-filter, none)" }} />
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <button onClick={onOpenNotifications} style={{ background: "transparent", border: "none", color: "var(--text-primary)", padding: 4, position: "relative", cursor: "pointer" }}>
            <I.Bell size={22} />
            <span style={{ position: "absolute", top: 2, right: 2, width: 8, height: 8, borderRadius: 99, background: "var(--accent)", border: "1.5px solid var(--bg-primary)" }} />
          </button>
          <Avatar size={32} initials="AR" />
        </div>
      </div>

      {/* Scrolling content */}
      <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
        {/* Status strip - module-coded */}
        <div
          style={{
            display: "flex",
            gap: 12,
            padding: "14px 20px",
            borderBottom: "1px solid var(--border-subtle)",
            overflowX: "auto"
          }}
          className="no-scrollbar">
          
          {[
          { k: "athlete", text: "RECORD · 18-3", val: "1ST AT US OPEN" },
          { k: "builder", text: "DRAFT · TD-SGL-014", val: "READY TO SUBMIT" },
          { k: "store", text: "ORDER · #4421", val: "STITCHING · DAY 6" },
          { k: "dojo", text: "ROOM · ALL I SEE IS GOLD", val: "PRACTICE 7PM" }].
          map((s, i) =>
          <div
            key={i}
            style={{
              flexShrink: 0,
              paddingLeft: 10,
              borderLeft: `2px solid ${MODULE_TINTS[s.k]}`,
              minWidth: 140
            }}>
            
              <Overline style={{ color: "var(--text-tertiary)" }}>{s.text}</Overline>
              <div className="t-body-bold" style={{ marginTop: 4 }}>{s.val}</div>
            </div>
          )}
        </div>

        {/* Hero - current build */}
        <div style={{ padding: "20px 20px 0" }}>
          <Overline style={{ color: "var(--accent)", marginBottom: 10 }}>CURRENT BUILD · 78% DONE</Overline>
          <div onClick={onOpenBuild} style={{ position: "relative", height: 220, borderRadius: "var(--r-sm)", overflow: "hidden", cursor: "pointer" }}>
            <PhotoPlaceholder kind="canvas" style={{ position: "absolute", inset: 0 }} />
            <CornerMark corner="TL" /><CornerMark corner="TR" /><CornerMark corner="BL" /><CornerMark corner="BR" />
            {/* SGL diagram silhouette */}
            <svg viewBox="0 0 200 240" style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", width: 130, height: 160, opacity: 0.9 }}>
              <path d="M50 30 L80 20 L120 20 L150 30 L160 60 L140 90 L150 200 L130 220 L70 220 L50 200 L60 90 L40 60 Z"
              fill="none" stroke="#fff" strokeWidth="1.5" />
              <path d="M50 30 L80 20 L120 20 L150 30 L160 60 L140 90 L150 200" fill="rgba(240,75,36,0.35)" />
              <path d="M80 90 L120 90" stroke="rgba(255,255,255,0.4)" strokeWidth="1" strokeDasharray="2 3" />
            </svg>
            <div style={{ position: "absolute", left: 14, top: 14, color: "#fff" }}>
              <Overline style={{ color: "rgba(255,255,255,0.55)" }}>TD-SGL-014 · DRAFT</Overline>
              <div className="t-h5" style={{ marginTop: 4 }}>NCAA Loadout</div>
            </div>
            <div style={{ position: "absolute", right: 14, bottom: 14, display: "flex", gap: 6 }}>
              <Tag style={{ color: "#fff", borderColor: "rgba(255,255,255,0.4)" }}>RESUME</Tag>
            </div>
          </div>
        </div>

        {/* Section: Mat Feed */}
        <FeedSection title="MAT FEED" overline="LIVE FROM YOUR GYMS" sticky>
          <FeedCard
            module="dojo"
            avatar="NC"
            name="ALL I SEE IS GOLD Academy"
            handle="@ncwa_room"
            time="2h"
            body="Friday night live. Bring red and blue freestyle singlets."
            photoKind="gym"
            metaLeft="4 teammates going"
            metaRight={<Tag>RSVP</Tag>} />
          
          <FeedCard
            module="scout"
            avatar="DM"
            name="Diego Marquez"
            handle="@diegomtz · NHSCA scout"
            time="5h"
            body="Caught your match at NHSCA Duals - cleanest single-leg I've seen this season. Got a minute for Trials prep?"
            metaLeft={<><I.Heart size={14} style={{ verticalAlign: "-3px", marginRight: 4 }} />12</>}
            metaRight={<Button label="REPLY" size="small" variant="secondary" tone="mono" />} />
          
          <FeedCard
            module="athlete"
            avatar="JM"
            name="Jordan Maeda"
            handle="@maedajm · 65KG FS"
            time="1d"
            body="Trials qualifier kit shipped. Anyone running 65kg freestyle want to drill before flights leave Thursday?"
            photoKind="athlete"
            metaLeft={<><I.Heart size={14} style={{ verticalAlign: "-3px", marginRight: 4 }} />47</>}
            metaRight={<Tag accent>FREESTYLE · 65KG</Tag>} />
          
          <FeedCard
            module="store"
            avatar={<div style={{ width: 36, height: 36, borderRadius: 99, background: "var(--module-store)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 13 }}>TD</div>}
            name="Takedown"
            handle="System · drop"
            time="2d"
            body="Dark Krystal collection just landed - Midnight, Earth, Onyx, Fightfetti. Toggle the pattern into any build."
            metaLeft="NEW · DRK-KRYSTL"
            metaRight={<Button label="VIEW" size="small" variant="secondary" tone="mono" />} />
          
        </FeedSection>

        <div style={{ height: 100 }} />
      </div>

      <TabBar active="home" onChange={onTab} badges={{ home: 3 }} />
    </div>);

};

const FeedSection = ({ title, overline, children }) =>
<div style={{ marginTop: 32 }}>
    <div style={{ padding: "0 20px 12px", display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
      <div>
        <Overline style={{ color: "var(--accent)" }}>{overline}</Overline>
        <div className="t-h4" style={{ marginTop: 6 }}>{title}</div>
      </div>
      <button style={{ background: "transparent", border: "none", color: "var(--text-secondary)", cursor: "pointer", display: "flex", alignItems: "center", gap: 4 }}>
        <span className="t-overline">FILTER</span>
        <I.Sliders size={14} />
      </button>
    </div>
    <Hairline />
    <div>{children}</div>
  </div>;


const FeedCard = ({ module = "athlete", avatar, name, handle, time, body, photoKind, metaLeft, metaRight }) =>
<div
  style={{
    padding: "16px 20px",
    borderBottom: "1px solid var(--border-subtle)",
    position: "relative"
  }}>
  
    {/* module dot - left edge */}
    <div
    style={{
      position: "absolute",
      left: 0,
      top: 22,
      width: 3,
      height: 16,
      background: MODULE_TINTS[module]
    }} />
  
    <div style={{ display: "flex", gap: 12 }}>
      {typeof avatar === "string" ? <Avatar size={36} initials={avatar} /> : avatar}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
          <span className="t-body-bold">{name}</span>
          <span className="t-caption-lg" style={{ color: "var(--text-tertiary)" }}>·</span>
          <span className="t-caption-lg" style={{ color: "var(--text-tertiary)" }}>{time}</span>
        </div>
        <div className="t-caption-lg" style={{ color: "var(--text-tertiary)" }}>{handle}</div>
        <p className="t-body" style={{ color: "var(--text-primary)", marginTop: 8, textWrap: "pretty" }}>{body}</p>
        {photoKind &&
      <div style={{ position: "relative", marginTop: 12, height: 160, borderRadius: "var(--r-sm)", overflow: "hidden" }}>
            <PhotoPlaceholder kind={photoKind} style={{ position: "absolute", inset: 0 }} />
            <CornerMark corner="TL" /><CornerMark corner="BR" />
          </div>
      }
        <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div className="t-caption-lg" style={{ color: "var(--text-secondary)" }}>{metaLeft}</div>
          {metaRight}
        </div>
      </div>
    </div>
  </div>;


// ── Builder Gallery (entry point to builder) ─────────────────────
const BuilderGalleryScreen = ({ onTab, onOpenCanvas, onOpenSaved }) =>
<div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)" }}>
    <div style={{
    paddingTop: 56, paddingLeft: 20, paddingRight: 20, paddingBottom: 16,
    borderBottom: "1px solid var(--border-subtle)", display: "flex",
    justifyContent: "space-between", alignItems: "center"
  }}>
      <div>
        <Overline style={{ color: "var(--module-builder)" }}>MODULE · DESIGNER</Overline>
        <div className="t-h3" style={{ marginTop: 6 }}>Custom Gear</div>
      </div>
      <button onClick={onOpenSaved} style={{ background: "transparent", border: "1px solid var(--border-default)", color: "var(--text-primary)", padding: "8px 10px", borderRadius: "var(--r-sm)", cursor: "pointer", display: "flex", gap: 6, alignItems: "center" }}>
        <I.Bookmark size={16} /><span className="t-overline">SAVED · 4</span>
      </button>
    </div>

    <div style={{ height: "calc(100% - 200px)", overflow: "auto", padding: "16px 20px 100px" }} className="no-scrollbar">
      <Card elevation={3} padding={false} style={{ marginBottom: 16, overflow: "hidden" }} onClick={onOpenCanvas}>
        <div style={{ position: "relative", height: 200 }}>
          <PhotoPlaceholder kind="canvas" style={{ position: "absolute", inset: 0 }} />
          <CornerMark corner="TL" /><CornerMark corner="TR" /><CornerMark corner="BL" /><CornerMark corner="BR" />
          <div style={{ position: "absolute", left: 30, top: 30, color: "#fff" }}>
            <Overline style={{ color: "rgba(255,255,255,0.6)" }}>START · BLANK BUILD</Overline>
            <div className="t-h4" style={{ marginTop: 4 }}>New singlet</div>
          </div>
          <div style={{ position: "absolute", right: 16, bottom: 14 }}>
            <Button label="OPEN CANVAS" size="medium" tone="mono" />
          </div>
        </div>
      </Card>

      <Overline style={{ color: "var(--text-secondary)", margin: "8px 0 12px" }}>START FROM TEMPLATE</Overline>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        {[
      { code: "TD-SGL-010", name: "Full Ride", k: "athlete" },
      { code: "TD-SGL-015", name: "Clutch", k: "dojo" },
      { code: "TD-SGL-009", name: "Fader", k: "builder" },
      { code: "TD-FS-006", name: "Fight Short", k: "scout" }].
      map((t) =>
      <div key={t.code} onClick={onOpenCanvas} style={{ cursor: "pointer", border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", overflow: "hidden" }}>
            <div style={{ height: 110, position: "relative", background: "var(--bg-secondary)" }}>
              <svg viewBox="0 0 200 240" style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", width: 70, height: 90 }}>
                <path d="M50 30 L80 20 L120 20 L150 30 L160 60 L140 90 L150 200 L130 220 L70 220 L50 200 L60 90 L40 60 Z" fill={MODULE_TINTS[t.k]} opacity="0.85" />
              </svg>
              <div style={{ position: "absolute", top: 8, left: 8, width: 6, height: 6, background: MODULE_TINTS[t.k] }} />
            </div>
            <div style={{ padding: 12, borderTop: "1px solid var(--border-subtle)" }}>
              <Overline style={{ color: "var(--text-tertiary)" }}>{t.code}</Overline>
              <div className="t-body-bold" style={{ marginTop: 4 }}>{t.name}</div>
            </div>
          </div>
      )}
      </div>
    </div>

    <TabBar active="store" onChange={onTab} />
  </div>;


// ── Builder Canvas — the core product ────────────────────────────
const BUILDER_TOOLS = [
{ key: "color", icon: I.Palette, label: "Color" },
{ key: "text", icon: I.Type, label: "Text" },
{ key: "logo", icon: I.Logo, label: "Logo" }];


const BUILDER_ZONES = [
{ key: "top", label: "TOP", color: "#F04B24" },
{ key: "side", label: "SIDE", color: "#0D0808" },
{ key: "back", label: "BACK", color: "#FFFFFF" },
{ key: "trim", label: "TRIM", color: "#F04B24" }];


const PALETTE = [
"#0D0808", "#FFFFFF", "#F04B24", "#C32222",
"#1D8EC7", "#6B4FBF", "#9AC78B", "#B8A03D",
"#1A1414", "#595959", "#ACAAAA", "#E5E2DC"];


const BuilderCanvasScreen = ({ onBack, onReview }) => {
  const [drawer, setDrawer] = React.useState("half"); // collapsed / half / full
  const [tool, setTool] = React.useState("color");
  const [zone, setZone] = React.useState("top");
  const [color, setColor] = React.useState("#F04B24");
  const [zones, setZones] = React.useState({
    top: "#F04B24",
    side: "#0D0808",
    back: "#FFFFFF",
    trim: "#F04B24"
  });

  const drawerH = { collapsed: 64, half: 320, full: 560 }[drawer];

  return (
    <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", overflow: "hidden" }}>
      {/* Top tactical bar */}
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0, paddingTop: 54,
        paddingLeft: 16, paddingRight: 16, paddingBottom: 12, zIndex: 20,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        background: "linear-gradient(180deg, var(--bg-primary) 60%, transparent)"
      }}>
        <button onClick={onBack} style={{ background: "transparent", border: "1px solid var(--border-default)", color: "var(--text-primary)", padding: "6px 8px", borderRadius: "var(--r-sm)", cursor: "pointer", display: "flex", alignItems: "center", gap: 6 }}>
          <I.ArrowLeft size={16} />
          <span className="t-overline">EXIT</span>
        </button>
        <div style={{ textAlign: "center" }}>
          <Overline style={{ color: "var(--text-tertiary)" }}>TD-SGL-014 · DRAFT</Overline>
          <div className="t-sub-sm" style={{ marginTop: 2, display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--accent)" }} />
            <span>SAVED · 14s</span>
          </div>
        </div>
        <button onClick={onReview} style={{ background: "var(--text-primary)", color: "var(--bg-primary)", border: "none", padding: "8px 12px", borderRadius: "var(--r-sm)", cursor: "pointer", display: "flex", alignItems: "center", gap: 6, fontWeight: 700, letterSpacing: "0.05em", fontSize: 11 }}>
          REVIEW
          <I.ArrowRight size={14} />
        </button>
      </div>

      {/* 3D canvas viewport (placeholder render) */}
      <div style={{ position: "absolute", inset: 0 }}>
        <PhotoPlaceholder kind="canvas" style={{ position: "absolute", inset: 0 }} />
        {/* Grid floor lines */}
        <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} preserveAspectRatio="none">
          <defs>
            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)" />
        </svg>

        {/* Singlet on canvas, with current colors applied */}
        <SingletDiagram zones={zones} style={{ position: "absolute", left: "50%", top: "44%", transform: "translate(-50%,-50%)", width: 200, height: 260 }} />

        {/* Action rail (right edge) */}
        <div style={{
          position: "absolute", right: 12, top: "50%", transform: "translateY(-60%)",
          display: "flex", flexDirection: "column", gap: 8,
          background: "rgba(13,8,8,0.7)", padding: 6, borderRadius: "var(--r-sm)",
          backdropFilter: "blur(8px)",
          border: "1px solid rgba(255,255,255,0.1)"
        }}>
          {[
          { i: I.Undo },
          { i: I.Redo },
          { i: I.Zoom },
          { i: I.Camera }].
          map((b, idx) =>
          <button key={idx} style={{ background: "transparent", border: "none", color: "#fff", padding: 10, cursor: "pointer", display: "flex" }}>
              <b.i size={18} />
            </button>
          )}
        </div>

        {/* Zoom pill */}
        <div style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", background: "rgba(13,8,8,0.7)", padding: "6px 8px", borderRadius: "var(--r-pill)", color: "#fff", border: "1px solid rgba(255,255,255,0.1)", backdropFilter: "blur(8px)" }}>
          <div style={{ writingMode: "vertical-rl", transform: "rotate(180deg)" }} className="t-overline">100%</div>
        </div>

        {/* Coordinate label, bottom-left of canvas */}
        <div style={{ position: "absolute", left: 12, top: 90, color: "rgba(255,255,255,0.4)" }} className="t-overline">
          ZONE · {zone.toUpperCase()}<br />X 0.42 / Y 0.38
        </div>

        {/* Selected zone indicator label */}
        <div style={{
          position: "absolute", left: "calc(50% + 36px)", top: "32%",
          color: "var(--accent)", display: "flex", alignItems: "center", gap: 6
        }}>
          <div style={{ width: 24, height: 1, background: "var(--accent)" }} />
          <div className="t-overline">TOP · F04B24</div>
        </div>
      </div>

      {/* Bottom drawer */}
      <div
        style={{
          position: "absolute", bottom: 0, left: 0, right: 0,
          height: drawerH,
          background: "var(--bg-primary)",
          borderTop: "1px solid var(--border-default)",
          transition: "height var(--t-base)",
          zIndex: 30,
          display: "flex", flexDirection: "column"
        }}>
        
        {/* Grip handle + tool tabs */}
        <div style={{ padding: "8px 16px 0", display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
          <div
            onClick={() => setDrawer(drawer === "full" ? "collapsed" : drawer === "collapsed" ? "half" : "full")}
            style={{ width: 36, height: 4, background: "var(--border-default)", cursor: "pointer", borderRadius: 2 }} />
          
          <div style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div style={{ display: "flex", gap: 4 }}>
              {BUILDER_TOOLS.map((t) =>
              <button
                key={t.key}
                onClick={() => {setTool(t.key);if (drawer === "collapsed") setDrawer("half");}}
                style={{
                  background: tool === t.key ? "var(--text-primary)" : "transparent",
                  color: tool === t.key ? "var(--bg-primary)" : "var(--text-primary)",
                  border: `1px solid ${tool === t.key ? "var(--text-primary)" : "var(--border-subtle)"}`,
                  padding: "6px 10px",
                  borderRadius: "var(--r-sm)",
                  cursor: "pointer",
                  display: "flex",
                  alignItems: "center",
                  gap: 6,
                  fontWeight: 700,
                  fontSize: 11,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase"
                }}>
                
                  <t.icon size={14} />
                  {t.label}
                </button>
              )}
            </div>
            <button
              onClick={() => setDrawer(drawer === "full" ? "half" : "full")}
              style={{ background: "transparent", border: "none", color: "var(--text-secondary)", padding: 4, cursor: "pointer" }}>
              
              <span className="t-overline" style={{ marginRight: 4 }}>{drawer === "full" ? "COLLAPSE" : "EXPAND"}</span>
            </button>
          </div>
        </div>

        {/* Drawer content */}
        <div style={{ flex: 1, overflow: "auto", padding: "16px 16px 16px" }} className="no-scrollbar">
          {tool === "color" && <ColorPanel zones={zones} setZones={setZones} zone={zone} setZone={setZone} color={color} setColor={(c) => {setColor(c);setZones({ ...zones, [zone]: c });}} />}
          {tool === "text" && <TextPanel />}
          {tool === "logo" && <LogoPanel />}
        </div>
      </div>
    </div>);

};

// ── Design Intent (AI prompt → seed) ─────────────────────────────
const DesignIntentScreen = ({ onClose, onContinue, onSkip }) => {
  const [prompt, setPrompt] = React.useState("");
  const EXAMPLES = [
  "Saint Thomas Aquinas raider mascot · Fort Lauderdale, FL",
  "Iowa Hawkeyes inspired — black + gold, sharp geometry",
  "65 FS Trials kit · minimal · two-tone",
  "Cael Sanderson cut · classic stripe down side"];

  return (
    <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
      {/* Top */}
      <div style={{ paddingTop: 56, paddingLeft: 16, paddingRight: 20, paddingBottom: 14, display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid var(--border-subtle)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <button onClick={onClose} style={{ background: "transparent", border: "none", color: "var(--text-primary)", padding: 4, cursor: "pointer" }}>
            <I.X size={22} />
          </button>
          <div className="t-h5">Design intent</div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "4px 8px", border: "1px solid var(--border-default)", borderRadius: "var(--r-pill)" }}>
          <I.Sparkle size={12} style={{ color: "var(--accent)" }} />
          <Overline style={{ color: "var(--text-secondary)" }}>AI · SEED</Overline>
        </div>
      </div>

      <div style={{ flex: 1, overflow: "auto", padding: "20px 20px 16px" }} className="no-scrollbar">
        <Overline style={{ color: "var(--accent)" }}>STEP 01 · BRIEF</Overline>
        <div className="t-h3" style={{ marginTop: 8 }}>Tell the canvas what to design.</div>
        <p className="t-body-lg" style={{ color: "var(--text-secondary)", marginTop: 8, maxWidth: 360 }}>
          A sentence is enough. We'll use this as your design brief and pick a starting palette, silhouette, and accents.
        </p>

        {/* Textarea with corner marks */}
        <div style={{ position: "relative", marginTop: 20 }}>
          <CornerMark corner="TL" /><CornerMark corner="TR" /><CornerMark corner="BL" /><CornerMark corner="BR" />
          <textarea
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            placeholder="Design a new singlet for Saint Thomas Aquinas High School in Fort Lauderdale, FL using their raider mascot."
            style={{
              width: "100%", height: 192, padding: "20px 18px",
              border: "1px solid var(--border-default)",
              borderRadius: "var(--r-sm)",
              background: "transparent",
              color: "var(--text-primary)",
              fontFamily: "inherit", fontSize: 15, lineHeight: 1.55,
              outline: "none", resize: "none",
              boxSizing: "border-box"
            }} />
          
          <div style={{ position: "absolute", right: 14, bottom: 12, display: "flex", alignItems: "center", gap: 6, color: "var(--text-tertiary)" }}>
            <Overline style={{ color: "var(--text-tertiary)" }}>{prompt.length} / 240</Overline>
          </div>
        </div>

        {/* Example seeds */}
        <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>EXAMPLES · TAP TO USE</Overline>
        <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 8 }}>
          {EXAMPLES.map((ex) =>
          <button
            key={ex}
            onClick={() => setPrompt(ex)}
            style={{
              textAlign: "left", padding: "12px 14px",
              border: "1px solid var(--border-subtle)",
              borderRadius: "var(--r-sm)",
              background: "transparent",
              color: "var(--text-primary)",
              fontFamily: "inherit", fontSize: 13, lineHeight: 1.4,
              cursor: "pointer",
              display: "flex", alignItems: "center", gap: 10
            }}>
            
              <I.Sparkle size={12} style={{ color: "var(--accent)", flexShrink: 0 }} />
              <span style={{ color: "var(--text-secondary)" }}>{ex}</span>
            </button>
          )}
        </div>
      </div>

      {/* Footer */}
      <div style={{ padding: "12px 20px 28px", background: "var(--bg-primary)", borderTop: "1px solid var(--border-subtle)" }}>
        <Button
          label={prompt ? "GENERATE & CONTINUE" : "CONTINUE"}
          fullWidth size="large" tone="mono"
          rightIcon={<I.ArrowRight />}
          onClick={onContinue}
          disabled={false} />
        
        <button onClick={onSkip} style={{ display: "block", margin: "10px auto 0", background: "transparent", border: "none", color: "var(--text-secondary)", fontFamily: "inherit", fontSize: 12, letterSpacing: "0.04em", textDecoration: "underline", textUnderlineOffset: 3, cursor: "pointer" }}>
          Skip for now
        </button>
      </div>
    </div>);

};

// Singlet vector diagram with per-zone color
const SingletDiagram = ({ zones, style }) =>
<svg viewBox="0 0 200 260" style={style}>
    {/* back (rendered as broad outline) */}
    <path d="M50 30 L80 20 L120 20 L150 30 L160 60 L140 90 L150 240 L130 256 L70 256 L50 240 L60 90 L40 60 Z"
  fill={zones.back} stroke="rgba(255,255,255,0.3)" strokeWidth="1" />
    {/* top zone (chest) */}
    <path d="M65 30 L80 22 L120 22 L135 30 L145 60 L130 75 L70 75 L55 60 Z" fill={zones.top} />
    {/* side panels */}
    <path d="M55 65 L70 75 L70 240 L60 240 Z" fill={zones.side} />
    <path d="M145 65 L130 75 L130 240 L140 240 Z" fill={zones.side} />
    {/* trim */}
    <path d="M65 30 L80 22 L120 22 L135 30 L130 33 L120 26 L80 26 L70 33 Z" fill={zones.trim} />

    {/* Selection rule */}
    <path d="M65 30 L80 22 L120 22 L135 30 L145 60 L130 75 L70 75 L55 60 Z"
  fill="none" stroke="#F04B24" strokeWidth="1.5" strokeDasharray="4 3" opacity="0.9" />

    {/* Sponsor logo placeholder */}
    <rect x="86" y="90" width="28" height="14" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.5)" strokeWidth="0.5" strokeDasharray="2 2" />
    <text x="100" y="100" textAnchor="middle" fontSize="6" fill="rgba(255,255,255,0.7)" fontFamily="Figtree" fontWeight="700">SPONSOR</text>

    {/* Name */}
    <text x="100" y="200" textAnchor="middle" fontSize="11" fill="#fff" fontFamily="Figtree" fontWeight="700" letterSpacing="0.1em">ROMERO</text>
  </svg>;


// ── Color panel ──────────────────────────────────────────────────
const ColorPanel = ({ zones, zone, setZone, color, setColor }) =>
<div>
    <Overline style={{ color: "var(--text-secondary)", marginBottom: 8 }}>ZONE · PICK SURFACE</Overline>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 8, marginBottom: 16 }}>
      {BUILDER_ZONES.map((z) => {
      const sel = zone === z.key;
      return (
        <button
          key={z.key}
          onClick={() => setZone(z.key)}
          style={{
            border: sel ? "2px solid var(--text-primary)" : "1px solid var(--border-subtle)",
            padding: sel ? 7 : 8,
            borderRadius: "var(--r-sm)",
            background: "transparent",
            color: "var(--text-primary)",
            cursor: "pointer",
            textAlign: "left"
          }}>
          
            <div style={{
            width: "100%",
            height: 22,
            background: zones[z.key],
            border: "1px solid var(--border-subtle)",
            marginBottom: 8
          }} />
            <div className="t-overline">{z.label}</div>
            <div className="t-caption" style={{ color: "var(--text-tertiary)", marginTop: 1 }}>{zones[z.key]}</div>
          </button>);

    })}
    </div>

    <Overline style={{ color: "var(--text-secondary)", marginBottom: 8 }}>PALETTE · TKDN.STD</Overline>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(6,1fr)", gap: 8 }}>
      {PALETTE.map((c) => {
      const sel = c.toLowerCase() === color.toLowerCase();
      return (
        <button
          key={c}
          onClick={() => setColor(c)}
          style={{
            aspectRatio: "1",
            borderRadius: "var(--r-xs)",
            background: c,
            border: sel ? "3px solid var(--text-primary)" : "1px solid var(--border-subtle)",
            cursor: "pointer",
            boxShadow: sel ? "inset 0 0 0 1.5px rgba(255,255,255,0.4)" : "none"
          }} />);


    })}
    </div>

    <div style={{ marginTop: 16, padding: 12, border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)" }}>
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <Overline style={{ color: "var(--text-secondary)" }}>HEX · CUSTOM</Overline>
        <Overline style={{ color: "var(--accent)" }}>{color.toUpperCase()}</Overline>
      </div>
      <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
        {[0, 1, 2, 3, 4, 5].map((i) =>
      <div key={i} style={{ flex: 1, height: 6, background: `hsl(${i * 60} 70% 50%)`, borderRadius: 2, opacity: 0.6 }} />
      )}
      </div>
    </div>
  </div>;


const TextPanel = () =>
<div>
    <Overline style={{ color: "var(--text-secondary)", marginBottom: 8 }}>NAME · BACK PANEL</Overline>
    <TextInput label="Display name" value="ROMERO" />
    <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
      <Card padding={false} style={{ padding: 12 }}>
        <Overline style={{ color: "var(--text-tertiary)" }}>SIZE</Overline>
        <div className="t-h5" style={{ marginTop: 4 }}>140mm</div>
      </Card>
      <Card padding={false} style={{ padding: 12 }}>
        <Overline style={{ color: "var(--text-tertiary)" }}>WEIGHT</Overline>
        <div className="t-h5" style={{ marginTop: 4 }}>700 · Bold</div>
      </Card>
    </div>
    <div style={{ marginTop: 12 }}>
      <Overline style={{ color: "var(--text-secondary)", marginBottom: 8 }}>STYLE</Overline>
      <div style={{ display: "flex", gap: 6 }}>
        {["BLOCK", "STENCIL", "CLEAN", "OUTLINE"].map((s, i) =>
      <Tag key={s} active={i === 0}>{s}</Tag>
      )}
      </div>
    </div>
  </div>;


const LogoPanel = () =>
<div>
    <Overline style={{ color: "var(--text-secondary)", marginBottom: 8 }}>LOGO · CHEST</Overline>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8 }}>
      {["TKDN", "GYM", "SPNSR", "FLAG", "+", "+"].map((l, i) =>
    <div key={i} style={{ aspectRatio: "1", border: l === "+" ? "1.5px dashed var(--border-default)" : "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--r-sm)", color: "var(--text-secondary)", fontSize: 11, fontWeight: 700, letterSpacing: "0.1em" }}>
          {l}
        </div>
    )}
    </div>
    <Button label="UPLOAD LOGO" variant="secondary" size="medium" fullWidth tone="mono" leftIcon={<I.Plus />} style={{ marginTop: 12 }} />
  </div>;


// ── Builder Review ───────────────────────────────────────────────
const BuilderReviewScreen = ({ onBack, onSubmit }) =>
<div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar
    title="REVIEW · TD-SGL-014"
    left={
    <button onClick={onBack} style={{ background: "transparent", border: "none", color: "var(--text-primary)", padding: 4, cursor: "pointer" }}>
          <I.ArrowLeft size={22} />
        </button>
    } />
  
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 100px" }} className="no-scrollbar">
      <div style={{ position: "relative", height: 280, border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", overflow: "hidden", marginBottom: 16 }}>
        <PhotoPlaceholder kind="canvas" style={{ position: "absolute", inset: 0 }} />
        <SingletDiagram zones={{ top: "#F04B24", side: "#0D0808", back: "#FFFFFF", trim: "#F04B24" }} style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", width: 180, height: 240 }} />
        <CornerMark corner="TL" /><CornerMark corner="TR" /><CornerMark corner="BL" /><CornerMark corner="BR" />
      </div>

      <Overline style={{ color: "var(--text-secondary)", marginBottom: 10 }}>SPEC SHEET</Overline>
      {[
    ["MODEL", "TD-SGL-014 · Full Ride cut"],
    ["FABRIC", "Pro Series · 240 GSM Lycra"],
    ["ZONES", "Top F04B24 · Side 0D0808 · Back FFF · Trim F04B24"],
    ["NAME", "ROMERO · 140mm · Block 700"],
    ["LOGOS", "TKDN · ROOM · 2 sponsor slots"],
    ["SIZE", "M · 65KG FS · 170cm"],
    ["SHIPS IN", "14 days"]].
    map(([k, v]) =>
    <div key={k} style={{ display: "flex", padding: "12px 0", borderBottom: "1px solid var(--border-subtle)" }}>
          <div className="t-overline" style={{ color: "var(--text-tertiary)", width: 100, flexShrink: 0 }}>{k}</div>
          <div className="t-body-bold" style={{ flex: 1 }}>{v}</div>
        </div>
    )}

      <div style={{ marginTop: 24, padding: 14, border: "1px solid var(--border-default)", borderRadius: "var(--r-sm)" }}>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <Overline>SUBTOTAL</Overline>
          <span className="t-body-bold">$168.00</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
          <Overline>SHIPPING</Overline>
          <span className="t-body-bold">$12.00</span>
        </div>
        <Hairline style={{ margin: "10px 0" }} />
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <Overline style={{ color: "var(--text-primary)" }}>TOTAL</Overline>
          <span className="t-h5" style={{ color: "var(--accent)" }}>$180.00</span>
        </div>
      </div>
    </div>

    <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "12px 20px 32px", background: "var(--bg-primary)", borderTop: "1px solid var(--border-subtle)" }}>
      <Button label="SUBMIT TO PRODUCTION" fullWidth size="large" tone="accent" rightIcon={<I.ArrowRight />} onClick={onSubmit} />
    </div>
  </div>;


// ── Profile ──────────────────────────────────────────────────────
const ProfileScreen = ({ onTab, onSettings }) => {
  const [pickedTab, setPickedTab] = React.useState("builds");
  return (
    <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
      <div style={{ flex: 1, overflow: "auto" }} className="no-scrollbar">
        {/* Header */}
        <div style={{ position: "relative", paddingTop: 56, paddingLeft: 20, paddingRight: 20, paddingBottom: 20 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <div>
              <Overline style={{ color: "var(--text-secondary)" }}>WRESTLER · 65KG FS</Overline>
              <div className="t-h2" style={{ marginTop: 6 }}>Alex<br />Romero</div>
              <div className="t-overline" style={{ color: "var(--text-tertiary)", marginTop: 8 }}>@romero · ALL I SEE IS GOLD · ROOM 14</div>
            </div>
            <button onClick={onSettings} style={{ background: "transparent", border: "1px solid var(--border-default)", color: "var(--text-primary)", padding: 8, borderRadius: "var(--r-sm)", cursor: "pointer" }}>
              <I.Settings size={18} />
            </button>
          </div>
          <div style={{ marginTop: 20, display: "flex", gap: 8 }}>
            <Avatar size={64} initials="AR" ring="var(--accent)" />
            <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
              {[
              { v: "18-3", l: "RECORD", tint: "athlete" },
              { v: "07", l: "DESIGNS", tint: "builder" },
              { v: "12", l: "GYMS", tint: "scout" }].
              map((m) =>
              <div key={m.l} style={{ borderLeft: `2px solid ${MODULE_TINTS[m.tint]}`, paddingLeft: 8 }}>
                  <div className="t-h4" style={{ lineHeight: 1 }}>{m.v}</div>
                  <Overline style={{ color: "var(--text-tertiary)", marginTop: 6 }}>{m.l}</Overline>
                </div>
              )}
            </div>
          </div>
        </div>

        <Hairline />

        {/* Tabs */}
        <div style={{ display: "flex" }}>
          {["builds", "matches", "scout"].map((t) =>
          <button
            key={t}
            onClick={() => setPickedTab(t)}
            style={{
              flex: 1,
              padding: "14px 0",
              background: "transparent",
              border: "none",
              borderBottom: `2px solid ${pickedTab === t ? "var(--text-primary)" : "transparent"}`,
              color: pickedTab === t ? "var(--text-primary)" : "var(--text-tertiary)",
              cursor: "pointer",
              fontFamily: "inherit",
              fontWeight: 700,
              fontSize: 11,
              letterSpacing: "0.12em",
              textTransform: "uppercase"
            }}>
            
              {t === "builds" ? "Designs · 7" : t === "matches" ? "Competition · 21" : "Gyms · 3"}
            </button>
          )}
        </div>
        <Hairline />

        {/* Tab content */}
        {pickedTab === "builds" &&
        <div style={{ padding: 20 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {[
            { code: "TD-SGL-014", n: "NCAA Loadout", tint: "athlete", colors: ["#F04B24", "#0D0808", "#FFFFFF"] },
            { code: "TD-SGL-012", n: "Open Mat", tint: "dojo", colors: ["#6B4FBF", "#0D0808", "#FFFFFF"] },
            { code: "TD-SGL-009", n: "Trials Q3", tint: "athlete", colors: ["#0D0808", "#FFFFFF", "#F04B24"] },
            { code: "TD-FS-006", n: "Room Drop", tint: "builder", colors: ["#1D8EC7", "#0D0808", "#FFFFFF"] }].
            map((b) =>
            <div key={b.code} style={{ border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", overflow: "hidden" }}>
                  <div style={{ height: 130, position: "relative", background: "var(--bg-secondary)" }}>
                    <SingletDiagram zones={{ top: b.colors[0], side: b.colors[1], back: b.colors[2], trim: b.colors[0] }} style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", width: 80, height: 110 }} />
                  </div>
                  <div style={{ padding: 10, borderTop: "1px solid var(--border-subtle)" }}>
                    <Overline style={{ color: "var(--text-tertiary)" }}>{b.code}</Overline>
                    <div className="t-body-bold" style={{ marginTop: 2 }}>{b.n}</div>
                  </div>
                </div>
            )}
            </div>
          </div>
        }
        {pickedTab === "matches" &&
        <div style={{ padding: 20 }}>
            {[
          { d: "26.04", op: "K. Tanaka", r: "W", m: "Fall · 2:18 · Far-side cradle", mod: "athlete" },
          { d: "12.04", op: "J. Maeda", r: "W", m: "Dec · 6-2 · Single-leg", mod: "athlete" },
          { d: "30.03", op: "D. Marquez", r: "L", m: "Dec · 2-4 · Reshot", mod: "scout" },
          { d: "16.03", op: "P. Silva", r: "W", m: "Tech Fall · 11-0", mod: "athlete" }].
          map((row, i) =>
          <div key={i} style={{ display: "flex", alignItems: "center", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)", gap: 12 }}>
                <div style={{ width: 3, height: 28, background: MODULE_TINTS[row.mod] }} />
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                    <Overline style={{ color: "var(--text-tertiary)" }}>{row.d}</Overline>
                    <span className="t-body-bold">{row.op}</span>
                  </div>
                  <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 2 }}>{row.m}</div>
                </div>
                <div style={{
              fontSize: 14, fontWeight: 700, letterSpacing: "0.1em",
              color: row.r === "W" ? "var(--accent)" : "var(--text-tertiary)"
            }}>{row.r}</div>
              </div>
          )}
          </div>
        }
        {pickedTab === "scout" &&
        <div style={{ padding: 20 }}>
            <div className="t-body" style={{ color: "var(--text-secondary)" }}>3 active scout inquiries.</div>
            <div style={{ marginTop: 12 }}>
              {[
            { n: "NHSCA Duals 2026", code: "INV-004", d: "Apr 26" },
            { n: "RAF Tryout", code: "INV-003", d: "Mar 19" },
            { n: "World Team Trials", code: "INV-002", d: "Feb 10" }].
            map((row) =>
            <div key={row.code} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)" }}>
                  <div>
                    <Overline style={{ color: "var(--module-scout)" }}>{row.code}</Overline>
                    <div className="t-body-bold" style={{ marginTop: 2 }}>{row.n}</div>
                  </div>
                  <Tag>{row.d}</Tag>
                </div>
            )}
            </div>
          </div>
        }

        <div style={{ height: 100 }} />
      </div>

      <TabBar active="profile" onChange={onTab} />
    </div>);

};

// ── Account Settings (Theme Toggle) ──────────────────────────────
const AccountSettingsScreen = ({ onBack, themeMode, setThemeMode, ctaTone, setCtaTone }) =>
<div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar
    title="Settings"
    left={
    <button onClick={onBack} style={{ background: "transparent", border: "none", color: "var(--text-primary)", padding: 4, cursor: "pointer" }}>
          <I.ArrowLeft size={22} />
        </button>
    } />
  
    <div style={{ flex: 1, overflow: "auto", padding: "8px 20px 32px" }} className="no-scrollbar">
      {/* Appearance section */}
      <div style={{ marginTop: 16 }}>
        <Overline style={{ color: "var(--accent)" }}>SECTION · APPEARANCE</Overline>
        <div className="t-h4" style={{ marginTop: 6 }}>Theme</div>
        <p className="t-body" style={{ color: "var(--text-secondary)", marginTop: 4 }}>Pick how the app renders day and night.</p>

        <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
          {[
        { v: "dark", l: "DARK", i: I.Moon },
        { v: "light", l: "LIGHT", i: I.Sun },
        { v: "system", l: "AUTO", i: I.Monitor }].
        map((opt) => {
          const sel = themeMode === opt.v;
          return (
            <button
              key={opt.v}
              onClick={() => setThemeMode && setThemeMode(opt.v)}
              style={{
                border: sel ? "2px solid var(--text-primary)" : "1px solid var(--border-subtle)",
                padding: sel ? 15 : 16,
                borderRadius: "var(--r-sm)",
                background: "transparent",
                color: "var(--text-primary)",
                cursor: "pointer",
                display: "flex",
                flexDirection: "column",
                alignItems: "flex-start",
                gap: 12
              }}>
              
                <opt.i size={22} />
                <div className="t-overline">{opt.l}</div>
              </button>);

        })}
        </div>

        <div style={{ marginTop: 20 }}>
          <Overline style={{ color: "var(--text-secondary)" }}>PRIMARY ACTION COLOR</Overline>
          <p className="t-caption-lg" style={{ color: "var(--text-tertiary)", marginTop: 4 }}>
            How the primary CTA reads. Mono is the cleaner, modern path; Accent keeps brand-orange front-of-mind.
          </p>
          <div style={{ marginTop: 10, display: "flex", gap: 8 }}>
            {[
          { v: "mono", l: "MONO" },
          { v: "accent", l: "ACCENT" }].
          map((opt) => {
            const sel = ctaTone === opt.v;
            return (
              <button
                key={opt.v}
                onClick={() => setCtaTone && setCtaTone(opt.v)}
                style={{
                  flex: 1,
                  padding: 12,
                  border: sel ? "2px solid var(--text-primary)" : "1px solid var(--border-subtle)",
                  borderRadius: "var(--r-sm)",
                  background: "transparent",
                  cursor: "pointer",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "flex-start",
                  gap: 8
                }}>
                
                  <div style={{ height: 30, width: "100%", background: opt.v === "mono" ? "var(--text-primary)" : "var(--accent)", borderRadius: "var(--r-xs)" }} />
                  <Overline>{opt.l}</Overline>
                </button>);

          })}
          </div>
        </div>
      </div>

      <Hairline style={{ margin: "32px 0" }} />

      {/* Account section */}
      <Overline style={{ color: "var(--module-athlete)" }}>SECTION · ACCOUNT</Overline>
      <div style={{ marginTop: 12 }}>
        {[
      { l: "Profile information", k: "profile" },
      { l: "Email and password", k: "email" },
      { l: "Connected accounts", k: "social" },
      { l: "Gym & team", k: "gym" }].
      map((row) =>
      <SettingsRow key={row.k} label={row.l} />
      )}
      </div>

      <Hairline style={{ margin: "24px 0" }} />

      <Overline style={{ color: "var(--module-store)" }}>SECTION · NOTIFICATIONS</Overline>
      <div style={{ marginTop: 12 }}>
        {[
      { l: "Build status", k: "build", on: true },
      { l: "Scout DMs", k: "dm", on: true },
      { l: "Gym alerts", k: "gym", on: false },
      { l: "Sponsor drops", k: "sponsor", on: false }].
      map((row) =>
      <SettingsRow key={row.k} label={row.l} switchOn={row.on} />
      )}
      </div>

      <Hairline style={{ margin: "24px 0" }} />

      <button style={{ width: "100%", padding: "16px", background: "transparent", border: "1px solid var(--error)", color: "var(--error)", borderRadius: "var(--r-sm)", fontWeight: 700, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", cursor: "pointer", marginTop: 8 }}>
        SIGN OUT
      </button>
      <div className="t-caption-lg" style={{ color: "var(--text-tertiary)", textAlign: "center", marginTop: 16 }}>
        v 2.3 · BUILD bf3e6b8
      </div>
    </div>
  </div>;


const SettingsRow = ({ label, switchOn }) => {
  const [on, setOn] = React.useState(switchOn);
  const isSwitch = typeof switchOn === "boolean";
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "14px 0", borderBottom: "1px solid var(--border-subtle)" }}>
      <div className="t-body" style={{ fontWeight: 500 }}>{label}</div>
      {isSwitch ?
      <button
        onClick={() => setOn(!on)}
        style={{
          width: 42, height: 24, borderRadius: "var(--r-pill)",
          border: "1px solid var(--border-default)",
          background: on ? "var(--text-primary)" : "transparent",
          position: "relative", cursor: "pointer", padding: 0,
          transition: "background var(--t-fast)"
        }}>
        
          <span style={{
          position: "absolute",
          top: 2,
          left: on ? 20 : 2,
          width: 18, height: 18,
          background: on ? "var(--bg-primary)" : "var(--text-secondary)",
          borderRadius: "var(--r-full)",
          transition: "left var(--t-fast)"
        }} />
        </button> :

      <I.ChevronRight size={18} stroke={1.5} style={{ color: "var(--text-secondary)" }} />
      }
    </div>);

};

Object.assign(window, {
  HomeFeedScreen,
  BuilderGalleryScreen,
  DesignIntentScreen,
  BuilderCanvasScreen,
  BuilderReviewScreen,
  ProfileScreen,
  AccountSettingsScreen,
  SingletDiagram,
  FeedCard
});