import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Menu, X } from "lucide-react";
import { profile } from "../data/profile";

export default function Navbar() {
  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);
  }, []);

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

  return (
    <header
      className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
        scrolled ? "py-3" : "py-5"
      }`}
    >
      <div className="container-px mx-auto max-w-6xl">
        <nav
          className={`flex items-center justify-between rounded-2xl px-5 py-3 transition-all duration-300 ${
            scrolled ? "glass shadow-lg shadow-black/20" : "bg-transparent border border-transparent"
          }`}
        >
          <a
            href="#inicio"
            className="group flex items-center gap-2.5 font-display font-semibold text-lg tracking-tight text-[color:var(--color-ink)]"
          >
            <img
              src={profile.logo}
              alt={profile.logoAlt}
              className="h-8 w-8 object-contain transition-transform duration-300 group-hover:rotate-6"
            />
            <span className="hidden sm:inline">
              {profile.initials}
              <span className="text-gradient">.</span>
            </span>
          </a>

          <ul className="hidden md:flex items-center gap-8">
            {profile.nav.map((item) => (
              <li key={item.href}>
                <a
                  href={item.href}
                  className="text-sm text-[color:var(--color-muted)] hover:text-[color:var(--color-ink)] transition-colors"
                >
                  {item.label}
                </a>
              </li>
            ))}
          </ul>

          <a
            href="#contacto"
            className="hidden md:inline-flex items-center rounded-full border border-[color:var(--color-border)] px-4 py-2 text-sm font-medium hover:border-[color:var(--color-accent)] hover:text-[color:var(--color-accent)] transition-colors"
          >
            Hablemos
          </a>

          <button
            className="md:hidden p-2 -mr-2 text-[color:var(--color-ink)]"
            onClick={() => setOpen((v) => !v)}
            aria-label={open ? "Cerrar menú" : "Abrir menú"}
            aria-expanded={open}
          >
            {open ? <X size={22} /> : <Menu size={22} />}
          </button>
        </nav>
      </div>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.25, ease: "easeInOut" }}
            className="md:hidden container-px mx-auto max-w-6xl overflow-hidden"
          >
            <div className="glass mt-2 rounded-2xl p-5 flex flex-col gap-1">
              {profile.nav.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  onClick={() => setOpen(false)}
                  className="py-3 text-base text-[color:var(--color-ink)] border-b border-[color:var(--color-border)] last:border-none"
                >
                  {item.label}
                </a>
              ))}
              <a
                href="#contacto"
                onClick={() => setOpen(false)}
                className="mt-3 text-center rounded-full bg-[color:var(--color-accent)] text-[#05070d] font-medium py-3"
              >
                Hablemos
              </a>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  );
}
