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 relative z-10 -mt-[40px] pt-[100px]"
    style={{ borderRadius: "100% 0 0 0 / 100px 0 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 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: false, amount: 0.15 }}
        >
          <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: false, amount: 0.15 }}
          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;