lambada-fiesta-live/src/components/Navbar.tsx

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Menu, X, Globe } from "lucide-react";
import { useTranslation } from "react-i18next";
import { NAV_LINKS } from "@/data/event-data";
import Logo from "@/assets/logo.png";

/**
 * Navbar sticky con menú responsive.
 * Los links se definen en event-data.ts
 */
const Navbar = () => {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const { t, i18n } = useTranslation();

  const toggleLanguage = () => {
    const newLang = i18n.language === 'es' ? 'en' : 'es';
    i18n.changeLanguage(newLang);
  };

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

  useEffect(() => {
    if (menuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "unset";
    }
    return () => { document.body.style.overflow = "unset"; };
  }, [menuOpen]);

  return (
    <nav
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        scrolled
          ? "bg-background shadow-card"
          : "bg-background-white"
      }`}
    >
      <div className="container mx-auto flex items-center justify-between px-4 py-2 md:py-3 relative z-50">
        {/* Logo */}
        <a href="#" className="font-display text-xl font-bold text-gradient" onClick={() => setMenuOpen(false)}>
          <img src={Logo} alt="ZLB Logo" className="h-10 md:h-12 w-auto" />
        </a>

        {/* Desktop links */}
        <div className="hidden md:flex items-center gap-6">
          {NAV_LINKS.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="text-sm font-medium text-black/80 hover:text-primary transition-colors"
            >
              {t(`nav.${link.href.substring(1)}`)}
            </a>
          ))}
          
          {/* Language Switcher */}
          <button
            onClick={toggleLanguage}
            className="flex items-center gap-2 px-3 py-2 rounded-lg bg-primary/10 hover:bg-primary/20 transition-colors"
            aria-label="Change language"
          >
            <Globe size={18} />
            <span className="text-sm font-medium">
              {i18n.language === 'es' ? 'EN' : 'ES'}
            </span>
          </button>
        </div>

        {/* Mobile toggle */}
        <button
          className="md:hidden text-foreground hover:text-primary transition-colors focus:outline-none"
          onClick={() => setMenuOpen(!menuOpen)}
          aria-label="Toggle menu"
        >
          {menuOpen ? <X size={28} /> : <Menu size={28} />}
        </button>
      </div>

      {/* Mobile menu (Full Screen) */}
      <AnimatePresence>
        {menuOpen && (
          <motion.div
            initial={{ opacity: 0, y: "-100%" }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: "-100%" }}
            transition={{ type: "spring", damping: 25, stiffness: 200 }}
            className="md:hidden fixed inset-0 z-40 bg-background flex flex-col items-center justify-center gap-8"
          >
            {NAV_LINKS.map((link, i) => (
              <motion.a
                key={link.href}
                href={link.href}
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: 30 }}
                transition={{ delay: 0.1 * i }}
                onClick={() => setMenuOpen(false)}
                className="text-2xl md:text-4xl lg:text-5xl py-3 break-words leading-[1.6] font-display font-medium text-foreground hover:text-primary transition-colors"
              >
                {t(`nav.${link.href.substring(1)}`)}
              </motion.a>
            ))}
            
            {/* Language Switcher */}
            <motion.button
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: 30 }}
              transition={{ delay: 0.1 * NAV_LINKS.length }}
              onClick={toggleLanguage}
              className="flex items-center gap-3 text-2xl md:text-4xl lg:text-5xl py-3 font-display font-medium text-foreground hover:text-primary transition-colors"
            >
              <Globe className="w-6 h-6 md:w-10 md:h-10" />
              {i18n.language === 'es' ? 'EN' : 'ES'}
            </motion.button>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
};

export default Navbar;