import { motion } from "framer-motion";
import { HOTEL_ROOMS } from "@/data/event-data";
import { Button } from "@/components/ui/button";
import { BedDouble, ExternalLink } from "lucide-react";

const HotelSection = () => (
  <section id="hotel" className="section-padding bg-card">
    <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">
          Alojamiento
        </h2>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          Habitaciones recomendadas cerca del venue.
        </p>
      </motion.div>

      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
        {HOTEL_ROOMS.map((room, i) => (
          <motion.div
            key={room.id}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: i * 0.1 }}
            className="bg-background rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow"
          >
            {/* Imagen */}
            <div className="aspect-video bg-muted flex items-center justify-center overflow-hidden">
              {room.image ? (
                <img src={room.image} alt={room.name} className="w-full h-full object-cover" />
              ) : (
                <BedDouble className="w-12 h-12 text-muted-foreground/40" />
              )}
            </div>

            <div className="p-5">
              <h3 className="font-display text-lg font-bold text-foreground mb-1">
                {room.name}
              </h3>
              <p className="text-primary font-bold text-xl mb-2">{room.price}</p>
              <p className="text-sm text-muted-foreground mb-4">{room.description}</p>
              <Button variant="outline" className="w-full" asChild>
                <a href={room.link} target="_blank" rel="noopener noreferrer">
                  Reservar en el hotel <ExternalLink className="w-4 h-4 ml-1" />
                </a>
              </Button>
            </div>
          </motion.div>
        ))}
      </div>
    </div>
  </section>
);

export default HotelSection;
