import React from 'react';
import { Link } from 'react-router-dom';
import { Mail, Phone, MapPin } from 'lucide-react';

const Footer = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-azulOscuro border-t border-azulMedio">
      <div className="container mx-auto px-4 py-10">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {/* Company Info */}
          <div className="space-y-2">
            <h3 className="text-2xl font-bold text-blanco">
              VALEA Inversiones
            </h3>
            <p className="text-azulClaro text-sm">
              Soluciones Integrales en Ingeniería Industrial y Mantenimiento
            </p>
          </div>

          {/* Quick Links */}
          <div className="space-y-4">
            <h4 className="text-lg font-semibold text-blanco border-b border-azulMedio pb-2 inline-block">Enlaces Rápidos</h4>
            <nav className="flex flex-col space-y-2">
              <Link to="/" className="text-blanco hover:text-naranjaAccento transition-colors text-sm">Inicio</Link>
              <Link to="/servicios" className="text-blanco hover:text-naranjaAccento transition-colors text-sm">Servicios</Link>
              <Link to="/acerca-de" className="text-blanco hover:text-naranjaAccento transition-colors text-sm">Acerca de</Link>
              <Link to="/proyectos" className="text-blanco hover:text-naranjaAccento transition-colors text-sm">Proyectos</Link>
              <Link to="/contacto" className="text-blanco hover:text-naranjaAccento transition-colors text-sm">Contacto</Link>
            </nav>
          </div>

          {/* Contact Info */}
          <div className="space-y-4">
            <h4 className="text-lg font-semibold text-blanco border-b border-azulMedio pb-2 inline-block">Contacto</h4>
            <div className="space-y-3">
              <div className="flex items-start space-x-3">
                <Mail className="w-5 h-5 text-azulClaro mt-0.5 flex-shrink-0" />
                <div className="text-blanco text-sm">
                  <a href="mailto:valeainversiones@gmail.com" className="hover:text-naranjaAccento">valeainversiones@gmail.com</a>
                </div>
              </div>
              <div className="flex items-start space-x-3">
                <Phone className="w-5 h-5 text-azulClaro mt-0.5 flex-shrink-0" />
                <div className="text-blanco text-sm">
                  <span>0414-7748343</span>
                </div>
              </div>
              <div className="flex items-start space-x-3">
                <MapPin className="w-5 h-5 text-azulClaro mt-0.5 flex-shrink-0" />
                <span className="text-blanco text-sm">
                  Barcelona, Estado Anzoátegui, Venezuela
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Copyright */}
        <div className="mt-12 pt-8 border-t border-azulMedio">
          <p className="text-center text-blanco text-sm">
            © {currentYear} VALEA Inversiones. Todos los derechos reservados.
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;