j_kedzierski/src/components/Header/index.tsx

"use client";

import Link from "next/link";
import { ThemeSwitcher } from "../ThemeSwitcher";
import { LanguageSwitcher } from "../LanguageSwitcher";
import { usePathname } from "next/navigation";
import { useState, useEffect } from "react";
import { Menu, X, MessageCircle } from "lucide-react";
import { i18n } from '../../i18n.config';
import { LocalizedLink } from '../LocalizedLink';

export function Header({ navItems = [], whatsappNumber }: { navItems?: any[], whatsappNumber?: string | null }) {
  const pathname = usePathname();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

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

  const currentLocaleCode = (pathname?.split('/').filter(Boolean)[0]) || i18n.defaultLocale;
  const currentLocale = i18n.locales.find(l => l.code === currentLocaleCode) || i18n.locales[0];
  const whatsappLink = whatsappNumber ? `https://wa.me/${whatsappNumber}` : '#';

  return (
    <>
      <header 
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-background/90 backdrop-blur-md shadow-sm border-b border-border ${
          isScrolled 
            ? "py-4" 
            : "py-6"
        }`}
        style={{ paddingRight: 'var(--scrollbar-width)' }}
      >
        <div className="container-premium flex items-center justify-between">
          {/* Logo */}
          <Link href={`/${currentLocale.code}`} className="group flex items-center gap-3 z-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm" aria-label="Finanz- & Lohnbuchhaltung Dipl.-Ing. Janusz Kędzierski">
            <div className="w-10 h-10 rounded-none bg-accent text-white flex items-center justify-center font-heading font-bold text-xl group-hover:bg-accent-hover transition-colors shadow-sm">
              JK
            </div>
            <div className="hidden sm:flex flex-col">
              <span className="font-heading font-bold text-lg leading-tight tracking-tight text-foreground">
                Finanz- & Lohnbuchhaltung
              </span>
              <span className="text-xs text-foreground/75 uppercase tracking-widest font-medium">
                Dipl.-Ing. Janusz Kędzierski
              </span>
            </div>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center gap-6 xl:gap-10">
            {navItems.map((item, index) => {
              if (item.page && item.page.slug) {
                return (
                  <LocalizedLink 
                    key={index} 
                    page={item.page}
                    currentLocaleCode={currentLocale.code}
                    className="text-sm font-medium text-foreground/90 hover:text-accent transition-colors"
                  />
                )
              } else if (item.anchor) {
                // If anchor only
                const title = item.anchor.toUpperCase() // Fallback title
                return (
                  <Link 
                    key={index}
                    href={`/${currentLocale.code}#${item.anchor}`}
                    className="text-sm font-medium text-foreground/90 hover:text-accent transition-colors"
                  >
                    {title}
                  </Link>
                )
              }
              return null;
            })}
          </nav>

          {/* Right Actions & Hamburger */}
          <div className="flex items-center gap-2 sm:gap-3 z-50">
            <div className="flex items-center gap-2">
              <ThemeSwitcher />
              <LanguageSwitcher />
            </div>

            <button 
              className="lg:hidden w-11 h-11 flex shrink-0 items-center justify-center text-foreground rounded-full hover:bg-accent/10 transition-colors ml-1"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              aria-label="Toggle menu"
            >
              {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </header>

      {/* Mobile Fullscreen Navigation */}
      <div 
        className={`fixed inset-0 z-40 bg-background/95 backdrop-blur-xl transition-all duration-300 lg:hidden flex flex-col justify-center items-center ${
          isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"
        }`}
      >
        <nav className="flex flex-col gap-8 text-center w-full px-6">
          {navItems.map((item, index) => {
            if (item.page && item.page.slug) {
              return (
                <LocalizedLink 
                  key={index} 
                  page={item.page}
                  currentLocaleCode={currentLocale.code}
                  className="text-2xl font-bold text-foreground hover:text-accent transition-colors"
                  onClick={() => setIsMobileMenuOpen(false)}
                />
              )
            } else if (item.anchor) {
              const title = item.anchor.toUpperCase()
              return (
                <Link 
                  key={index}
                  href={`/${currentLocale.code}#${item.anchor}`}
                  className="text-2xl font-bold text-foreground hover:text-accent transition-colors"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  {title}
                </Link>
              )
            }
            return null;
          })}
        </nav>

        <div className="absolute bottom-12 left-0 right-0 px-6 flex flex-col items-center">
          <div className="w-full h-px bg-border/50 mb-8 max-w-xs" />
          
          <div className="flex items-center gap-4 mb-6 sm:hidden">
            <ThemeSwitcher />
            <LanguageSwitcher />
          </div>

          {whatsappNumber && (
            <Link 
              href={whatsappLink} 
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center gap-2 bg-[#25D366] hover:bg-[#20bd5a] text-[#1C1B1A] px-8 py-4 rounded-none transition-colors w-full max-w-xs shadow-lg"
            >
              <MessageCircle size={24} />
              <span className="font-bold text-lg">WhatsApp</span>
            </Link>
          )}
        </div>
      </div>
    </>
  );
}