klz-cables.com/components/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 { Button } from './ui';
import { useEffect, useState } from 'react';
import { cn } from './ui';

export default function Header() {
  const t = useTranslations('Navigation');
  const pathname = usePathname();
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  
  // Extract locale from pathname
  const currentLocale = pathname.split('/')[1] || 'en';
  
  // Check if homepage
  const isHomePage = pathname === `/${currentLocale}` || pathname === '/';

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };

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

  // Close mobile menu on route change
  useEffect(() => {
    setIsMobileMenuOpen(false);
  }, [pathname]);

  // Prevent scroll when mobile menu is open
  useEffect(() => {
    if (isMobileMenuOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }
  }, [isMobileMenuOpen]);
  
  // Function to get path for a different locale
  const getPathForLocale = (newLocale: string) => {
    const segments = pathname.split('/');
    segments[1] = newLocale;
    return segments.join('/');
  };

  const menuItems = [
    { label: t('home'), href: '/' },
    { label: t('team'), href: '/team' },
    { label: t('products'), href: '/products' },
    { label: t('blog'), href: '/blog' },
  ];

  const headerClass = cn(
    "fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p",
    {
      "bg-transparent py-4 md:py-8": isHomePage && !isScrolled && !isMobileMenuOpen,
      "bg-primary py-3 md:py-4 shadow-2xl": !isHomePage || isScrolled || isMobileMenuOpen,
    }
  );

  const textColorClass = "text-white";
  const logoSrc = "/logo-white.svg";

  return (
    <>
      <header className={headerClass}>
        <div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
          <Link href={`/${currentLocale}`} className="flex-shrink-0 group touch-target">
            <Image 
              src={logoSrc} 
              alt="KLZ Cables" 
              width={120} 
              height={120} 
              className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
              priority
              unoptimized
            />
          </Link>

          <div className="flex items-center gap-4 md:gap-12">
            <nav className="hidden lg:flex items-center space-x-10">
              {menuItems.map((item) => (
                <Link 
                  key={item.href} 
                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
                  className={cn(
                    textColorClass, 
                    "hover:text-accent font-bold transition-all text-lg tracking-tight relative group"
                  )}
                >
                  {item.label}
                  <span className="absolute -bottom-2 left-0 w-0 h-1 bg-accent transition-all duration-300 group-hover:w-full rounded-full" />
                </Link>
              ))}
            </nav>

            <div className={cn("hidden lg:flex items-center space-x-8", textColorClass)}>
              <div className="flex items-center space-x-4 text-sm font-extrabold tracking-widest uppercase">
                <Link 
                  href={getPathForLocale('en')} 
                  className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
                >
                  EN
                </Link>
                <div className="w-px h-4 bg-current opacity-20" />
                <Link 
                  href={getPathForLocale('de')} 
                  className={`hover:text-accent transition-colors flex items-center gap-2 touch-target ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
                >
                  DE
                </Link>
              </div>
              
              <Button 
                href={`/${currentLocale}/contact`}
                variant="white" 
                size="md"
                className="px-8 shadow-xl"
              >
                {t('contact')}
              </Button>
            </div>

            {/* Mobile Menu Button */}
            <button 
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className={cn("lg:hidden touch-target p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 z-50", textColorClass)}
              aria-label="Toggle Menu"
            >
              <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {isMobileMenuOpen ? (
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                ) : (
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                )}
              </svg>
            </button>
          </div>
        </div>

        {/* Mobile Menu Overlay */}
        <div className={cn(
          "fixed inset-0 bg-primary-dark z-40 lg:hidden transition-all duration-500 ease-in-out flex flex-col",
          isMobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
        )}>
          <div className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
            {menuItems.map((item, idx) => (
              <Link 
                key={item.href} 
                href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
                className={cn(
                  "text-3xl font-extrabold text-white hover:text-accent transition-all transform",
                  isMobileMenuOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
                )}
                style={{ transitionDelay: `${idx * 100}ms` }}
              >
                {item.label}
              </Link>
            ))}
            
            <div className={cn(
              "pt-8 border-t border-white/10 w-full flex flex-col items-center space-y-8 transition-all duration-500 delay-500",
              isMobileMenuOpen ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
            )}>
              <div className="flex items-center space-x-8 text-xl font-extrabold tracking-widest uppercase text-white">
                <Link 
                  href={getPathForLocale('en')} 
                  className={`hover:text-accent transition-colors ${currentLocale === 'en' ? 'text-accent' : 'opacity-60'}`}
                >
                  EN
                </Link>
                <div className="w-px h-6 bg-white/20" />
                <Link 
                  href={getPathForLocale('de')} 
                  className={`hover:text-accent transition-colors ${currentLocale === 'de' ? 'text-accent' : 'opacity-60'}`}
                >
                  DE
                </Link>
              </div>
              
              <Button 
                href={`/${currentLocale}/contact`}
                variant="accent" 
                size="lg"
                className="w-full max-w-xs py-6 text-xl shadow-2xl"
              >
                {t('contact')}
              </Button>
            </div>
          </div>
          
          {/* Bottom Branding */}
          <div className="p-12 flex justify-center opacity-20">
            <Image src="/logo-white.svg" alt="KLZ" width={80} height={80} unoptimized />
          </div>
        </div>
      </header>
    </>
  );
}