// Header + Announcement bar + Mobile drawer

const { useState: useStateH } = React;

function AnnouncementBar() {
  const msgs = [
    'complimentary shipping on orders over $120.',
    'new spring drop — the little linen set is here.',
    'sign up for 10% off your first order.',
  ];
  const [i, setI] = useStateH(0);
  React.useEffect(() => {
    const t = setInterval(() => setI(x => (x + 1) % msgs.length), 4200);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{ background: 'var(--tide-700)', color: 'var(--sand-100)', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', textAlign: 'center', padding: '10px 16px', fontWeight: 400 }}>
      <span key={i} style={{ animation: 'fadein var(--dur-slow) var(--ease-tide)' }}>{msgs[i]}</span>
      <style>{`@keyframes fadein { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }`}</style>
    </div>
  );
}

function Header({ cartCount, onCartClick, onNavigate, current }) {
  const items = [
    { id: 'shop', label: 'shop' },
    { id: 'journal', label: 'journal' },
    { id: 'story', label: 'our story' },
    { id: 'find', label: 'find us' },
  ];
  return (
    <div>
      <AnnouncementBar />
      <header style={{
        background: 'color-mix(in srgb, var(--sand-100) 92%, transparent)',
        backdropFilter: 'blur(8px) saturate(90%)',
        WebkitBackdropFilter: 'blur(8px) saturate(90%)',
        borderBottom: '1px solid var(--divider)',
        padding: '16px 48px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        position: 'sticky',
        top: 0,
        zIndex: 20,
      }}>
        <div onClick={() => onNavigate('home')} style={{ cursor: 'pointer' }}>
          <Logo size={38} showWordmark />
        </div>
        <nav style={{ display: 'flex', gap: 32, fontSize: 14, color: 'var(--tide-700)' }}>
          {items.map(it => (
            <a key={it.id}
               onClick={(e) => { e.preventDefault(); onNavigate(it.id); }}
               style={{
                 cursor: 'pointer',
                 textDecoration: 'none',
                 color: current === it.id ? 'var(--tide-800)' : 'var(--tide-600)',
                 borderBottom: current === it.id ? '1px solid var(--tide-600)' : '1px solid transparent',
                 paddingBottom: 2,
                 transition: 'color var(--dur-fast) var(--ease-out)',
               }}>
              {it.label}
            </a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 22, color: 'var(--tide-700)' }}>
          <Icon name="search" size={19} style={{ cursor: 'pointer' }} />
          <Icon name="user" size={19} style={{ cursor: 'pointer' }} />
          <div onClick={onCartClick} style={{ position: 'relative', cursor: 'pointer' }}>
            <Icon name="bag" size={19} />
            {cartCount > 0 && (
              <span style={{
                position: 'absolute', top: -6, right: -8,
                background: 'var(--clay-600)', color: 'var(--sand-50)',
                fontSize: 10, fontWeight: 600,
                width: 16, height: 16, borderRadius: 999,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-mono)',
              }}>{cartCount}</span>
            )}
          </div>
        </div>
      </header>
    </div>
  );
}

Object.assign(window, { Header });
