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

function Header({ cats, activeCat, onCatChange, wishlistCount, onSearch, onNav }) {
  const [q, setQ] = useHS('');
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 20, background: '#fff', borderBottom: '1px solid #e5e5e5' }}>
      {/* top bar */}
      <div style={{ background: '#111', color: '#fff' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 20px', height: 64, display: 'flex', alignItems: 'center', gap: 24 }}>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav && onNav('home'); }}
             style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: '#fff' }}>
            <img src="../../assets/logos/logo-lure.png" alt="" style={{ height: 42 }}/>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, letterSpacing: '-0.01em' }}>낚시템</span>
          </a>
          <form onSubmit={(e) => { e.preventDefault(); onSearch && onSearch(q); }}
                style={{ flex: 1, maxWidth: 520, marginLeft: 'auto', display: 'flex', background: '#fff', borderRadius: 4, overflow: 'hidden' }}>
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="낚시템 검색..."
                   style={{ border: 0, padding: '10px 14px', flex: 1, background: 'transparent', fontFamily: 'var(--font-body)', fontSize: 14, outline: 'none', color: '#111' }}/>
            <button type="submit" style={{ border: 0, background: 'transparent', padding: '0 14px', cursor: 'pointer', color: '#111', display: 'flex', alignItems: 'center' }}>
              <Icon name="search" size={18}/>
            </button>
          </form>
          <nav style={{ display: 'flex', gap: 22, alignItems: 'center', fontSize: 13 }}>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav && onNav('wishlist'); }}
               style={{ color: '#fff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6, fontWeight: 500 }}>
              <Icon name="heart" size={16}/>위시리스트
              {wishlistCount > 0 && <span style={{ background: 'var(--coral)', color: '#fff', borderRadius: 999, fontSize: 11, padding: '1px 6px', fontWeight: 700 }}>{wishlistCount}</span>}
            </a>
            <a href="#" style={{ color: '#fff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6, fontWeight: 500 }}>
              <Icon name="user" size={16}/>로그인
            </a>
          </nav>
        </div>
      </div>
      {/* category strip */}
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 20px' }}>
        <div style={{ display: 'flex', gap: 2, overflowX: 'auto', scrollbarWidth: 'none' }}>
          {cats.map((c) => {
            const active = c.id === activeCat;
            return (
              <button key={c.id} onClick={() => onCatChange(c.id)}
                style={{
                  background: 'transparent', border: 0, cursor: 'pointer',
                  padding: '14px 16px', fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: active ? 700 : 500,
                  color: active ? '#111' : '#666', whiteSpace: 'nowrap',
                  borderBottom: active ? '2px solid var(--coral)' : '2px solid transparent',
                  letterSpacing: '0.02em',
                }}>
                {c.label}
              </button>
            );
          })}
        </div>
      </div>
    </header>
  );
}
Object.assign(window, { Header });