spreewaldzeit/components/layout/Header.tsx

"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

const navItems = [
  { href: "/#wohnungen", label: "Wohnungen" },
  { href: "/#umgebung", label: "Umgebung" },
  { href: "/anfrage", label: "Anfrage" },
];

export function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const pathname = usePathname();
  const isHome = pathname === "/";

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // On non-home pages the header is always opaque
  const transparent = isHome && !scrolled;

  useEffect(() => {
    setMobileOpen(false);
  }, [pathname]);

  if (pathname?.startsWith("/admin")) return null;

  return (
    <header
      className={cn(
        "fixed top-0 left-0 right-0 z-40 transition-all duration-300",
        transparent
          ? "bg-transparent"
          : "bg-parchment/95 backdrop-blur-md border-b border-ink/8 shadow-[0_1px_12px_rgba(28,38,32,0.06)]"
      )}
    >
      <div className="container flex items-center justify-between py-5 md:py-6">
        <Link href="/" className="flex items-baseline gap-2.5 group">
          <span className={cn(
            "font-display text-2xl md:text-[1.7rem] tracking-tight leading-none transition-colors duration-200",
            transparent ? "text-parchment group-hover:text-moss-200" : "text-ink group-hover:text-moss-700"
          )}>
            Spreewaldzeit
          </span>
          <span
            className="hidden sm:inline-block h-1.5 w-1.5 rounded-full bg-moss-400 opacity-70 group-hover:opacity-100 group-hover:scale-110 transition-all duration-200"
            aria-hidden="true"
          />
        </Link>

        <nav className="hidden md:flex items-center gap-9 text-sm">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "link-underline transition-colors duration-200",
                transparent ? "text-parchment/70 hover:text-parchment" : "text-ink/70 hover:text-ink"
              )}
            >
              {item.label}
            </Link>
          ))}
          <Link
            href="/anfrage"
            className={cn(
              "inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-sm transition-colors",
              transparent
                ? "bg-parchment/15 text-parchment border border-parchment/25 hover:bg-parchment/25"
                : "bg-ink text-parchment hover:bg-moss-700"
            )}
          >
            Jetzt anfragen
            <span aria-hidden="true">→</span>
          </Link>
        </nav>

        <button
          className="md:hidden p-2 -mr-2 rounded-sm transition"
          onClick={() => setMobileOpen((v) => !v)}
          aria-label={mobileOpen ? "Menü schließen" : "Menü öffnen"}
          aria-expanded={mobileOpen}
        >
          <span className="relative block w-6 h-[2px]">
            <span
              className={cn(
                "absolute inset-x-0 h-[2px] transition-all duration-300",
                transparent ? "bg-parchment" : "bg-ink",
                mobileOpen ? "top-0 rotate-45" : "-top-2"
              )}
            />
            <span
              className={cn(
                "absolute inset-x-0 h-[2px] top-0 transition-opacity",
                transparent ? "bg-parchment" : "bg-ink",
                mobileOpen && "opacity-0"
              )}
            />
            <span
              className={cn(
                "absolute inset-x-0 h-[2px] transition-all duration-300",
                transparent ? "bg-parchment" : "bg-ink",
                mobileOpen ? "top-0 -rotate-45" : "top-2"
              )}
            />
          </span>
        </button>
      </div>

      {/* Mobile menu */}
      <div
        className={cn(
          "md:hidden overflow-hidden border-t border-ink/8 bg-parchment/95 backdrop-blur-md transition-[max-height,opacity] duration-300",
          mobileOpen ? "max-h-[400px] opacity-100" : "max-h-0 opacity-0"
        )}
      >
        <nav className="container flex flex-col py-5 gap-1">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="py-3 text-lg font-display hover:text-moss-600 transition-colors"
            >
              {item.label}
            </Link>
          ))}
          <Link
            href="/anfrage"
            className="mt-3 inline-flex items-center justify-center bg-ink text-parchment px-5 py-3 rounded-full text-sm hover:bg-moss-700 transition-colors"
          >
            Jetzt anfragen →
          </Link>
        </nav>
      </div>
    </header>
  );
}