function Header({ active, onNav }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const settings = (window.SITE && window.SITE.settings) || {};
  const navCfg = (window.SITE && window.SITE.nav) || {};
  const waDigits = (settings.contact && settings.contact.whatsappDigits) || '5544999451010';
  const waText = encodeURIComponent((settings.contact && settings.contact.whatsappDefaultText) || 'Olá! Gostaria de uma cotação de seguro.');
  const eyebrow = (settings.brand && settings.brand.eyebrow) || 'Corretora · desde 1989';
  const ctaLabel = navCfg.ctaLabel || 'Cotar agora';

  const links = navCfg.links || [
    { id: 'home', label: 'Início' },
    { id: 'produtos', label: 'Seguros' },
    { id: 'sobre', label: 'Sobre' },
    { id: 'historia', label: 'História' },
    { id: 'blog', label: 'Dicas' },
    { id: 'contato', label: 'Contato' },
  ];

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'color-mix(in oklab, var(--bg) 88%, transparent)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all .25s ease',
    }} role="banner">
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 76,
      }}>
        <a href="#home" onClick={(e) => { e.preventDefault(); onNav('home'); }} aria-label="SOSSEG Corretora de Seguros — página inicial" style={{
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.logoSosseg) || "brand/sosseg-logo-oficial.png"} alt="SOSSEG Corretora de Seguros"
               style={{ height: 52, width: 'auto', display: 'block' }} />
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '.18em', textTransform: 'uppercase' }}>{eyebrow}</span>
          </div>
        </a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 4 }} className="desktop-nav" aria-label="Navegação principal">
          {links.map(l => (
            <a
              key={l.id}
              href={`#${l.id}`}
              onClick={(e) => { e.preventDefault(); onNav(l.id); }}
              className="nav-link"
              data-active={active === l.id ? 'true' : 'false'}
              style={{
                padding: '10px 14px', fontSize: 14.5, fontWeight: 500,
                color: active === l.id ? 'var(--ink)' : 'var(--ink-2)',
                position: 'relative',
                borderRadius: 8,
                transition: 'color .15s ease, background-color .15s ease',
              }}
            >
              {l.label}
              {active === l.id && (
                <span style={{
                  position: 'absolute', left: 14, right: 14, bottom: 4, height: 2,
                  background: 'var(--accent)', borderRadius: 2,
                }} />
              )}
            </a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a
            href={`https://wa.me/${waDigits}?text=${waText}`}
            target="_blank" rel="noopener"
            className="btn btn-primary header-cta"
          >
            <Icon.Whatsapp width="16" height="16" />
            {ctaLabel}
          </a>
          <button
            className="mobile-menu-btn"
            aria-label="Menu"
            onClick={() => setOpen(!open)}
            style={{
              display: 'none', background: 'transparent', padding: 10,
              border: '1px solid var(--line)', borderRadius: 12, color: 'var(--ink)',
            }}
          >
            {open ? <Icon.X width="20" height="20" /> : <Icon.Menu width="20" height="20" />}
          </button>
        </div>
      </div>

      {open && (
        <div className="mobile-panel" style={{
          padding: '12px 18px 24px',
          borderTop: '1px solid var(--line)',
          background: 'var(--surface)',
        }}>
          {links.map(l => (
            <a key={l.id} href={`#${l.id}`}
              onClick={(e) => { e.preventDefault(); onNav(l.id); setOpen(false); }}
              style={{ display: 'block', padding: '14px 4px', borderBottom: '1px solid var(--line)', fontSize: 16, fontWeight: 500 }}>
              {l.label}
            </a>
          ))}
        </div>
      )}

      <style>{`
        @media (max-width: 900px) {
          .desktop-nav { display: none !important; }
          .mobile-menu-btn { display: inline-flex !important; }
          .header-cta span, .header-cta { padding: 10px 16px; font-size: 14px; }
        }
        @media (min-width: 901px) {
          .mobile-panel { display: none !important; }
        }
        @media (hover: hover) {
          .nav-link:hover { color: var(--ink) !important; background: color-mix(in oklab, var(--ink) 5%, transparent); }
          .mobile-menu-btn:hover { border-color: var(--ink) !important; }
        }
      `}</style>
    </header>
  );
}

function Logo() {
  return (
    <div style={{
      width: 44, height: 44, borderRadius: 12,
      background: 'linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 4px 14px -4px color-mix(in oklab, var(--primary) 50%, transparent)',
      position: 'relative', overflow: 'hidden',
    }}>
      <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/>
      </svg>
      <span style={{
        position: 'absolute', bottom: 6, right: 6, width: 8, height: 8,
        background: 'var(--accent)', borderRadius: '50%',
        boxShadow: '0 0 0 2px white',
      }} />
    </div>
  );
}

window.Header = Header;
window.Logo = Logo;