// ──────────────────────────────────────────────────────────────────
// Bolder variation directions — alternative compositions per screen.
// Welcome: editorial split-grid with cube hero
// HomeFeed: tabloid/manifesto layout
// ──────────────────────────────────────────────────────────────────

// ── Bolder Welcome — editorial split, cube as hero ───────────────
const WelcomeScreenBold = ({ onStart, onSignIn }) => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", overflow: "hidden" }}>
    {/* Top - wordmark */}
    <div style={{ position: "absolute", top: 62, left: -16, right: 20, display: "flex", justifyContent: "space-between", alignItems: "center", zIndex: 10 }}>
      <img src="assets/tkdn-wordmark.png" alt="TAKEDOWN" style={{ height: 24, objectFit: "contain", filter: "var(--logo-filter, none)" }} />
      <div className="t-overline" style={{ color: "var(--text-secondary)" }}>TKDN</div>
    </div>

    {/* Hero: huge bleed-off type with cube anchored bottom-right */}
    <div style={{ position: "absolute", top: 100, left: 0, right: 0, bottom: 240, display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "0 20px", flex: 1, position: "relative" }}>
        {/* Big slab number */}
        <div
          style={{
            position: "absolute", top: 0, left: 0,
            fontSize: 220, fontWeight: 700, lineHeight: 0.85,
            color: "var(--text-primary)",
            letterSpacing: "-0.02em",
            opacity: 0.06,
            transform: "translate(-10%, -5%)",
            pointerEvents: "none",
          }}
        >
          WIN
        </div>

        <div style={{ position: "relative", zIndex: 2 }}>
          <Overline style={{ color: "var(--accent)" }}>COMBAT SPORT LIVES HERE.</Overline>
          <div className="t-h1" style={{ marginTop: 16, fontSize: 56, lineHeight: 0.95, color: "var(--text-primary)" }}>
            HOMEBASE
            <br />
            FOR
            <br />
            <RotatingWord /><span style={{ color: "var(--accent)" }}>.</span>
          </div>
        </div>

        {/* Cube anchored bottom-right */}
        <div style={{ position: "absolute", right: 14, bottom: 16, opacity: 0.9 }}>
          <SplashCube size={104} loop />
        </div>
      </div>

      {/* Manifesto strip - bottom of hero, tactical */}
      <div style={{ padding: "0 20px", display: "flex", gap: 20, borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", paddingTop: 12, paddingBottom: 12, marginTop: 16 }}>
        {[
          ["ROOTED IN", "WRESTLING"],
          ["FOR PROS", "PRESENT + FUTURE"],
          ["BUILT", "TO WIN"],
        ].map(([a, b]) => (
          <div key={a} style={{ flex: 1 }}>
            <Overline style={{ color: "var(--text-tertiary)" }}>{a}</Overline>
            <div className="t-body-bold" style={{ marginTop: 2 }}>{b}</div>
          </div>
        ))}
      </div>
    </div>

    {/* CTAs */}
    <div style={{ position: "absolute", left: 20, right: 20, bottom: 56 }}>
      <p className="t-body-lg" style={{ color: "var(--text-secondary)", marginBottom: 16, maxWidth: 320 }}>
        Gear, training content, rankings, events, and sponsorships.
      </p>
      <div style={{ display: "flex", gap: 10 }}>
        <Button label="START BUILDING" fullWidth size="large" tone="mono" rightIcon={<I.ArrowRight />} onClick={onStart} />
      </div>
      <button onClick={onSignIn} style={{ background: "transparent", border: "none", color: "var(--text-secondary)", padding: "12px 0", marginTop: 8, cursor: "pointer", width: "100%", textAlign: "center", fontWeight: 600, fontSize: 13, letterSpacing: "0.05em" }}>
        I have an account →
      </button>
    </div>
  </div>
);

// ── Bolder HomeFeed — editorial / manifesto layout ───────────────
const HomeFeedScreenBold = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", overflow: "hidden" }}>
    {/* Top bar */}
    <div style={{
      paddingTop: 56, paddingLeft: 20, paddingRight: 20, paddingBottom: 12,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      borderBottom: "1px solid var(--border-subtle)",
    }}>
      <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 className="t-overline">TODAY · TUE 05.14</div>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <I.Search size={20} />
        <Avatar size={28} initials="AR" />
      </div>
    </div>

    <div style={{ height: "calc(100% - 175px)", overflow: "auto" }} className="no-scrollbar">
      {/* Big editorial hero - current build call to action */}
      <div style={{ padding: "16px 20px" }}>
        <Overline style={{ color: "var(--accent)" }}>YOUR DRAFT · TD-SGL-014</Overline>
        <div className="t-h2" style={{ marginTop: 6 }}>3 zones left.<br/>Finish before flights.</div>
        <div style={{ marginTop: 14, position: "relative", height: 200, borderRadius: "var(--r-sm)", overflow: "hidden", background: "var(--bg-secondary)" }}>
          <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: 110, height: 150 }} />
          <CornerMark corner="TL" /><CornerMark corner="TR" /><CornerMark corner="BL" /><CornerMark corner="BR" />
          <div style={{ position: "absolute", left: 14, bottom: 14, color: "#fff" }}>
            <Overline style={{ color: "rgba(255,255,255,0.7)" }}>NEXT · LOGO PLACEMENT</Overline>
          </div>
        </div>
        <Button label="RESUME BUILD" fullWidth size="large" tone="mono" style={{ marginTop: 12 }} rightIcon={<I.ArrowRight />} />
      </div>

      {/* Wide editorial cards */}
      <Hairline style={{ margin: "24px 0 0" }} />

      <div style={{ padding: "20px" }}>
        <Overline style={{ color: "var(--module-dojo)" }}>YOUR ROOM</Overline>
        <div className="t-h3" style={{ marginTop: 6 }}>ALL I SEE IS GOLD · Practice tonight, 7pm</div>
        <p className="t-body-lg" style={{ color: "var(--text-secondary)", marginTop: 10 }}>Friday night live. Bring red and blue freestyle singlets.</p>
        <div style={{ display: "flex", gap: 12, marginTop: 14 }}>
          <Button label="RSVP" size="medium" tone="mono" />
          <Button label="MAP" size="medium" tone="mono" variant="secondary" />
        </div>
      </div>

      <Hairline />

      <div style={{ padding: "20px", display: "flex", gap: 16 }}>
        <div style={{ flex: 1 }}>
          <Overline style={{ color: "var(--module-scout)" }}>SCOUT · NHSCA</Overline>
          <div className="t-h4" style={{ marginTop: 6 }}>Diego Marquez wants a minute.</div>
          <p className="t-body" style={{ color: "var(--text-secondary)", marginTop: 6 }}>2 unread · Open</p>
        </div>
        <div style={{ width: 80, height: 80, background: "var(--bg-secondary)", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "var(--r-sm)", flexShrink: 0 }}>
          <Avatar size={56} initials="DM" />
        </div>
      </div>

      <Hairline />

      <div style={{ padding: "20px" }}>
        <Overline style={{ color: "var(--module-store)" }}>DROP · DARK KRYSTAL</Overline>
        <div className="t-h4" style={{ marginTop: 6 }}>4 new colorways. Patternable on any build.</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6, marginTop: 14 }}>
          {[["Midnight","#1a1a3d"],["Earth","#3d2e1a"],["Onyx","#0d0808"],["Fightfetti","#f04b24"]].map(([n, c]) => (
            <div key={n}>
              <div style={{ aspectRatio: 1, background: c, border: "1px solid var(--border-subtle)" }} />
              <div className="t-caption" style={{ marginTop: 4, color: "var(--text-tertiary)" }}>{n}</div>
            </div>
          ))}
        </div>
      </div>

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

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

