import logoTess from "../assets/logotesspng.png";

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

  return (
    <footer className="bg-black border-t border-white/5 pt-16 pb-8">
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 mb-16">
          {/*  Identidad  */}
          <div className="space-y-6">
            <div className="flex items-center">
              <div className="w-48 sm:w-56">
                <img
                  src={logoTess}
                  alt="TESS Logo"
                  className="w-full h-auto object-contain object-left"
                />
              </div>
            </div>
            <p className="text-white text-sm leading-relaxed max-w-xs">
              Impulsando la transformación digital con soluciones tecnológicas a
              medida y estrategias de alto impacto.
            </p>
          </div>

          {/* Navegación con Iconos  */}
          <div className="flex flex-col gap-6">
            <h3 className="text-white font-bold text-lg uppercase tracking-widest text-sm">
              Navegación
            </h3>
            <ul className="space-y-4">
              {[
                { name: "Quienes somos", href: "#quienes-somos", icon: "info" },
                {
                  name: "Nuestro Trabajo",
                  href: "#nuestro-trabajo",
                  icon: "terminal",
                },
                { name: "Servicios", href: "#servicios", icon: "settings" },
                { name: "Clientes", href: "#clientes", icon: "group" },
              ].map((link) => (
                <li key={link.name}>
                  <a
                    href={link.href}
                    className="group flex items-center gap-3 text-white hover:text-accent transition-colors text-sm"
                  >
                    <span className="material-symbols-outlined text-lg group-hover:scale-110 transition-transform">
                      {link.icon}
                    </span>
                    {link.name}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/*  Contacto & Social  */}
          <div className="flex flex-col gap-6">
            <h3 className="text-white font-bold text-lg uppercase tracking-widest text-sm">
              Hablemos
            </h3>
            <div className="flex flex-col gap-4">
              <a
                href="mailto:contacto@tesscorp.com.mx"
                className="group flex items-center gap-2 text-white hover:text-[#0cc0df] transition-colors text-sm font-medium"
              >
                <span className="material-symbols-outlined text-lg">mail</span>
                contacto@tesscorp.com.mx
              </a>
              <a
                href="https://wa.me/522292565108"
                target="_blank"
                rel="noopener noreferrer"
                className="group flex items-center gap-2 text-white hover:text-[#25D366] transition-colors text-sm font-medium"
              >
                <i className="fa-brands fa-whatsapp text-lg"></i>
                229 256 5108
              </a>
              <div className="group flex items-start gap-2 text-white text-sm font-medium">
                <span className="material-symbols-outlined text-lg mt-0.5">location_on</span>
                <p className="leading-relaxed">
                  Calle Leona Vicario #1640 C.p. 91897<br />
                  Col. Formando Hogar. Veracruz, Ver
                </p>
              </div>
            </div>

            <div className="flex gap-6 pt-2">
              <a
                href="#"
                className="text-white/80 hover:text-white transition-all transform hover:-translate-y-1"
              >
                <i className="fa-brands fa-linkedin-in text-xl"></i>
              </a>
              <a
                href="#"
                className="text-white/80 hover:text-white transition-all transform hover:-translate-y-1"
              >
                <i className="fa-brands fa-instagram text-xl"></i>
              </a>
              <a
                href="#"
                className="text-white/80 hover:text-white transition-all transform hover:-translate-y-1"
              >
                <i className="fa-brands fa-x-twitter text-xl"></i>
              </a>
            </div>

            <div className="w-full mt-4 rounded-lg overflow-hidden border border-white/10">
              <iframe
                title="Ubicación de TESS"
                src="https://maps.google.com/maps?q=Calle%20Leona%20Vicario%201640%2C%20Formando%20Hogar%2C%2091897%20Veracruz%2C%20Ver&t=&z=15&ie=UTF8&iwloc=&output=embed"
                width="100%"
                height="200"
                style={{ border: 0 }}
                allowFullScreen=""
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              ></iframe>
            </div>
          </div>
        </div>

        {/* Copyright  */}
        <div className="border-t border-white/5 pt-8 text-center">
          <p className="text-white/70 text-xs tracking-widest uppercase">
            © {currentYear} Technology Enterprise Support System. Todos los
            derechos reservados.
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
