import { Link } from "@tanstack/react-router";
import logo from "@/assets/buna-logo.jpg";

const links = [
  { to: "#ueber-uns", label: "Über uns" },
  { to: "#karte", label: "Karte" },
  { to: "#galerie", label: "Galerie" },
  { to: "#kontakt", label: "Kontakt" },
];

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-40 w-full border-b border-border/60 bg-background/85 backdrop-blur">
      <div className="mx-auto flex h-20 max-w-6xl items-center justify-between px-6">
        <Link to="/" className="flex items-center gap-3">
          <img src={logo} alt="BUNA Charlottenburg Logo" className="h-12 w-12 rounded-full object-cover" />
          <div className="leading-tight">
            <div className="font-display text-lg tracking-[0.25em] text-primary">BUNA</div>
            <div className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">Charlottenburg</div>
          </div>
        </Link>
        <nav className="hidden items-center gap-8 md:flex">
          {links.map((l) => (
            <a
              key={l.to}
              href={l.to}
              className="text-sm font-medium text-foreground/80 transition-colors hover:text-accent"
            >
              {l.label}
            </a>
          ))}
        </nav>
      </div>
    </header>
  );
}
