// Header.jsx — sticky nav with brand mark, mobile drawer, language toggle
const { useState } = React;

function Header({ lang, setLang }) {
  const [open, setOpen] = useState(false);

  const links = [
    { href: '#o-nas',        pl: 'O nas',                en: 'About' },
    { href: '#obszary',      pl: 'Obszary działania',    en: 'What we do' },
    { href: '#wesprzyj',     pl: 'Wesprzyj',             en: 'Support us' },
    { href: '#grantodawcy',  pl: 'Dla grantodawców',     en: 'For grantors' },
  ];

  const ctaLabel = lang === 'pl' ? 'Kontakt' : 'Contact';

  return (
    <header className="site-header" id="top">
      <a href="#main" className="skip-link">
        {lang === 'pl' ? 'Przejdź do treści' : 'Skip to content'}
      </a>
      <div className="container nav-wrap">
        <a className="brand" href="#top" aria-label="Fundacja PK KAR — strona główna">
          <img className="brand-mark-svg" src="assets/logo-square.svg" alt="" width="40" height="40"/>
          <span className="brand-name">Fundacja PK KAR</span>
        </a>

        <button
          className={`nav-burger${open ? ' is-open' : ''}`}
          aria-label="Menu"
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span></span><span></span><span></span>
        </button>

        <nav className={`nav${open ? ' is-open' : ''}`} aria-label="Główna nawigacja">
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)}>
              {l[lang]}
            </a>
          ))}
          <LangToggle lang={lang} setLang={setLang} />
          <a href="#kontakt" className="nav-cta" onClick={() => setOpen(false)}>
            {ctaLabel}
          </a>
        </nav>
      </div>
    </header>
  );
}

window.Header = Header;