"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import { navItems, site } from "@/data/home";

export function Header() {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState<string | null>(null);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <header className="wb-header sticky top-0 z-50 border-b border-[#eee] bg-white">
      <div className="container-page flex items-center justify-between gap-4 py-3 lg:py-4">
        <a href="/" className="shrink-0">
          <Image
            src="/images/brand/logo.png"
            alt={site.name}
            width={110}
            height={36}
            className="h-9 w-auto object-contain"
            priority
          />
        </a>

        <nav className="hidden items-center lg:flex">
          {navItems.map((item) => (
            <div
              key={item.label}
              className="relative"
              onMouseEnter={() => setActive(item.label)}
              onMouseLeave={() => setActive(null)}
            >
              <a href={item.href} className="nav-link-item">
                {item.label}
                {item.children ? (
                  <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden>
                    <path
                      d="M2 3.5 5 6.5 8 3.5"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.4"
                    />
                  </svg>
                ) : null}
              </a>
              {item.children && active === item.label ? (
                <div className="dropdown-panel">
                  {item.children.map((child) => (
                    <a key={child.label} href={child.href}>
                      {child.label}
                    </a>
                  ))}
                </div>
              ) : null}
            </div>
          ))}
        </nav>

        <div className="hidden items-center gap-3 lg:flex">
          <button
            type="button"
            aria-label="جستجو"
            className="flex h-9 w-9 items-center justify-center text-[#555]"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.8" />
              <path d="m20 20-3.5-3.5" stroke="currentColor" strokeWidth="1.8" />
            </svg>
          </button>
          <a
            href="#"
            aria-label="اینستاگرام"
            className="flex h-9 w-9 items-center justify-center text-[#555]"
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <rect
                x="3"
                y="3"
                width="18"
                height="18"
                rx="5"
                stroke="currentColor"
                strokeWidth="1.8"
              />
              <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.8" />
              <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
            </svg>
          </a>
          <a
            href="#"
            className="inline-flex items-center gap-2 rounded border border-[#ddd] px-3 py-1.5 text-sm text-[#333]"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path
                d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"
                stroke="currentColor"
                strokeWidth="1.8"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            ورود
          </a>
        </div>

        <button
          type="button"
          className="inline-flex h-10 w-10 items-center justify-center border border-[#ddd] lg:hidden"
          aria-label="منو"
          onClick={() => setOpen((v) => !v)}
        >
          <span className="flex w-5 flex-col gap-1.5">
            <span className="h-0.5 w-full bg-[#333]" />
            <span className="h-0.5 w-full bg-[#333]" />
            <span className="h-0.5 w-full bg-[#333]" />
          </span>
        </button>
      </div>

      {open ? (
        <div className="border-t border-[#eee] bg-white lg:hidden">
          <div className="container-page max-h-[70vh] overflow-y-auto py-3">
            {navItems.map((item) => (
              <div key={item.label} className="border-b border-[#f2f2f2] py-2">
                <a
                  href={item.href}
                  className="block py-1 text-[15px] font-bold"
                  onClick={() => setOpen(false)}
                >
                  {item.label}
                </a>
                {item.children?.map((child) => (
                  <a
                    key={child.label}
                    href={child.href}
                    className="block py-1 pr-3 text-sm text-[#666]"
                    onClick={() => setOpen(false)}
                  >
                    {child.label}
                  </a>
                ))}
              </div>
            ))}
          </div>
        </div>
      ) : null}
    </header>
  );
}
