/* global React, Icon, Button */
const { useState: useHState } = React;

function AnnouncementBar() {
  return (
    <div style={{ background: 'var(--green-900)', color: '#fff', textAlign: 'center',
      fontSize: 13.5, fontWeight: 500, padding: '9px 16px', letterSpacing: '.01em',
      display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 10 }}>
      <Icon name="truck" size={15} />
      <span>Free worldwide shipping over $40 &nbsp;·&nbsp; 60-day money-back guarantee</span>
    </div>
  );
}

function Header({ cartCount, onCart }) {
  const [open, setOpen] = useHState(false);
  const links = ['Shop', 'How it works', 'Reviews', 'For GLP-1', 'FAQ'];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 40,
      background: 'rgba(255,252,246,.86)', backdropFilter: 'blur(10px)',
      borderBottom: '1px solid var(--line)' }}>
      <AnnouncementBar />
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px', height: 72,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <img src="../../assets/logo-wordmark-black.png" alt="Psyllify" style={{ height: 26 }} />
        <nav style={{ display: 'flex', gap: 30 }}>
          {links.map(l => (
            <a key={l} href="#" style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink-800)',
              textDecoration: 'none' }}
              onMouseOver={e => e.currentTarget.style.color = 'var(--green-600)'}
              onMouseOut={e => e.currentTarget.style.color = 'var(--ink-800)'}>{l}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <Icon name="search" size={20} style={{ cursor: 'pointer', color: 'var(--green-900)' }} />
          <button onClick={onCart} style={{ position: 'relative', border: 0, background: 'none', cursor: 'pointer', display: 'inline-flex' }}>
            <Icon name="shopping-bag" size={21} color="var(--green-900)" />
            {cartCount > 0 && (
              <span style={{ position: 'absolute', top: -8, right: -9, background: 'var(--green-600)',
                color: '#fff', fontSize: 11, fontWeight: 700, minWidth: 18, height: 18, borderRadius: 999,
                display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 4px' }}>{cartCount}</span>
            )}
          </button>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Header, AnnouncementBar });