import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { Menu, X } from 'lucide-react';
import { Button } from '@/components/ui/button';

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);
  const location = useLocation();
  const navLinks = [{
    path: '/',
    label: 'Inicio'
  }, {
    path: '/servicios',
    label: 'Servicios'
  }, {
    path: '/acerca-de',
    label: 'Acerca de'
  }, {
    path: '/proyectos',
    label: 'Proyectos'
  }, {
    path: '/contacto',
    label: 'Contacto'
  }];
  
  const isActive = path => location.pathname === path;
  
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-azulOscuro/95 backdrop-blur-sm border-b border-azulMedio/30">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-20">
          {/* Logo */}
          <Link to="/" className="flex items-center space-x-3 group">
            <motion.div whileHover={{ scale: 1.05, rotate: 2 }} transition={{ type: "spring", stiffness: 300 }} className="relative flex items-center justify-center">
              <img src="https://horizons-cdn.hostinger.com/f282ce11-7db1-4077-b550-1caec7979db1/37ca80aa9cc5a842ca701b01a0ba6065.png" alt="VALEA Inversiones Logo" className="h-12 w-auto object-contain drop-shadow-md" />
            </motion.div>
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-1">
            {navLinks.map(link => (
              <Link key={link.path} to={link.path}>
                <Button variant="ghost" className={`relative px-4 py-2 transition-colors ${isActive(link.path) ? 'text-azulPrincipal' : 'text-blanco hover:text-azulPrincipal hover:bg-azulOscuro/50'}`}>
                  {link.label}
                  {isActive(link.path) && (
                    <motion.div layoutId="activeNav" className="absolute bottom-0 left-0 right-0 h-0.5 bg-naranjaAccento" transition={{ type: 'spring', stiffness: 380, damping: 30 }} />
                  )}
                </Button>
              </Link>
            ))}
            <Link to="/contacto">
              <Button variant="cta" className="ml-4 rounded-full">
                Solicitar Cotización
              </Button>
            </Link>
          </div>

          {/* Mobile Menu Button */}
          <button onClick={() => setIsOpen(!isOpen)} className="md:hidden p-2 text-blanco hover:text-azulPrincipal transition-colors">
            {isOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>

      {/* Mobile Navigation */}
      <AnimatePresence>
        {isOpen && (
          <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} className="md:hidden bg-azulOscuro border-t border-azulMedio/30">
            <div className="container mx-auto px-4 py-4 space-y-2">
              {navLinks.map(link => (
                <Link key={link.path} to={link.path} onClick={() => setIsOpen(false)}>
                  <motion.div whileHover={{ x: 4 }} className={`px-4 py-3 rounded-lg transition-colors ${isActive(link.path) ? 'bg-azulPrincipal/40 text-blanco' : 'text-blanco hover:bg-azulPrincipal/20 hover:text-blanco'}`}>
                    {link.label}
                  </motion.div>
                </Link>
              ))}
              <Link to="/contacto" onClick={() => setIsOpen(false)}>
                <motion.div className="px-4 py-3 mt-4 rounded-lg bg-naranjaAccento text-blanco text-center font-medium">
                  Solicitar Cotización
                </motion.div>
              </Link>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
};
export default Navigation;