tvone/app/components/video-galary.tsx

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

const recentes = [
    {
      title: "Diddy na XB Label? Gerilson Israel responde após anúncio de nova música em conjunto.",
      excerpt: "O artista angolano esclareceu os rumores sobre a sua possível entrada para a editora internacional...",
      cat: "Música",
      catBg: "bg-blue-50 text-blue-600",
      byline: "Por Redação",
      date: "04 Mar 2026",
      // Premium Studio Image
      img: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=800&auto=format&fit=crop",
    },
    {
      title: "Inflação desce pelo terceiro mês consecutivo em Angola, segundo dados preliminares.",
      excerpt: "Os preços dos bens de consumo registaram uma ligeira queda, trazendo alívio para as famílias...",
      cat: "Economia",
      catBg: "bg-green-50 text-green-600",
      byline: "Por Economia Viva",
      date: "03 Mar 2026",
      // Modern Finance/City Image
      img: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=800&auto=format&fit=crop",
    },
    {
      title: "Museu de Luanda inaugura exposição com obras inéditas de artistas locais.",
      excerpt: "A mostra reúne pinturas e esculturas que retratam a evolução urbana da capital angolana...",
      cat: "Cultura",
      catBg: "bg-purple-50 text-purple-600",
      byline: "Por Cultura Mais",
      date: "02 Mar 2026",
      // Elegant Art Gallery Image
      img: "https://images.unsplash.com/photo-1507676184212-d03ab07a01bf?q=80&w=800&auto=format&fit=crop",
    },
    {
        title: "Diddy na XB Label? Gerilson Israel responde após anúncio de nova música em conjunto.",
        excerpt: "O artista angolano esclareceu os rumores sobre a sua possível entrada para a editora internacional...",
        cat: "Música",
        catBg: "bg-blue-50 text-blue-600",
        byline: "Por Redação",
        date: "04 Mar 2026",
        // Premium Studio Image
        img: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=800&auto=format&fit=crop",
      },
      {
        title: "Inflação desce pelo terceiro mês consecutivo em Angola, segundo dados preliminares.",
        excerpt: "Os preços dos bens de consumo registaram uma ligeira queda, trazendo alívio para as famílias...",
        cat: "Economia",
        catBg: "bg-green-50 text-green-600",
        byline: "Por Economia Viva",
        date: "03 Mar 2026",
        // Modern Finance/City Image
        img: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=800&auto=format&fit=crop",
      },
      {
        title: "Inflação desce pelo terceiro mês consecutivo em Angola, segundo dados preliminares.",
        excerpt: "Os preços dos bens de consumo registaram uma ligeira queda, trazendo alívio para as famílias...",
        cat: "Economia",
        catBg: "bg-green-50 text-green-600",
        byline: "Por Economia Viva",
        date: "03 Mar 2026",
        // Modern Finance/City Image
        img: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=800&auto=format&fit=crop",
      },
  ];
  const aSeguir = [
    {
      title: "Mercado imobiliário: especialistas explicam tendências para 2026.",
      date: "Há 2 horas",
      img: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=200&q=80",
    },
    {
      title: "Cinema: estreias nacionais batem recordes de bilheteira no fim de semana.",
      date: "Há 5 horas",
      img: "https://images.unsplash.com/photo-1485846234645-a62644f84728?w=200&q=80",
    },
  ];

export function TvoneMainColumns1() {
  return (
    <div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-12 ">
    <section>
        <h2 className="mb-7 text-2xl font-bold tracking-tight text-neutral-900 md:text-2xl">Vídeos Mais Recentes</h2>
        <div className="mx-auto flex w-full max-w-[1200px] flex-col gap-10 px-4">
    

            {/* SECTION: PREMIUM VIDEO GALLERY (Euronews + iOS Style) */}
            <section className="grid w-full gap-6 lg:grid-cols-[1fr_340px]">
            {/* Main Player Area */}
            <div className="group relative aspect-video overflow-hidden rounded-[24px] bg-black shadow-2xl">
                <Image 
                src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?q=80&w=1200&auto=format&fit=crop" 
                alt="Main Video" 
                fill 
                className="object-cover opacity-90 transition-transform duration-700 group-hover:scale-105"
                />
                {/* iOS Play Button Overlay */}
                <div className="absolute inset-0 flex items-center justify-center">
                <div className="flex h-20 w-20 items-center justify-center rounded-full border border-white/30 bg-white/20 backdrop-blur-md transition-transform group-hover:scale-110">
                    <div className="ml-1 h-0 w-0 border-y-[12px] border-l-[20px] border-y-transparent border-l-white" />
                </div>
                </div>
                {/* Video Info Overlay */}
                <div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/80 p-8">
                <span className="rounded bg-blue-600 px-2 py-1 text-[10px] font-bold uppercase text-white">Música</span>
                <h2 className="mt-3 text-2xl font-bold text-white md:text-3xl">
                    Diddy na XB Label? Gerilson Israel responde após anúncio...
                </h2>
                </div>
            </div>

            {/* Right Playlist: "Vídeos a Seguir" */}
            <aside className="flex flex-col rounded-[24px] border border-neutral-200 bg-[#f5f5f7]/50 p-4 backdrop-blur-sm">
                <h3 className="mb-4 px-2 text-xs font-bold uppercase tracking-widest text-neutral-500">Vídeos a Seguir</h3>
                <div className="flex flex-col gap-3 overflow-y-auto lg:max-h-[380px]">
                {recentes.slice(0, 6).map((item) => (
                    <button key={item.title} className="group flex gap-3 rounded-xl p-2 transition hover:bg-white hover:shadow-sm">
                    <div className="relative aspect-video w-24 shrink-0 overflow-hidden rounded-lg bg-neutral-200">
                        <Image src={item.img} alt="" fill className="object-cover" />
                        <div className="absolute bottom-1 right-1 rounded bg-black/60 px-1 text-[9px] text-white">3:15</div>
                    </div>
                    <div className="text-left">
                        <span className="text-[9px] font-bold uppercase text-blue-600">{item.cat}</span>
                        <h4 className="line-clamp-2 text-xs font-bold leading-tight text-neutral-900 group-hover:text-blue-600">
                        {item.title}
                        </h4>
                    </div>
                    </button>
                ))}
                </div>
            </aside>
            </section>


        </div>
      </section>
    </div>

  );
}

function AppleIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
      <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
    </svg>
  );
}