aigrowthtech/src/components/site-header.tsx

"use client";

import { useEffect, useState } from "react";
import Logo from "./logo";
import { navLinks } from "@/content/home";

export default function SiteHeader() {
  const [scrolled, setScrolled] = useState(false);
  const [hidden, setHidden] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    let lastY = window.scrollY;
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 24);
      setHidden(y > 480 && y > lastY + 4);
      if (y < lastY - 4 || y < 480) setHidden(false);
      lastY = y;
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  const classes = ["site-header", scrolled || open ? "is-scrolled" : "", hidden && !open ? "is-hidden" : ""]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <header className={classes}>
        <div className="wrap bar">
          <Logo />
          <nav className="nav" aria-label="Primary">
            {navLinks.map((l) => (
              <a key={l.href} href={l.href}>
                {l.label}
              </a>
            ))}
          </nav>
          <a href="#contact" className="btn btn-solid header-cta">
            Book a Strategy Call <span className="arrow">→</span>
          </a>
          <button
            type="button"
            className="menu-toggle"
            aria-expanded={open}
            aria-controls="mobile-menu"
            aria-label={open ? "Close menu" : "Open menu"}
            onClick={() => setOpen((v) => !v)}
          >
            <span />
            <span />
          </button>
        </div>
      </header>
      <div id="mobile-menu" className={`mobile-menu${open ? " is-open" : ""}`} aria-hidden={!open}>
        <ul>
          {navLinks.map((l) => (
            <li key={l.href}>
              <a href={l.href} onClick={() => setOpen(false)} tabIndex={open ? 0 : -1}>
                {l.label} <span aria-hidden="true">→</span>
              </a>
            </li>
          ))}
        </ul>
        <a
          href="#contact"
          className="btn btn-solid"
          onClick={() => setOpen(false)}
          tabIndex={open ? 0 : -1}
        >
          Book a Strategy Call <span className="arrow">→</span>
        </a>
      </div>
    </>
  );
}