Navbar Simple

"use client";

// Light sticky navbar: logo, centred links, sign-in and a pill button,
// with an animated hamburger and dropdown menu on phones.
// Pure Tailwind + React, no dependencies. Works with Tailwind v3 and v4.

import { useState } from "react";

type Link = { label: string; href: string };

type Props = {
  logo?: string;
  links?: Link[];
  signIn?: Link;
  cta?: Link;
};

const DEFAULT_LINKS: Link[] = [
  { label: "Product", href: "#" },
  { label: "Solutions", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "Docs", href: "#" },
];

export default function NavbarSimple({
  logo = "Lumen",
  links = DEFAULT_LINKS,
  signIn = { label: "Sign in", href: "#" },
  cta = { label: "Contact", href: "#" },
}: Props) {
  const [open, setOpen] = useState(false);

  return (
    <header className="sticky top-0 z-50 w-full border-b border-black/5 bg-white font-sans antialiased">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-5 md:px-8">
        <a href="#" className="font-serif text-2xl font-bold uppercase tracking-[0.08em] text-black">
          {logo}
        </a>

        <nav className="hidden items-center gap-8 md:flex">
          {links.map((l) => (
            <a key={l.label} href={l.href} className="text-base text-black/70 transition-colors duration-150 hover:text-black">
              {l.label}
            </a>
          ))}
        </nav>

        <div className="hidden items-center gap-4 md:flex">
          <a href={signIn.href} className="text-base text-black/70 transition-colors duration-150 hover:text-black">
            {signIn.label}
          </a>
          <a href={cta.href} className="rounded-full bg-lime-400 px-5 py-2.5 text-xs font-bold uppercase tracking-wider text-black transition-colors duration-200 hover:bg-black hover:text-white">
            {cta.label}
          </a>
        </div>

        <button type="button" className="relative flex h-6 w-6 items-center justify-center md:hidden" onClick={() => setOpen(!open)} aria-label="Toggle menu" aria-expanded={open}>
          <span className={`absolute h-px w-5 bg-black transition-all duration-300 ${open ? "rotate-45" : "-translate-y-2"}`} />
          <span className={`absolute h-px w-5 bg-black transition-all duration-300 ${open ? "opacity-0" : ""}`} />
          <span className={`absolute h-px w-5 bg-black transition-all duration-300 ${open ? "-rotate-45" : "translate-y-2"}`} />
        </button>
      </div>

      {open && (
        <div className="flex flex-col gap-4 border-t border-black/5 bg-white px-5 py-6 md:hidden">
          {links.map((l) => (
            <a key={l.label} href={l.href} onClick={() => setOpen(false)} className="text-sm text-black/60 transition-colors hover:text-black">
              {l.label}
            </a>
          ))}
          <div className="flex flex-col gap-3 border-t border-black/5 pt-4">
            <a href={signIn.href} className="text-sm text-black/70">
              {signIn.label}
            </a>
            <a href={cta.href} className="rounded-full bg-lime-400 px-5 py-3 text-center text-xs font-bold uppercase tracking-wider text-black">
              {cta.label}
            </a>
          </div>
        </div>
      )}
    </header>
  );
}