import { ABOUT_ORG, FOOTER } from "@/data/event-data";
import { Instagram, Facebook, Youtube, Mail } from "lucide-react";
import hacecalor from "@/assets/hacecalor.png";
import activat from "@/assets/activat.png";
import { motion } from "framer-motion";

const FooterSection = () => (
  <motion.footer 
    initial={{ opacity: 0, y: 30 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: false, amount: 0.15 }}
    transition={{ duration: 0.6 }}
    className="bg-foreground text-primary-foreground relative z-30 -mt-[40px] pt-[80px]"
    style={{ clipPath: "polygon(50% 0, 100% 40px, 100% 100%, 0 100%, 0 40px)" }}
  >
    <div className="container mx-auto px-4 py-12">
      <div className="grid md:grid-cols-3 gap-8 mb-8">
        {/* Brand */}
        <div>
          <h3 className="font-display text-3xl md:text-4xl lg:text-5xl pt-3 pb-6 break-words leading-[1.6] font-bold mb-2">ZoukLambadaBCN</h3>
          <p className="text-primary-foreground/70 text-sm">
            <img src={hacecalor} alt="Hacecalor" className="inline-block w-auto h-12 mr-1" />
            <img src={activat} alt="Activat" className="inline-block w-auto h-12 mr-1" />
          </p>
        </div>

        {/* Contacto */}
        <div>
          <h4 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-semibold mb-2">Contacto</h4>
          <a
            href={`mailto:${FOOTER.email}`}
            className="flex items-center gap-2 text-sm text-primary-foreground/70 hover:text-primary transition-colors"
          >
            <Mail className="w-4 h-4" />
            {FOOTER.email}
          </a>
        </div>

        {/* Redes */}
        <div>
          <h4 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-semibold mb-2">Síguenos</h4>
          <div className="flex gap-3">
            {ABOUT_ORG.socials.instagram && (
              <a href={ABOUT_ORG.socials.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram"
                className="bg-primary-foreground/10 p-2.5 rounded-full hover:bg-primary-foreground/20 transition-colors">
                <Instagram className="w-5 h-5" />
              </a>
            )}
            {ABOUT_ORG.socials.facebook && (
              <a href={ABOUT_ORG.socials.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook"
                className="bg-primary-foreground/10 p-2.5 rounded-full hover:bg-primary-foreground/20 transition-colors">
                <Facebook className="w-5 h-5" />
              </a>
            )}
            {ABOUT_ORG.socials.youtube && (
              <a href={ABOUT_ORG.socials.youtube} target="_blank" rel="noopener noreferrer" aria-label="YouTube"
                className="bg-primary-foreground/10 p-2.5 rounded-full hover:bg-primary-foreground/20 transition-colors">
                <Youtube className="w-5 h-5" />
              </a>
            )}
          </div>
        </div>
      </div>

      <div className="border-t border-primary-foreground/10 pt-6 text-center">
        <p className="text-sm text-primary-foreground/50">{FOOTER.copyright}</p>
      </div>
    </div>
  </motion.footer>
);

export default FooterSection;