import { Link } from "react-router-dom";
import { MessageCircle, Instagram, Facebook, Youtube } from "lucide-react";
import logo from "@/assets/logo_branca.png";
import { motion } from "framer-motion";

const Footer = () => {
  return (
    <footer className="gradient-dark border-t border-border/10">
      <div className="container mx-auto px-4 py-16">
        <div className="grid md:grid-cols-3 gap-12">
          {/* Brand */}
          <a href="/" className="">
            <motion.div
              whileHover={{ rotate: 15, scale: 1.1 }}
              transition={{ type: "spring", stiffness: 300 }}
              className="w-10 h-10 rounded-xl bg-primary/15 border border-primary/25 flex items-center justify-center group-hover:bg-primary/25 transition-colors"
            >
              {/* <Route className="w-5 h-5 text-primary" /> */}
              <img src={logo} alt="Logo do ITAROTA79" width={220} />
            </motion.div>
            <h3 className="font-display text-2xl font-bold text-primary mb-2">
              ITAROTA79
            </h3>
            <p className="font-display text-xs tracking-[0.2em] text-dark-surface-foreground/50 mb-4 uppercase">
              Viagens de Moto
            </p>
            <p className="text-sm text-dark-surface-foreground/40 leading-relaxed">
              Mais que um clube, uma irmandade na estrada. Aventura, liberdade e
              companheirismo sobre duas rodas.
            </p>
          </a>

          {/* Links */}
          <div>
            <h4 className="font-display text-lg font-semibold text-dark-surface-foreground mb-4">
              Links Rápidos
            </h4>
            <nav className="flex flex-col gap-2">
              {[
                { label: "Início", to: "/" },
                { label: "Sobre", to: "/sobre" },
                { label: "Galeria", to: "/galeria" },
                { label: "Eventos", to: "/eventos" },
                { label: "Contato", to: "/contato" },
              ].map((link) => (
                <Link
                  key={link.to}
                  to={link.to}
                  className="text-sm text-dark-surface-foreground/40 hover:text-primary transition-colors"
                >
                  {link.label}
                </Link>
              ))}
            </nav>
          </div>

          {/* Social & Contact */}
          <div>
            <h4 className="font-display text-lg font-semibold text-dark-surface-foreground mb-4">
              Redes Sociais
            </h4>
            <div className="flex gap-3 mb-6">
              {[Instagram, Facebook, Youtube].map((Icon, i) => (
                <a
                  key={i}
                  href="#"
                  className="w-10 h-10 rounded-full bg-secondary/50 border border-border/10 flex items-center justify-center text-dark-surface-foreground/50 hover:text-primary hover:border-primary/30 transition-all"
                >
                  <Icon className="w-5 h-5" />
                </a>
              ))}
            </div>
            <a
              href="https://docs.google.com/forms/d/e/1FAIpQLSeDhmum1QRAj56HDdkw2w1ZtA7ulZOoXht5fbfPTaSbWGsu9A/viewform"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 text-sm text-primary hover:underline"
            >
              <MessageCircle className="w-4 h-4" />
              Fale conosco no WhatsApp
            </a>
          </div>
        </div>

        <div className="border-t border-border/10 mt-12 pt-8 text-center">
          <p className="text-xs text-dark-surface-foreground/30">
            © {new Date().getFullYear()} ITAROTA79 – Viagens de Moto. Todos os
            direitos reservados.
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;