/* global React */
const { useState: useNavState } = React;

/* Logo mark: a hexagon (honeycomb cell) with an "S" — derived from the
   bear's gold "S" chain pendant. Pairs with the wordmark. */
function Logo({ size = 34 }) {
  return (
    <span className="logo">
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
        <defs>
          <linearGradient id="lg-hex" x1="6" y1="3" x2="34" y2="37" gradientUnits="userSpaceOnUse">
            <stop stopColor="#FFE08A" />
            <stop offset="0.5" stopColor="#F0A92B" />
            <stop offset="1" stopColor="#8A5212" />
          </linearGradient>
        </defs>
        <path d="M20 2.5 L34.7 11 V28.9 L20 37.5 L5.3 28.9 V11 Z"
          fill="url(#lg-hex)" stroke="#FFF1C2" strokeOpacity="0.55" strokeWidth="1.1" />
        <path d="M24.6 15.2c-.7-1.5-2.2-2.4-4.4-2.4-2.7 0-4.5 1.4-4.5 3.4 0 1.9 1.5 2.8 4 3.4 2.2.5 2.9.9 2.9 1.8 0 .9-.9 1.5-2.4 1.5-1.7 0-2.7-.7-3.2-2l-2.4 1.1c.8 1.9 2.6 3 5.5 3 3 0 5-1.5 5-3.8 0-2.1-1.5-3-4.2-3.6-2.2-.5-2.8-.9-2.8-1.7 0-.8.8-1.3 2-1.3 1.3 0 2.1.5 2.6 1.6z"
          fill="#2A1705" />
      </svg>
      <span className="logo-word">Satocrop<span className="logo-word__sub">seeds</span></span>
    </span>
  );
}

function Nav() {
  const [open, setOpen] = useNavState(false);
  const links = ["Genetics", "Rosin", "Cultivation", "Journal", "Stockists"];

  return (
    <header className="nav">
      <a className="nav-brand" href="#" onClick={(e) => e.preventDefault()}>
        <Logo />
      </a>

      <nav className={`nav-links ${open ? "is-open" : ""}`}>
        {links.map((l, i) => (
          <a key={l} href="#" className={`nav-link ${i === 0 ? "is-active" : ""}`}
             onClick={(e) => { e.preventDefault(); setOpen(false); }}>{l}</a>
        ))}
        <div className="nav-cta-mobile">
          <button className="btn btn--ghost">Log in</button>
          <button className="btn btn--gold">Shop seeds</button>
        </div>
      </nav>

      <div className="nav-actions">
        <button className="btn btn--ghost">Log in</button>
        <button className="btn btn--gold">Shop seeds</button>
      </div>

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

window.Logo = Logo;
window.Nav = Nav;