/* Sidebar + TopBar + Footer + MobileTabbar */

function Sidebar({ route, onNav, open, onClose }) {
  return (
    <>
      <div className={`sidebar-backdrop ${open ? 'open' : ''}`} onClick={onClose}/>
      <aside className={`sidebar ${open ? 'open' : ''}`}>
        <div className="sidebar-logo">
          <AuroraLogo size={56} color="#8C6F3E"/>
          <div className="name">AURORA</div>
          <div className="tag">velas artesanales</div>
        </div>

        <div className="sidebar-group">
          <div className="group-title">Navegar</div>
          {[
            ['home','Inicio'],
            ['shop','Catálogo'],
            ['process','El proceso'],
            ['about','Sobre Aurora'],
            ['contact','Contacto'],
          ].map(([id, label]) => (
            <a key={id} onClick={() => { onNav(id); onClose(); }}
               className={`nav-link ${route.page === id ? 'active' : ''}`}>{label}</a>
          ))}
        </div>

        <div className="sidebar-group">
          <div className="group-title">Por ocasión</div>
          {CATEGORIES.slice(0, 8).map(c => (
            <a key={c.id}
               className={`nav-link ${route.page === 'shop' && route.cat === c.id ? 'active' : ''}`}
               onClick={() => { onNav('shop', { cat: c.id }); onClose(); }}>
              <span style={{fontSize:14}}>{c.emoji}</span>
              {c.label}
            </a>
          ))}
        </div>

        <div className="sidebar-group">
          <div className="group-title">Tipo</div>
          {CATEGORIES.slice(8).map(c => (
            <a key={c.id}
               className={`nav-link ${route.page === 'shop' && route.cat === c.id ? 'active' : ''}`}
               onClick={() => { onNav('shop', { cat: c.id }); onClose(); }}>
              <span style={{fontSize:14}}>{c.emoji}</span>
              {c.label}
            </a>
          ))}
        </div>

        <div style={{ marginTop: 'auto', fontSize: 11, color: 'var(--ink-faint)', paddingTop: 16, borderTop: '1px solid var(--line-soft)' }}>
          <div>Santiago, Chile</div>
          <div>Despachos a todo el país ♡</div>
        </div>
      </aside>
    </>
  );
}

function TopBar({ cartCount, onMenu, onCart, onSearch, query }) {
  return (
    <div className="topbar">
      <button className="icon-btn show-mobile" onClick={onMenu} aria-label="menu"><Ic name="menu"/></button>

      <div className="show-mobile" style={{ flex: 1, textAlign: 'center', fontFamily: 'Playfair Display', letterSpacing: '0.2em', fontWeight: 500, color: 'var(--gold-deep)' }}>
        AURORA
      </div>

      <div className="search-wrap hide-mobile">
        <Ic name="search" size={18} color="var(--ink-faint)"/>
        <input placeholder="Buscar velas, ramos, ocasiones…" value={query} onChange={e => onSearch(e.target.value)}/>
      </div>

      <div style={{ flex: 1 }} className="hide-mobile"/>

      <button className="icon-btn hide-mobile" aria-label="favoritos"><Ic name="heart"/></button>
      <button className="icon-btn hide-mobile" aria-label="cuenta"><Ic name="user"/></button>
      <button className="icon-btn" onClick={onCart} aria-label="carrito">
        <Ic name="cart"/>
        {cartCount > 0 && <span className="badge">{cartCount}</span>}
      </button>
    </div>
  );
}

function Footer({ onNav }) {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div>
          <AuroraLogo size={44} color="#8C6F3E" withWord/>
          <p style={{ color: 'var(--ink-soft)', fontSize: 14, maxWidth: 320, marginTop: 16 }}>
            Velas y arreglos artesanales hechos con cera de soya, en pequeños lotes, en nuestro taller en Santiago.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
            <a className="icon-btn" href="https://www.instagram.com/aurora.velas.cl/" target="_blank" rel="noopener noreferrer" style={{border:'1px solid var(--line)'}}><Ic name="ig" size={18}/></a>
            <a className="icon-btn" href="#" style={{border:'1px solid var(--line)'}}><Ic name="wa" size={18}/></a>
            <a className="icon-btn" href="mailto:hola@auroravelas.cl" style={{border:'1px solid var(--line)'}}><Ic name="mail" size={18}/></a>
          </div>
        </div>
        <div>
          <h4>Tienda</h4>
          <a onClick={() => onNav('shop')}>Catálogo</a>
          <a onClick={() => onNav('shop', {cat:'baby'})}>Baby Shower</a>
          <a onClick={() => onNav('shop', {cat:'bautizo'})}>Bautizos</a>
          <a onClick={() => onNav('shop', {cat:'sanvalentin'})}>San Valentín</a>
          <a onClick={() => onNav('shop', {cat:'caja'})}>Cajas de regalo</a>
        </div>
        <div>
          <h4>Información</h4>
          <a onClick={() => onNav('about')}>Sobre Aurora</a>
          <a onClick={() => onNav('process')}>El proceso</a>
          <a onClick={() => onNav('contact')}>Contacto / FAQ</a>
          <a>Despachos y retiros</a>
          <a>Términos y condiciones</a>
        </div>
        <div>
          <h4>Contacto</h4>
          <a href="mailto:hola@auroravelas.cl">hola@auroravelas.cl</a>
          <a href="#">+56 9 XXXX XXXX</a>
          <a>Santiago, Chile</a>
          <div style={{ marginTop: 12 }}>
            <div style={{ fontSize: 11, color: 'var(--ink-faint)', marginBottom: 6 }}>Aceptamos</div>
            <div style={{ display: 'flex', gap: 6, fontSize: 11, color: 'var(--ink-soft)' }}>
              <span>Transferencia</span>·
              <span>Mercado Pago</span>·
              <span>Flow</span>
            </div>
          </div>
        </div>
      </div>
      <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--ink-faint)', marginTop: 32, paddingTop: 20, borderTop: '1px solid var(--line-soft)' }}>
        © Aurora Velas 2026 · Hecho con cariño en Santiago ♡
      </div>
    </footer>
  );
}

function MobileTabbar({ route, onNav, cartCount }) {
  const items = [
    { id: 'home', label: 'Inicio', icon: 'flame' },
    { id: 'shop', label: 'Tienda', icon: 'search' },
    { id: 'about', label: 'Aurora', icon: 'heart' },
    { id: 'cart', label: 'Carrito', icon: 'cart' },
  ];
  return (
    <nav className="mobile-tabbar">
      {items.map(it => (
        <a key={it.id} className={route.page === it.id ? 'active' : ''} onClick={() => onNav(it.id)}>
          <Ic name={it.icon} size={20}/>
          {it.label}
          {it.id === 'cart' && cartCount > 0 && <span className="tcount">{cartCount}</span>}
        </a>
      ))}
    </nav>
  );
}

Object.assign(window, { Sidebar, TopBar, Footer, MobileTabbar });