import { motion } from "framer-motion";
import { STAFF } from "@/data/event-data";
import { Instagram, User } from "lucide-react";

/** Colores de badge por rol */
const roleBadgeClass: Record<string, string> = {
  Instructor: "bg-primary text-primary-foreground",
  DJ: "bg-secondary text-secondary-foreground",
  Organizador: "bg-accent text-accent-foreground",
};

const StaffSection = () => (
  <section id="staff" className="section-padding bg-background">
    <div className="container mx-auto">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        className="text-center mb-12"
      >
        <h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
          Staff del Evento
        </h2>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          Conoce a los artistas e instructores que harán de este festival una experiencia inolvidable.
        </p>
      </motion.div>

      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {STAFF.map((member, i) => (
          <motion.div
            key={member.id}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: i * 0.1 }}
            className="bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"
          >
            {/* Foto */}
            <div className="aspect-square bg-muted flex items-center justify-center overflow-hidden">
              {member.image ? (
                <img
                  src={member.image}
                  alt={member.name}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
              ) : (
                <User className="w-16 h-16 text-muted-foreground/40" />
              )}
            </div>

            <div className="p-5">
              {/* Badge de rol */}
              <span
                className={`inline-block text-xs font-semibold px-3 py-1 rounded-full mb-3 ${
                  roleBadgeClass[member.role] || "bg-muted text-muted-foreground"
                }`}
              >
                {member.role}
              </span>

              <h3 className="font-display text-lg font-bold text-foreground mb-2">
                {member.name}
              </h3>
              <p className="text-sm text-muted-foreground mb-4">
                {member.description}
              </p>

              {/* Redes sociales */}
              {member.socials?.instagram && (
                <a
                  href={member.socials.instagram}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1.5 text-sm text-primary hover:text-primary/80 transition-colors"
                >
                  <Instagram className="w-4 h-4" />
                  Instagram
                </a>
              )}
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  </section>
);

export default StaffSection;