// Showcase: section headers, game cards grid, product grid, mystery packs, events, vault feed
const { useState: useSt, useEffect: useEf } = React;

function SectionHead({ eyebrow, title, italicWord, unified, desc, link }) {
  return (
    <div className="section-head">
      <div className="section-head-left">
        <div className="section-eyebrow">{eyebrow}</div>
        <h2 className="section-title">
          {unified
            ? <span className="gold-text" style={{fontStyle: 'normal'}}>{title}</span>
            : <>{title} {italicWord && <span className="italic-gold">{italicWord}</span>}</>}
        </h2>
        {desc && <p className="section-desc">{desc}</p>}
      </div>
      {link && <a href="#" className="section-link" onClick={e=>e.preventDefault()}>{link} →</a>}
    </div>
  );
}

function GameCardGrid() {
  const cards = [
    { cls: 'mtg',      Sigil: window.SigilMagic,     tag: '5,400+ Singles', title: 'Magic: The Gathering', desc: 'Standard, Pioneer, Modern, Commander — and every set back to Alpha.', stats: [['All','Formats'],['Daily','Restocks']] },
    { cls: 'poke',     Sigil: window.SigilPokemon,   tag: '3,800+ Singles', title: 'Pokémon TCG',           desc: 'From base set Charizard to the latest Scarlet & Violet pulls.',          stats: [['S&V','Current format'],['Vintage','In stock']] },
    { cls: 'rift',     Sigil: window.SigilRiftbound, tag: '1,200+ Singles', title: 'Riftbound',             desc: 'The rising star in TCG. Get in early — we stock every set on day one.', stats: [['Day 1','Releases'],['Free','Starter w/ entry']] },
    { cls: 'onepiece', Sigil: window.SigilOnePiece,  tag: '2,100+ Singles', title: 'One Piece TCG',         desc: 'All Ops, all leaders, every alt-art. Build your dream crew.',           stats: [['OP1-9','All sets'],['Weekly','Tournaments']] },
  ];
  return (
    <section className="games-section section-pad" id="games">
      <div className="container">
        <SectionHead eyebrow="Pick Your Realm" title="Shop by realm" unified desc="From the planes of Dominaria to the Grand Line — every game has a home in our vault." link="All games" />
        <div className="games-grid">
          {cards.map((c, i) => {
            const SigilComp = c.Sigil;
            return (
              <a key={c.cls} href="#" className={`game-card ${c.cls} reveal visible reveal-d${i+1}`} onClick={e=>e.preventDefault()}>
                <div className="game-card-bg"></div>
                <div className="game-card-head">
                  <span className="game-card-emblem">{SigilComp ? <SigilComp /> : null}</span>
                  <span className="game-card-tag">{c.tag}</span>
                </div>
                <div className="game-card-body">
                  <div className="game-card-title">{c.title}</div>
                  <div className="game-card-desc">{c.desc}</div>
                  <div className="game-card-stats">
                    {c.stats.map(([v,l]) => (
                      <div key={l} className="gcs-item">
                        <div className="gcs-val">{v}</div>
                        <div className="gcs-label">{l}</div>
                      </div>
                    ))}
                  </div>
                  <div className="game-card-cta">
                    Browse {c.title.split(':')[0].split(' ')[0]} <span className="game-card-cta-arrow">→</span>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ProductCard({ p, onAdd }) {
  const game = window.WW_DATA.games[p.game];
  const [src, setSrc] = useSt(null);
  const SigilFallback = ({
    mtg:  window.SigilMagic,
    poke: window.SigilPokemon,
    rift: window.SigilRiftbound,
    op:   window.SigilOnePiece,
  })[p.game];

  useEf(() => {
    let cancelled = false;
    // — Magic via Scryfall
    if (p.scryfall) {
      const q = `https://api.scryfall.com/cards/named?exact=${encodeURIComponent(p.scryfall.name)}${p.scryfall.set ? '&set=' + p.scryfall.set : ''}`;
      fetch(q).then(r => r.ok ? r.json() : Promise.reject())
        .then(card => {
          if (cancelled) return;
          const url = (card.image_uris && card.image_uris.normal) ||
                      (card.card_faces && card.card_faces[0].image_uris && card.card_faces[0].image_uris.normal);
          if (url) setSrc(url);
        }).catch(() => {});
    }
    // — Pokémon via pokemontcg.io direct CDN (instant; falls back to API)
    else if (p.pokemon) {
      const [setId, num] = p.pokemon.id.split('-');
      const direct = `https://images.pokemontcg.io/${setId}/${num}_hires.png`;
      const img = new Image();
      img.onload  = () => !cancelled && setSrc(direct);
      img.onerror = () => {};
      img.src = direct;
    }
    // — One Piece via weserv-proxied Bandai EN cardlist
    else if (p.onepiece) {
      const id = p.onepiece.id;
      const sources = [
        `https://images.weserv.nl/?url=en.onepiece-cardgame.com/images/cardlist/card/${id}.png`,
        `https://images.weserv.nl/?url=en.onepiece-cardgame.com/images/cardlist/card/${id}_p1.png`,
        `https://en.onepiece-cardgame.com/images/cardlist/card/${id}.png`,
      ];
      let i = 0;
      const tryNext = () => {
        if (cancelled || i >= sources.length) return;
        const probe = new Image();
        probe.onload  = () => !cancelled && setSrc(sources[i]);
        probe.onerror = () => { i++; tryNext(); };
        probe.src = sources[i];
      };
      tryNext();
    }
    return () => { cancelled = true; };
  }, [p.id]);

  return (
    <div className={`product-card ${game.cls}`}>
      <div className="product-img-wrap">
        <div className="product-badges">
          {p.badges.includes('hot')  && <span className="pbadge pbadge-hot">Hot</span>}
          {p.badges.includes('new')  && <span className="pbadge pbadge-new">New</span>}
          {p.badges.includes('rare') && <span className="pbadge pbadge-rare">Rare</span>}
          {p.badges.includes('sale') && <span className="pbadge pbadge-sale">Sale</span>}
          {p.badges.includes('foil') && <span className="pbadge pbadge-foil">Foil</span>}
        </div>
        {/* Sigil fallback — always rendered; image overlays on load */}
        <div className="product-sigil-fallback">
          {SigilFallback ? <SigilFallback /> : null}
        </div>
        {src && <img src={src} alt={p.name} className="product-real-img" referrerPolicy="no-referrer" />}
        <div className="product-img-overlay"></div>
        <button className="product-quick" title="Add to cart" onClick={() => onAdd(p)}>
          <Sig name="brand" size={14} />
        </button>
      </div>
      <div className="product-info">
        <div className="product-game">
          <span className="product-game-dot" style={{background: game.color}}></span>
          {game.label}
        </div>
        <div className="product-name">{p.name}</div>
        <div className="product-set">{p.set}</div>
        <div className="product-footer">
          <div className="product-prices">
            {p.was && <span className="product-price-old">${p.was.toFixed(2)}</span>}
            <span className="product-price">${p.price.toFixed(2)}</span>
          </div>
          <span className="product-stock">
            <span className={`stock-dot ${p.stock === 'Low' ? 'low' : ''}`}></span>{p.stock}
          </span>
        </div>
      </div>
    </div>
  );
}

function TrendingSection({ onAdd }) {
  const [filter, setFilter] = useSt('all');
  const list = filter === 'all' ? window.WW_DATA.products : window.WW_DATA.products.filter(p => p.game === filter);
  const tabs = [
    ['all', '✦ Trending'],
    ['mtg', '⚔️ Magic'],
    ['poke','⚡ Pokémon'],
    ['rift','🌊 Riftbound'],
    ['op',  '☠️ One Piece'],
  ];
  return (
    <section className="trending-section section-pad" id="singles">
      <div className="container">
        <SectionHead eyebrow="The Vault" title="Trending" italicWord="singles" desc="The cards moving fastest right now. Restocked daily, priced for players." link="View all singles" />
        <div className="trending-tabs">
          {tabs.map(([k, l]) => (
            <button key={k} className={`ttab ${filter === k ? 'active' : ''}`} onClick={() => setFilter(k)}>{l}</button>
          ))}
        </div>
        <div className="products-grid">
          {list.map(p => <ProductCard key={p.id} p={p} onAdd={onAdd} />)}
        </div>
      </div>
    </section>
  );
}

// ── MYSTERY PACKS — preview/cards-mystery.html port ─────────────────
// Tier ladder strip on top, rich art-deco card grid with arcane circles,
// constellations, spacedust, smoke wisps, gilded corners + crest.

const MYSTERY_TIER_CLS = {
  common:      't-common',
  uncommon:    't-uncommon',
  rare:        't-rare',
  'very-rare': 't-very-rare',
  legendary:   't-legendary',
};

const MYSTERY_TIER_CONFIG = {
  common:      { wisps: 2, density: 22, bright: 3,  circle: 'small',  constellation: 'triangle'  },
  uncommon:    { wisps: 2, density: 28, bright: 4,  circle: 'small',  constellation: 'triangle'  },
  rare:        { wisps: 3, density: 34, bright: 6,  circle: 'medium', constellation: 'pentagram' },
  'very-rare': { wisps: 3, density: 44, bright: 10, circle: 'medium', constellation: 'pentagram' },
  legendary:   { wisps: 4, density: 55, bright: 14, circle: 'large',  constellation: 'heptagram' },
};

function MysteryCard({ pack, onOpen }) {
  const game = window.WW_DATA.games[pack.game];
  const tierCls = MYSTERY_TIER_CLS[pack.tier] || '';
  const cfg = MYSTERY_TIER_CONFIG[pack.tier] || MYSTERY_TIER_CONFIG.common;
  return (
    <div className={`mystery ${tierCls}`}>
      <div className="gilded-corners"></div>
      <div className="gilded-crest"></div>
      <div className="orb-wrap">
        <span className="tier-badge"><span className="tn">{pack.tierLabel}</span></span>
        <span className="game-badge">{game.label.toUpperCase()}</span>
        <div className="smoke" data-wisps={cfg.wisps}></div>
        <div className="spacedust" data-density={cfg.density} data-bright={cfg.bright}></div>
        <div className="orb-glow"></div>
        <div className="arcane-circle" data-pattern={cfg.circle}></div>
        <div className="constellation" data-pattern={cfg.constellation}></div>
        <div className="orb-ring"></div>
      </div>
      <div className="body">
        <div className="name">{pack.name}</div>
        <div className="subtitle">{pack.sub} · min ${pack.min}</div>
        <div className="foot">
          <div>
            <span className="price-label">Conjure</span>
            <span className="price-val">${pack.price.toFixed(2)}</span>
          </div>
          <button className="unseal" onClick={() => onOpen(pack)}>Unseal</button>
        </div>
      </div>
    </div>
  );
}

function TierLadder() {
  const rungs = [
    ['t-common',    'Common',     '$4.99'],
    ['t-uncommon',  'Uncommon',   '$9.99'],
    ['t-rare',      'Rare',       '$24.99'],
    ['t-very-rare', 'Very Rare',  '$49.99'],
    ['t-legendary', 'Legendary',  '$99.99'],
  ];
  return (
    <div className="ladder">
      {rungs.map(([cls, name, price]) => (
        <div key={cls} className={`rung ${cls}`}>
          <span className="rung-name">{name}</span>
          <span className="rung-price">{price}</span>
        </div>
      ))}
    </div>
  );
}

function MysterySection({ onOpen }) {
  const rootRef = useEf ? React.useRef(null) : null;
  React.useEffect(() => {
    const root = rootRef && rootRef.current;
    if (!root) return;

    // Art-deco corner + crest SVGs
    const cornerSvg = (cls) => `
      <svg class="${cls}" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
        <path d="M2 18 L 2 8 L 8 8 L 8 2 L 18 2"/>
        <path d="M12 5 L 14 5 L 14 14 L 5 14 L 5 12" stroke-width="0.7" opacity="0.7"/>
        <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"/>
        <path class="accent" d="M3 3 L 6 3 L 6 6 L 3 6 Z"/>
        <circle class="accent" cx="26" cy="11" r="0.8"/>
        <circle class="accent" cx="11" cy="26" r="0.8"/>
      </svg>`;
    const crestSvg = `
      <svg viewBox="0 0 60 16" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin meet">
        <line x1="3" y1="6" x2="57" y2="6"/>
        <path d="M23 6 L23 3 L37 3 L37 6"/>
        <path d="M27 3 L27 1 L33 1 L33 3" stroke-width="0.8"/>
        <line x1="30" y1="6" x2="30" y2="14"/>
        <line x1="30" y1="6" x2="26" y2="13"/>
        <line x1="30" y1="6" x2="34" y2="13"/>
        <line x1="30" y1="6" x2="23" y2="11"/>
        <line x1="30" y1="6" x2="37" y2="11"/>
        <circle class="fill" cx="30" cy="6" r="1.4"/>
        <path d="M10 6 L10 3 L17 3 L17 6"/>
        <path d="M43 6 L43 3 L50 3 L50 6"/>
        <circle class="fill" cx="13.5" cy="5" r="0.7"/>
        <circle class="fill" cx="46.5" cy="5" r="0.7"/>
      </svg>`;
    root.querySelectorAll('.mystery .gilded-corners').forEach(el => {
      el.innerHTML = cornerSvg('tl') + cornerSvg('tr') + cornerSvg('bl') + cornerSvg('br');
    });
    root.querySelectorAll('.mystery .gilded-crest').forEach(el => {
      el.innerHTML = crestSvg;
    });

    // Spacedust particle clouds
    root.querySelectorAll('.mystery .spacedust').forEach(box => {
      const card = box.closest('.mystery');
      if (!card) return;
      const cs = getComputedStyle(card);
      const tierBright = cs.getPropertyValue('--tier-bright').trim();
      const total  = parseInt(box.dataset.density || '24', 10);
      const bright = parseInt(box.dataset.bright  || '4', 10);
      const frag = document.createDocumentFragment();
      for (let i = 0; i < total; i++) {
        const p = document.createElement('div');
        p.className = 'p';
        const r = Math.pow(Math.random(), 0.55) * 38;
        const a = Math.random() * Math.PI * 2;
        const sz = Math.random() * 1.4 + 0.4;
        p.style.left   = (50 + Math.cos(a) * r) + '%';
        p.style.top    = (50 + Math.sin(a) * r) + '%';
        p.style.width  = sz + 'px';
        p.style.height = sz + 'px';
        p.style.background = i < bright ? tierBright : 'white';
        p.style.color = tierBright;
        if (i < bright) p.classList.add('bright');
        p.style.setProperty('--dur',   (1.6 + Math.random() * 4) + 's');
        p.style.setProperty('--delay', (Math.random() * 4) + 's');
        p.style.setProperty('--min', (Math.random() * 0.1 + 0.05).toFixed(2));
        p.style.setProperty('--max', (Math.random() * 0.4 + 0.6).toFixed(2));
        frag.appendChild(p);
      }
      box.appendChild(frag);
    });

    // Smoke wisps rising from base
    root.querySelectorAll('.mystery .smoke').forEach(s => {
      const n = parseInt(s.dataset.wisps || '3', 10);
      const frag = document.createDocumentFragment();
      for (let i = 0; i < n; i++) {
        const w = document.createElement('div');
        w.className = 'w';
        w.style.left = (30 + Math.random() * 40) + '%';
        w.style.setProperty('--drift', (Math.random() * 20 - 10) + '%');
        w.style.setProperty('--dur',   (6 + Math.random() * 4) + 's');
        w.style.setProperty('--delay', (Math.random() * 6) + 's');
        const sz = 60 + Math.random() * 60;
        w.style.width  = sz + 'px';
        w.style.height = sz + 'px';
        frag.appendChild(w);
      }
      s.appendChild(frag);
    });

    // Arcane summoning circle
    const SVGNS = 'http://www.w3.org/2000/svg';
    root.querySelectorAll('.mystery .arcane-circle').forEach(box => {
      const svg = document.createElementNS(SVGNS, 'svg');
      svg.setAttribute('viewBox', '0 0 100 100');
      const ring = document.createElementNS(SVGNS, 'circle');
      ring.setAttribute('cx', '50'); ring.setAttribute('cy', '50'); ring.setAttribute('r', '46');
      ring.setAttribute('stroke-dasharray', '1.6 3');
      svg.appendChild(ring);
      const ring2 = document.createElementNS(SVGNS, 'circle');
      ring2.setAttribute('cx', '50'); ring2.setAttribute('cy', '50'); ring2.setAttribute('r', '40');
      ring2.setAttribute('stroke-opacity', '0.4');
      svg.appendChild(ring2);
      for (let i = 0; i < 12; i++) {
        const angle = (i * 30) * Math.PI / 180;
        const x1 = 50 + Math.cos(angle) * 42;
        const y1 = 50 + Math.sin(angle) * 42;
        const x2 = 50 + Math.cos(angle) * 46;
        const y2 = 50 + Math.sin(angle) * 46;
        const tick = document.createElementNS(SVGNS, 'line');
        tick.setAttribute('x1', x1); tick.setAttribute('y1', y1);
        tick.setAttribute('x2', x2); tick.setAttribute('y2', y2);
        svg.appendChild(tick);
      }
      const glyphs = [['M',50,8],['☆',92,50],['M',50,92],['☆',8,50]];
      glyphs.forEach(([ch,x,y]) => {
        const t = document.createElementNS(SVGNS, 'text');
        t.setAttribute('class', 'glyph');
        t.setAttribute('x', x); t.setAttribute('y', y + 2.5);
        t.setAttribute('text-anchor', 'middle');
        t.textContent = ch;
        svg.appendChild(t);
      });
      [[28,28],[72,28],[28,72],[72,72]].forEach(([x,y]) => {
        const c = document.createElementNS(SVGNS, 'circle');
        c.setAttribute('class', 'dot');
        c.setAttribute('cx', x); c.setAttribute('cy', y); c.setAttribute('r', '0.8');
        svg.appendChild(c);
      });
      box.appendChild(svg);
    });

    // Constellations inside the orb
    const constellations = {
      triangle:  [[50,18],[18,72],[82,72]],
      pentagram: [[50,12],[78,80],[10,42],[90,42],[22,80]],
      heptagram: [[50,8],[88,32],[78,82],[22,82],[12,32],[68,90],[32,90]],
    };
    root.querySelectorAll('.mystery .constellation').forEach(box => {
      const pattern = box.dataset.pattern || 'triangle';
      const pts = constellations[pattern] || constellations.triangle;
      const svg = document.createElementNS(SVGNS, 'svg');
      svg.setAttribute('viewBox', '0 0 100 100');
      const path = document.createElementNS(SVGNS, 'path');
      let d = `M ${pts[0][0]} ${pts[0][1]} `;
      for (let i = 1; i < pts.length; i++) d += `L ${pts[i][0]} ${pts[i][1]} `;
      d += 'Z';
      path.setAttribute('d', d);
      path.setAttribute('stroke-opacity', '0.8');
      svg.appendChild(path);
      pts.forEach(([x,y]) => {
        const c = document.createElementNS(SVGNS, 'circle');
        c.setAttribute('cx', x); c.setAttribute('cy', y); c.setAttribute('r', '1.4');
        svg.appendChild(c);
      });
      box.appendChild(svg);
    });
  }, []);

  return (
    <section className="mystery-section section-pad" id="mystery">
      <div className="container" ref={rootRef}>
        <SectionHead
          eyebrow="The Sorcerer's Trove"
          title="Mystery"
          italicWord="packs"
          desc="Sealed packs with a declared minimum value — what's inside is chosen by the fates. Every pack guarantees a hit."
          link="How it works"
        />
        <TierLadder />
        <div className="grid mystery-pack-grid">
          {window.WW_DATA.mysteryPacks.map(pack => (
            <MysteryCard key={pack.id} pack={pack} onOpen={onOpen} />
          ))}
        </div>
        <div className="mystery-disclaimer" style={{marginTop: '1.5rem'}}>
          ✦ <strong>Every pack guarantees a hit.</strong> Declared minimum values are real — if your pack falls short, we'll make it right. Cards inspected, sleeved, and shipped with care.
        </div>
      </div>
    </section>
  );
}

function VaultFeed() {
  const [items, setItems] = useSt(() => window.WW_DATA.vaultEvents.slice(0, 5).map((e, i) => ({ ...e, id: i, t: 'just now' })));
  useEf(() => {
    const id = setInterval(() => {
      setItems(prev => {
        const next = window.WW_DATA.vaultEvents[Math.floor(Math.random() * window.WW_DATA.vaultEvents.length)];
        return [{ ...next, id: Date.now(), t: 'just now' }, ...prev.slice(0, 4).map(it => ({ ...it, t: typeof it.t === 'string' && it.t === 'just now' ? '12s' : it.t }))];
      });
    }, 4200);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="vault-section">
      <div className="vault-grid">
        <div className="vault-info">
          <div className="section-eyebrow">Live From the Vault</div>
          <h2 className="section-title" style={{marginBottom: '0.9rem'}}>Real cards. Real pulls. <span className="italic-gold">right now.</span></h2>
          <p className="section-desc" style={{marginBottom: '1.6rem'}}>Watch the vault breathe in real-time. Every sale, every new listing, every trade — pulled live from our inventory feed.</p>
          <div className="hero-cta-row">
            <a href="#singles" className="btn-primary" onClick={e=>e.preventDefault()}>✦ Browse the Vault</a>
            <a href="#" className="btn-ghost" onClick={e=>e.preventDefault()}>◈ View Sold Listings</a>
          </div>
        </div>
        <div className="vault-feed">
          <div className="vault-feed-head">
            <div className="vault-feed-title">✦ Recent Activity</div>
            <div className="vault-feed-count">
              <span style={{width:6,height:6,borderRadius:'50%',background:'#4ade80',animation:'pulse 2s infinite'}}></span> Live
            </div>
          </div>
          <div className="vault-list">
            {items.map(it => (
              <div className="vault-row" key={it.id}>
                <div className="vault-avatar" style={{background: window.WW_DATA.avatarColor(it.who)}}>{it.who.slice(0,2).toUpperCase()}</div>
                <div className="vault-text"><strong>{it.who}</strong> <span className="vault-action">{it.action}</span> <span className="vault-product">{it.product}</span></div>
                <span className="vault-time">{it.t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function BuylistBanner({ onClick }) {
  return (
    <section className="buylist-section" id="buylist">
      <div className="buylist-banner">
        <div className="buylist-grid">
          <div className="buylist-text">
            <div className="buylist-eyebrow"><span className="live-dot"></span> Buylist Open Now</div>
            <h2 className="buylist-title">Turn your collection into <span className="glow">store credit or cash.</span></h2>
            <p className="buylist-desc">We pay top dollar for singles, bulk, sealed product, and entire collections. Get an instant quote online — or bring 'em into the shop. Yes, we want that binder.</p>
            <div className="buylist-perks">
              <div className="buylist-perk"><span className="buylist-perk-icon">✦</span> Instant online quotes</div>
              <div className="buylist-perk"><span className="buylist-perk-icon">✦</span> 30% bonus in store credit</div>
              <div className="buylist-perk"><span className="buylist-perk-icon">✦</span> Free shipping label</div>
            </div>
          </div>
          <a href="#" className="btn-primary" style={{fontSize: '0.9rem', padding: '1.1rem 1.85rem'}} onClick={e => { e.preventDefault(); onClick(); }}>✦ Get a Quote</a>
        </div>
      </div>
    </section>
  );
}

function EventsSection() {
  return (
    <section className="events-section section-pad" id="events">
      <div className="container">
        <SectionHead eyebrow="The Arena" title="Upcoming" italicWord="events" desc="Friday Night Magic, League play, Pre-releases, and weekly tournaments. All skill levels welcome." link="Full calendar" />
        <div className="events-grid">
          {window.WW_DATA.events.map((ev, i) => (
            <div key={ev.id} className={`event-card ev-${ev.game} reveal visible reveal-d${i+1}`}>
              <div className="event-head">
                <div className="event-date"><div className="event-day">{ev.day}</div><div className="event-mo">{ev.month}</div></div>
                <div className="event-meta">
                  <span className="event-tag">{ev.tag}</span>
                  <div className="event-name">{ev.name}</div>
                </div>
              </div>
              <div className="event-body">{ev.body}</div>
              <div className="event-foot">
                <div className="event-foot-meta">
                  <div className="event-detail">⏰ {ev.time}</div>
                  <div className="event-detail">💵 {ev.fee}</div>
                </div>
                <button className="btn-event">Register</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Newsletter() {
  const [email, setEmail] = useSt('');
  const [done, setDone] = useSt(false);
  return (
    <section className="newsletter-section">
      <div className="newsletter-box">
        <div className="newsletter-logo-frame">
          <img src="assets/logo.png" alt="" className="newsletter-logo-img" />
        </div>
        <h2 className="newsletter-title">Join the Inner Circle</h2>
        <p className="newsletter-desc">First access to new singles, restocks, tournament announcements, and members-only deals.</p>
        <form className="newsletter-form" onSubmit={e => { e.preventDefault(); setDone(true); }}>
          <input type="email" className="newsletter-input" placeholder="your@email.com" value={email} onChange={e => setEmail(e.target.value)} />
          <button type="submit" className="btn-primary" style={{whiteSpace:'nowrap'}}>{done ? '✦ Welcome' : '✦ Subscribe'}</button>
        </form>
        <div className="newsletter-perks">
          <span className="newsletter-perk">Early restocks</span>
          <span className="newsletter-perk">Event alerts</span>
          <span className="newsletter-perk">Member deals</span>
          <span className="newsletter-perk">No spam — ever</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionHead, GameCardGrid, ProductCard, TrendingSection, MysteryCard, MysterySection, VaultFeed, BuylistBanner, EventsSection, Newsletter });