// Hero + side promo cards + Quick categories
function Hero() {
  return (
    <section className="hero">
      <div className="aurora aurora-1"></div>
      <div className="aurora aurora-2"></div>
      <div className="hero-inner">
        <div className="hero-banner">
          <img src="assets/logo.png" alt="" className="hero-banner-watermark" />
          <div className="hero-content">
            <div className="hero-eyebrow">
              <span className="live-dot"></span> Now Brewing — New Arrivals Daily
            </div>
            <h1 className="hero-title">
              Your local TCG vault,{' '}
              <span className="gold-text">enchanted.</span>
            </h1>
            <p className="hero-desc">
              Magic, Pokémon, Riftbound, and One Piece — singles, sealed product, and accessories. Curated by players, priced to play, shipped with care.
            </p>
            <div className="hero-cta-row">
              <a href="#singles" className="btn-primary" onClick={e=>e.preventDefault()}>✦ Shop Singles</a>
              <a href="#sealed" className="btn-ghost" onClick={e=>e.preventDefault()}>◈ Browse Sealed</a>
            </div>
            <div className="hero-stats">
              <div className="hero-stat"><span className="hero-stat-num">12K+</span><span className="hero-stat-label">Singles in stock</span></div>
              <div className="hero-stat"><span className="hero-stat-num">4</span><span className="hero-stat-label">Games supported</span></div>
              <div className="hero-stat"><span className="hero-stat-num">50+</span><span className="hero-stat-label">Events / month</span></div>
            </div>
          </div>
        </div>
        <div className="hero-side">
          <a href="#" className="promo-card promo-card-1" onClick={e=>e.preventDefault()}>
            <div className="promo-card-decor"><SigilSun /></div>
            <div>
              <div className="promo-card-tag">Just Released</div>
              <div className="promo-card-title">Tarkir: Dragonstorm</div>
              <div className="promo-card-desc">Pre-Release weekend is here. Reserve your seat.</div>
            </div>
            <span className="promo-card-link">Reserve →</span>
          </a>
          <a href="#" className="promo-card promo-card-2" onClick={e=>e.preventDefault()}>
            <div className="promo-card-decor"><SigilMoon /></div>
            <div>
              <div className="promo-card-tag">One Piece OP-09</div>
              <div className="promo-card-title">New Set, New Pulls</div>
              <div className="promo-card-desc">Booster boxes and singles in stock now.</div>
            </div>
            <span className="promo-card-link">Shop now →</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function QuickCats() {
  const cats = [
    { sig: 'compass', label: 'Singles',         meta: '12,400+ cards' },
    { sig: 'vault',   label: 'Sealed',          meta: 'Boxes & ETBs' },
    { sig: 'shield',  label: 'Accessories',     meta: 'Sleeves, mats, decks' },
    { sig: 'diamond', label: 'Slabs & Graded',  meta: 'PSA · BGS · CGC' },
    { sig: 'mystery', label: 'Mystery Packs',   meta: 'Guaranteed hits' },
    { sig: 'crown',   label: 'Tournaments',     meta: 'Register online' },
    { sig: 'coin',    label: 'Sell to Us',      meta: 'Instant quotes' },
  ];
  return (
    <section className="quick-cats">
      <div className="qc-inner">
        {cats.map(c => (
          <a key={c.label} href="#" className="qc-card" onClick={e=>e.preventDefault()}>
            <div className="qc-icon"><Sig name={c.sig} size={20} stroke={1.4} /></div>
            <div className="qc-text">
              <span className="qc-label">{c.label}</span>
              <span className="qc-meta">{c.meta}</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Hero, QuickCats });