Changes

src/components/PracticalSection.tsx

@@ -0,0 +1,89 @@
+import { motion } from "framer-motion";
+import { EVENT_INFO, PRACTICAL_INFO } from "@/data/event-data";
+import { MapPin, Plane, Train } from "lucide-react";
+
+const PracticalSection = () => (
+  <section id="info" 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">
+          Información Práctica
+        </h2>
+      </motion.div>
+
+      <div className="grid md:grid-cols-2 gap-10 max-w-5xl mx-auto">
+        {/* Mapa */}
+        <motion.div
+          initial={{ opacity: 0, x: -30 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+        >
+          <div className="rounded-2xl overflow-hidden shadow-card mb-4 aspect-video">
+            <iframe
+              src={EVENT_INFO.mapEmbedUrl}
+              width="100%"
+              height="100%"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+              title="Ubicación del evento"
+            />
+          </div>
+          <div className="flex items-center gap-2 text-foreground">
+            <MapPin className="w-5 h-5 text-primary" />
+            <div>
+              <p className="font-semibold">{EVENT_INFO.venue}</p>
+              <p className="text-sm text-muted-foreground">{EVENT_INFO.venueAddress}</p>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Info */}
+        <motion.div
+          initial={{ opacity: 0, x: 30 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          className="space-y-8"
+        >
+          {/* Aeropuertos */}
+          <div>
+            <h3 className="font-display text-xl font-bold text-foreground mb-4 flex items-center gap-2">
+              <Plane className="w-5 h-5 text-primary" /> Aeropuertos Cercanos
+            </h3>
+            <div className="space-y-3">
+              {PRACTICAL_INFO.airports.map((a) => (
+                <div key={a.name} className="bg-card rounded-lg p-3">
+                  <p className="font-medium text-foreground text-sm">{a.name}</p>
+                  <p className="text-xs text-muted-foreground">{a.distance}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Cómo llegar */}
+          <div>
+            <h3 className="font-display text-xl font-bold text-foreground mb-4 flex items-center gap-2">
+              <Train className="w-5 h-5 text-primary" /> Cómo Llegar
+            </h3>
+            <div className="space-y-3">
+              {PRACTICAL_INFO.howToGet.map((h) => (
+                <div key={h.method} className="bg-card rounded-lg p-3">
+                  <p className="font-medium text-foreground text-sm">{h.method}</p>
+                  <p className="text-xs text-muted-foreground">{h.details}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  </section>
+);
+
+export default PracticalSection;