// fairfarms.com — sticky header
const { Seal, Button } = window.FF;

function Nav({ lang = 'EN', onLang }) {
  const links = ['Pepper & spices', 'Traceability', 'Our farmers', 'Certifications'];
  return (
    <header
      style={{
        position: 'sticky', top: 0, zIndex: 40,
        background: 'rgba(247,242,232,0.88)', backdropFilter: 'var(--blur-sticky)',
        borderBottom: '1px solid var(--border-hairline)',
      }}
    >
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', height: 64, padding: '0 var(--space-6)', display: 'flex', alignItems: 'center', gap: 'var(--space-7)' }}>
        <Seal size={40} lockup assetBase="../../" href="#top" />
        <nav style={{ display: 'flex', gap: 'var(--space-6)', marginLeft: 'auto' }}>
          {links.map((l) => (
            <a
              key={l}
              href="#"
              style={{ font: 'var(--type-body-sm)', fontSize: 15, color: 'var(--text-body)', textDecoration: 'none', paddingBottom: 2, borderBottom: '2px solid transparent' }}
              onMouseEnter={(e) => (e.currentTarget.style.borderBottomColor = 'var(--ff-pepper)')}
              onMouseLeave={(e) => (e.currentTarget.style.borderBottomColor = 'transparent')}
            >
              {l}
            </a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '0 var(--space-2)' }}>
          {['EN', 'FR', 'ខ្មែរ'].map((l) => (
            <button
              key={l}
              onClick={() => onLang && onLang(l)}
              style={{
                border: 'none', cursor: 'pointer', padding: '5px 9px', borderRadius: 'var(--radius-pill)',
                font: 'var(--type-meta)', fontWeight: 600,
                background: lang === l ? 'var(--ff-ink)' : 'transparent',
                color: lang === l ? 'var(--ff-paper)' : 'var(--text-muted)',
              }}
            >
              {l}
            </button>
          ))}
        </div>
        <Button variant="secondary" size="sm" iconAfter="chevron-right" href="../portal/index.html">Buyer portal</Button>
      </div>
    </header>
  );
}
window.Nav = Nav;