import Image from "next/image";
import Link from "next/link";

const destaques = [
    {
      cat: "FAMOSOS",
      catColor: "text-pink-600",
      title: "Cerimónia reúne estrelas nacionais e internacionais em Lisboa.",
      date: "24 Mar 2025",
      // High-quality video-style thumbnail
      img: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&q=80",
    },
    {
      cat: "NEGÓCIOS",
      catColor: "text-[#0066cc]",
      title: "Mercados reagem às novas projeções de crescimento para a região.",
      date: "24 Mar 2025",
      img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80",
    },
    {
      cat: "DESPORTO",
      catColor: "text-emerald-600",
      title: "Taça: equipa da casa garante lugar nas meias com exibição sólida.",
      date: "23 Mar 2025",
      img: "https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=800&q=80",
    },
    {
        cat: "NEGÓCIOS",
        catColor: "text-[#0066cc]",
        title: "Mercados reagem às novas projeções de crescimento para a região.",
        date: "24 Mar 2025",
        img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80",
    },
];

export function TvoneDestaquesCultura() {
    return (
      <section className="mx-auto w-full max-w-[1200px] px-4 pb-10">
        <h2 className="mb-6 text-2xl font-bold tracking-tight text-neutral-900">Cultura</h2>
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {destaques.map((item, index) => (
            <article
              key={index}
              className="group cursor-pointer bg-white transition"
            >
              <Link href="#" className="block">
                {/* VIDEO CONTAINER */}
                <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl bg-neutral-900 shadow-sm transition-all duration-300 group-hover:shadow-xl group-hover:shadow-neutral-200">
                  <Image
                    src={item.img}
                    alt=""
                    fill
                    className="object-cover transition duration-500 group-hover:scale-110 group-hover:opacity-70"
                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                  />
                  
                  {/* OVERLAY: REPLAY STYLE (iOS/EURO) */}
                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 backdrop-blur-md border border-white/30">
                      <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                      </svg>
                    </div>
                    <span className="mt-2 text-[10px] font-bold uppercase tracking-widest text-white">Replay</span>
                  </div>

                  {/* BOTTOM REPLICA TAG (Optional, Euro Style) */}
                  <div className="absolute bottom-2 left-2 rounded bg-black/60 px-1.5 py-0.5 text-[9px] font-bold text-white uppercase tracking-tighter">
                    Replica
                  </div>
                </div>

                {/* TEXT CONTENT */}
                <div className="py-4">
                  <p className={`mb-1.5 text-[10px] font-bold uppercase tracking-wider ${item.catColor}`}>
                    {item.cat}
                  </p>
                  <h3 className="line-clamp-2 text-[15px] font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc] md:text-[16px]">
                    {item.title}
                  </h3>
                  <p className="mt-2 text-[11px] font-medium text-neutral-400">{item.date}</p>
                </div>
              </Link>
            </article>
          ))}
        </div>
      </section>
    );
}