import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import logoTess from "../assets/logotesspng.png";

{
  /** BARRA DE NAVEGACIÓN (ง •_•)ง*/
}
const Navbar = ({ onContactClick }) => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <nav
      className={`fixed top-0 left-0 right-0 z-50 px-6 lg:px-8 transition-all duration-500 ${
        isScrolled
          ? "bg-brand-dark/70 backdrop-blur-2xl border-b border-white/10 py-2"
          : "bg-transparent py-6"
      }`}
    >
      <div className="max-w-7xl mx-auto">
        <div
          className={`relative flex items-center justify-between transition-all duration-500`}
        >
          {/* Espaciador en móvil para mantener el balance visual */}
          <div className="md:hidden w-10"></div>
          
          {/* Logo */}
          <div className="absolute left-1/2 -translate-x-1/2 md:static md:translate-x-0 flex items-center gap-3">
            <a
              href="#"
              className="flex items-center gap-2 group transition-all duration-300"
              onClick={(e) => {
                e.preventDefault();
                //  Desplazamiento suave al inicio
                window.scrollTo({ top: 0, behavior: "smooth" });
              }}
            >
              {/* Contenedor de la imagen sin restricción de altura para permitir que crezca */}
              <div
                className={`transition-all duration-500 flex items-center justify-center ${
                  isScrolled
                    ? "w-36 sm:w-44 md:w-52"
                    : "w-48 sm:w-60 md:w-72 lg:w-80"
                }`}
              >
                <img
                  src={logoTess}
                  alt="Logo TESS"
                  className="w-full h-auto object-contain"
                />
              </div>
            </a>
          </div>

          {/* Botón Menú Móvil (Hamburguesa) */}
          <div className="md:hidden flex items-center ml-auto">
            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="text-white hover:text-[#0cc0df] transition-colors p-2"
              aria-label={
                isMobileMenuOpen
                  ? "Cerrar menú principal"
                  : "Abrir menú principal"
              }
              aria-expanded={isMobileMenuOpen}
            >
              <span className="material-symbols-outlined text-3xl">
                {isMobileMenuOpen ? "close" : "menu"}
              </span>
            </button>
          </div>

          {/* Menú Escritorio */}
          <div className="hidden md:block">
            <div className="ml-10 flex items-center space-x-8">
              <a
                className="text-white/80 hover:text-white px-2 py-1 text-sm font-semibold transition-colors"
                href="#quienes-somos"
              >
                Quienes somos
              </a>
              <a
                className="text-white/80 hover:text-white px-2 py-1 text-sm font-semibold transition-colors"
                href="#nuestro-trabajo"
              >
                Nuestro Trabajo
              </a>
              <a
                className="text-white/80 hover:text-white px-2 py-1 text-sm font-semibold transition-colors"
                href="#servicios"
              >
                Servicios
              </a>
              <a
                className="text-white/80 hover:text-white px-2 py-1 text-sm font-semibold transition-colors"
                href="#clientes"
              >
                Clientes
              </a>
              <button
                onClick={onContactClick}
                className="px-7 py-2.5 rounded-full text-sm font-bold shadow-lg shadow-cyan-500/25 transition-transform hover:scale-105 bg-gradient-to-r from-emerald-400 to-cyan-500 hover:from-emerald-500 hover:to-cyan-600 text-white"
              >
                Contáctanos
              </button>
            </div>
          </div>
        </div>
      </div>
      {/* Menú Móvil */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <>
            {/* Overlay */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setIsMobileMenuOpen(false)}
              className="md:hidden fixed inset-0 bg-black/40 backdrop-blur-sm z-40"
            />
            {/* Sidebar */}
            <motion.div
              initial={{ x: "100%" }}
              animate={{ x: 0 }}
              exit={{ x: "100%" }}
              transition={{ type: "spring", damping: 25, stiffness: 200 }}
              className="md:hidden fixed top-0 right-0 h-screen w-[80vw] max-w-sm bg-brand-dark/70 backdrop-blur-3xl border-l border-white/20 shadow-[0_0_40px_rgba(0,0,0,0.5)] rounded-l-[2rem] z-50 flex flex-col"
              role="dialog"
              aria-modal="true"
              aria-label="Menú principal móvil"
            >
              <div className="flex justify-end p-6">
                <button
                  onClick={() => setIsMobileMenuOpen(false)}
                  className="text-white hover:text-[#0cc0df] transition-colors p-2 flex items-center justify-center rounded-xl border border-white/10 bg-white/5 hover:bg-white/10"
                  aria-label="Cerrar menú principal"
                >
                  <span className="material-symbols-outlined text-2xl">
                    close
                  </span>
                </button>
              </div>

              <div className="flex flex-col px-8 py-4 space-y-8 text-left mt-4 h-full overflow-y-auto">
                <a
                  className="text-white/90 hover:text-white text-xl font-medium transition-colors border-b border-white/10 pb-4"
                  href="#quienes-somos"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  Quienes somos
                </a>
                <a
                  className="text-white/90 hover:text-white text-xl font-medium transition-colors border-b border-white/10 pb-4"
                  href="#nuestro-trabajo"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  Nuestro Trabajo
                </a>
                <a
                  className="text-white/90 hover:text-white text-xl font-medium transition-colors border-b border-white/10 pb-4"
                  href="#servicios"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  Servicios
                </a>
                <a
                  className="text-white/90 hover:text-white text-xl font-medium transition-colors border-b border-white/10 pb-4"
                  href="#clientes"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  Clientes
                </a>
                <div className="pt-4">
                  <button
                    onClick={() => {
                      setIsMobileMenuOpen(false);
                      onContactClick();
                    }}
                    className="px-7 py-3 rounded-full text-lg font-bold shadow-lg shadow-cyan-500/25 transition-transform w-full bg-gradient-to-r from-emerald-400 to-cyan-500 hover:from-emerald-500 hover:to-cyan-600 text-white"
                  >
                    Contáctanos
                  </button>
                </div>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </nav>
  );
};

export default Navbar;
