webseite_BB-Apartment2026/components/layout/Header.tsx

"use client";

import Link from "next/link";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { usePathname } from "next/navigation";
import { LanguageSwitcher } from "./LanguageSwitcher";
import { Menu, X } from "lucide-react";
import { useState, useEffect } from "react";

export function Header({ locale }: { locale: string }) {
  const t = useTranslations("navigation");
  const pathname = usePathname();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const isHome = pathname === `/${locale}` || pathname === `/${locale}/`;
  const showSolid = !isHome || scrolled;

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20);
    };

    handleScroll();
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const navLinks = [
    { href: `/${locale}`, label: t("home") },
    { href: `/${locale}/houses`, label: t("houses") },
    { href: `/${locale}/contact`, label: t("contact") },
  ];

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 border-b ${
        showSolid
          ? "bg-white/95 backdrop-blur-md border-brand-grey-soft shadow-sm"
          : "bg-transparent border-transparent"
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div
          className={`flex items-center justify-between transition-all duration-300 ${
            showSolid ? "h-20" : "h-28"
          }`}
        >
          <Link href={`/${locale}`} className="flex items-center gap-3">
            <div
              className={`relative overflow-hidden rounded-lg transition-all duration-300 ${
                showSolid ? "w-12 h-12" : "w-24 h-24"
              }`}
            >
              <Image
                src="/images/logo.jpg"
                alt="BB-Apartment"
                fill
                className="object-cover"
              />
            </div>
            <span
              className={`text-xl font-bold transition-colors duration-300 ${
                showSolid ? "text-brand-grey-dark" : "text-white"
              }`}
            >
              BB-Apartment
            </span>
          </Link>

          <nav className="hidden md:flex items-center gap-8">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className={`font-medium transition-colors duration-300 ${
                  showSolid
                    ? "text-brand-grey hover:text-brand-green"
                    : "text-white/90 hover:text-white"
                }`}
              >
                {link.label}
              </Link>
            ))}
            <LanguageSwitcher locale={locale} scrolled={showSolid} />
            <Link
              href={`/${locale}/houses`}
              className={`font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 ${
                showSolid
                  ? "bg-brand-green text-white hover:bg-brand-green-dark shadow-sm"
                  : "bg-white text-brand-green-dark hover:bg-brand-grey-soft"
              }`}
            >
              {t("bookNow")}
            </Link>
          </nav>

          <div className="md:hidden flex items-center gap-4">
            <LanguageSwitcher locale={locale} scrolled={showSolid} />
            <Link
              href={`/${locale}/houses`}
              className="hidden sm:inline-flex font-semibold px-4 py-2 rounded-xl bg-brand-green text-white hover:bg-brand-green-dark transition-colors text-sm"
            >
              {t("bookNow")}
            </Link>
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className={`p-2 transition-colors duration-300 ${
                showSolid ? "text-brand-grey-dark" : "text-white"
              }`}
              aria-label="Toggle menu"
            >
              {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </div>

      {mobileMenuOpen && (
        <div className="md:hidden bg-white border-t border-brand-grey-soft">
          <nav className="flex flex-col px-4 py-4 gap-4">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                onClick={() => setMobileMenuOpen(false)}
                className="text-brand-grey hover:text-brand-green font-medium transition-colors"
              >
                {link.label}
              </Link>
            ))}
            <Link
              href={`/${locale}/houses`}
              onClick={() => setMobileMenuOpen(false)}
              className="inline-flex items-center justify-center gap-2 bg-brand-green text-white font-semibold px-4 py-3 rounded-xl hover:bg-brand-green-dark transition-colors"
            >
              {t("bookNow")}
            </Link>
          </nav>
        </div>
      )}
    </header>
  );
}