import { motion } from "framer-motion";
import aboutImg from "@/assets/about-event.jpg";
import { Music, Users, Sparkles, PartyPopper } from "lucide-react";
import { useTranslation } from "react-i18next";

const iconMap = [Music, Users, Sparkles, PartyPopper];

const AboutSection = () => {
  const { t } = useTranslation();
  const highlightKeys = ["workshops", "socialDancing", "liveShows", "djSets"] as const;

  return (
    <section id="about" className="section-padding bg-background relative z-10 -mt-[50px] pt-[100px]">
      <div className="container mx-auto">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          {/* Imagen */}
          <motion.div
            initial={{ opacity: 0, x: -40 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: false, amount: 0.15 }}
            transition={{ duration: 0.6 }}
          >
            <img
              src={aboutImg}
              alt={t("about.title")}
              className="rounded-2xl shadow-elevated w-full object-cover aspect-square"
            />
          </motion.div>

          {/* Texto */}
          <motion.div
            initial={{ opacity: 0, x: 40 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: false, amount: 0.15 }}
            transition={{ duration: 0.6 }}
          >
            <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal mb-6 text-gradient">
              {t("about.title")}
            </h2>
            <p className="text-muted-foreground mb-6 leading-relaxed whitespace-pre-line">
              {t("about.description")}
            </p>
            <p className="text-foreground/90 mb-8 leading-relaxed italic border-l-4 border-primary pl-4">
              {t("about.lambadaInfo")}
            </p>

            {/* Highlights */}
            <div className="grid grid-cols-2 gap-4">
              {highlightKeys.map((key, i) => {
                const Icon = iconMap[i % iconMap.length];
                return (
                  <div key={key} className="flex items-center gap-3 bg-card rounded-lg p-3">
                    <div className="bg-gradient-tropical rounded-full p-2 shrink-0">
                      <Icon className="w-4 h-4 text-primary-foreground" />
                    </div>
                    <span className="text-sm font-medium text-foreground">{t(`about.highlights.${key}`)}</span>
                  </div>
                );
              })}
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default AboutSection;
