tvone/app/components/video-galary.tsx

"use client"; // Necessário para animações no Next.js App Router

import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";

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-20 ">
      <section>
      {/* Cabeçalho Minimalista com Link Azul */}
      <div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
        <h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
          Vídeos Recentes
        </h2>
        
        <Link 
          href="/negocios" 
          className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499]"
        >
          Ver tudo
          <svg 
            className="h-4 w-4 transition-transform group-hover:translate-x-0.5" 
            fill="none" 
            viewBox="0 0 24 24" 
            stroke="currentColor"
            strokeWidth={2.5}
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </Link>
      </div>
        <div className="mx-auto flex w-full max-w-[1200px] flex-col gap-10">
    

            {/* 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-2xl 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-2xl 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-2xl 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>
  );
}

const entrevistas = [
  {
    guest: "CEO da Unitel",
    title: "O futuro do 5G em Angola e a expansão da conectividade rural",
    img: "https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=800&auto=format&fit=crop",
  },
  {
    guest: "Sandra Rodrigues",
    title: "Como a inteligência artificial está a mudar o jornalismo digital",
    img: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=800&auto=format&fit=crop",
  },
  {
    guest: "Fundador da Startup X",
    title: "O desafio de escalar uma fintech no mercado africano atual",
    img: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=800&auto=format&fit=crop",
  },
];


const negocios = [
  {
    category: "Investimento",
    title: "Banca nacional regista crescimento de 15% no crédito à produção",
    description: "Novas medidas de estímulo económico impulsionam o setor agrícola e industrial neste trimestre.",
    readTime: "5",
    publishDate: "08 ABR 2026",
    img: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=800&auto=format&fit=crop",
  },
  {
    category: "Tecnologia",
    title: "Hub tecnológico em Luanda atrai investidores estrangeiros",
    description: "Empresas de capital de risco olham para o ecossistema de startups angolano com novo otimismo.",
    readTime: "4",
    publishDate: "08 ABR 2026",
    img: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?q=80&w=800&auto=format&fit=crop",
  },
  {
    category: "Mercados",
    title: "Preço das commodities: O impacto direto na inflação local",
    description: "Análise profunda sobre como a volatilidade externa está a moldar os preços no consumidor final.",
    readTime: "7",
    publishDate: "08 ABR 2026",
    img: "https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?q=80&w=800&auto=format&fit=crop",
  },
];
const editorChoice = [
  {
    category: "Exclusivo",
    title: "O renascimento da arquitetura moderna em Luanda: Equilíbrio entre história e inovação",
    description: "Um olhar detalhado sobre como os novos projetos urbanos estão a redefinir a linha do horizonte da capital.",
    readTime: "8",
    publishDate: "09 ABR 2026", // Data fixa para artigos de fundo
    img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=800&auto=format&fit=crop",
  },
  {
    category: "Cultura",
    title: "Documentário premiado explora as raízes rítmicas do interior de Angola",
    description: "A jornada cinematográfica que capturou sons ancestrais antes que desaparecessem no tempo.",
    readTime: "6",
    publishDate: "Há 3 horas", // Tempo relativo para notícias quentes
    img: "https://images.unsplash.com/photo-1516280440614-37939bbacd81?q=80&w=800&auto=format&fit=crop",
  },
  {
    category: "Estilo de Vida",
    title: "Gastronomia sustentável: O novo movimento que está a conquistar os chefs locais",
    description: "Como a utilização de produtos sazonais e produtores regionais está a mudar o menu dos melhores restaurantes.",
    readTime: "5",
    publishDate: "08 ABR 2026",
    img: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=800&auto=format&fit=crop",
  },
  {
    category: "Exclusivo",
    title: "O renascimento da arquitetura moderna em Luanda: Equilíbrio entre história e inovação",
    description: "Um olhar detalhado sobre como os novos projetos urbanos estão a redefinir a linha do horizonte da capital.",
    readTime: "8",
    publishDate: "09 ABR 2026", // Data fixa para artigos de fundo
    img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=800&auto=format&fit=crop",
  },
  {
    category: "Cultura",
    title: "Documentário premiado explora as raízes rítmicas do interior de Angola",
    description: "A jornada cinematográfica que capturou sons ancestrais antes que desaparecessem no tempo.",
    readTime: "6",
    publishDate: "Há 3 horas", // Tempo relativo para notícias quentes
    img: "https://images.unsplash.com/photo-1516280440614-37939bbacd81?q=80&w=800&auto=format&fit=crop",
  },
  {
    category: "Estilo de Vida",
    title: "Gastronomia sustentável: O novo movimento que está a conquistar os chefs locais",
    description: "Como a utilização de produtos sazonais e produtores regionais está a mudar o menu dos melhores restaurantes.",
    readTime: "5",
    publishDate: "08 ABR 2026",
    img: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=800&auto=format&fit=crop",
  },
];
export function TvoneEntrevistas() {
  return (
    <section className="mx-auto w-full max-w-[1200px] px-4 pb-20">
      {/* Cabeçalho com Título, Descrição e Link Azul */}
      <div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
        <div className="max-w-[600px]">
          <h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
            Entrevistas
          </h2>
          <p className="mt-2 text-sm md:text-base text-neutral-500 leading-relaxed">
            Conversas exclusivas com as personalidades que movem o mercado, a tecnologia e a cultura em Angola.
          </p>
        </div>
        
        <Link 
          href="/entrevistas" 
          className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499] whitespace-nowrap mb-1"
        >
          Ver tudo
          <svg 
            className="h-4 w-4 transition-transform group-hover:translate-x-0.5" 
            fill="none" 
            viewBox="0 0 24 24" 
            stroke="currentColor"
            strokeWidth={2.5}
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </Link>
      </div>

      {/* Grid de Cards */}
      <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
        {entrevistas.map((item, index) => (
          <article key={index} className="group cursor-pointer">
            <Link href="#" className="block">
              <div className="relative aspect-[4/5] overflow-hidden rounded-2xl bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-2xl group-hover:shadow-neutral-300">
                <Image
                  src={item.img}
                  alt={item.title}
                  fill
                  className="object-cover transition duration-700 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/20 to-transparent opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
                
                <div className="absolute bottom-0 p-8">
                  <span className="text-[10px] font-bold uppercase tracking-[0.15em] text-blue-400">
                    {item.guest}
                  </span>
                  <h3 className="mt-3 text-xl font-bold leading-tight text-white md:text-2xl">
                    "{item.title}"
                  </h3>
                </div>
              </div>
            </Link>
          </article>
        ))}
      </div>
    </section>
  );
}

