khiyal-studio/src/components/Header.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { navItems, socialLinks } from "@/data/content";
import { CONTACT } from "@/lib/site";
import { SocialIcon } from "./SocialIcon";

export function Header() {
  const [open, setOpen] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    document.body.classList.toggle("menu-open", open);
    return () => document.body.classList.remove("menu-open");
  }, [open]);

  const close = () => setOpen(false);

  return (
    <>
      <header className="site-header">
        <Link href="/" className="logo" aria-label="Khiyal Architecture Studio">
          <img src="/images/brand/logo-white.png" alt="Khiyal Architecture Studio" />
        </Link>
        <button
          type="button"
          className="hamburger"
          aria-label="Open menu"
          aria-expanded={open}
          onClick={() => setOpen(true)}
        >
          <span />
          <span />
          <span />
          <span />
        </button>
      </header>

      <div className={`menu-overlay ${open ? "open" : ""}`} role="dialog" aria-modal="true">
        <button type="button" className="menu-close" aria-label="Close menu" onClick={() => setOpen(false)}>
          ×
        </button>
        <div className="menu-grid">
          <div>
            <Link href="/" onClick={close}>
              <img src="/images/brand/logo-footer.png" alt="Khiyal" style={{ height: 72, width: "auto" }} />
            </Link>
            <div className="menu-meta">
              <div>
                <span className="eyebrow">Appointments</span>
                <p>For better access to the office, please visit the contact page.</p>
              </div>
              <div>
                <span className="eyebrow">Let&apos;s talk</span>
                <a href={`mailto:${CONTACT.email}`} className="heading-white">
                  {CONTACT.email}
                </a>
              </div>
              <div>
                <span className="eyebrow">Connect with us</span>
                <div className="social-row">
                  {socialLinks.map((item) => (
                    <a key={item.label} href={item.href} target="_blank" rel="noreferrer" aria-label={item.label}>
                      <SocialIcon name={item.icon} />
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </div>
          <nav className="menu-nav" aria-label="Primary">
            {navItems.map((item) => (
              <Link
                key={item.label}
                href={item.href}
                className={pathname === item.href ? "active" : undefined}
                onClick={close}
              >
                {item.label}
              </Link>
            ))}
          </nav>
        </div>
      </div>
    </>
  );
}