"use client";
import Image from "next/image";
import { useState } from "react";
import Link from "next/link";

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);
  const navItems = [
    { href: "/", label: "Hjem" },
    { href: "/golfbaner", label: "Golfbaner" },
  ];

  return (
    <header className="sticky top-0 z-[100] border-b border-white/10 bg-[#25312A]/95 text-white shadow-sm backdrop-blur-md">
      <div className="mx-auto flex h-20 max-w-[1400px] items-center justify-between px-4 sm:px-6 lg:px-8">
        <Link href="/" className="h-10 transition-transform hover:scale-[1.02] active:scale-95 md:h-12">
          <Image
            src="/TeeOff-logo-Retina-1.png"
            alt="TeeOff.no"
            width={336}
            height={102}
            priority
            className="h-full w-auto object-contain"
          />
        </Link>

        <nav className="hidden items-center gap-8 text-[12px] font-extrabold uppercase tracking-[0.14em] text-white/90 md:flex">
          {navItems.map((item) => (
            <Link key={item.href} href={item.href} className="transition hover:text-[#8BC34A]">
              {item.label}
            </Link>
          ))}
        </nav>

        <button onClick={() => setIsOpen(!isOpen)} className="p-2 text-white md:hidden" aria-label="Meny">
          <div className="mb-1.5 h-0.5 w-6 bg-current transition-all"></div>
          <div className="mb-1.5 h-0.5 w-6 bg-current"></div>
          <div className="h-0.5 w-6 bg-current"></div>
        </button>
      </div>

      {isOpen && (
        <div className="absolute left-0 top-20 flex w-full flex-col gap-5 border-b border-white/10 bg-[#25312A] px-6 py-6 shadow-2xl md:hidden">
          {navItems.map((item) => (
            <Link
              key={item.href}
              onClick={() => setIsOpen(false)}
              href={item.href}
              className="text-lg font-extrabold uppercase tracking-[0.08em] text-white"
            >
              {item.label}
            </Link>
          ))}
        </div>
      )}
    </header>
  );
}