// Header — utility bar, logo, primary nav, search, account & cart
function Header({ cartCount, onNav, onCart, active, mobile = false }) {
  const { Icon } = window;
  const links = [
    { id: 'shop', label: 'Boutique' },
    { id: 'shop', label: 'Sommeil' },
    { id: 'shop', label: 'Immunité' },
    { id: 'shop', label: 'Digestion' },
    { id: 'about', label: 'À propos' },
    { id: 'quality', label: 'Charte qualité' },
    { id: 'pro', label: 'Espace pro' },
    { id: 'home', label: 'Conseils' },
  ];
  if (mobile) {
    return (
      <header style={{ position: 'sticky', top: 0, zIndex: 30 }}>
        <div style={{ background: 'var(--ink-900)', color: 'var(--text-on-dark-muted)', fontSize: 11.5, letterSpacing: '0.02em', textAlign: 'center', padding: '7px 14px' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
            <Icon name="leaf" size={13} color="var(--sage-300)" /> Conseil de praticien · livraison offerte dès 49&nbsp;€
          </span>
        </div>
        <div style={{ background: 'rgba(251,250,245,0.96)', backdropFilter: 'blur(8px)', borderBottom: '1px solid var(--border-hairline)', padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <button style={iconBtn}><Icon name="menu" size={22} /></button>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav && onNav('home'); }} style={{ display: 'inline-flex', margin: '0 auto' }}>
            <img src={(window.__resources && window.__resources.logoPrimary) || "../../assets/sinopharma-logo.png"} alt="Sinopharma" style={{ height: 30, width: 'auto', display: 'block' }} />
          </a>
          <button style={iconBtn}><Icon name="search" size={21} /></button>
          <button onClick={onCart} style={{ ...iconBtn, position: 'relative' }}>
            <Icon name="shopping-bag" size={21} />
            {cartCount > 0 ? (
              <span style={{ position: 'absolute', top: 2, right: 2, minWidth: 16, height: 16, padding: '0 4px', borderRadius: 8, background: 'var(--green-500)', color: 'var(--cream-50)', fontSize: 10.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-body)' }}>{cartCount}</span>
            ) : null}
          </button>
        </div>
        <div style={{ background: 'var(--surface-card)', borderBottom: '1px solid var(--border-hairline)', display: 'flex', gap: 20, padding: '0 16px', height: 42, alignItems: 'center', overflowX: 'auto' }}>
          {links.map((l, i) => (
            <a key={i} href="#" onClick={(e) => { e.preventDefault(); onNav && onNav(l.id); }} style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, fontWeight: 500, whiteSpace: 'nowrap', color: l.id === active ? 'var(--green-700)' : 'var(--gray-700)', textDecoration: 'none' }}>{l.label}</a>
          ))}
        </div>
      </header>
    );
  }
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 30 }}>
      {/* utility bar */}
      <div style={{ background: 'var(--ink-900)', color: 'var(--text-on-dark-muted)', fontSize: 12.5, letterSpacing: '0.02em' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '8px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <Icon name="leaf" size={14} color="var(--sage-300)" /> Plantes tracées · conseil de praticien · livraison offerte dès 49&nbsp;€
          </span>
          <span style={{ display: 'flex', gap: 20 }}>
            <a href="#" style={{ color: 'var(--text-on-dark-muted)' }}>Suivi de commande</a>
            <a href="#" style={{ color: 'var(--text-on-dark-muted)' }}>Aide</a>
          </span>
        </div>
      </div>
      {/* main bar */}
      <div style={{ background: 'rgba(251,250,245,0.92)', backdropFilter: 'blur(8px)', borderBottom: '1px solid var(--border-hairline)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '14px 28px', display: 'flex', alignItems: 'center', gap: 28 }}>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav('home'); }} style={{ display: 'inline-flex' }}>
            <img src={(window.__resources && window.__resources.logoPrimary) || "../../assets/sinopharma-logo.png"} alt="Sinopharma" style={{ height: 38, width: 'auto', display: 'block' }} />
          </a>
          <div style={{ flex: 1, maxWidth: 460, display: 'flex', alignItems: 'center', gap: 9, height: 44, padding: '0 16px', background: 'var(--surface-card)', border: '1.5px solid var(--border-soft)', borderRadius: 'var(--radius-pill)' }}>
            <Icon name="search" size={18} color="var(--gray-400)" />
            <input placeholder="Rechercher une plante, un trouble, une formule…" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--text-strong)' }} />
          </div>
          <nav style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }}>
            <button onClick={() => onNav('home')} style={iconBtn}><Icon name="user" size={21} /></button>
            <button onClick={() => onNav('home')} style={iconBtn}><Icon name="heart" size={21} /></button>
            <button onClick={onCart} style={{ ...iconBtn, position: 'relative' }}>
              <Icon name="shopping-bag" size={21} />
              {cartCount > 0 ? (
                <span style={{ position: 'absolute', top: 2, right: 2, minWidth: 17, height: 17, padding: '0 4px', borderRadius: 9, background: 'var(--green-500)', color: 'var(--cream-50)', fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-body)' }}>{cartCount}</span>
              ) : null}
            </button>
          </nav>
        </div>
      </div>
      {/* category nav */}
      <div style={{ background: 'var(--surface-card)', borderBottom: '1px solid var(--border-hairline)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 28px', display: 'flex', gap: 30, height: 46, alignItems: 'center' }}>
          {links.map((l, i) => (
            <a key={i} href="#" onClick={(e) => { e.preventDefault(); onNav(l.id); }}
              style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500, color: (l.id === active && l.id !== 'shop') || i === 0 ? 'var(--green-700)' : 'var(--gray-700)', textDecoration: 'none', letterSpacing: '0.01em' }}>
              {l.label}
            </a>
          ))}
          <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, color: 'var(--plum-500)', fontWeight: 600 }}>
            <Icon name="sparkles" size={15} color="var(--plum-500)" /> Bilan personnalisé
          </span>
        </div>
      </div>
    </header>
  );
}
const iconBtn = { width: 42, height: 42, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', border: 'none', background: 'transparent', color: 'var(--gray-700)', cursor: 'pointer', borderRadius: 'var(--radius-md)' };
window.Header = Header;