import { useState, useEffect, useRef } from "react";

const FONTS = `@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;700;800&display=swap');`;

const ITEMS = {
  tops: [
    { id: "t1", name: "STATIC CREWNECK", price: "$89", color: "#1a1a1a", accent: "#00ff88", emoji: "👕", tag: "BESTSELLER" },
    { id: "t2", name: "VOID HOODIE", price: "$129", color: "#0d0d2b", accent: "#ff3cff", emoji: "🧥", tag: "NEW" },
    { id: "t3", name: "CHROME TEE", price: "$59", color: "#e8e8e8", accent: "#ff2020", emoji: "👕", tag: "LIMITED" },
    { id: "t4", name: "GRUNGE LONGSLEEVE", price: "$74", color: "#2a1a0a", accent: "#ffa500", emoji: "👕", tag: "HOT" },
    { id: "t5", name: "ACID WASH ZIP", price: "$109", color: "#1a2a1a", accent: "#88ff00", emoji: "🧥", tag: "SALE" },
    { id: "t6", name: "NEON BOMBER", price: "$149", color: "#0a0a1a", accent: "#00ffff", emoji: "🧥", tag: "NEW" },
  ],
  bottoms: [
    { id: "b1", name: "PHANTOM CARGOS", price: "$119", color: "#1a1a1a", accent: "#00ff88", emoji: "👖", tag: "BESTSELLER" },
    { id: "b2", name: "GLITCH JEANS", price: "$99", color: "#0d1a2b", accent: "#4488ff", emoji: "👖", tag: "HOT" },
    { id: "b3", name: "SHRED SHORTS", price: "$69", color: "#2b1a1a", accent: "#ff4444", emoji: "🩳", tag: "SUMMER" },
    { id: "b4", name: "UTILITY PANTS", price: "$109", color: "#1a2a0d", accent: "#88ff44", emoji: "👖", tag: "NEW" },
    { id: "b5", name: "WIDE CORDS", price: "$89", color: "#2a1a2a", accent: "#dd88ff", emoji: "👖", tag: "LIMITED" },
    { id: "b6", name: "MESH TRACK", price: "$79", color: "#0a1a1a", accent: "#00ffdd", emoji: "🩳", tag: "SALE" },
  ],
  shoes: [
    { id: "s1", name: "STATIC LOWS", price: "$149", color: "#1a1a1a", accent: "#ff3cff", emoji: "👟", tag: "BESTSELLER" },
    { id: "s2", name: "VOID CHUNKY", price: "$189", color: "#2b1a0d", accent: "#ff8800", emoji: "👟", tag: "NEW" },
    { id: "s3", name: "CHROME RUNNER", price: "$169", color: "#e8e8e8", accent: "#0044ff", emoji: "👟", tag: "HOT" },
    { id: "s4", name: "GRUNGE BOOT", price: "$209", color: "#1a0d0d", accent: "#ff2020", emoji: "👢", tag: "COLLAB" },
    { id: "s5", name: "MULE PLATFORM", price: "$129", color: "#1a1a2a", accent: "#8844ff", emoji: "🥿", tag: "LIMITED" },
    { id: "s6", name: "Y2K SANDAL", price: "$89", color: "#2a1a0a", accent: "#ffdd00", emoji: "👡", tag: "SUMMER" },
  ],
  accessories: [
    { id: "a1", name: "SIGNAL CAP", price: "$49", color: "#1a1a1a", accent: "#00ff88", emoji: "🧢", tag: "NEW" },
    { id: "a2", name: "STATIC CHAIN", price: "$79", color: "#c0c0c0", accent: "#ff3cff", emoji: "⛓️", tag: "HOT" },
    { id: "a3", name: "VOID SHADES", price: "$119", color: "#0a0a0a", accent: "#00ffff", emoji: "🕶️", tag: "COLLAB" },
    { id: "a4", name: "GLITCH BEANIE", price: "$44", color: "#1a0d2a", accent: "#aa44ff", emoji: "🧣", tag: "WINTER" },
    { id: "a5", name: "CHROME BAG", price: "$159", color: "#c8c8c8", accent: "#ff2020", emoji: "👜", tag: "LIMITED" },
    { id: "a6", name: "NEON BELT", price: "$54", color: "#0a1a0a", accent: "#88ff00", emoji: "🔧", tag: "BESTSELLER" },
  ],
};

