Developer Center

import { Link } from "@tanstack/react-router";
import { Menu, UserRound, X } from "lucide-react";
import { useState } from "react";
import logo from "@/assets/logo.jpg.asset.json";
import { Button } from "@/components/ui/button";

const NAV = [
  { to: "/tratte", label: "Traghetti" },
  { to: "/destinazioni", label: "Destinazioni" },
  { to: "/offerte", label: "Offerte" },
  { to: "/compagnie", label: "Compagnie" },
  { to: "/assistenza", label: "Assistenza" },
  { to: "/developer", label: "Developer" },
] as const;

export function Header() {
  const [open, setOpen] = useState(false);
  return (
    <header className="sticky top-0 z-40 border-b border-border/70 bg-background/95 backdrop-blur">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 md:h-20 md:px-6">
        <Link to="/" className="flex items-center" aria-label="AioTraghetti, home">
          <img src={logo.url} alt="AioTraghetti" width={1600} height={533} className="h-9 w-auto md:h-12" />
        </Link>
        <nav className="hidden items-center gap-1 lg:flex">
          {NAV.map((n) => (
            <Link
              key={n.to}
              to={n.to}
              className="rounded-md px-2 py-2 text-[15px] font-semibold text-foreground/80 transition-colors hover:bg-secondary hover:text-primary"
              activeProps={{ className: "text-primary bg-secondary" }}
            >
              {n.label}
            </Link>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <Button asChild variant="outline" className="hidden border-primary/30 font-semibold text-primary sm:inline-flex">
            <Link to="/accedi">
              <UserRound /> Accedi / Registrati
            </Link>
          </Button>
          <Button variant="ghost" size="icon" className="lg:hidden" onClick={() => setOpen((o) => !o)} aria-label="Menu">
            {open ? <X /> : <Menu />}
          </Button>
        </div>
      </div>
      {open && (
        <nav className="border-t border-border bg-background px-4 pb-4 lg:hidden">
          {NAV.map((n) => (
            <Link key={n.to} to={n.to} onClick={() => setOpen(false)} className="block border-b border-border/60 py-3 font-semibold">
              {n.label}
            </Link>
          ))}
          <Link to="/accedi" onClick={() => setOpen(false)} className="block py-3 font-semibold text-primary">
            Accedi / Registrati
          </Link>
        </nav>
      )}
    </header>
  );
}