my-app/app/components/Navbar.tsx

"use client";

import { useState } from "react";

const links = ["About", "Services", "Projects", "News", "Contact"];

export function Navbar() {
  const [open, setOpen] = useState(false);

  return (
    <nav className="relative z-10 flex items-center justify-between py-6">
      <span className="font-semibold text-base tracking-[-0.04em] capitalize text-black">
        H.Studio
      </span>

      {/* Desktop links */}
      <div className="hidden md:flex items-center gap-14">
        {links.map((link) => (
          <a
            key={link}
            href={`#${link.toLowerCase()}`}
            className="font-semibold text-base tracking-[-0.04em] text-black capitalize hover:opacity-70 transition-opacity"
          >
            {link}
          </a>
        ))}
      </div>

      {/* Desktop CTA */}
      <button className="hidden md:flex items-center justify-center bg-black text-white font-medium text-sm tracking-[-0.035em] px-4 py-3 rounded-3xl hover:bg-neutral-800 transition-colors">
        Let&apos;s talk
      </button>

      {/* Mobile hamburger */}
      <button
        className="md:hidden p-1"
        onClick={() => setOpen(!open)}
        aria-label="Toggle menu"
      >
        <img src="/menu.svg" alt="" className="w-6 h-6" />
      </button>

      {/* Mobile menu */}
      {open && (
        <div className="absolute top-full left-0 right-0 bg-white/95 backdrop-blur-sm py-6 flex flex-col gap-4 px-4 md:hidden">
          {links.map((link) => (
            <a
              key={link}
              href={`#${link.toLowerCase()}`}
              className="font-semibold text-base tracking-[-0.04em] text-black capitalize"
              onClick={() => setOpen(false)}
            >
              {link}
            </a>
          ))}
          <button className="mt-2 self-start bg-black text-white font-medium text-sm tracking-[-0.035em] px-4 py-3 rounded-3xl">
            Let&apos;s talk
          </button>
        </div>
      )}
    </nav>
  );
}