export function TvoneNegocios() {
  return (
    <section className="mx-auto w-full max-w-[1200px] px-4 pb-20">
      {/* Cabeçalho Minimalista com Link Azul */}
      <div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
        <h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
          Negócios
        </h2>
        
        <Link 
          href="/negocios" 
          className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499]"
        >
          Ver tudo
          <svg 
            className="h-4 w-4 transition-transform group-hover:translate-x-0.5" 
            fill="none" 
            viewBox="0 0 24 24" 
            stroke="currentColor"
            strokeWidth={2.5}
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </Link>
      </div>

      <div className="grid gap-10 lg:grid-cols-3">
        {negocios.map((item, index) => (
          <article key={index} className="group flex flex-col gap-5">
            <div className="relative aspect-video overflow-hidden rounded-2xl bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-md">
              <Image
                src={item.img}
                alt=""
                fill
                className="object-cover transition-transform duration-700 group-hover:scale-105"
              />
            </div>
            
            <div className="px-1">
              <div className="flex items-center gap-3">
                <span className="text-[10px] font-bold uppercase tracking-wider text-blue-600">
                  {item.category}
                </span>
                <span className="h-1 w-1 rounded-2xl bg-neutral-300" />
                {/* Data de Publicação em destaque suave */}
                <span className="text-[10px] font-semibold text-neutral-500 uppercase tracking-tight">
                  {item.publishDate}
                </span>
              </div>
              
              <h3 className="mt-3 text-xl font-bold leading-snug text-neutral-900 transition-colors group-hover:text-[#0066CC]">
                {item.title}
              </h3>
              
              <p className="mt-3 line-clamp-2 text-sm leading-relaxed text-neutral-500">
                {item.description}
              </p>
              
              <div className="mt-5 flex items-center gap-2 border-t border-neutral-50 pt-4">
                <svg className="h-3.5 w-3.5 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span className="text-[10px] font-bold uppercase text-neutral-400">
                    {item.readTime} min de leitura
                </span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

export function TvoneEscolhaEditor() {
  return (
    <section className="mx-auto w-full max-w-[1200px] px-4 pb-20 overflow-hidden">
      {/* HEADER */}
      <div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
        <h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
          Escolha do Editor
        </h2>
        <Link href="/escolhas" className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC]">
          Ver tudo
          <svg className="h-4 w-4 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
            <path d="M9 5l7 7-7 7" />
          </svg>
        </Link>
      </div>

      {/* CONTAINER COM ANIMACÃO "WHILE IN VIEW" */}
      <motion.div 
        initial={{ x: 80, opacity: 0 }}
        whileInView={{ x: 0, opacity: 1 }} // Dispara quando entra na viewport
        viewport={{ once: true, margin: "-100px" }} // Executa uma vez, 100px antes de chegar no centro
        transition={{ 
          type: "spring", 
          stiffness: 200, // Aumentado de 50 para 200 (muito mais rápido)
          damping: 25,    // Mantém o controle para não balançar demais
          mass: 0.5       // Reduzimos a massa para o objeto parecer mais leve
        }}
        className="no-scrollbar flex flex-col gap-10 md:flex-row md:overflow-x-auto md:snap-x md:snap-mandatory md:gap-8 md:pb-6"
      >
        {editorChoice.slice(0, 6).map((item, index) => (
          <article 
            key={index} 
            className={`group flex flex-col gap-5 md:min-w-[31%] md:snap-start 
              ${index >= 3 ? 'hidden md:flex' : 'flex'}`}
          >
            <Link href="#" className="block">
              <div className="relative aspect-video overflow-hidden rounded-2xl bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-xl">
                <Image
                  src={item.img}
                  alt={item.title}
                  fill
                  className="object-cover transition-transform duration-700 group-hover:scale-105"
                />
              </div>
              
              <div className="mt-5 px-1">
                <div className="flex items-center gap-3">
                  <span className="text-[10px] font-bold uppercase tracking-wider text-blue-600">{item.category}</span>
                  <span className="h-1 w-1 rounded-2xl bg-neutral-300" />
                  <span className="text-[10px] font-semibold text-neutral-500 uppercase tracking-tight">{item.publishDate}</span>
                </div>
                
                <h3 className="mt-3 text-xl font-bold leading-snug text-neutral-900 group-hover:text-[#0066CC] transition-colors">
                  {item.title}
                </h3>
                
                <p className="mt-3 line-clamp-2 text-sm leading-relaxed text-neutral-500">{item.description}</p>

                <div className="mt-5 flex items-center gap-2 border-t border-neutral-50 pt-4">
                  <svg className="h-3.5 w-3.5 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <span className="text-[10px] font-bold uppercase text-neutral-400">
                      {item.readTime} min de leitura
                  </span>
                </div>
              
              </div>
            </Link>
          </article>
        ))}
      </motion.div>
    </section>
  );
}