// Chrome: PromoBar, Nav (with search), GameSwitcher, MobileMenu, Footer
const { useState, useRef, useEffect } = React;

function PromoBar() {
  return (
    <div className="promo-bar">
      <span className="store-hours">
        <span className="store-hours-dot" style={{display:'inline-block',width:7,height:7,borderRadius:'50%',background:'var(--gold-glow)',boxShadow:'0 0 10px var(--gold-glow)',marginRight:6,verticalAlign:'middle'}}></span>
        <span>Open until 10 PM today</span>
      </span>
      <span className="sep desktop-only">•</span>
      ✦ <strong>Free Shipping</strong> on US orders over $75
      <span className="sep desktop-only">•</span>
      <span className="desktop-only"><strong>Buylist Open</strong> — Top dollar for your collection</span>
      <span className="sep desktop-only">•</span>
      <span className="desktop-only">Friday Night Magic every week ✦</span>
    </div>
  );
}

function Nav({ authed, credit, cartCount, onSignInClick, onCartClick, onSellClick, onMenuClick }) {
  const [q, setQ] = useState('');
  const [open, setOpen] = useState(false);
  const items = window.WW_DATA.products.filter(p =>
    !q ? false : p.name.toLowerCase().includes(q.toLowerCase()) || p.set.toLowerCase().includes(q.toLowerCase())
  ).slice(0, 5);
  return (
    <nav>
      <div className="nav-inner">
        <a href="#" className="nav-logo">
          <div className="nav-logo-frame">
            <img src="assets/logo.png" alt="Wandering Wizards" className="nav-logo-img" />
          </div>
          <div className="nav-logo-text-wrap">
            <span className="nav-logo-text">Wandering Wizards</span>
            <span className="nav-logo-sub">The TCG Vault</span>
          </div>
        </a>

        <div className="nav-search" style={{position:'relative'}}>
          <span className="nav-search-icon">⌕</span>
          <input
            type="text"
            className="nav-search-input"
            placeholder="Search 10,000+ enchanted cards…"
            value={q}
            onChange={e => { setQ(e.target.value); setOpen(true); }}
            onFocus={() => setOpen(true)}
            onBlur={() => setTimeout(() => setOpen(false), 150)}
          />
          <span className="nav-search-shortcut">⌘K</span>
          {open && items.length > 0 && (
            <div style={{position:'absolute',top:'calc(100% + 8px)',left:0,right:0,background:'rgba(10,4,32,0.96)',backdropFilter:'blur(20px)',border:'1px solid var(--border-mid)',borderRadius:12,padding:8,zIndex:200}}>
              {items.map(p => (
                <div key={p.id} style={{display:'flex',alignItems:'center',gap:10,padding:'8px 10px',borderRadius:8,cursor:'pointer',fontFamily:'var(--font-magic)'}} onMouseDown={() => { setQ(p.name); setOpen(false); }}>
                  <span style={{fontSize:'1.1rem'}}>{window.WW_DATA.games[p.game].emoji}</span>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontFamily:'var(--font-display)',fontSize:'0.85rem',color:'var(--text-primary)'}}>{p.name}</div>
                    <div style={{fontStyle:'italic',fontSize:'0.78rem',color:'var(--text-muted)'}}>{p.set}</div>
                  </div>
                  <span style={{fontFamily:'var(--font-display)',color:'var(--gold-glow)',fontSize:'0.9rem',fontWeight:700}}>${p.price.toFixed(2)}</span>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="nav-actions">
          <button className="nav-icon-btn" title="Wishlist">♡</button>
          <button className="nav-credit" onClick={onSignInClick} style={{background:'transparent',border:'1px solid var(--border-gold)',color:'var(--gold-glow)',padding:'0.5rem 0.85rem',borderRadius:11,fontFamily:'var(--font-display)',fontSize:'0.78rem',fontWeight:700,letterSpacing:'0.06em',cursor:'pointer',display:'flex',alignItems:'center',gap:6}}>
            <span style={{color:'var(--gold-warm)'}}>✦</span> ${credit.toFixed(2)}
          </button>
          {authed ? (
            <button style={{background:'transparent',border:'1px solid var(--border-mid)',color:'var(--text-primary)',padding:'0.5rem 0.85rem',borderRadius:11,fontFamily:'var(--font-display)',fontSize:'0.78rem',fontWeight:700,letterSpacing:'0.06em',cursor:'pointer',display:'flex',alignItems:'center',gap:8}}>
              <span style={{width:24,height:24,borderRadius:'50%',background:'linear-gradient(135deg, var(--purple-500), var(--purple-700))',color:'var(--gold-glow)',fontSize:'0.7rem',display:'inline-flex',alignItems:'center',justifyContent:'center'}}>W</span>
              Wizard
            </button>
          ) : (
            <button className="btn-sign-in" onClick={onSignInClick} style={{background:'transparent',border:'1px solid var(--border-mid)',color:'var(--text-primary)',padding:'0.55rem 1rem',borderRadius:11,fontFamily:'var(--font-display)',fontSize:'0.74rem',fontWeight:700,letterSpacing:'0.08em',textTransform:'uppercase',cursor:'pointer',display:'flex',alignItems:'center',gap:6}}>
              ◔ <span>Sign In</span>
            </button>
          )}
          <button className="nav-icon-btn" title="Cart" onClick={onCartClick} style={{position:'relative'}}>
            ⛁
            {cartCount > 0 && <span className="badge" style={{position:'absolute',top:-5,right:-5,minWidth:19,height:19,padding:'0 5px',borderRadius:50,background:'linear-gradient(135deg, var(--gold-warm), var(--gold-mid))',color:'var(--purple-1000)',fontFamily:'var(--font-ui)',fontSize:'0.62rem',fontWeight:700,display:'flex',alignItems:'center',justifyContent:'center',border:'2px solid var(--void)'}}>{cartCount}</span>}
          </button>
          <button className="btn-sell" onClick={onSellClick}>✦ <span>Sell Cards</span></button>
          <div className="hamburger" onClick={onMenuClick}><span></span><span></span><span></span></div>
        </div>
      </div>
    </nav>
  );
}

function GameSwitcher() {
  const games = [
    { href: 'index.html', label: '✦ All Games', active: true },
    { href: 'magic.html', label: 'Magic: The Gathering', dot: '#9d6fdc' },
    { href: 'pokemon.html', label: 'Pokémon', dot: '#f0c050' },
    { href: 'riftbound.html', label: 'Riftbound', dot: '#6d99e0' },
    { href: 'onepiece.html', label: 'One Piece', dot: '#e86680' },
    { href: 'cyberpunk.html', label: 'Cyberpunk', dot: '#ffd400', tag: 'New' },
    { href: '#mystery', label: '◈ Mystery Packs' },
    { href: '#buylist', label: '◈ Buylist', hot: true },
  ];
  return (
    <div className="game-switcher">
      <div className="gs-inner">
        {games.map((g, i) => (
          <a href={g.href} key={i} className={`gs-pill ${g.active ? 'active' : ''}`} onClick={e => e.preventDefault()}>
            {g.dot && <span className="gs-dot" style={{background: g.dot}}></span>}
            {g.label}
            {g.tag && <span className="gs-tag tag-new">{g.tag}</span>}
            {g.hot && <span className="gs-tag">Hot</span>}
          </a>
        ))}
      </div>
    </div>
  );
}

function MobileMenu({ open }) {
  if (!open) return null;
  return (
    <div className="mobile-menu open">
      <a href="#">⚔️ Magic: The Gathering</a>
      <a href="#">⚡ Pokémon TCG</a>
      <a href="#">🌊 Riftbound</a>
      <a href="#">☠️ One Piece</a>
      <a href="#">◇ Singles</a>
      <a href="#">◇ Sealed Product</a>
      <a href="#">◇ Mystery Packs</a>
      <a href="#">◇ Events & Tournaments</a>
      <a href="#">◇ Sell to Us</a>
    </div>
  );
}

function Footer() {
  return (
    <footer>
      <div className="footer-inner">
        <div className="footer-top">
          <div className="footer-brand">
            <a href="#" className="footer-logo" onClick={e => e.preventDefault()}>
              <div className="footer-logo-frame"><img src="assets/logo.png" alt="" className="footer-logo-img" /></div>
              <div>
                <span className="footer-logo-text">Wandering Wizards</span>
                <span className="footer-logo-sub">The TCG Vault</span>
              </div>
            </a>
            <p className="footer-tag">Your local game store for Magic, Pokémon, Riftbound, and One Piece. We buy, sell, and trade — and we love what we do.</p>
            <div className="footer-contact">
              <strong>Visit us:</strong> 123 Mystic Lane<br />
              <strong>Open:</strong> Tue–Sun · 12–10 PM<br />
              <strong>Email:</strong> hello@wanderingwizards.com
            </div>
            <div className="footer-social">
              <a href="#" className="social-btn" title="Discord" onClick={e=>e.preventDefault()}>◈</a>
              <a href="#" className="social-btn" title="Instagram" onClick={e=>e.preventDefault()}>⌾</a>
              <a href="#" className="social-btn" title="X" onClick={e=>e.preventDefault()}>✕</a>
              <a href="#" className="social-btn" title="YouTube" onClick={e=>e.preventDefault()}>▶</a>
              <a href="#" className="social-btn" title="TikTok" onClick={e=>e.preventDefault()}>♪</a>
            </div>
          </div>
          {[
            ['Shop', ['Magic Singles','Pokémon Singles','Riftbound Singles','One Piece Singles','Sealed Product','Mystery Packs','Accessories']],
            ['Play', ['Event Calendar','Friday Night Magic','Pokémon League','Riftbound Nights','One Piece League','Pre-Releases']],
            ['Sell', ['Buylist','Sell Collection','Bulk Pricing','Card Grading','Consignment']],
            ['Support', ['Contact Us','Store Hours','Shipping Info','Returns','FAQ','About Us']],
          ].map(([h, links]) => (
            <div key={h} className="footer-col">
              <h4>{h}</h4>
              <ul className="footer-links">
                {links.map(l => <li key={l}><a href="#" onClick={e=>e.preventDefault()}>{l}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div className="footer-copy">
            © 2025 Wandering Wizards <span className="gold-accent">✦</span> All rights reserved <span className="gold-accent">✦</span> Brewed with passion for the community
          </div>
          <div className="footer-legal">
            <a href="#" onClick={e=>e.preventDefault()}>Privacy</a>
            <a href="#" onClick={e=>e.preventDefault()}>Terms</a>
            <a href="#" onClick={e=>e.preventDefault()}>Shipping</a>
            <a href="#" onClick={e=>e.preventDefault()}>Refund</a>
          </div>
          <div className="pay-badges" style={{display:'flex',gap:6}}>
            {['Visa','Mastercard','Amex','PayPal','Apple Pay'].map(p => (
              <span key={p} className="pay-badge" style={{fontFamily:'var(--font-ui)',fontWeight:600,fontSize:'0.7rem',color:'var(--text-muted)',border:'1px solid var(--border-subtle)',padding:'4px 9px',borderRadius:6,background:'rgba(255,255,255,0.02)'}}>{p}</span>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { PromoBar, Nav, GameSwitcher, MobileMenu, Footer });