/* Header — logo + nav + the signature language toggle */
function Header({ lang, setLang }) {
  const { LanguageToggle } = window.OasisFreshMarketEBTSNAPGuideDesignSystem_23fc30;
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'buy',      ...{ en: 'What can I buy?', es: '¿Qué comprar?' } },
    { id: 'estimate', ...{ en: 'How much?',      es: '¿Cuánto?' } },
    { id: 'apply',    ...{ en: 'How to apply',   es: 'Cómo solicitar' } },
    { id: 'save',     ...{ en: 'Save more',      es: 'Ahorra más' } },
    { id: 'visit',    ...{ en: 'Visit us',       es: 'Visítanos' } },
    { id: 'help',     ...{ en: 'Get help',       es: 'Recibe ayuda' } },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(245,242,230,0.88)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border-soft)' : '1px solid transparent',
      transition: 'all var(--dur-base) var(--ease-out)',
    }}>
      <div className="oasis-container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 76, gap: 'var(--space-6)',
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <img src="../../assets/brand/oasis-logo-forest.png" alt="Oasis Fresh Market" style={{ height: 46, width: 'auto' }} />
        </a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)' }} className="oasis-desktop-nav">
          {links.map((l) => (
            <a key={l.id} href={'#' + l.id} style={{
              fontFamily: 'var(--font-body)', fontWeight: 'var(--fw-semibold)',
              fontSize: 'var(--fs-small)', color: 'var(--text-body)', textDecoration: 'none',
              transition: 'color var(--dur-fast) var(--ease-out)',
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--forest-700)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-body)'}>
              {t(lang, l.en, l.es)}
            </a>
          ))}
          <LanguageToggle value={lang} onChange={setLang} size="sm" />
        </nav>
      </div>
    </header>
  );
}
Object.assign(window, { Header });
