import { motion } from "framer-motion";
import { User } from "lucide-react";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from "@/components/ui/carousel";
import { PROFESORES } from "@/data/event-data";

const ProfesoresSection = () => (
  <section id="profesores" 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">
          Profesores
        </h2>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          Los mejores profesores internacionales de Lambada te esperan en este festival.
        </p>
      </motion.div>

      <div className="max-w-4xl mx-auto px-12">
        <Carousel opts={{ loop: true, align: "start" }}>
          <CarouselContent>
            {PROFESORES.map((prof, i) => (
              <CarouselItem key={i} className="md:basis-1/2 lg:basis-1/3">
                <div className="bg-card rounded-2xl overflow-hidden shadow-card h-full">
                  <div className="aspect-[3/4] bg-muted flex items-center justify-center overflow-hidden">
                    {prof.image ? (
                      <img
                        src={prof.image}
                        alt={prof.name}
                        className="w-full h-full object-cover"
                        loading="lazy"
                      />
                    ) : (
                      <User className="w-16 h-16 text-muted-foreground/40" />
                    )}
                  </div>
                  <div className="p-4 text-center">
                    <h3 className="font-display text-lg font-bold text-foreground">
                      {prof.name}
                    </h3>
                    {prof.origin && (
                      <p className="text-sm text-muted-foreground">{prof.origin}</p>
                    )}
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious />
          <CarouselNext />
        </Carousel>
      </div>
    </div>
  </section>
);

export default ProfesoresSection;