aydogannakliyat/components/Navbar.tsx

'use client';

import { useState, useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Menu, X, Phone, MessageCircle } from "lucide-react";
import { cn } from "@/lib/utils";
import { siteConfig } from "@/lib/data";

const NAV_LINKS = [
  { name: "Anasayfa", href: "/" },
  { name: "Hizmetler", href: "/hizmetler" },
  { name: "Filomuz", href: "/filomuz" },
  { name: "Hakkımızda", href: "/hakkimizda" },
  { name: "İletişim", href: "/iletisim" },
];

export function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const pathname = usePathname();

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

  const handleWhatsApp = () => {
    const message = encodeURIComponent("Merhaba, vinç kiralama ve nakliyat hizmetleriniz hakkında bilgi almak istiyorum.");
    window.open(`https://wa.me/${siteConfig.contact.whatsapp}?text=${message}`, '_blank');
  };

  return (
    <nav 
      className={cn(
        "fixed top-0 left-0 w-full z-[100] transition-all duration-500 px-6 md:px-12 py-6 flex justify-between items-center",
        isScrolled ? "bg-background/95 backdrop-blur-md py-4 border-b border-white/5 shadow-2xl" : "bg-transparent"
      )}
    >
      {/* Logo Area */}
      <Link href="/" className="flex flex-col items-start group">
        <span className="font-headline text-2xl md:text-3xl font-black text-white tracking-tighter leading-none group-hover:text-primary transition-colors">
          AYDOĞAN
        </span>
        <span className="font-label text-[10px] md:text-xs text-primary font-bold tracking-[0.3em] uppercase -mt-1 group-hover:text-white transition-colors">
          Nakliyat & Vinç
        </span>
      </Link>

      {/* Desktop Navigation */}
      <div className="hidden lg:flex items-center gap-12">
        {NAV_LINKS.map((link) => (
          <Link 
            key={link.name}
            href={link.href}
            className={cn(
              "font-headline text-xs font-bold uppercase tracking-[0.2em] transition-all hover:text-primary relative py-2",
              pathname === link.href ? "text-primary after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-primary" : "text-white/70"
            )}
          >
            {link.name}
          </Link>
        ))}
      </div>

      {/* CTA Button */}
      <div className="hidden lg:flex items-center gap-6">
        <button 
          onClick={handleWhatsApp}
          className="bg-primary text-on-primary px-8 py-3 font-headline font-bold uppercase tracking-widest text-xs hover:brightness-110 active:scale-95 transition-all flex items-center gap-2"
        >
          <MessageCircle className="w-4 h-4" />
          Hızlı Teklif
        </button>
      </div>

      {/* Mobile Menu Toggle */}
      <button
        className="lg:hidden text-white p-2 hover:bg-white/5 transition-colors"
        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
      >
        {mobileMenuOpen ? <X /> : <Menu />}
      </button>

      {/* Mobile Menu Overlay */}
      <div 
        className={cn(
          "fixed inset-0 z-[200] lg:hidden flex flex-col p-8 transition-all duration-500 overflow-hidden",
          mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
        )}
      >
        {/* Clean Gradient Background for Mobile Menu */}
        <div className="absolute inset-0 z-0 bg-surface-container-lowest" />
        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-background z-0" />
        <div className="noise-overlay opacity-20 z-0" />

        <div className="relative z-10 flex flex-col h-full">
          <div className="flex justify-between items-center mb-16">
            <div className="flex flex-col">
              <span className="font-headline text-3xl font-black text-white tracking-tighter">AYDOĞAN</span>
              <span className="font-label text-xs text-primary font-bold tracking-[0.3em] uppercase">Nakliyat & Vinç</span>
            </div>
            <button 
              onClick={() => setMobileMenuOpen(false)}
              className="p-4 bg-white/5 text-white rounded-full hover:bg-primary transition-colors"
            >
              <X size={24} />
            </button>
          </div>

          <div className="flex flex-col gap-8">
            {NAV_LINKS.map((link, idx) => (
              <Link 
                key={link.name}
                href={link.href}
                onClick={() => setMobileMenuOpen(false)}
                className={cn(
                  "font-headline text-4xl font-bold uppercase tracking-tighter transition-all hover:translate-x-4 flex items-center gap-4 group",
                  pathname === link.href ? "text-primary" : "text-white/60"
                )}
                style={{ transitionDelay: `${idx * 50}ms` }}
              >
                <div className={cn(
                  "w-2 h-2 bg-primary rounded-full transition-all group-hover:scale-150",
                  pathname === link.href ? "opacity-100" : "opacity-0 group-hover:opacity-100"
                )} />
                {link.name}
              </Link>
            ))}
          </div>

          <div className="mt-auto flex flex-col gap-4">
            <button 
              onClick={() => {
                handleWhatsApp();
                setMobileMenuOpen(false);
              }}
              className="w-full bg-primary text-on-primary font-headline font-black uppercase tracking-widest py-6 text-xl flex items-center justify-center gap-3 active:scale-95 transition-all shadow-[0_20px_50px_rgba(234,179,8,0.2)]"
            >
              <MessageCircle className="w-6 h-6" />
              HIZLI TEKLİF AL
            </button>
            <a 
              href={`tel:${siteConfig.contact.phone.replace(/\s+/g, '')}`}
              className="w-full border border-white/10 bg-white/5 backdrop-blur-sm text-white font-headline font-bold uppercase tracking-widest py-6 text-lg text-center flex items-center justify-center gap-3 hover:bg-white/10 transition-all"
            >
              <Phone className="w-5 h-5" />
              {siteConfig.contact.phone}
            </a>
          </div>
        </div>
      </div>
    </nav>
  );
}