"use client";
import { motion } from "framer-motion";
import { Badge } from "@/components/ui/Badge";
import { ParticipaForm } from "@/components/forms/ParticipaForm";
import { FiCheck } from "react-icons/fi";
import { useLanguage } from "@/context/LanguageContext";

export default function ParticipaPage() {
  const { t } = useLanguage();

  // Mapeo dinámico de los beneficios desde el diccionario
  const beneficios = [
    {
      titulo: t.participa.benefits.b1Title,
      desc: t.participa.benefits.b1Desc,
    },
    {
      titulo: t.participa.benefits.b2Title,
      desc: t.participa.benefits.b2Desc,
    },
    {
      titulo: t.participa.benefits.b3Title,
      desc: t.participa.benefits.b3Desc,
    },
  ];

  return (
    <section className="w-full flex-grow flex flex-col lg:flex-row min-h-[calc(100vh-80px)]">
      
      {/* Columna Informativa (Izquierda) */}
      <div className="w-full lg:w-5/12 bg-ice/20 border-r border-crisp p-8 md:p-16 lg:p-20 flex flex-col justify-center">
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6 }}
        >
          <Badge>{t.participa.badge}</Badge>

          <h1 className="text-[40px] md:text-[56px] font-extrabold text-navy leading-[1.05] tracking-tight mb-6">
            {/* Usamos el título del diccionario */}
            {t.participa.heroTitle.split(' ').slice(0, -2).join(' ')} <br />
            <span className="text-ocean">
              {t.participa.heroTitle.split(' ').slice(-2).join(' ')}
            </span>
          </h1>
          
          <p className="text-[16px] md:text-[18px] text-navy/70 leading-[1.6] font-medium mb-12 max-w-md">
            {t.participa.heroDesc}
          </p>

          <div className="space-y-8">
            {beneficios.map((item, idx) => (
              <motion.div 
                key={idx} 
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 + idx * 0.1 }}
                className="flex items-start gap-4"
              >
                <div className="w-8 h-8 rounded-full bg-white border border-crisp flex items-center justify-center shrink-0 mt-1">
                  <FiCheck className="text-ocean text-lg stroke-[3]" />
                </div>
                <div>
                  <h4 className="font-extrabold text-[16px] text-navy">{item.titulo}</h4>
                  <p className="text-[14px] text-navy/60 font-medium mt-1">{item.desc}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>

      {/* Columna Formulario (Derecha) */}
      <div className="w-full lg:w-7/12 bg-white p-8 md:p-16 lg:p-20 flex flex-col justify-center">
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.3 }}
          className="max-w-xl w-full mx-auto lg:mx-0"
        >
          <h3 className="text-[24px] font-extrabold text-navy mb-8">
            {t.participa.formTitle}
          </h3>
          
          <ParticipaForm />
          
        </motion.div>
      </div>
    </section>
  );
}