"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";

import logo from "@/assets/images/brand/logo.png";
import { contact, nav, site } from "@/data/site";

export function SiteHeader() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // The drawer covers the viewport, so the page beneath it must not scroll.
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [menuOpen]);

  return (
    <header
      className={`fixed inset-x-0 top-0 z-50 transition-[background-color,backdrop-filter,box-shadow,padding] duration-500 ${
        scrolled || menuOpen
          ? "bg-ink/92 py-3 shadow-[0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-xl"
          : "bg-gradient-to-b from-black/55 to-transparent py-6"
      }`}
    >
      <div className="mx-auto flex max-w-[1400px] items-center justify-between gap-6 px-5 lg:px-10">
        <Link href="/" aria-label={site.name} className="shrink-0">
          <Image
            src={logo}
            alt={site.name}
            priority
            className="h-8 w-auto brightness-0 invert lg:h-9"
          />
        </Link>

        <nav aria-label="فهرست اصلی" className="hidden lg:block">
          <ul className="flex items-center gap-9">
            {nav.map((item) => (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className="group relative block py-1 text-[0.94rem] text-white/85 transition-colors hover:text-white"
                >
                  {item.label}
                  <span className="absolute inset-x-0 -bottom-0.5 h-px origin-right scale-x-0 bg-gold transition-transform duration-400 ease-out-soft group-hover:scale-x-100" />
                </Link>
              </li>
            ))}
          </ul>
        </nav>

        <div className="flex items-center gap-3">
          <Link
            href={contact.loginUrl}
            className="hidden rounded-full border border-white/30 px-6 py-2 text-sm text-white transition-colors duration-300 hover:border-gold hover:bg-gold lg:inline-block"
          >
            ورود
          </Link>

          <button
            type="button"
            onClick={() => setMenuOpen((v) => !v)}
            aria-expanded={menuOpen}
            aria-controls="mobile-menu"
            aria-label={menuOpen ? "بستن فهرست" : "باز کردن فهرست"}
            className="flex h-11 w-11 flex-col items-center justify-center gap-[5px] lg:hidden"
          >
            <span
              className={`block h-px w-6 bg-white transition-transform duration-300 ${
                menuOpen ? "translate-y-[6px] rotate-45" : ""
              }`}
            />
            <span
              className={`block h-px w-6 bg-white transition-opacity duration-300 ${
                menuOpen ? "opacity-0" : ""
              }`}
            />
            <span
              className={`block h-px w-6 bg-white transition-transform duration-300 ${
                menuOpen ? "-translate-y-[6px] -rotate-45" : ""
              }`}
            />
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      <div
        id="mobile-menu"
        className={`overflow-hidden bg-ink transition-[max-height,opacity] duration-500 ease-out-soft lg:hidden ${
          menuOpen ? "max-h-[80vh] opacity-100" : "max-h-0 opacity-0"
        }`}
      >
        <ul className="space-y-1 px-5 pt-6 pb-8">
          {nav.map((item) => (
            <li key={item.href}>
              <Link
                href={item.href}
                onClick={() => setMenuOpen(false)}
                className="block border-b border-white/10 py-3.5 text-white/85 transition-colors hover:text-gold"
              >
                {item.label}
              </Link>
            </li>
          ))}
          <li className="pt-5">
            <Link
              href={contact.loginUrl}
              className="block rounded-full bg-gold py-3 text-center text-white"
            >
              ورود
            </Link>
          </li>
        </ul>
      </div>
    </header>
  );
}