const CATEGORY_LABELS = { tops: "TOPS", bottoms: "BOTTOMS", shoes: "SHOES", accessories: "EXTRAS" };

export default function ByxtraApp() {
  const [activeSection, setActiveSection] = useState("home");
  const [activeCategory, setActiveCategory] = useState("tops");
  const [outfit, setOutfit] = useState({ tops: null, bottoms: null, shoes: null, accessories: null });
  const [glitch, setGlitch] = useState(false);
  const [ticker, setTicker] = useState(0);
  const [hoveredItem, setHoveredItem] = useState(null);

  useEffect(() => {
    const style = document.createElement("style");
    style.textContent = `
      ${FONTS}
      * { box-sizing: border-box; margin: 0; padding: 0; }
      body { background: #080808; }
      ::-webkit-scrollbar { width: 4px; }
      ::-webkit-scrollbar-track { background: #111; }
      ::-webkit-scrollbar-thumb { background: #00ff88; }

      @keyframes glitch1 {
        0%,100% { clip-path: inset(0 0 95% 0); transform: translate(-2px,0); }
        20% { clip-path: inset(30% 0 50% 0); transform: translate(2px,0); }
        40% { clip-path: inset(70% 0 5% 0); transform: translate(-2px,0); }
        60% { clip-path: inset(10% 0 80% 0); transform: translate(2px,0); }
        80% { clip-path: inset(50% 0 30% 0); transform: translate(-2px,0); }
      }
      @keyframes glitch2 {
        0%,100% { clip-path: inset(80% 0 5% 0); transform: translate(2px,0); color:#ff3cff; }
        25% { clip-path: inset(20% 0 60% 0); transform: translate(-3px,0); color:#00ffff; }
        50% { clip-path: inset(55% 0 25% 0); transform: translate(3px,0); color:#ff3cff; }
        75% { clip-path: inset(5% 0 85% 0); transform: translate(-2px,0); color:#00ffff; }
      }
      @keyframes scanline {
        0% { top: -10%; }
        100% { top: 110%; }
      }
      @keyframes pulse-glow {
        0%,100% { box-shadow: 0 0 20px #00ff8844, 0 0 40px #00ff8822; }
        50% { box-shadow: 0 0 40px #00ff8888, 0 0 80px #00ff8844; }
      }
      @keyframes float {
        0%,100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
      }
      @keyframes slide-in-left {
        from { opacity:0; transform: translateX(-30px); }
        to { opacity:1; transform: translateX(0); }
      }
      @keyframes slide-in-up {
        from { opacity:0; transform: translateY(20px); }
        to { opacity:1; transform: translateY(0); }
      }
      @keyframes ticker-scroll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
      }
      @keyframes blink {
        0%,100% { opacity:1; } 50% { opacity:0; }
      }
      @keyframes spin-slow {
        from { transform: rotate(0deg); } to { transform: rotate(360deg); }
      }
      @keyframes noise {
        0%,100%{background-position:0 0}
        10%{background-position:-5% -10%}
        20%{background-position:-15% 5%}
        30%{background-position:7% -25%}
        40%{background-position:20% 25%}
        50%{background-position:-25% 10%}
        60%{background-position:15% 5%}
        70%{background-position:0 15%}
        80%{background-position:25% 35%}
        90%{background-position:-10% 10%}
      }
      .glitch-text { position:relative; }
      .glitch-text::before, .glitch-text::after {
        content: attr(data-text);
        position: absolute;
        top:0; left:0;
        width:100%; height:100%;
        font: inherit;
        color: inherit;
      }
      .glitch-text::before { animation: glitch1 0.3s infinite linear; color:#00ffff; }
      .glitch-text::after { animation: glitch2 0.3s infinite linear; color:#ff3cff; }
      .card-hover {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }
      .card-hover:hover {
        transform: translateY(-4px) scale(1.02);
      }
      .nav-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-family: 'Space Mono', monospace;
        font-size: 12px;
        letter-spacing: 2px;
        padding: 8px 16px;
        transition: all 0.2s;
        position: relative;
      }
      .nav-btn::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        width: 0; height: 2px;
        background: #00ff88;
        transition: width 0.2s;
      }
      .nav-btn:hover::after, .nav-btn.active::after { width: 100%; }
      .select-btn {
        background: none;
        border: 1px solid #333;
        color: #888;
        padding: 6px 12px;
        font-family: 'Space Mono', monospace;
        font-size: 10px;
        cursor: pointer;
        letter-spacing: 1px;
        transition: all 0.2s;
      }
      .select-btn:hover, .select-btn.selected {
        border-color: #00ff88;
        color: #00ff88;
        background: #00ff8811;
      }
      .tag {
        font-family: 'Space Mono', monospace;
        font-size: 9px;
        letter-spacing: 2px;
        padding: 3px 8px;
      }
    `;
    document.head.appendChild(style);
    return () => document.head.removeChild(style);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => setTicker(t => t + 1), 30);
    return () => clearInterval(interval);
  }, []);

  const toggleOutfitItem = (category, item) => {
    setOutfit(prev => ({
      ...prev,
      [category]: prev[category]?.id === item.id ? null : item,
    }));
  };

  const clearOutfit = () => setOutfit({ tops: null, bottoms: null, shoes: null, accessories: null });

  const outfitCount = Object.values(outfit).filter(Boolean).length;
  const outfitTotal = Object.values(outfit)
    .filter(Boolean)
    .reduce((sum, item) => sum + parseInt(item.price.replace("$", "")), 0);

  const tickerText = "BYXTRA ✦ NEW DROP ✦ COMBINE YOUR FIT ✦ FREE SHIPPING OVER $200 ✦ LIMITED EDITION ✦ ";
  const repeated = (tickerText + tickerText + tickerText).repeat(3);

  return (
    <div style={{ minHeight: "100vh", background: "#080808", color: "#e8e8e0", fontFamily: "'Syne', sans-serif", position: "relative", overflow: "hidden" }}>

      {/* Noise overlay */}
      <div style={{
        position: "fixed", inset: 0, zIndex: 0, pointerEvents: "none",
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E")`,
        opacity: 0.4,
        animation: "noise 0.5s steps(1) infinite",
      }} />

      {/* NAV */}
      <nav style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "0 40px",
        height: 64,
        background: "rgba(8,8,8,0.92)",
        backdropFilter: "blur(20px)",
        borderBottom: "1px solid #1a1a1a",
      }}>
        <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 28, letterSpacing: 4, color: "#00ff88", cursor: "pointer" }} onClick={() => setActiveSection("home")}>
          BYXTRA
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          {["home", "shop", "combine"].map(s => (
            <button key={s} className={`nav-btn ${activeSection === s ? "active" : ""}`}
              style={{ color: activeSection === s ? "#00ff88" : "#888" }}
              onClick={() => setActiveSection(s)}>
              {s === "combine" ? `⚡ COMBINE${outfitCount > 0 ? ` (${outfitCount})` : ""}` : s.toUpperCase()}
            </button>
          ))}
        </div>
        <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 11, color: "#444", letterSpacing: 2 }}>
          EST. 2025
        </div>
      </nav>

      {/* TICKER */}
      <div style={{
        position: "fixed", top: 64, left: 0, right: 0, zIndex: 99,
        background: "#00ff88", height: 32, overflow: "hidden",
        display: "flex", alignItems: "center",
      }}>
        <div style={{
          display: "flex", whiteSpace: "nowrap",
          animation: "ticker-scroll 18s linear infinite",
          fontFamily: "'Space Mono', monospace", fontSize: 11,
          color: "#080808", letterSpacing: 2, fontWeight: 700,
        }}>
          {repeated}
        </div>
      </div>

      {/* MAIN CONTENT */}
      <div style={{ paddingTop: 96, minHeight: "100vh", position: "relative", zIndex: 1 }}>

        {/* HOME */}
        {activeSection === "home" && (
          <div style={{ padding: "60px 40px 80px" }}>
            {/* Hero */}
            <div style={{ maxWidth: 1200, margin: "0 auto" }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center", marginBottom: 100 }}>
                <div style={{ animation: "slide-in-left 0.6s ease forwards" }}>
                  <div style={{
                    fontFamily: "'Space Mono', monospace", fontSize: 11, color: "#00ff88",
                    letterSpacing: 4, marginBottom: 20,
                    display: "flex", alignItems: "center", gap: 8,
                  }}>
                    <span style={{ animation: "blink 1s infinite" }}>◉</span> SS25 COLLECTION LIVE
                  </div>
                  <div className="glitch-text" data-text="DRESS THE SIGNAL" style={{
                    fontFamily: "'Bebas Neue', sans-serif",
                    fontSize: "clamp(60px, 8vw, 110px)",
                    lineHeight: 0.9,
                    letterSpacing: 2,
                    marginBottom: 30,
                    color: "#e8e8e0",
                  }}>
                    DRESS THE SIGNAL
                  </div>
                  <p style={{
                    fontFamily: "'Space Mono', monospace", fontSize: 13, color: "#666",
                    lineHeight: 1.8, maxWidth: 420, marginBottom: 40,
                  }}>
                    Clothing built for the static generation. Mix every piece. Create your own frequency. No rules, only fits.
                  </p>
                  <div style={{ display: "flex", gap: 16 }}>
                    <button onClick={() => setActiveSection("shop")} style={{
                      background: "#00ff88", color: "#080808",
                      border: "none", padding: "14px 32px",
                      fontFamily: "'Space Mono', monospace", fontSize: 12,
                      letterSpacing: 2, cursor: "pointer",
                      fontWeight: 700, animation: "pulse-glow 2s infinite",
                    }}>
                      SHOP NOW →
                    </button>
                    <button onClick={() => setActiveSection("combine")} style={{
                      background: "none", color: "#e8e8e0",
                      border: "1px solid #333", padding: "14px 32px",
                      fontFamily: "'Space Mono', monospace", fontSize: 12,
                      letterSpacing: 2, cursor: "pointer",
                      transition: "all 0.2s",
                    }}
                      onMouseOver={e => { e.target.style.borderColor = "#ff3cff"; e.target.style.color = "#ff3cff"; }}
                      onMouseOut={e => { e.target.style.borderColor = "#333"; e.target.style.color = "#e8e8e0"; }}>
                      ⚡ BUILD FIT
                    </button>
                  </div>
                </div>

                {/* Hero visual */}
                <div style={{ position: "relative", display: "flex", justifyContent: "center", animation: "slide-in-up 0.8s ease forwards" }}>
                  <div style={{
                    width: 340, height: 420,
                    background: "linear-gradient(135deg, #0d0d1a, #1a0d2a)",
                    border: "1px solid #222",
                    position: "relative", overflow: "hidden",
                    animation: "float 4s ease-in-out infinite",
                  }}>
                    {/* Scanline */}
                    <div style={{
                      position: "absolute", left: 0, right: 0, height: "30%",
                      background: "linear-gradient(transparent, rgba(0,255,136,0.06), transparent)",
                      animation: "scanline 3s linear infinite",
                    }} />
                    <div style={{ padding: 30, height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                      <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "#444", letterSpacing: 2 }}>
                        SS25 // ITEM #001
                      </div>
                      <div style={{ textAlign: "center" }}>
                        <div style={{ fontSize: 100, marginBottom: 16 }}>🧥</div>
                        <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 36, letterSpacing: 4, color: "#00ff88" }}>VOID HOODIE</div>
                        <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 12, color: "#666", marginTop: 4 }}>$129</div>
                      </div>
                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: "#333", letterSpacing: 2 }}>LIMITED EDITION</div>
                        <div style={{
                          background: "#ff3cff", color: "#080808",
                          fontFamily: "'Space Mono', monospace", fontSize: 9, fontWeight: 700,
                          padding: "4px 8px", letterSpacing: 1,
                        }}>NEW</div>
                      </div>
                    </div>
                    {/* Corner decorations */}
                    <div style={{ position: "absolute", top: 8, left: 8, width: 20, height: 20, borderTop: "2px solid #00ff88", borderLeft: "2px solid #00ff88" }} />
                    <div style={{ position: "absolute", bottom: 8, right: 8, width: 20, height: 20, borderBottom: "2px solid #ff3cff", borderRight: "2px solid #ff3cff" }} />
                  </div>

                  {/* Floating badges */}
                  <div style={{
                    position: "absolute", top: -20, right: -20,
                    width: 80, height: 80, border: "1px solid #00ff8844",
                    borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
                    animation: "spin-slow 8s linear infinite",
                  }}>
                    <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 7, color: "#00ff8888", letterSpacing: 1, textAlign: "center", lineHeight: 1.4 }}>
                      FRESH<br />DROP<br />⚡
                    </div>
                  </div>
                </div>
              </div>

              {/* Categories strip */}
              <div style={{ marginBottom: 80 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 30 }}>
                  <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 36, letterSpacing: 4 }}>BROWSE BY DROP</div>
                  <button onClick={() => setActiveSection("shop")} style={{
                    fontFamily: "'Space Mono', monospace", fontSize: 11, color: "#00ff88",
                    background: "none", border: "none", cursor: "pointer", letterSpacing: 2,
                  }}>VIEW ALL →</button>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
                  {Object.entries(CATEGORY_LABELS).map(([cat, label], i) => (
                    <div key={cat} className="card-hover" onClick={() => { setActiveSection("shop"); setActiveCategory(cat); }}
                      style={{
                        background: `linear-gradient(135deg, #0d0d0d, #111)`,
                        border: "1px solid #1a1a1a",
                        padding: "32px 24px", cursor: "pointer",
                        position: "relative", overflow: "hidden",
                        animation: `slide-in-up 0.4s ease ${i * 0.1}s both`,
                      }}>
                      <div style={{ fontSize: 40, marginBottom: 12 }}>
                        {["👕", "👖", "👟", "⛓️"][i]}
                      </div>
                      <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 22, letterSpacing: 3, marginBottom: 4 }}>{label}</div>
                      <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "#444", letterSpacing: 2 }}>
                        {ITEMS[cat].length} ITEMS
                      </div>
                      <div style={{
                        position: "absolute", bottom: 0, left: 0, right: 0, height: 2,
                        background: ["#00ff88", "#4488ff", "#ff3cff", "#ffa500"][i],
                      }} />
                    </div>
                  ))}
                </div>
              </div>

              {/* Combine CTA */}
              <div style={{
                background: "linear-gradient(135deg, #0d0d1a, #1a0a1a)",
                border: "1px solid #222",
                padding: "60px 40px",
                display: "grid", gridTemplateColumns: "1fr auto",
                alignItems: "center", gap: 40,
                position: "relative", overflow: "hidden",
              }}>
                <div style={{
                  position: "absolute", top: -80, right: -80,
                  width: 300, height: 300,
                  background: "radial-gradient(circle, #ff3cff11, transparent)",
                  borderRadius: "50%",
                }} />
                <div>
                  <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 11, color: "#ff3cff", letterSpacing: 3, marginBottom: 16 }}>
                    ✦ EXCLUSIVE FEATURE
                  </div>
                  <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: "clamp(36px, 4vw, 60px)", letterSpacing: 4, lineHeight: 0.95, marginBottom: 20 }}>
                    BUILD YOUR<br />
                    <span style={{ color: "#ff3cff" }}>PERFECT FIT</span>
                  </div>
                  <p style={{ fontFamily: "'Space Mono', monospace", fontSize: 12, color: "#666", lineHeight: 1.8, maxWidth: 400 }}>
                    Mix & match tops, bottoms, shoes, and extras. See your complete outfit, get the total price, and cop everything at once.
                  </p>
                </div>
                <button onClick={() => setActiveSection("combine")} style={{
                  background: "linear-gradient(135deg, #ff3cff, #8800ff)",
                  border: "none", color: "#fff",
                  padding: "20px 40px", cursor: "pointer",
                  fontFamily: "'Bebas Neue', sans-serif", fontSize: 24, letterSpacing: 4,
                  whiteSpace: "nowrap",
                }}>
                  ⚡ COMBINE NOW
                </button>
              </div>
            </div>
          </div>
        )}

        {/* SHOP */}
        {activeSection === "shop" && (
          <div style={{ padding: "40px", maxWidth: 1200, margin: "0 auto" }}>
            <div style={{ marginBottom: 40, animation: "slide-in-up 0.4s ease" }}>
              <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 52, letterSpacing: 4, marginBottom: 8 }}>
                THE DROP
              </div>
              <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 11, color: "#444", letterSpacing: 2 }}>
                SS25 // {Object.values(ITEMS).flat().length} PIECES
              </div>
            </div>

            {/* Category tabs */}
            <div style={{ display: "flex", gap: 0, marginBottom: 40, borderBottom: "1px solid #1a1a1a" }}>
              {Object.entries(CATEGORY_LABELS).map(([cat, label]) => (
                <button key={cat} onClick={() => setActiveCategory(cat)} style={{
                  background: "none", border: "none", cursor: "pointer",
                  fontFamily: "'Space Mono', monospace", fontSize: 11, letterSpacing: 3,
                  padding: "14px 24px",
                  color: activeCategory === cat ? "#00ff88" : "#444",
                  borderBottom: activeCategory === cat ? "2px solid #00ff88" : "2px solid transparent",
                  transition: "all 0.2s",
                }}>
                  {label}
                </button>
              ))}
            </div>

            {/* Items grid */}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
              {ITEMS[activeCategory].map((item, i) => {
                const inOutfit = outfit[activeCategory]?.id === item.id;
                return (
                  <div key={item.id} className="card-hover"
                    style={{
                      background: "#0d0d0d",
                      border: `1px solid ${inOutfit ? item.accent : "#1a1a1a"}`,
                      position: "relative", overflow: "hidden",
                      animation: `slide-in-up 0.3s ease ${i * 0.05}s both`,
                      boxShadow: inOutfit ? `0 0 20px ${item.accent}33` : "none",
                    }}
                    onMouseEnter={() => setHoveredItem(item.id)}
                    onMouseLeave={() => setHoveredItem(null)}
                  >
                    {/* Item visual */}
                    <div style={{
                      background: `linear-gradient(135deg, ${item.color}, #0d0d0d)`,
                      height: 200, display: "flex", alignItems: "center", justifyContent: "center",
                      position: "relative", overflow: "hidden",
                    }}>
                      <div style={{ fontSize: 80, filter: "drop-shadow(0 0 20px rgba(0,0,0,0.5))" }}>{item.emoji}</div>
                      <div style={{
                        position: "absolute", bottom: 8, right: 8,
                        background: item.accent, color: "#080808",
                        fontFamily: "'Space Mono', monospace", fontSize: 9,
                        fontWeight: 700, padding: "3px 8px", letterSpacing: 2,
                      }}>{item.tag}</div>
                      {inOutfit && (
                        <div style={{
                          position: "absolute", inset: 0,
                          background: `${item.accent}11`,
                          border: `2px solid ${item.accent}`,
                          display: "flex", alignItems: "flex-start", justifyContent: "flex-start",
                          padding: 8,
                        }}>
                          <div style={{ background: item.accent, color: "#080808", padding: "2px 8px", fontSize: 9, fontFamily: "'Space Mono', monospace", fontWeight: 700 }}>
                            ✓ IN OUTFIT
                          </div>
                        </div>
                      )}
                    </div>

                    <div style={{ padding: "20px 20px 16px" }}>
                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
                        <div>
                          <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 20, letterSpacing: 3, marginBottom: 2 }}>
                            {item.name}
                          </div>
                          <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 12, color: item.accent }}>
                            {item.price}
                          </div>
                        </div>
                      </div>
                      <div style={{ display: "flex", gap: 8 }}>
                        <button onClick={() => toggleOutfitItem(activeCategory, item)} style={{
                          flex: 1,
                          background: inOutfit ? item.accent : "none",
                          border: `1px solid ${item.accent}`,
                          color: inOutfit ? "#080808" : item.accent,
                          padding: "10px",
                          fontFamily: "'Space Mono', monospace", fontSize: 10,
                          letterSpacing: 2, cursor: "pointer",
                          transition: "all 0.2s",
                        }}>
                          {inOutfit ? "✓ ADDED" : "⚡ ADD TO FIT"}
                        </button>
                        <button style={{
                          background: "none", border: "1px solid #222",
                          color: "#444", padding: "10px 12px",
                          cursor: "pointer", fontSize: 14,
                        }}>
                          🛒
                        </button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* COMBINE MAKER */}
        {activeSection === "combine" && (
          <div style={{ padding: "40px", maxWidth: 1400, margin: "0 auto" }}>
            <div style={{ marginBottom: 40, animation: "slide-in-up 0.4s ease" }}>
              <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 52, letterSpacing: 4, marginBottom: 8 }}>
                ⚡ FIT MAKER
              </div>
              <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 11, color: "#444", letterSpacing: 2 }}>
                SELECT ONE FROM EACH CATEGORY — BUILD YOUR PERFECT FIT
              </div>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 40 }}>
              {/* Left: Selectors */}
              <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
                {Object.entries(CATEGORY_LABELS).map(([cat, label]) => (
                  <div key={cat} style={{ animation: "slide-in-left 0.4s ease" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 16 }}>
                      <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 24, letterSpacing: 4 }}>{label}</div>
                      {outfit[cat] && (
                        <div style={{
                          fontFamily: "'Space Mono', monospace", fontSize: 10, letterSpacing: 2,
                          color: outfit[cat].accent, border: `1px solid ${outfit[cat].accent}`,
                          padding: "3px 10px",
                        }}>
                          {outfit[cat].name}
                        </div>
                      )}
                    </div>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
                      {ITEMS[cat].map(item => {
                        const selected = outfit[cat]?.id === item.id;
                        return (
                          <div key={item.id} onClick={() => toggleOutfitItem(cat, item)}
                            style={{
                              width: 110, cursor: "pointer",
                              border: `1px solid ${selected ? item.accent : "#1a1a1a"}`,
                              background: selected ? `${item.accent}11` : "#0d0d0d",
                              padding: "12px 8px",
                              transition: "all 0.2s",
                              position: "relative",
                              boxShadow: selected ? `0 0 16px ${item.accent}33` : "none",
                              transform: selected ? "scale(1.05)" : "scale(1)",
                            }}>
                            <div style={{ textAlign: "center", fontSize: 32, marginBottom: 6 }}>{item.emoji}</div>
                            <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 8, letterSpacing: 1, color: selected ? item.accent : "#666", textAlign: "center", lineHeight: 1.4 }}>
                              {item.name}
                            </div>
                            <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: item.accent, textAlign: "center", marginTop: 4 }}>
                              {item.price}
                            </div>
                            {selected && (
                              <div style={{
                                position: "absolute", top: 4, right: 4,
                                background: item.accent, color: "#080808",
                                width: 16, height: 16, borderRadius: "50%",
                                display: "flex", alignItems: "center", justifyContent: "center",
                                fontSize: 9, fontWeight: 700,
                              }}>✓</div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                ))}
              </div>

              {/* Right: Outfit preview */}
              <div style={{ position: "sticky", top: 100, alignSelf: "flex-start" }}>
                <div style={{
                  background: "#0d0d0d",
                  border: "1px solid #1a1a1a",
                  position: "relative", overflow: "hidden",
                }}>
                  {/* Header */}
                  <div style={{
                    background: "linear-gradient(90deg, #0d0d1a, #1a0d0d)",
                    padding: "20px 24px",
                    borderBottom: "1px solid #1a1a1a",
                    display: "flex", justifyContent: "space-between", alignItems: "center",
                  }}>
                    <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 22, letterSpacing: 4 }}>YOUR FIT</div>
                    <div style={{
                      fontFamily: "'Space Mono', monospace", fontSize: 10,
                      color: "#00ff88", letterSpacing: 2,
                    }}>
                      {outfitCount}/4 PIECES
                    </div>
                  </div>

                  {/* Outfit slots */}
                  <div style={{ padding: 24 }}>
                    {Object.entries(CATEGORY_LABELS).map(([cat, label]) => {
                      const item = outfit[cat];
                      return (
                        <div key={cat} style={{
                          display: "flex", alignItems: "center", gap: 16,
                          padding: "14px 0",
                          borderBottom: "1px solid #111",
                        }}>
                          <div style={{
                            width: 52, height: 52, flexShrink: 0,
                            background: item ? `linear-gradient(135deg, ${item.color}, #0d0d0d)` : "#111",
                            border: `1px solid ${item ? item.accent : "#222"}`,
                            display: "flex", alignItems: "center", justifyContent: "center",
                            fontSize: 24,
                            transition: "all 0.3s",
                          }}>
                            {item ? item.emoji : <span style={{ color: "#333", fontSize: 18 }}>+</span>}
                          </div>
                          <div style={{ flex: 1 }}>
                            {item ? (
                              <>
                                <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 16, letterSpacing: 2 }}>{item.name}</div>
                                <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: item.accent }}>{item.price}</div>
                              </>
                            ) : (
                              <>
                                <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "#333", letterSpacing: 2 }}>{label}</div>
                                <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: "#222", letterSpacing: 1, marginTop: 2 }}>NOT SELECTED</div>
                              </>
                            )}
                          </div>
                          {item && (
                            <button onClick={() => toggleOutfitItem(cat, item)} style={{
                              background: "none", border: "none", color: "#333",
                              cursor: "pointer", fontSize: 16, padding: 4,
                              transition: "color 0.2s",
                            }}
                              onMouseOver={e => e.target.style.color = "#ff4444"}
                              onMouseOut={e => e.target.style.color = "#333"}>
                              ✕
                            </button>
                          )}
                        </div>
                      );
                    })}
                  </div>

                  {/* Total + CTA */}
                  <div style={{ padding: "0 24px 24px" }}>
                    <div style={{
                      display: "flex", justifyContent: "space-between", alignItems: "center",
                      padding: "16px 0", borderTop: "1px solid #1a1a1a", marginBottom: 16,
                    }}>
                      <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 11, color: "#666", letterSpacing: 2 }}>TOTAL</div>
                      <div style={{
                        fontFamily: "'Bebas Neue', sans-serif", fontSize: 32, letterSpacing: 4,
                        color: outfitCount > 0 ? "#00ff88" : "#333",
                      }}>
                        ${outfitTotal}
                      </div>
                    </div>

                    {outfitCount > 0 ? (
                      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                        <button style={{
                          width: "100%", background: "#00ff88", color: "#080808",
                          border: "none", padding: "16px",
                          fontFamily: "'Bebas Neue', sans-serif", fontSize: 20, letterSpacing: 4,
                          cursor: "pointer", animation: "pulse-glow 2s infinite",
                        }}>
                          COP THE FIT — ${outfitTotal}
                        </button>
                        <button onClick={clearOutfit} style={{
                          width: "100%", background: "none", color: "#444",
                          border: "1px solid #222", padding: "10px",
                          fontFamily: "'Space Mono', monospace", fontSize: 10, letterSpacing: 2,
                          cursor: "pointer", transition: "all 0.2s",
                        }}
                          onMouseOver={e => { e.target.style.color = "#ff4444"; e.target.style.borderColor = "#ff4444"; }}
                          onMouseOut={e => { e.target.style.color = "#444"; e.target.style.borderColor = "#222"; }}>
                          CLEAR FIT
                        </button>
                      </div>
                    ) : (
                      <div style={{
                        textAlign: "center", padding: "20px",
                        fontFamily: "'Space Mono', monospace", fontSize: 10,
                        color: "#333", letterSpacing: 2, lineHeight: 1.8,
                        border: "1px dashed #1a1a1a",
                      }}>
                        ← SELECT PIECES<br />TO BUILD YOUR FIT
                      </div>
                    )}

                    {outfitCount === 4 && (
                      <div style={{
                        marginTop: 16, padding: "12px",
                        background: "linear-gradient(135deg, #00ff8811, #ff3cff11)",
                        border: "1px solid #00ff8833",
                        fontFamily: "'Space Mono', monospace", fontSize: 10,
                        color: "#00ff88", letterSpacing: 2, textAlign: "center", lineHeight: 1.8,
                      }}>
                        🔥 FULL FIT UNLOCKED<br />
                        <span style={{ color: "#ff3cff" }}>FREE SHIPPING INCLUDED</span>
                      </div>
                    )}
                  </div>

                  {/* Scanline effect on card */}
                  <div style={{
                    position: "absolute", left: 0, right: 0, height: "20%",
                    background: "linear-gradient(transparent, rgba(0,255,136,0.03), transparent)",
                    pointerEvents: "none", animation: "scanline 5s linear infinite",
                  }} />
                </div>

                {/* Stats below card */}
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, marginTop: 1 }}>
                  {[
                    ["PIECES SELECTED", `${outfitCount} / 4`],
                    ["SAVINGS", outfitCount === 4 ? "FREE SHIP" : "—"],
                  ].map(([label, val]) => (
                    <div key={label} style={{
                      background: "#0d0d0d", border: "1px solid #111",
                      padding: "14px 16px",
                    }}>
                      <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: "#333", letterSpacing: 2, marginBottom: 4 }}>{label}</div>
                      <div style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 20, letterSpacing: 3, color: "#00ff88" }}>{val}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Footer */}
      <div style={{
        borderTop: "1px solid #111", padding: "24px 40px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        position: "relative", zIndex: 1,
        fontFamily: "'Space Mono', monospace", fontSize: 10, color: "#333", letterSpacing: 2,
      }}>
        <div style={{ color: "#00ff88", fontFamily: "'Bebas Neue', sans-serif", fontSize: 18, letterSpacing: 4 }}>BYXTRA</div>
        <div>© 2025 BYXTRA — ALL RIGHTS RESERVED</div>
        <div>DRESSED IN STATIC</div>
      </div>
    </div>
  );
}