import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, X, Phone, Globe } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";
import logoWhite from "@/assets/logo-white.png";

const Navbar = () => {
  const { lang, setLang, t } = useLanguage();
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

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

  const links = [
    { key: "nav.home", href: "#hero" },
    { key: "nav.services", href: "#services" },
    { key: "nav.about", href: "#about" },
    { key: "nav.portfolio", href: "#portfolio" },
    { key: "nav.contact", href: "#contact" },
  ];

  const scrollTo = (href: string) => {
    setMobileOpen(false);
    const el = document.querySelector(href);
    el?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <motion.nav
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.6, ease: "easeOut" }}
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
        scrolled ? "py-2" : "py-3 md:py-4"
      }`}
    >
      <div className="container mx-auto px-4 md:px-6">
        <div
          className={`flex items-center justify-between rounded-2xl px-5 py-2.5 md:px-6 md:py-3 transition-all duration-700 ${
            scrolled
              ? "border border-foreground/[0.06] shadow-[0_8px_40px_hsl(0_0%_0%/0.7),inset_0_1px_0_hsl(0_0%_100%/0.05)]"
              : "border border-foreground/[0.08] shadow-[0_4px_24px_hsl(0_0%_0%/0.4),inset_0_1px_0_hsl(0_0%_100%/0.06)]"
          }`}
          style={{
            background: scrolled ? "hsl(0 0% 2% / 0.88)" : "hsl(0 0% 3% / 0.72)",
            backdropFilter: scrolled ? "blur(40px) saturate(1.5)" : "blur(24px) saturate(1.3)",
            WebkitBackdropFilter: scrolled ? "blur(40px) saturate(1.5)" : "blur(24px) saturate(1.3)",
          }}
        >
          <button onClick={() => scrollTo("#hero")} className="flex items-center">
            <img src={logoWhite} alt="I Love Printing Corp" className="h-7 md:h-8 w-auto" />
          </button>

          {/* Desktop Links */}
          <div className="hidden lg:flex items-center gap-7">
            {links.map((l) => (
              <button
                key={l.key}
                onClick={() => scrollTo(l.href)}
                className="text-[11px] font-body tracking-[0.15em] text-foreground/75 hover:text-primary transition-colors duration-300 font-medium"
                style={{ textTransform: "uppercase" }}
              >
                {t(l.key)}
              </button>
            ))}

            <div className="w-px h-4 bg-foreground/10" />

            <button
              onClick={() => setLang(lang === "en" ? "es" : "en")}
              className="flex items-center gap-1.5 text-[11px] text-foreground/55 hover:text-foreground transition-colors"
            >
              <Globe className="w-3.5 h-3.5" />
              {lang === "en" ? "ES" : "EN"}
            </button>

            <a
              href="tel:+15162721560"
              className="cta-button-primary text-[11px] flex items-center gap-2 !py-2 !px-4 !rounded-lg shadow-[0_0_16px_-4px_hsl(0_100%_50%/0.35)]"
              style={{ textTransform: "uppercase", letterSpacing: "0.1em" }}
            >
              <Phone className="w-3.5 h-3.5" />
              {t("nav.callNow")}
            </a>
          </div>

          {/* Mobile Menu Button */}
          <button className="lg:hidden text-foreground/80" onClick={() => setMobileOpen(!mobileOpen)}>
            {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
          </button>
        </div>
      </div>

      {/* Mobile Menu */}
      <AnimatePresence>
        {mobileOpen && (
          <motion.div
            initial={{ opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.2 }}
            className="lg:hidden mx-4 mt-2 rounded-2xl border border-foreground/[0.08] overflow-hidden shadow-[0_16px_48px_hsl(0_0%_0%/0.7)]"
            style={{
              background: "hsl(0 0% 2% / 0.92)",
              backdropFilter: "blur(32px) saturate(1.4)",
              WebkitBackdropFilter: "blur(32px) saturate(1.4)",
            }}
          >
            <div className="px-6 py-5 flex flex-col gap-3">
              {links.map((l) => (
                <button
                  key={l.key}
                  onClick={() => scrollTo(l.href)}
                  className="text-left text-sm font-body tracking-[0.12em] text-foreground/70 hover:text-primary transition-colors py-1"
                  style={{ textTransform: "uppercase" }}
                >
                  {t(l.key)}
                </button>
              ))}
              <div className="h-px bg-foreground/8 my-2" />
              <div className="flex items-center gap-4">
                <button
                  onClick={() => setLang(lang === "en" ? "es" : "en")}
                  className="flex items-center gap-1.5 text-sm text-foreground/55"
                >
                  <Globe className="w-4 h-4" />
                  {lang === "en" ? "Español" : "English"}
                </button>
                <a
                  href="tel:+15162721560"
                  className="cta-button-primary text-sm flex items-center gap-2 !py-2 !px-4 !rounded-lg"
                >
                  <Phone className="w-4 h-4" />
                  {t("nav.callNow")}
                </a>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.nav>
  );
};

export default Navbar;
