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",
      img: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800&q=80",
    },
    {
      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",
      img: "https://images.unsplash.com/photo-1611974715853-2b8ef9a3d136?w=800&q=80",
    },
    {
      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",
      img: "https://images.unsplash.com/photo-1518998053502-53cc8ef19a7d?w=800&q=80",
    },
  ];
  
  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 flex w-full max-w-[1200px] flex-col gap-10 px-4 pb-12">
      
      {/* 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="/path-to-your-main-video-thumb.jpg" 
            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, 4).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>
  );
}

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>
  );
}