/* O Lucide não tem marca do WhatsApp: este é desenhado no mesmo traço
   (2px, pontas redondas) para não destoar do conjunto. */
function IconeWhatsApp({ size = 15, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
      style={{ flex: '0 0 auto', display: 'block' }}>
      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
      <path d="M9.2 8.4c.2-.4.7-.6 1.1-.4.3.2.6.8.7 1.2.1.2 0 .5-.2.7l-.4.5c.4.9 1.1 1.6 2 2l.5-.4c.2-.2.5-.3.7-.2.4.1 1 .4 1.2.7.2.4 0 .9-.4 1.1-.4.2-.9.3-1.4.2a6.3 6.3 0 0 1-4-4c-.1-.5 0-1 .2-1.4z" />
    </svg>
  );
}

function Header({ onNav, rota = 'estoque', count, dark = false }) {
  const { Logo, Icon } = window.Ds55VeCulosDesignSystem_b5c845;
  const fg = dark ? 'var(--papel)' : 'var(--text-title)';
  const off = dark ? '#9A9A93' : 'var(--text-muted)';
  const links = [
    { id: 'estoque', label: `ESTOQUE · ${count}` },
    { id: 'curadoria', label: 'BLOG' },
    { id: 'financiamento', label: 'FINANCIAMENTO' }
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: dark ? 'var(--preto-asfalto)' : 'var(--papel)',
      /* a nav do celular fica numa segunda linha e precisa da mesma cor de filete */
      '--linha-cabecalho': dark ? 'var(--preto-3)' : 'var(--border-hairline)',
      borderBottom: 'var(--borda-fina) solid var(--linha-cabecalho)'
    }}>
      <div className="faixa cabecalho-barra">
        <span className="cabecalho-marca" onClick={() => onNav('estoque')} style={{ cursor: 'pointer', display: 'inline-flex' }}>
          <Logo className="marca-55" height={26} color={dark ? 'branco' : 'preto'} assetBase="/assets/logo/" />
        </span>
        <nav className="cabecalho-nav" style={{ font: 'var(--type-etiqueta)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-etiqueta)', whiteSpace: 'nowrap' }}>
          {links.map(l => (
            <a key={l.id} href="#" onClick={e => { e.preventDefault(); onNav(l.id); }}
              style={{
                color: rota === l.id ? fg : off, textDecoration: 'none', paddingBottom: 3,
                borderBottom: `var(--borda-grossa) solid ${rota === l.id ? 'var(--seg-primeiro)' : 'transparent'}`
              }}>{l.label}</a>
          ))}
        </nav>
        <div className="cabecalho-acoes" style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 'var(--esp-4)', font: 'var(--type-etiqueta)', letterSpacing: 'var(--tracking-etiqueta)', color: off, whiteSpace: 'nowrap' }}>
          <span className="cabecalho-local" style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon name="map-pin" size={13} /> CURITIBA, PR</span>
          <a href="https://wa.me/5515996520317" target="_blank" rel="noopener" aria-label="Falar com a 55 no WhatsApp" className="cabecalho-fone" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: fg, textDecoration: 'none', borderBottom: `var(--borda-fina) solid ${fg}`, paddingBottom: 2 }}>
            <span className="fone-icone-desktop" style={{ display: 'inline-flex' }}><Icon name="phone" size={13} /></span>
            <span className="fone-icone-mobile"><IconeWhatsApp size={15} color={fg} /></span>
            <span className="cabecalho-fone-texto">FALAR COM A 55</span>
          </a>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Header });
