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>
//           {/* iOS STYLE "SEE MORE" BUTTON */}
//           <div className="mt-10 flex justify-center">
//           <Link 
//               href="/cultura" 
//               className="inline-flex items-center justify-center rounded-full bg-neutral-100 px-8 py-3 text-sm font-semibold text-neutral-900 transition-all hover:bg-neutral-200 active:scale-95"
//           >
//               Ver mais notícias de Cultura
//               <svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
//                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
//               </svg>
//           </Link>
//         </div>
//       </section>
//     );
// }



export function TvoneDestaquesCultura() {
  return (
    <section className="mx-auto w-full max-w-[1200px] px-4 pb-16">
      <div className="mb-8 flex items-end justify-between">
          <h2 className="text-3xl font-bold tracking-tight text-neutral-900">Cultura</h2>
          {/* Optional secondary link style for iOS */}
          <Link href="/cultura" className="hidden text-sm font-medium text-blue-600 hover:underline md:block">
              Explorar tudo
          </Link>
      </div>

      <div className="grid gap-6 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">
              <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl bg-neutral-100 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-105"
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                />
                
                <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/10 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/30 backdrop-blur-md border border-white/40">
                    <svg className="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.841z" />
                    </svg>
                  </div>
                </div>
              </div>

              <div className="py-4">
                <h3 className="line-clamp-2 text-base font-bold leading-snug text-neutral-900 transition-colors group-hover:text-blue-600">
                  {item.title}
                </h3>
                <p className="mt-1.5 text-xs font-medium text-neutral-500">{item.date}</p>
              </div>
            </Link>
          </article>
        ))}
      </div>

      {/* iOS STYLE "SEE MORE" BUTTON */}
      <div className="mt-10 flex justify-center">
          <Link 
              href="/cultura" 
              className="inline-flex items-center justify-center rounded-full bg-neutral-100 px-8 py-3 text-sm font-semibold text-neutral-900 transition-all hover:bg-neutral-200 active:scale-95"
          >
              Ver mais notícias de Cultura
              <svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
              </svg>
          </Link>
      </div>
    </section>
  );
}