import { ABOUT_ORG } 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";
import { useTranslation } from "react-i18next";

const FooterSection = () => {
  const { t } = useTranslation();
  const year = new Date().getFullYear();
  const email = t("footer.email");
  const copyright = t("footer.copyright", { year });

  return (
    <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">
              {t("footer.contact")}
            </h4>
            <a
              href={`mailto:${email}`}
              className="flex items-center gap-2 text-sm text-primary-foreground/70 hover:text-primary transition-colors"
            >
              <Mail className="w-4 h-4" />
              {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">
              {t("footer.followUs")}
            </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">{copyright}</p>
        </div>
      </div>
    </motion.footer>
  );
};

export default FooterSection;
