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 bg-background/98 z-[200] lg:hidden flex flex-col p-8 transition-all duration-500",
          mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none"
        )}
      >
        <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"
          >
            <X size={32} />
          </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",
                pathname === link.href ? "text-primary" : "text-white/60"
              )}
              style={{ transitionDelay: `${idx * 50}ms` }}
            >
              {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"
          >
            <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 text-white font-headline font-bold uppercase tracking-widest py-6 text-lg text-center flex items-center justify-center gap-3"
          >
            <Phone className="w-5 h-5" />
            {siteConfig.contact.phone}
          </a>
        </div>
      </div>
    </nav>
  );
}