/* Franchise Kosovo — Header */
const { useState: useStateH, useEffect: useEffectH } = React;

function Header({ route, navigate }) {
  const [scrolled, setScrolled] = useStateH(false);
  const [lang, setLang] = useStateH('EN');
  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // hero/detail pages start dark; header text inverts until scrolled
  const darkHead = (route.view === 'home' || route.view === 'directory' || route.view === 'detail') && !scrolled;

  const links = [
    { k: 'directory', label: lang === 'EN' ? 'Opportunities' : 'Mundësi' },
    { k: 'franchisors', label: lang === 'EN' ? 'For Brands' : 'Për Brendet' },
    { k: 'about', label: lang === 'EN' ? 'About' : 'Rreth Nesh' },
    { k: 'contact', label: lang === 'EN' ? 'Contact' : 'Kontakt' },
  ];

  return (
    <header className={`header ${scrolled ? 'scrolled' : ''} ${darkHead ? 'on-dark-head' : ''}`}>
      <div className="container header-inner">
        <div className="brand" onClick={() => navigate({ view: 'home' })}>
          <img src={darkHead ? '../../assets/logo-wordmark-light.svg' : '../../assets/logo-wordmark-navy.svg'}
            alt="Franchise Kosovo" height="40" style={{ height: scrolled ? 34 : 40, transition: 'height .28s' }} />
        </div>
        <nav className="nav">
          {links.map((l) => (
            <span key={l.k}
              className={`nav-link ${route.view === l.k ? 'active' : ''}`}
              onClick={() => navigate({ view: l.k })}>{l.label}</span>
          ))}
        </nav>
        <div className="header-right">
          <div className="lang-toggle">
            <button className={lang === 'EN' ? 'on' : ''} onClick={() => setLang('EN')}>EN</button>
            <button className={lang === 'SQ' ? 'on' : ''} onClick={() => setLang('SQ')}>SQ</button>
          </div>
          <Button variant="gold" icon="arrow-right" onClick={() => navigate({ view: 'contact' })}>
            {lang === 'EN' ? 'Book a call' : 'Rezervo'}
          </Button>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Header });