"use client";

export default function Header({ visible }: { visible: boolean }) {
  return (
    <header
      className={`fixed top-0 left-0 w-full h-16 bg-[#06120c]/85 border-b border-[#bc9e65]/20 backdrop-blur-md z-40 transition-transform duration-500 ease-in-out ${
        visible ? "translate-y-0" : "-translate-y-full"
      }`}
    >
      <div className="max-w-7xl mx-auto h-full px-6 flex items-center justify-between">
        
        {/* Left Side: Brand Logo */}
        <a href="/" className="clickable flex items-center gap-2.5 select-none">
          <svg className="w-5 h-5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
          </svg>
          <span className="font-serif text-[#bc9e65] text-sm sm:text-base tracking-[0.25em] uppercase font-semibold">
            MY DOSA PLACE
          </span>
        </a>

        {/* Center: Navigation Links */}
        <nav className="hidden md:flex items-center gap-8">
          <a
            href="/"
            className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
          >
            Home
          </a>
          <a
            href="/about"
            className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
          >
            About
          </a>
          <a
            href="/menu"
            className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
          >
            Menu
          </a>
          <a
            href="/blog"
            className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
          >
            Blog
          </a>
          <a
            href="/contact"
            className="clickable font-sans text-base sm:text-sm tracking-widest uppercase text-stone-300 hover:text-[#bc9e65] transition-colors duration-300 font-bold"
          >
            Contact
          </a>
        </nav>

        {/* Right Side: Reservation Button */}
        <div className="flex items-center">
          <a
            href="/reservation"
            className="clickable px-4 sm:px-5 py-2 border border-[#bc9e65]/50 hover:border-[#bc9e65] rounded-full text-sm tracking-widest font-sans font-bold text-[#bc9e65] hover:bg-[#bc9e65] hover:text-[#06120c] transition-all duration-300 shadow-md"
          >
            RESERVE TABLE
          </a>
        </div>

      </div>
    </header>
  );
}
