import { Link } from "@tanstack/react-router";
import { Star } from "lucide-react";
import { useState } from "react";

const links = [
  { to: "/", label: "Home" },
  { to: "/about", label: "About" },
  { to: "/gallery", label: "Gallery" },
  { to: "/contact", label: "Contact" },
] as const;

export function SiteHeader() {
  const [open, setOpen] = useState(false);
  return (
    <header className="sticky top-0 z-50 bg-background/85 backdrop-blur-md border-b border-border/60">
      <div className="mx-auto max-w-6xl px-5 py-4 flex items-center justify-between gap-4">
        <Link to="/" className="flex items-center gap-2.5 group">
          <span className="size-10 rounded-2xl bg-sun grid place-items-center rotate-3 group-hover:rotate-6 transition-transform shadow-soft">
            <Star className="size-5 text-sun-foreground" fill="currentColor" />
          </span>
          <span className="font-display text-xl font-semibold text-primary">Little Stars</span>
        </Link>

        <nav className="hidden md:flex items-center gap-7 text-sm font-medium text-foreground/75">
          {links.map((l) => (
            <Link
              key={l.to}
              to={l.to}
              activeOptions={{ exact: l.to === "/" }}
              activeProps={{ className: "text-primary font-semibold" }}
              className="hover:text-primary transition-colors"
            >
              {l.label}
            </Link>
          ))}
        </nav>

        <Link
          to="/contact"
          className="hidden md:inline-flex bg-coral text-coral-foreground px-5 py-2.5 rounded-full text-sm font-semibold shadow-soft hover:scale-105 transition-transform"
        >
          Book a Tour
        </Link>

        <button
          onClick={() => setOpen((v) => !v)}
          className="md:hidden size-10 rounded-xl bg-secondary grid place-items-center"
          aria-label="Toggle menu"
        >
          <span className="block w-5 h-0.5 bg-foreground relative before:content-[''] before:absolute before:w-5 before:h-0.5 before:bg-foreground before:-top-1.5 after:content-[''] after:absolute after:w-5 after:h-0.5 after:bg-foreground after:top-1.5" />
        </button>
      </div>

      {open && (
        <div className="md:hidden border-t border-border/60 bg-background">
          <nav className="px-5 py-4 flex flex-col gap-3 text-sm font-medium">
            {links.map((l) => (
              <Link
                key={l.to}
                to={l.to}
                onClick={() => setOpen(false)}
                activeOptions={{ exact: l.to === "/" }}
                activeProps={{ className: "text-primary font-semibold" }}
              >
                {l.label}
              </Link>
            ))}
            <Link
              to="/contact"
              onClick={() => setOpen(false)}
              className="mt-2 bg-coral text-coral-foreground px-5 py-2.5 rounded-full text-center font-semibold"
            >
              Book a Tour
            </Link>
          </nav>
        </div>
      )}
    </header>
  );
}
