"use client";

import { useState, useEffect, useCallback } from "react";
import Link from "next/link";
import { Menu } from "lucide-react";
import { cn } from "@/lib/utils";
import Navigation from "./Navigation";
import MobileMenu from "./MobileMenu";
import Button from "@/components/ui/Button";

export default function Header() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const closeMobileMenu = useCallback(() => {
    setIsMobileMenuOpen(false);
  }, []);

  return (
    <header
      className={cn(
        "fixed top-0 left-0 right-0 z-30 transition-all duration-300",
        isScrolled
          ? "bg-white/95 shadow-sm backdrop-blur-sm"
          : "bg-white"
      )}
      role="banner"
    >
      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6 lg:h-20 lg:px-8">
        <Link
          href="/"
          className="flex-shrink-0"
          aria-label="TeleNetSystems – Zur Startseite"
        >
          <img
            src="/images/logo/logo-systems.png"
            alt="TeleNetSystems Logo"
            className="h-9 w-auto lg:h-11"
            width={180}
            height={44}
          />
        </Link>

        <Navigation />

        <div className="flex items-center gap-3">
          <Button
            href="/#kontakt"
            variant="primary"
            size="sm"
            className="hidden lg:inline-flex"
          >
            Kontakt
          </Button>

          <button
            onClick={() => setIsMobileMenuOpen(true)}
            className="rounded-lg p-2 text-neutral-700 hover:bg-neutral-100 lg:hidden"
            aria-label="Menü öffnen"
            aria-expanded={isMobileMenuOpen}
            aria-controls="mobile-menu"
          >
            <Menu className="h-6 w-6" />
          </button>
        </div>
      </div>

      <MobileMenu isOpen={isMobileMenuOpen} onClose={closeMobileMenu} />
    </header>
  );
}