// ── Bolder Builder — different drawer/rail composition ──────────
const BuilderCanvasScreenBold = () => {
  return (
    <div style={{ position: "absolute", inset: 0, background: "#0a0606", overflow: "hidden" }}>
      {/* Full-bleed canvas */}
      <PhotoPlaceholder kind="canvas" style={{ position: "absolute", inset: 0 }} />
      <SingletDiagram zones={{ top: "#F04B24", side: "#0D0808", back: "#FFFFFF", trim: "#F04B24" }} style={{ position: "absolute", left: "50%", top: "44%", transform: "translate(-50%,-50%)", width: 220, height: 290 }} />

      {/* Top - slim status strip */}
      <div style={{ position: "absolute", top: 54, left: 0, right: 0, padding: "0 16px", display: "flex", justifyContent: "space-between", alignItems: "center", zIndex: 10, color: "#fff" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <I.ArrowLeft size={20} />
          <Overline style={{ color: "rgba(255,255,255,0.7)" }}>TD-SGL-014 · DRAFT</Overline>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--accent, #F04B24)" }} />
          <Overline style={{ color: "#fff" }}>AUTOSAVED</Overline>
        </div>
      </div>

      {/* Floating left rail - tools as iconic stack, vertical */}
      <div style={{
        position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)",
        display: "flex", flexDirection: "column",
        background: "rgba(13,8,8,0.85)",
        border: "1px solid rgba(255,255,255,0.12)",
        borderRadius: "var(--r-sm)",
        overflow: "hidden",
        backdropFilter: "blur(10px)",
      }}>
        {[
          { i: I.Palette, k: "color", active: true },
          { i: I.Type, k: "text" },
          { i: I.Logo, k: "logo" },
          { i: I.Camera, k: "view" },
        ].map((t, i) => (
          <button key={t.k} style={{
            background: t.active ? "var(--accent, #F04B24)" : "transparent",
            color: "#fff",
            border: "none",
            padding: 14,
            cursor: "pointer",
            borderBottom: i < 3 ? "1px solid rgba(255,255,255,0.08)" : "none",
          }}>
            <t.i size={18} />
          </button>
        ))}
      </div>

      {/* Floating right rail - undo/redo/zoom */}
      <div style={{
        position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)",
        display: "flex", flexDirection: "column", gap: 8,
      }}>
        {[I.Undo, I.Redo, I.Zoom, I.Sparkle].map((Ic, i) => (
          <button key={i} style={{
            width: 40, height: 40,
            background: "rgba(13,8,8,0.85)",
            border: "1px solid rgba(255,255,255,0.12)",
            borderRadius: "var(--r-sm)",
            color: "#fff", cursor: "pointer",
            display: "flex", alignItems: "center", justifyContent: "center",
            backdropFilter: "blur(10px)",
          }}>
            <Ic size={18} />
          </button>
        ))}
      </div>

      {/* Bottom - horizontal color zone strip + REVIEW button. No drawer. */}
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0,
        background: "rgba(13,8,8,0.92)",
        borderTop: "1px solid rgba(255,255,255,0.15)",
        backdropFilter: "blur(20px)",
        padding: "16px 16px 32px",
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, color: "#fff" }}>
            <Overline style={{ color: "rgba(255,255,255,0.55)" }}>ZONE</Overline>
            <span className="t-body-bold">TOP</span>
            <Overline style={{ color: "rgba(255,255,255,0.55)" }}>· COLOR</Overline>
            <span className="t-body-bold" style={{ color: "#F04B24" }}>#F04B24</span>
          </div>
          <button style={{
            background: "#fff", color: "#0D0808", border: "none",
            padding: "10px 14px", borderRadius: 8, cursor: "pointer",
            fontWeight: 700, fontSize: 11, letterSpacing: "0.1em",
            display: "flex", alignItems: "center", gap: 6,
          }}>
            REVIEW
            <I.ArrowRight size={14} />
          </button>
        </div>

        {/* Big swatch strip */}
        <div style={{ display: "flex", gap: 6 }}>
          {["#F04B24", "#0D0808", "#FFFFFF", "#C32222", "#1D8EC7", "#6B4FBF", "#9AC78B", "#B8A03D", "#595959", "#ACAAAA"].map((c, i) => (
            <div key={i} style={{
              flex: 1, aspectRatio: "1",
              background: c,
              border: i === 0 ? "2px solid #fff" : "1px solid rgba(255,255,255,0.2)",
              cursor: "pointer",
            }} />
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { WelcomeScreenBold, HomeFeedScreenBold, BuilderCanvasScreenBold });