// Top-level state + composition
const { useState: useStA, useEffect: useEfA } = React;

function App() {
  const [authOpen, setAuthOpen] = useStA(false);
  const [cartOpen, setCartOpen] = useStA(false);
  const [menuOpen, setMenuOpen] = useStA(false);
  const [revealPack, setRevealPack] = useStA(null);
  const [authed, setAuthed] = useStA(false);
  const [credit, setCredit] = useStA(0);
  const [cart, setCart] = useStA([]);

  // dense layered starscape
  useEfA(() => {
    const sf = document.getElementById('starfield');
    if (!sf) return;
    sf.innerHTML = '';

    // Layer 1 — distant pinpricks (lots of small, dim)
    for (let i = 0; i < 140; i++) {
      const s = document.createElement('div');
      s.className = 'star';
      const sz = Math.random() * 1.2 + 0.4;
      s.style.width = sz + 'px';
      s.style.height = sz + 'px';
      s.style.left = Math.random() * 100 + '%';
      s.style.top  = Math.random() * 100 + '%';
      s.style.setProperty('--dur',    (3 + Math.random() * 6) + 's');
      s.style.setProperty('--delay',  (Math.random() * 5) + 's');
      s.style.setProperty('--min-op', Math.random() * 0.15 + 0.05);
      s.style.setProperty('--max-op', Math.random() * 0.4 + 0.5);
      sf.appendChild(s);
    }

    // Layer 2 — medium twinklers with subtle white glow
    for (let i = 0; i < 40; i++) {
      const s = document.createElement('div');
      s.className = 'star star-md';
      const sz = Math.random() * 1.6 + 1.4;
      s.style.width = sz + 'px';
      s.style.height = sz + 'px';
      s.style.left = Math.random() * 100 + '%';
      s.style.top  = Math.random() * 100 + '%';
      s.style.setProperty('--dur',    (2.4 + Math.random() * 3) + 's');
      s.style.setProperty('--delay',  (Math.random() * 4) + 's');
      s.style.setProperty('--min-op', Math.random() * 0.2 + 0.15);
      s.style.setProperty('--max-op', 1);
      sf.appendChild(s);
    }

    // Layer 3 — bright gold "hero" stars, fewer, with halo + cross-glint
    for (let i = 0; i < 12; i++) {
      const s = document.createElement('div');
      s.className = 'star star-bright';
      const sz = Math.random() * 1.6 + 2.2;
      s.style.width = sz + 'px';
      s.style.height = sz + 'px';
      s.style.left = Math.random() * 100 + '%';
      s.style.top  = Math.random() * 100 + '%';
      s.style.setProperty('--dur',    (3 + Math.random() * 4) + 's');
      s.style.setProperty('--delay',  (Math.random() * 3) + 's');
      s.style.setProperty('--min-op', 0.3);
      s.style.setProperty('--max-op', 1);
      sf.appendChild(s);
    }

    // Nebula clouds — large soft blobs that slowly drift
    const nebulae = [
      { x: 12, y: 18, w: 380, h: 380, c: 'rgba(125, 76, 200, 0.32)', dur: 38 },
      { x: 78, y: 62, w: 320, h: 320, c: 'rgba(224, 184, 83, 0.14)', dur: 44 },
      { x: 45, y: 90, w: 460, h: 320, c: 'rgba(94, 58, 154, 0.20)',  dur: 52 },
      { x: 88, y: 12, w: 240, h: 240, c: 'rgba(157, 111, 220, 0.18)', dur: 36 },
    ];
    nebulae.forEach((n, i) => {
      const el = document.createElement('div');
      el.className = 'nebula';
      el.style.left = n.x + '%';
      el.style.top  = n.y + '%';
      el.style.width  = n.w + 'px';
      el.style.height = n.h + 'px';
      el.style.background = `radial-gradient(circle, ${n.c} 0%, transparent 65%)`;
      el.style.animation = `nebulaDrift${i} ${n.dur}s ease-in-out infinite`;
      sf.appendChild(el);
    });

    // Periodic shooting stars
    const sky = document.createElement('div');
    sky.className = 'shoot-sky';
    sf.appendChild(sky);
    const fire = () => {
      const shoot = document.createElement('div');
      shoot.className = 'shoot-star';
      shoot.style.top  = (Math.random() * 50) + '%';
      shoot.style.left = (Math.random() * 70) + '%';
      shoot.style.setProperty('--angle', (10 + Math.random() * 30) + 'deg');
      shoot.style.animationDuration = (1.2 + Math.random() * 0.8) + 's';
      sky.appendChild(shoot);
      setTimeout(() => shoot.remove(), 2400);
    };
    const interval = setInterval(fire, 2800 + Math.random() * 2200);
    setTimeout(fire, 600);
    setTimeout(fire, 2200);
    return () => clearInterval(interval);
  }, []);

  // mouse glow
  useEfA(() => {
    const el = document.getElementById('mouse-glow');
    if (!el) return;
    const move = e => { el.style.left = e.clientX + 'px'; el.style.top = e.clientY + 'px'; };
    window.addEventListener('mousemove', move);
    return () => window.removeEventListener('mousemove', move);
  }, []);

  // Inject baroque corner ornaments on every gilded surface
  useEfA(() => {
    // Art-deco corner — stepped bracket + 5-ray sunburst fan + small accent triangle
    const ornament = (cls) => `
      <svg class="${cls}" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
        <!-- stepped corner bracket -->
        <path d="M2 18 L 2 8 L 8 8 L 8 2 L 18 2"/>
        <!-- second inner bracket -->
        <path d="M12 5 L 14 5 L 14 14 L 5 14 L 5 12" stroke-width="0.7" opacity="0.7"/>
        <!-- 5-ray sunburst radiating from inner corner -->
        <line x1="8" y1="8" x2="24" y2="12"/>
        <line x1="8" y1="8" x2="22" y2="18"/>
        <line x1="8" y1="8" x2="18" y2="22"/>
        <line x1="8" y1="8" x2="12" y2="24"/>
        <line x1="8" y1="8" x2="20" y2="20"/>
        <!-- accent diamond at the corner -->
        <path class="accent" d="M3 3 L 6 3 L 6 6 L 3 6 Z"/>
        <!-- two filigree dots -->
        <circle class="accent" cx="26" cy="11" r="0.8"/>
        <circle class="accent" cx="11" cy="26" r="0.8"/>
      </svg>`;

    // Art-deco crest — fan medallion at top center
    const crest = `
      <svg viewBox="0 0 70 18" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin meet">
        <!-- horizontal baseline -->
        <line x1="4" y1="6" x2="66" y2="6"/>
        <!-- stepped pediment -->
        <path d="M28 6 L28 3 L42 3 L42 6"/>
        <!-- inner stepped pediment -->
        <path d="M32 3 L32 1 L38 1 L38 3" stroke-width="0.8"/>
        <!-- center fan / sunburst rays -->
        <line x1="35" y1="6" x2="35" y2="15"/>
        <line x1="35" y1="6" x2="31" y2="14"/>
        <line x1="35" y1="6" x2="39" y2="14"/>
        <line x1="35" y1="6" x2="28" y2="12"/>
        <line x1="35" y1="6" x2="42" y2="12"/>
        <!-- accent dot -->
        <circle class="fill" cx="35" cy="6" r="1.4"/>
        <!-- flanking step-fan motifs -->
        <path d="M14 6 L14 3 L22 3 L22 6"/>
        <path d="M48 6 L48 3 L56 3 L56 6"/>
        <circle class="fill" cx="18" cy="5" r="0.7"/>
        <circle class="fill" cx="52" cy="5" r="0.7"/>
      </svg>`;

    const addOrnaments = () => {
      document.querySelectorAll('.hero-banner, .promo-card, .buylist-banner, .newsletter-box').forEach(el => {
        if (!el.querySelector(':scope > .gilded-corners')) {
          const wrap = document.createElement('div');
          wrap.className = 'gilded-corners';
          wrap.innerHTML = ornament('tl') + ornament('tr') + ornament('bl') + ornament('br');
          el.appendChild(wrap);
        }
        if (!el.querySelector(':scope > .gilded-crest')) {
          const c = document.createElement('div');
          c.className = 'gilded-crest';
          c.innerHTML = crest;
          el.appendChild(c);
        }
      });
    };
    addOrnaments();
    const t = setTimeout(addOrnaments, 50);
    return () => clearTimeout(t);
  }, []);

  const addToCart = (p) => {
    setCart(prev => {
      const ex = prev.find(i => i.id === p.id);
      if (ex) return prev.map(i => i.id === p.id ? { ...i, qty: i.qty + 1 } : i);
      return [...prev, { ...p, qty: 1 }];
    });
    setCartOpen(true);
  };

  const cartCount = cart.reduce((s, i) => s + i.qty, 0);

  return (
    <>
      <PromoBar />
      <Nav
        authed={authed}
        credit={credit}
        cartCount={cartCount}
        onSignInClick={() => setAuthOpen(true)}
        onCartClick={() => setCartOpen(true)}
        onSellClick={() => alert('Sell-cards modal — wire up to your backend')}
        onMenuClick={() => setMenuOpen(v => !v)}
      />
      <MobileMenu open={menuOpen} />
      <GameSwitcher />
      <Hero />
      <QuickCats />
      <GameCardGrid />
      <TrendingSection onAdd={addToCart} />
      <VaultFeed />
      <MysterySection onOpen={setRevealPack} />
      <BuylistBanner onClick={() => setAuthOpen(true)} />
      <EventsSection />
      <Newsletter />
      <Footer />

      <AuthModal
        open={authOpen}
        onClose={() => setAuthOpen(false)}
        onSignIn={u => { setAuthed(true); setCredit(25); setAuthOpen(false); }}
      />
      <CartDrawer
        open={cartOpen}
        items={cart}
        onClose={() => setCartOpen(false)}
        onRemove={id => setCart(prev => prev.filter(i => i.id !== id))}
      />
      <RevealModal pack={revealPack} onClose={() => setRevealPack(null)} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);