import { useEffect, useState } from "react";
import { Menu, X, Phone } from "lucide-react";
import { project } from "@/data/project";

const links = [
  { href: "#home", label: "Home" },
  { href: "#about", label: "About" },
  // { href: "#highlights", label: "Highlights" },
  { href: "#amenities", label: "Amenities" },
  { href: "#gallery", label: "Gallery" },
  { href: "#location", label: "Location" },
  { href: "#contact", label: "Contact" },
];

export function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

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

  const onNav = (href: string) => {
    setOpen(false);
    const el = document.querySelector(href);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <header
      className={`fixed inset-x-0 top-0 z-50 transition-all duration-500 ${scrolled ? "bg-brand/95 shadow-soft backdrop-blur-md" : "bg-transparent"
        }`}
    >
      <div className="container-luxe flex h-18 items-center justify-between gap-4 py-3 md:h-20">
        <a
          href="#home"
          onClick={(e) => { e.preventDefault(); onNav("#home"); }}
          className="flex min-w-0 items-center"
        >
          <img src="/company_logo.png" alt={`${project.companyName} logo`} className="h-10 md:h-12 w-auto object-contain rounded-md bg-white/95 p-1.5" />
        </a>

        <nav className="hidden items-center gap-7 lg:flex">
          {links.map((l) => (
            <a
              key={l.href}
              href={l.href}
              onClick={(e) => { e.preventDefault(); onNav(l.href); }}
              className="relative text-sm font-medium text-white/85 transition-colors hover:text-gold after:absolute after:-bottom-1.5 after:left-0 after:h-0.5 after:w-0 after:bg-gold after:transition-all hover:after:w-full"
            >
              {l.label}
            </a>
          ))}
        </nav>

        <div className="hidden items-center gap-3 lg:flex">
          <a
            href={`tel:${project.contact.phone.replace(/\s+/g, "")}`}
            className="flex items-center gap-2 text-sm font-medium text-white/85 hover:text-gold"
          >
            <Phone className="h-4 w-4" /> {project.contact.phone}
          </a>
          <button
            onClick={() => onNav("#contact")}
            className="rounded-full bg-gold px-5 py-2.5 text-sm font-semibold text-brand shadow-soft transition-transform hover:scale-[1.03]"
          >
            Book Site Visit
          </button>
        </div>

        <button
          aria-label="Toggle menu"
          onClick={() => setOpen((o) => !o)}
          className="grid h-10 w-10 place-items-center rounded-md text-white lg:hidden"
        >
          {open ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
        </button>
      </div>

      {open ? (
        <div className="lg:hidden">
          <div className="container-luxe pb-5">
            <div className="rounded-2xl bg-brand/95 p-4 shadow-luxe backdrop-blur-md">
              <nav className="flex flex-col">
                {links.map((l) => (
                  <a
                    key={l.href}
                    href={l.href}
                    onClick={(e) => { e.preventDefault(); onNav(l.href); }}
                    className="border-b border-white/10 py-3 text-sm font-medium text-white/85 hover:text-gold"
                  >
                    {l.label}
                  </a>
                ))}
                <button
                  onClick={() => onNav("#contact")}
                  className="mt-4 rounded-full bg-gold py-3 text-sm font-semibold text-brand"
                >
                  Book Site Visit
                </button>
              </nav>
            </div>
          </div>
        </div>
      ) : null}
    </header>
  );
}