moygroup/app/components/Navbar.tsx

"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { Menu, X, Globe } from "lucide-react";
import { m, AnimatePresence } from "framer-motion";
import { Locale } from "../dictionaries";
import type { Dictionary } from "@/types/dictionary";

export default function Navbar({ lang, dict }: { lang: Locale; dict: Dictionary["navigation"] }) {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const pathname = usePathname();
  const isHome = pathname === `/${lang}` || pathname === `/${lang}/`;

  const navLinks = [
    { name: dict.home, href: `/${lang}` },
    { name: dict.corporate, href: `/${lang}/kurumsal` },
    { name: dict.venues, href: `/${lang}/#mekanlar` },
    { name: dict.gallery, href: `/${lang}/galeri` },
    { name: dict.contact, href: `/${lang}/iletisim` },
  ];

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

  const switchLanguage = (newLang: string) => {
    if (!pathname) return '/';
    // Replace the current lang code in the URL with the new one
    const segments = pathname.split('/');
    if (segments[1] === 'tr' || segments[1] === 'en') {
      segments[1] = newLang;
    } else {
      segments.splice(1, 0, newLang);
    }
    return segments.join('/');
  };

  return (
    <header
      className={`fixed top-0 w-full z-50 transition-all duration-300 ${
        isScrolled || !isHome
          ? "bg-[var(--color-moy-dark)]/90 backdrop-blur-md py-4 shadow-lg"
          : "bg-transparent py-6"
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center">
          {/* Logo */}
          <Link href={`/${lang}`} className="flex-shrink-0">
            <Image src="https://media.ayris.tech/upload/moygrup/logo.png" alt="Moy Group Logo" width={160} height={40} className="h-10 w-auto" priority />
          </Link>

          {/* Desktop Nav */}
          <nav className="hidden md:flex items-center gap-8">
            {navLinks.map((link) => (
              <Link
                key={link.name}
                href={link.href}
                className="text-white hover:text-[var(--color-moy-gold)] transition-colors text-sm uppercase tracking-wider font-medium"
              >
                {link.name}
              </Link>
            ))}
            
            {/* Language Switcher */}
            <div className="flex items-center gap-2 ml-4 border-l border-gray-600 pl-4">
              <Globe size={16} className="text-[var(--color-moy-gold)]" />
              <Link href={switchLanguage('tr')} className={`text-sm font-medium ${lang === 'tr' ? 'text-white' : 'text-gray-400 hover:text-white'}`}>TR</Link>
              <span className="text-gray-600">|</span>
              <Link href={switchLanguage('en')} className={`text-sm font-medium ${lang === 'en' ? 'text-white' : 'text-gray-400 hover:text-white'}`}>EN</Link>
            </div>
          </nav>

          {/* Mobile menu button */}
          <button
            aria-label={mobileMenuOpen ? "Menüyü kapat" : "Menüyü aç"}
            aria-expanded={mobileMenuOpen}
            className="md:hidden text-white"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            {mobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
          </button>
        </div>
      </div>

      {/* Mobile Nav */}
      <AnimatePresence>
        {mobileMenuOpen && (
          <m.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="absolute top-full left-0 w-full bg-[var(--color-moy-dark)] border-t border-gray-800 shadow-xl md:hidden"
          >
            <div className="px-4 pt-2 pb-6 space-y-1">
              {navLinks.map((link) => (
                <Link
                  key={link.name}
                  href={link.href}
                  onClick={() => setMobileMenuOpen(false)}
                  className="block px-3 py-4 text-white border-b border-gray-800 hover:text-[var(--color-moy-gold)] uppercase tracking-wider text-sm"
                >
                  {link.name}
                </Link>
              ))}
              <div className="flex items-center gap-4 px-3 py-4 text-white">
                <Globe size={18} className="text-[var(--color-moy-gold)]" />
                <Link href={switchLanguage('tr')} onClick={() => setMobileMenuOpen(false)} className={`text-sm ${lang === 'tr' ? 'text-[var(--color-moy-gold)] font-bold' : ''}`}>Türkçe</Link>
                <Link href={switchLanguage('en')} onClick={() => setMobileMenuOpen(false)} className={`text-sm ${lang === 'en' ? 'text-[var(--color-moy-gold)] font-bold' : ''}`}>English</Link>
              </div>
            </div>
          </m.div>
        )}
      </AnimatePresence>
    </header>
  );
}