const { useRef: useRefNav, useEffect: useEffectNav, useState: useStateNav1 } = React;

function Topbar() {
  return (
    <div className="topbar">
      <div className="wrap topbar-inner">
        <div className="topbar-msg">
          <span>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 2c-3 4-5 7-5 11a5 5 0 0 0 10 0c0-4-2-7-5-11z"/><path d="M12 13v9"/></svg>
            Envíos a todo Chile
          </span>
          <span className="dot"></span>
          <span>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            Pago seguro
          </span>
          <span className="dot"></span>
          <span>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M21 15a4 4 0 0 1-4 4H8l-5 4V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            Asesoría experta
          </span>
        </div>
        <div className="topbar-meta">
          <a href="#">Seguir pedido</a><span>·</span>
          <a href="#">Ayuda</a><span>·</span>
          <a href="#">CLP $</a>
        </div>
      </div>
    </div>
  );
}

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

function Navbar1({ cartCount, onOpenCart }) {
  const searchRef = useRefNav(null);
  const [catOpen, setCatOpen] = useStateNav1(false);
  useEffectNav(() => {
    const handler = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        searchRef.current?.focus();
      }
    };
    document.addEventListener("keydown", handler);
    return () => document.removeEventListener("keydown", handler);
  }, []);

  return (
    <nav className="nav" style={{ position: 'relative' }} onMouseLeave={() => setCatOpen(false)}>
      <div className="wrap nav-inner">
        <Logo1 />
        <div className="menu">
          <a href="#" className="active" onMouseEnter={() => setCatOpen(true)}>Categorías ▾</a>
          <a href="#" onMouseEnter={() => setCatOpen(false)} style={{ color: '#C9A84C' }}>Ofertas</a>
          <a href="#" onMouseEnter={() => setCatOpen(false)}>Marcas</a>
          <a href="#" onMouseEnter={() => setCatOpen(false)}>Ubicación y contacto</a>
          <a href="#" onMouseEnter={() => setCatOpen(false)}>Consultas frecuentes</a>
        </div>
        <div className="nav-actions">
          <form className="search" onSubmit={(e) => e.preventDefault()}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
            <input ref={searchRef} type="search" placeholder="Buscar semillas, sustratos…" />
            <span className="kbd">⌘K</span>
          </form>
          <button className="icon-btn" aria-label="Cuenta">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4.5 5-7 8-7s6.5 2.5 8 7"/></svg>
          </button>
          <button className="icon-btn" aria-label="Favoritos">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 21s-7-4.5-9.5-9.5C1 7.5 4 4 7.5 4c2 0 3.5 1 4.5 2.5C13 5 14.5 4 16.5 4 20 4 23 7.5 21.5 11.5 19 16.5 12 21 12 21z"/></svg>
          </button>
          <button className="icon-btn" aria-label="Carrito" onClick={onOpenCart}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 4h2l2.5 12.5a2 2 0 0 0 2 1.5h8a2 2 0 0 0 2-1.5L21 8H6"/><circle cx="10" cy="21" r="1"/><circle cx="18" cy="21" r="1"/></svg>
            {cartCount > 0 && <span className="cart-count">{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,
            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
          }}
        >
          <ul style={{
            listStyle: 'none', margin: '0 auto', padding: 0,
            maxWidth: 900,
            display: 'flex', flexWrap: 'wrap', gap: '10px 40px',
          }}>
            {NAV_CATS_V1.map((cat) => (
              <li key={cat}>
                <a href="#" style={{
                  color: cat === 'Todos' ? '#2ECC71' : 'rgba(255,255,255,0.85)',
                  textDecoration: 'none', fontSize: 14,
                  fontWeight: cat === 'Todos' ? 600 : 400,
                }}>
                  {cat}
                </a>
              </li>
            ))}
          </ul>
        </div>
      )}
    </nav>
  );
}

Object.assign(window, { Topbar, Navbar1 });
