'use client';

import { Link } from '@/i18n/routing';
import { siteInfo } from '@/lib/data';
import { Phone, MapPin, Menu } from 'lucide-react';
import { useState } from 'react';

export function Navbar() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="fixed top-4 left-4 right-4 z-50">
      <header className="container mx-auto bg-white/80 backdrop-blur-xl border border-white/20 shadow-lg rounded-2xl transition-all duration-300">
        <div className="px-6 h-20 flex items-center justify-between">
          <Link href="/" className="font-extrabold text-2xl text-deepblue-900 tracking-tighter flex items-center gap-2 hover:opacity-80 transition-opacity">
            {siteInfo.name}
          </Link>

        {/* Desktop Nav */}
        <nav className="hidden md:flex items-center gap-6">
          <Link href="/" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Ana Sayfa</Link>
          <Link href="/hakkimizda" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Hakkımızda</Link>
          <Link href="/turlar" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Turlar</Link>
          <Link href="/aktiviteler" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Aktiviteler</Link>
          <Link href="/tekne-turlari" className="text-sm font-medium hover:text-turquoise-500 transition-colors">Tekne Turları</Link>
          <Link href="/iletisim" className="text-sm font-medium hover:text-turquoise-500 transition-colors">İletişim</Link>
        </nav>

        <div className="hidden md:flex items-center gap-4">
          <a href={siteInfo.phoneLink} className="flex items-center gap-2 text-sm font-semibold text-deepblue-900">
            <Phone className="w-4 h-4 text-turquoise-500" />
            {siteInfo.phone}
          </a>
          <a href={siteInfo.whatsappLink} target="_blank" rel="noreferrer" className="px-4 py-2 bg-vibrantorange-500 hover:bg-orange-600 text-white rounded-md text-sm font-medium transition-colors">
            Rezervasyon
          </a>
        </div>

        {/* Mobile Toggle */}
        <button className="md:hidden p-2" onClick={() => setIsOpen(!isOpen)}>
          <Menu className="w-6 h-6" />
        </button>
      </div>

      {/* Mobile Nav */}
      {isOpen && (
        <div className="md:hidden border-t p-4 flex flex-col gap-4 bg-sandwhite-100">
          <Link href="/" onClick={() => setIsOpen(false)} className="text-sm font-medium">Ana Sayfa</Link>
          <Link href="/hakkimizda" onClick={() => setIsOpen(false)} className="text-sm font-medium">Hakkımızda</Link>
          <Link href="/turlar" onClick={() => setIsOpen(false)} className="text-sm font-medium">Turlar</Link>
          <Link href="/aktiviteler" onClick={() => setIsOpen(false)} className="text-sm font-medium">Aktiviteler</Link>
          <Link href="/tekne-turlari" onClick={() => setIsOpen(false)} className="text-sm font-medium">Tekne Turları</Link>
          <Link href="/iletisim" onClick={() => setIsOpen(false)} className="text-sm font-medium">İletişim</Link>
          <a href={siteInfo.whatsappLink} className="mt-2 block text-center px-4 py-2 bg-vibrantorange-500 text-white rounded-md text-sm font-medium">
            Rezervasyon
          </a>
        </div>
      )}
    </header>
    </div>
  );
}