Added multi-lingua, english-spanish. Timer conditions and Linting bugfixes.

src/components/HotelSection.tsx

@@ -2,64 +2,79 @@ 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 = () => (
-  <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">
-          Alojamiento
-        </h2>
-        <p className="text-muted-foreground max-w-2xl mx-auto">
-          Habitaciones recomendadas cerca del venue.
-        </p>
-      </motion.div>
+const HotelSection = () => {
+  const { t } = useTranslation();
+  const roomTypeKeyById: Record<string, "individual" | "double" | "suite"> = {
+    "1": "individual",
+    "2": "double",
+    "3": "suite",
+  };
 
-      <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: 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={room.name} className="w-full h-full object-cover" />
-              ) : (
-                <BedDouble className="w-12 h-12 text-muted-foreground/40" />
-              )}
-            </div>
+  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="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">
-                {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 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>
-    </div>
-  </section>
-);
+    </section>
+  );
+};
 
 export default HotelSection;