const { useState: useStateNav } = React;

function Ticker({ speed }) {
  const items = ["Satindica", "Semillas", "Sustratos", "Iluminación", "Nutrientes", "Parafernalia"];
  const row = (
    <span>
      {items.map((it, i) => (
        <span key={i}><span className="ticker__star">◆</span>{" "}{it}{"  "}</span>
      ))}
    </span>
  );
  return (
    <div className="ticker">
      <div className="ticker__track" style={{ animationDuration: speed + "s" }}>
        {row}{row}{row}{row}
      </div>
    </div>
  );
}

const NAV_CATS = ['Semillas', 'Parafernalia', 'eria', 'Vaporizadores', 'Kits de cultivo', 'Fertilizantes', 'Sustratos', 'Macetas', 'Todos'];

function Navbar({ cartCount, onOpenCart }) {
  const links = ['Categorías', 'Ofertas', 'Marcas', 'Ubicación y contacto', 'Consultas frecuentes'];
  const [active, setActive] = useStateNav('Categorías');
  const [catOpen, setCatOpen] = useStateNav(false);
  return (
    <header className="nav" style={{ position: 'relative' }} onMouseLeave={() => setCatOpen(false)}>
      <div className="container nav__inner">
        <Logo />
        <nav className="nav__menu">
          {links.map(l => (
            <a
              key={l}
              href="#"
              className={active === l ? 'active' : ''}
              onClick={(e) => { e.preventDefault(); setActive(l); }}
              onMouseEnter={() => setCatOpen(l === 'Categorías')}
              style={l === 'Ofertas' ? { color: '#C9A84C' } : {}}
            >
              {l}{l === 'Categorías' ? ' ▾' : ''}
            </a>
          ))}
        </nav>
        <div className="nav__right">
          <button className="icon-btn" aria-label="Buscar">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4">
              <circle cx="6" cy="6" r="4.5" />
              <line x1="9.5" y1="9.5" x2="13" y2="13" />
            </svg>
          </button>
          <button className="icon-btn" aria-label="Cuenta">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4">
              <circle cx="7" cy="5" r="2.5" />
              <path d="M2 13c0-2.5 2.2-4 5-4s5 1.5 5 4" />
            </svg>
          </button>
          <button className="cart-btn" onClick={onOpenCart}>
            <span>Carrito</span>
            <span className="pip">{cartCount}</span>
          </button>
        </div>
      </div>
      {catOpen && (
        <div
          onMouseLeave={() => setCatOpen(false)}
          style={{
            position: 'absolute', left: 0, right: 0, top: '100%',
            background: 'rgba(17,17,17,0.98)',
            borderBottom: '1px solid rgba(255,255,255,0.08)',
            padding: '20px 24px',
            zIndex: 100,
          }}
        >
          <ul style={{
            listStyle: 'none', margin: '0 auto', padding: 0,
            maxWidth: 900,
            display: 'flex', flexWrap: 'wrap', gap: '10px 40px',
          }}>
            {NAV_CATS.map((cat) => (
              <li key={cat}>
                <a href="#" style={{
                  color: cat === 'Todos' ? '#C9A84C' : 'rgba(255,255,255,0.85)',
                  textDecoration: 'none', fontSize: 14,
                  fontWeight: cat === 'Todos' ? 600 : 400,
                }}>
                  {cat}
                </a>
              </li>
            ))}
          </ul>
        </div>
      )}
    </header>
  );
}

Object.assign(window, { Ticker, Navbar });