import { ABOUT_ORG, FOOTER } from "@/data/event-data";
import { Instagram, Facebook, Youtube, Mail } from "lucide-react";

const FooterSection = () => (
  <footer className="bg-foreground text-primary-foreground">
    <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-2xl font-bold mb-3">ZoukLambadaBCN</h3>
          <p className="text-primary-foreground/70 text-sm">
            Comunidad de baile en Barcelona.
          </p>
        </div>

        {/* Contacto */}
        <div>
          <h4 className="font-display text-lg font-semibold mb-3">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-lg font-semibold mb-3">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>
  </footer>
);

export default FooterSection;