import { motion } from "framer-motion";
import { Mail, Phone, Instagram, Facebook } from "lucide-react";

export function Footer() {
  return (
    <footer id="contacto" className="bg-primary py-16 text-background">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mb-12 grid gap-12 md:grid-cols-3">
          {/* About */}
          <div className="space-y-4">
            <h4 className="mb-4 font-serif text-2xl font-bold">Gloria Niño</h4>
            <p className="leading-relaxed text-background/80">
              Terapeuta emocional especializada en acompañamiento de procesos de duelo, ansiedad y
              crecimiento personal.
            </p>
            <div className="flex space-x-4 pt-4">
              <motion.a
                href="#"
                className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-accent"
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
              >
                <Instagram className="h-5 w-5" />
              </motion.a>
              <motion.a
                href="#"
                className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-accent"
                whileHover={{ scale: 1.1 }}
                whileTap={{ scale: 0.9 }}
              >
                <Facebook className="h-5 w-5" />
              </motion.a>
            </div>
          </div>

          {/* Links */}
          <div className="space-y-4">
            <h4 className="mb-4 text-lg font-semibold">Enlaces</h4>
            <ul className="space-y-2">
              <li>
                <a
                  href="#inicio"
                  className="text-background/80 transition-colors hover:text-accent"
                >
                  Inicio
                </a>
              </li>
              <li>
                <a
                  href="/servicios"
                  className="text-background/80 transition-colors hover:text-accent"
                >
                  Servicios
                </a>
              </li>
              <li>
                <a
                  href="/cursos"
                  className="text-background/80 transition-colors hover:text-accent"
                >
                  Cursos
                </a>
              </li>
              <li>
                <a
                  href="#sobre-mi"
                  className="text-background/80 transition-colors hover:text-accent"
                >
                  Sobre Mí
                </a>
              </li>
              <li>
                <a
                  href="#testimonios"
                  className="text-background/80 transition-colors hover:text-accent"
                >
                  Testimonios
                </a>
              </li>
              <li>
                <a
                  href="/privacidad"
                  className="text-background/80 transition-colors hover:text-accent"
                >
                  Política de Privacidad
                </a>
              </li>
            </ul>
          </div>

          {/* Contact */}
          <div className="space-y-4">
            <h4 className="mb-4 text-lg font-semibold">Contacto</h4>
            <ul className="space-y-3">
              <li className="flex items-start space-x-3">
                <Mail className="mt-0.5 h-5 w-5 flex-shrink-0 text-accent" />
                <a
                  href="mailto:contacto@glorianino.com"
                  className="text-background/80 transition-colors hover:text-accent"
                >
                  contacto@glorianino.com
                </a>
              </li>
              <li className="flex items-start space-x-3">
                <Phone className="mt-0.5 h-5 w-5 flex-shrink-0 text-accent" />
                <a
                  href="tel:+525512345678"
                  className="text-background/80 transition-colors hover:text-accent"
                >
                  +52 55 1234 5678
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom */}
        <div className="flex flex-col items-center justify-between space-y-4 border-t border-white/10 pt-8 sm:flex-row sm:space-y-0">
          <p className="text-sm text-background/60">
            &copy; 2026 Gloria App. Todos los derechos reservados.
          </p>
          <div className="flex space-x-6 text-sm">
            <a
              href="/privacidad"
              className="text-background/60 transition-colors hover:text-accent"
            >
              Política de Privacidad
            </a>
            <a href="#" className="text-background/60 transition-colors hover:text-accent">
              Términos de Servicio
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}
