import { Link, NavLink } from 'react-router-dom'
import Logo from './Logo'
import { useLang } from '../i18n'

const NAV = [
  { key: 'home', to: '/' },
  { key: 'about', to: '/a-propos' },
  { key: 'services', to: '/services' },
  { key: 'solutions', to: '/solutions' },
  { key: 'contact', to: '/contact' },
]

const LABELS = {
  fr: { home: 'Accueil', about: 'À propos', services: 'Services', solutions: 'Solutions', contact: 'Contact' },
  en: { home: 'Home', about: 'About', services: 'Services', solutions: 'Solutions', contact: 'Contact' },
}

export default function Header() {
  const { lang, toggle } = useLang()
  const lab = LABELS[lang]

  return (
    <header
      style={{
        position: 'sticky',
        top: 0,
        zIndex: 50,
        background: 'rgba(244,246,250,.88)',
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        borderBottom: '1px solid rgba(10,37,64,.08)',
      }}
    >
      <div
        style={{
          maxWidth: 1240,
          margin: '0 auto',
          padding: '14px 40px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 16,
        }}
      >
        <Link to="/" style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none' }}>
          <Logo size={42} mono="#0a2540" />
          <span style={{ fontWeight: 800, fontSize: 21, letterSpacing: '.04em', color: '#0A2540' }}>
            MERKANTO
          </span>
        </Link>

        <nav className="mk-hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          {NAV.map((n) => (
            <NavLink
              key={n.key}
              to={n.to}
              end={n.to === '/'}
              className="mk-nav-link"
            >
              {({ isActive }) => (
                <>
                  {lab[n.key]}
                  {isActive && <span className="mk-nav-underline" />}
                </>
              )}
            </NavLink>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <button className="mk-lang-toggle" onClick={toggle} aria-label="Switch language">
            {lang === 'fr' ? 'EN' : 'FR'}
          </button>
          <Link to="/contact" className="mk-header-cta">
            {lab.contact}
          </Link>
        </div>
      </div>
    </header>
  )
}
