// Top + nav

function Topbar() {
  const items = window.TICKER;
  const list = [...items, ...items, ...items];
  return (
    <div style={{
      background: '#0a0a0a',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
      color: 'rgba(255,255,255,0.7)',
      fontSize: 12,
      letterSpacing: '0.04em',
      overflow: 'hidden',
      position: 'relative',
    }}>
      <div className="sat-marquee" style={{
        display: 'flex', gap: 48, padding: '10px 0',
        whiteSpace: 'nowrap', width: 'max-content',
        animation: 'sat-marquee 38s linear infinite',
      }}>
        {list.map((t, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <span style={{
              width: 5, height: 5, borderRadius: 999, background: '#2ECC71',
              boxShadow: '0 0 8px #2ECC71',
            }}/>
            {t}
          </span>
        ))}
      </div>
    </div>
  );
}

const NAV_ITEMS = [
  { label: 'Categorías', dropdown: true },
  { label: 'Ofertas',    dropdown: false, gold: true },
  { label: 'Marcas',     dropdown: false },
  { label: 'Ubicación y contacto', dropdown: false },
  { label: 'Consultas frecuentes', dropdown: false },
];

function Navbar({ cartCount, onOpenCart, onSearch }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [catOpen, setCatOpen] = React.useState(false);
  const [q, setQ] = React.useState('');
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header
      onMouseLeave={() => setCatOpen(false)}
      style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: scrolled ? 'rgba(17,17,17,0.78)' : 'rgba(17,17,17,0.5)',
        backdropFilter: 'blur(18px) saturate(140%)',
        WebkitBackdropFilter: 'blur(18px) saturate(140%)',
        borderBottom: '1px solid ' + (scrolled ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.04)'),
        transition: 'all 240ms ease',
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto',
        padding: '14px 32px',
        display: 'grid',
        gridTemplateColumns: 'auto 1fr auto',
        alignItems: 'center',
        gap: 32,
      }}>
        <Logo />
        <nav style={{ display: 'flex', justifyContent: 'center', gap: 4 }}>
          {NAV_ITEMS.map(({ label, dropdown, gold }) => (
            <button
              key={label}
              onMouseEnter={() => setCatOpen(dropdown)}
              onClick={() => dropdown && setCatOpen(!catOpen)}
              style={{
                background: 'none', border: 'none',
                padding: '10px 14px', borderRadius: 8,
                color: gold ? '#C9A84C' : (catOpen && dropdown ? '#2ECC71' : 'rgba(255,255,255,0.86)'),
                fontFamily: '"Sora", system-ui, sans-serif',
                fontSize: 14, letterSpacing: '0.01em', fontWeight: 500,
                cursor: 'pointer',
                transition: 'color 200ms ease, background 200ms ease',
                display: 'inline-flex', alignItems: 'center', gap: 5,
              }}
            >
              {label}
              {dropdown && (
                <svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
                  <path d="M1 1l4 4 4-4"/>
                </svg>
              )}
            </button>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <form
            onSubmit={(e) => { e.preventDefault(); onSearch && onSearch(q); }}
            style={{
              display: 'flex', alignItems: 'center', gap: 8,
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 10, padding: '8px 12px',
              color: 'rgba(255,255,255,0.6)',
              minWidth: 220,
              transition: 'border-color 200ms',
            }}
          >
            {window.Icon.search(15)}
            <input
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Buscar 500+ productos…"
              style={{
                background: 'transparent', border: 'none', outline: 'none',
                color: '#fff', fontSize: 13, width: '100%',
                fontFamily: 'Inter, system-ui, sans-serif',
              }}
            />
            <span style={{
              fontFamily: 'ui-monospace, monospace', fontSize: 10,
              color: 'rgba(255,255,255,0.4)',
              border: '1px solid rgba(255,255,255,0.12)',
              padding: '1px 5px', borderRadius: 4,
            }}>⌘K</span>
          </form>
          <NavIcon>{window.Icon.user(18)}</NavIcon>
          <button onClick={onOpenCart} style={{
            position: 'relative',
            background: 'rgba(46,204,113,0.10)',
            border: '1px solid rgba(46,204,113,0.35)',
            color: '#2ECC71', borderRadius: 10,
            padding: '8px 12px', cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            {window.Icon.cart(18)}
            <span style={{ fontSize: 13, fontFamily: '"Sora", sans-serif', fontWeight: 600, color: '#fff' }}>
              {window.fmtCLP(cartCount === 0 ? 0 : 0)}
            </span>
            {cartCount > 0 && (
              <span style={{
                position: 'absolute', top: -6, right: -6,
                width: 18, height: 18, borderRadius: 999,
                background: '#2ECC71', color: '#0a0a0a',
                fontSize: 10, fontWeight: 700,
                display: 'grid', placeItems: 'center',
                border: '2px solid #111',
              }}>{cartCount}</span>
            )}
          </button>
        </div>
      </div>
      {catOpen && <CategoriesDropdown onClose={() => setCatOpen(false)} />}
    </header>
  );
}

function NavIcon({ children }) {
  return (
    <button style={{
      background: 'rgba(255,255,255,0.04)',
      border: '1px solid rgba(255,255,255,0.08)',
      color: '#fff', borderRadius: 10,
      padding: 9, cursor: 'pointer',
      display: 'grid', placeItems: 'center',
      transition: 'all 200ms',
    }}>{children}</button>
  );
}

function CategoriesDropdown({ onClose }) {
  const cats = window.NAV_CATEGORIES;
  return (
    <div
      onMouseLeave={onClose}
      style={{
        position: 'absolute', left: 0, right: 0, top: '100%',
        background: 'rgba(17,17,17,0.96)',
        backdropFilter: 'blur(20px)',
        borderTop: '1px solid rgba(46,204,113,0.18)',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
        animation: 'sat-fade 220ms ease',
        padding: '28px 32px',
      }}
    >
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          fontFamily: 'ui-monospace, monospace',
          fontSize: 11, color: '#2ECC71', letterSpacing: '0.18em',
          marginBottom: 18, textTransform: 'uppercase',
        }}>Categorías</div>
        <ul style={{
          listStyle: 'none', margin: 0, padding: 0,
          display: 'grid',
          gridTemplateColumns: 'repeat(3, minmax(0, 200px))',
          gap: '12px 48px',
        }}>
          {cats.map((cat) => (
            <li key={cat}>
              <a href="#" style={{
                color: cat === 'Todos' ? '#2ECC71' : '#fff',
                textDecoration: 'none', fontSize: 15,
                fontFamily: 'Inter, sans-serif',
                display: 'inline-flex', alignItems: 'center', gap: 10,
                fontWeight: cat === 'Todos' ? 600 : 400,
              }}>
                <span style={{ width: 14, height: 1, background: 'rgba(46,204,113,0.6)', flexShrink: 0 }}/>
                {cat}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

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