/* global React */
const { useState: useStateH, useEffect: useEffectH } = React;

const Header = ({ route, onNav }) => {
  const [scrolled, setScrolled] = useStateH(false);
  const [open, setOpen] = useStateH(false);

  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'home', label: 'Home' },
    { id: 'game', label: 'Pouring Pints' },
    { id: 'contact', label: 'Contact' },
  ];

  const go = (id) => { setOpen(false); onNav(id); };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(10,10,10,0.7)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--pond-stone)' : '1px solid transparent',
      transition: 'background 220ms var(--ease-out), border-color 220ms var(--ease-out)',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '18px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <a href="#home" onClick={(e) => { e.preventDefault(); go('home'); }}
          style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', color: 'inherit' }}>
          <img src="assets/logo-froggy-studios.png" alt=""
            style={{ height: 32, width: 'auto', objectFit: 'contain' }} />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, letterSpacing: '0.04em' }}>
            FROGGY STUDIOS
          </span>
        </a>

        <nav className="desktop-nav" style={{ display: 'flex', gap: 28 }}>
          {links.map(l => (
            <a key={l.id} href={`#${l.id}`}
              onClick={(e) => { e.preventDefault(); go(l.id); }}
              style={{
                textDecoration: 'none',
                color: route === l.id ? 'var(--pond-white)' : 'var(--pond-mist)',
                fontWeight: 600, fontSize: 14,
                borderBottom: route === l.id ? '2px solid var(--pond-white)' : '2px solid transparent',
                paddingBottom: 4,
              }}>{l.label}</a>
          ))}
        </nav>

        <button className="mobile-toggle" aria-label="Menu"
          onClick={() => setOpen(o => !o)}
          style={{
            display: 'none', background: 'transparent', border: '2px solid var(--pond-white)',
            color: 'var(--pond-white)', padding: '6px 12px', cursor: 'pointer',
            fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '0.08em', fontSize: 12,
          }}>{open ? 'CLOSE' : 'MENU'}</button>
      </div>

      {open && (
        <div className="mobile-menu" style={{
          borderTop: '1px solid var(--pond-stone)',
          background: 'var(--pond-black)', padding: '8px 32px 16px',
        }}>
          {links.map(l => (
            <a key={l.id} href={`#${l.id}`}
              onClick={(e) => { e.preventDefault(); go(l.id); }}
              style={{
                display: 'block', padding: '14px 0',
                borderBottom: '1px solid var(--pond-stone)',
                textDecoration: 'none',
                color: route === l.id ? 'var(--pond-white)' : 'var(--pond-mist)',
                fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18,
              }}>{l.label} {route === l.id && '·'}</a>
          ))}
        </div>
      )}
    </header>
  );
};

window.Header = Header;