import { motion } from "framer-motion";
import { EVENT_INFO, PRACTICAL_INFO } from "@/data/event-data";
import { MapPin, Plane, Train } from "lucide-react";
import { useTranslation } from "react-i18next";

const PracticalSection = () => {
  const { t } = useTranslation();

  return (
    <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 lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal text-gradient mb-4">
            {t("info.title")}
          </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={t("info.mapTitle")}
              />
            </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-2xl md:text-3xl lg:text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2 flex items-center gap-2">
                <Plane className="w-5 h-5 text-primary" /> {t("info.airports")}
              </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-2xl md:text-3xl lg:text-4xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-2 flex items-center gap-2">
                <Train className="w-5 h-5 text-primary" /> {t("info.howToGet")}
              </h3>
              <div className="space-y-3">
                {PRACTICAL_INFO.howToGet.map((h) => {
                  const methodLabel =
                    h.method === "Metro" ? t("info.metro") : h.method === "Bus" ? t("info.bus") : h.method === "Taxi/Uber" ? t("info.taxi") : h.method;

                  return (
                    <div key={h.method} className="bg-card rounded-lg p-3">
                      <p className="font-medium text-foreground text-sm">{methodLabel}</p>
                      <p className="text-xs text-muted-foreground">{h.details}</p>
                      {h.link && (
                        <a
                          href={h.link}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="inline-block mt-2 px-3 py-1 bg-primary text-primary-foreground text-xs rounded hover:bg-primary/90 transition-colors"
                        >
                          {t("info.viewOnMap")}
                        </a>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default PracticalSection;
