"use client";
import { Badge } from "@/components/ui/Badge";
import { Card } from "@/components/ui/Card";
import { motion } from "framer-motion";
import Image from "next/image";
import { useLanguage } from "@/context/LanguageContext";

export default function InsightsPage() {
  const { t, locale } = useLanguage();

  // Mapeo de meses para las fechas de los artículos
  const months = {
    es: { mayo: "Mayo", abril: "Abril", marzo: "Marzo" },
    ca: { mayo: "Maig", abril: "Abril", marzo: "Març" },
    en: { mayo: "May", abril: "April", marzo: "March" }
  };

  const articulos = [
    {
      titulo: locale === 'en' ? "The new post-pandemic consumer in Spain" : 
              locale === 'ca' ? "El nou consumidor post-pandèmia a Espanya" : 
              "El nuevo consumidor post-pandemia en España",
      categoria: t.insights.categories.tendencias,
      imagen: "https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2070&auto=format&fit=crop",
      fecha: `${months[locale].mayo} 2026`,
      size: "large"
    },
    {
      titulo: locale === 'en' ? "Agile methodologies in fieldwork" : 
              locale === 'ca' ? "Metodologies àgils en el treball de camp" : 
              "Metodologías ágiles en el trabajo de campo",
      categoria: t.insights.categories.innovacion,
      imagen: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop",
      fecha: `${months[locale].abril} 2026`,
      size: "small"
    },
    {
      titulo: locale === 'en' ? "Mystery Shopping: Beyond compliance" : 
              locale === 'ca' ? "Mistery Shopping: Més enllà del compliment" : 
              "Mistery Shopping: Más allá del cumplimiento",
      categoria: t.insights.categories.estrategia,
      imagen: "https://images.unsplash.com/photo-1534452203293-494d7ddbf7e0?q=80&w=2072&auto=format&fit=crop",
      fecha: `${months[locale].marzo} 2026`,
      size: "small"
    }
  ];

  // Dividimos el título para aplicar el color al final
  const titleParts = t.insights.title.split('&');

  return (
    <section className="max-w-7xl mx-auto px-6 lg:px-12 py-20">
      <div className="mb-16">
        <Badge>{t.insights.badge}</Badge>
        <h1 className="text-[48px] md:text-[64px] font-extrabold text-navy leading-[1.05] tracking-tight mt-6">
          {titleParts[0]} & <br /> <span className="text-ocean">{titleParts[1]}</span>
        </h1>
        <p className="text-[18px] text-navy/70 font-medium mt-8 max-w-2xl">
          {t.insights.description}
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {articulos.map((item, idx) => (
          <motion.div
            key={idx}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: idx * 0.1 }}
            className={item.size === "large" ? "md:col-span-2" : "md:col-span-1"}
          >
            <Card variant="white" className="p-0 overflow-hidden h-full flex flex-col group cursor-pointer border-crisp hover:border-ocean transition-all">
              <div className="relative h-64 w-full overflow-hidden">
                <Image 
                  src={item.imagen} 
                  alt={item.titulo} 
                  fill 
                  className="object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute top-4 left-4">
                  <span className="bg-white/90 backdrop-blur text-ocean text-[10px] font-extrabold px-3 py-1 rounded-full uppercase tracking-widest">
                    {item.categoria}
                  </span>
                </div>
              </div>
              <div className="p-8">
                <span className="text-navy/40 text-[12px] font-bold">{item.fecha}</span>
                <h3 className="text-[22px] font-extrabold text-navy mt-2 leading-tight group-hover:text-ocean transition-colors">
                  {item.titulo}
                </h3>
                <div className="mt-6 flex items-center text-ocean font-bold text-[14px]">
                  {t.insights.readMore}
                  <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                </div>
              </div>
            </Card>
          </motion.div>
        ))}
      </div>
    </section>
  );
}