// Header.jsx — Sticky header: logo left, nav center, social + hamburger right
const Header = () => {
  const [active, setActive] = React.useState('Home');
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = ['Home', 'Videos', 'About'];

  const sectionMap = {
    Home: 'home',
    Videos: 'videos',
    About: 'about',
  };

  const handleNav = (label) => {
    setActive(label);
    setMenuOpen(false);
    const el = document.getElementById(sectionMap[label]);
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <header className="jjnb-header">
      <div className="jjnb-header__inner">

        <button
          type="button"
          className="jjnb-logo jjnb-logo--button"
          onClick={() => handleNav('Home')}
          aria-label="Go to home section"
        >
          Just J <span className="quote">'</span>N<span className="quote">'</span> B<span className="plus">+</span>
        </button>

        <nav className="jjnb-links" role="navigation" aria-label="Main navigation">
          {links.map(l => (
            <a
              key={l}
              className={active === l ? 'active' : ''}
              onClick={(e) => { e.preventDefault(); handleNav(l); }}
              href={`#${sectionMap[l]}`}
            >{l}</a>
          ))}
        </nav>

        <div className="jjnb-header__right">
          <button
            className={`jjnb-nav-toggle${menuOpen ? ' open' : ''}`}
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Toggle navigation"
            aria-expanded={menuOpen}
            aria-controls="mobile-nav"
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>

      </div>

      {menuOpen && (
        <nav id="mobile-nav" className="jjnb-mobile-nav" role="navigation" aria-label="Mobile navigation">
          {links.map(l => (
            <a
              key={l}
              className={active === l ? 'active' : ''}
              onClick={(e) => { e.preventDefault(); handleNav(l); }}
              href={`#${sectionMap[l]}`}
            >{l}</a>
          ))}
        </nav>
      )}
    </header>
  );
};

const Icon = ({ name }) => {
  const paths = {
    instagram: (
      <>
        <path d="M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9a5.5 5.5 0 0 1-5.5 5.5h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2zm0 2A3.5 3.5 0 0 0 4 7.5v9A3.5 3.5 0 0 0 7.5 20h9a3.5 3.5 0 0 0 3.5-3.5v-9A3.5 3.5 0 0 0 16.5 4h-9z"/>
        <path d="M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2.1a2.9 2.9 0 1 0 0 5.8 2.9 2.9 0 0 0 0-5.8z"/>
        <circle cx="17.4" cy="6.6" r="1.2"/>
      </>
    ),
    facebook: <path d="M13.5 22v-8h2.7l.4-3h-3.1V9.1c0-.9.3-1.6 1.7-1.6H17V4.8c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.4V11H7.5v3h2.8v8h3.2z"/>,
    youtube: <path d="M23 12s0-3.6-.5-5.3c-.3-1-1-1.7-2-2C18.8 4 12 4 12 4s-6.8 0-8.5.6c-1 .3-1.7 1-2 2C1 8.4 1 12 1 12s0 3.6.5 5.3c.3 1 1 1.7 2 2 1.7.7 8.5.7 8.5.7s6.8 0 8.5-.6c1-.3 1.7-1 2-2 .5-1.8.5-5.4.5-5.4zM10 15.5v-7l6 3.5-6 3.5z"/>,
  };
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">{paths[name]}</svg>;
};

window.Header = Header;
window.Icon = Icon;