"use client";

import Link from "next/link";

export default function Navbar() {
  const lang = "tr"; // Mocked locale

  const navLinks = [
    { label: { tr: "KONAKLAMA", en: "ACCOMMODATION", de: "UNTERKUNFT" }, href: "/accommodation", side: "left" },
    { label: { tr: "YİYECEK & İÇECEK", en: "FOOD & BEVERAGE", de: "FOOD & BEVERAGE" }, href: "/dining", side: "left" },
    { label: { tr: "AKTİVİTE", en: "ACTIVITIES", de: "AKTIVITÄTEN" }, href: "/activities", side: "left" },
    { label: { tr: "ORGANİZASYON", en: "ORGANIZER", de: "ORGANISATION" }, href: "/organizations", side: "right" },
    { label: { tr: "GALERİ", en: "GALLERY", de: "GALERIE" }, href: "/gallery", side: "right" },
    { label: { tr: "SPA CENTER", en: "SPA CENTER", de: "SPA CENTER" }, href: "/spa", side: "right" },
  ];

  return (
    <nav className=" top-0 left-0 right-0 z-50 transition-all duration-500 py-6 bg-white shadow-sm border-b border-gray-50">
      <div className="max-w-[1600px] mx-auto px-10 flex items-center justify-between">

        {/* Left Menu */}
        <div className="hidden lg:flex items-center space-x-12 flex-1">
          {navLinks.filter(l => l.side === "left").map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="group relative text-[11px] font-medium tracking-[0.2em] transition-all text-gray-900 overflow-hidden"
            >
              <span className="relative z-10 block transition-transform duration-300 group-hover:-translate-y-full">
                {link.label[lang as "tr"]}
              </span>
              <span className="absolute inset-0 z-20 block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-gold italic">
                {link.label[lang as "tr"]}
              </span>
            </Link>
          ))}
        </div>

        {/* Centered Logo */}
        <div className="flex flex-col items-center">
          <Link href="/" className="flex flex-col items-center group">
            <span className="text-3xl md:text-5xl font-serif font-light tracking-[0.3em] text-gray-900 leading-none">
              SALMAKIS
            </span>
            <span className="text-[10px] tracking-[0.6em] mt-2 text-gray-400 font-sans uppercase">
              Resort & Spa
            </span>
          </Link>
        </div>

        {/* Right Menu */}
        <div className="hidden lg:flex items-center justify-end space-x-12 flex-1">
          {navLinks.filter(l => l.side === "right").map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="group relative text-[11px] font-medium tracking-[0.2em] transition-all text-gray-900 overflow-hidden"
            >
              <span className="relative z-10 block transition-transform duration-300 group-hover:-translate-y-full">
                {link.label[lang as "tr"]}
              </span>
              <span className="absolute inset-0 z-20 block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-gold italic">
                {link.label[lang as "tr"]}
              </span>
            </Link>
          ))}
        </div>

        {/* Mobile Menu */}
        <div className="lg:hidden">
          <button className="p-2 text-gray-900">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="w-8 h-8">
              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
            </svg>
          </button>
        </div>
      </div>
    </nav>
  );
}