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

const HotelSection = () => {
  const { t } = useTranslation();
  const roomTypeKeyById: Record<string, "individual" | "double" | "suite"> = {
    "1": "individual",
    "2": "double",
    "3": "suite",
  };

  return (
    <section
      id="hotel"
      className="section-padding bg-card relative z-20 -mt-[40px] pt-[100px]"
      style={{ borderRadius: "50% 50% 0 0 / 60px 60px 0 0" }}
    >
      <div className="container mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: false, amount: 0.15 }}
          className="text-center mb-12"
        >
          <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-10 leading-[1.8] text-gradient">
            {t("hotel.title")}
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">{t("hotel.subtitle")}</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) => {
            const typeKey = roomTypeKeyById[room.id];
            const translatedName = typeKey ? t(`hotel.${typeKey}`) : room.name;
            const translatedPrice = room.price?.includes("[") ? t("hotel.pricePerNight") : room.price;
            const translatedDescription = room.description?.includes("[") ? t("hotel.description") : room.description;

            return (
              <motion.div
                key={room.id}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: false, amount: 0.15 }}
                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={translatedName} 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-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
                    {translatedName}
                  </h3>
                  <p className="text-primary font-bold text-xl mb-2">{translatedPrice}</p>
                  <p className="text-sm text-muted-foreground mb-4">{translatedDescription}</p>
                  <Button variant="outline" className="w-full" asChild>
                    <a href={room.link} target="_blank" rel="noopener noreferrer">
                      {t("hotel.bookButton")} <ExternalLink className="w-4 h-4 ml-1" />
                    </a>
                  </Button>
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default HotelSection;