/* global React */
const { useState: useStateHdr, useEffect: useEffectHdr } = React;

function Header({ active = 'home', onNav, onLogin }) {
  const items = [
    { id: 'home', label: 'Start' },
    { id: 'angebote', label: 'Angebote' },
    { id: 'kategorien', label: 'Kategorien' },
    { id: 'haendler', label: 'Für Händler' },
    { id: 'kontakt', label: 'Kontakt' },
  ];

  const [theme, setTheme] = useStateHdr(() => {
    const stored = localStorage.getItem('dp-theme');
    if (stored === 'dark' || stored === 'light') return stored;
    return 'light';
  });

  useEffectHdr(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('dp-theme', theme);
  }, [theme]);

  const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');

  return (
    <header className="dp-header">
      <div className="dp-header__inner">
        <a href="#home" onClick={(e) => { e.preventDefault(); onNav?.('home'); }}>
          <img className="dp-header__logo" src="assets/PostenLogo.png" alt="DiePostenProfis" />
        </a>
        <nav className="dp-nav">
          {items.map(it => (
            <a key={it.id} href={`#${it.id}`}
               className={active === it.id ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); onNav?.(it.id); }}>
              {it.label}
            </a>
          ))}
        </nav>
        <div className="dp-header__cta">
          <button
            className="dp-theme-toggle"
            aria-label={theme === 'dark' ? 'Light Mode aktivieren' : 'Dark Mode aktivieren'}
            onClick={toggleTheme}
            title={theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
          >
            <span className="dp-theme-toggle__track">
              <span className="dp-theme-toggle__thumb">
                {theme === 'dark' ? (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
                ) : (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
                )}
              </span>
            </span>
          </button>
          <button className="dp-btn dp-btn--ghost dp-btn--sm" onClick={() => onLogin?.()}>Login</button>
          <button className="dp-btn dp-btn--primary dp-btn--sm">Anfrage</button>
        </div>
      </div>
    </header>
  );
}

window.Header = Header;