"use client";
import React, { useState } from 'react';
import Image from 'next/image';
import { ThumbsUp, MessageCircle, Send, Share2, LinkIcon, Link2, ChevronRight } from 'lucide-react';
import { TvoneAdBanner, TvoneFooter } from '../components/tvone-content';
import { TvonePromoStrip } from '../components/tvone-promo-strip';
import { TvoneSiteNav } from '../components/tvone-site-nav';
import { SiWhatsapp, SiFacebook, SiX } from 'react-icons/si'; // Ícones oficiais de marca
import { FiCopy } from 'react-icons/fi'; // Ícone de cópia mais limpo
import Link from 'next/link';
import { Users } from 'lucide-react';
import { v4 as uuidv4 } from 'uuid';

export default function NewsArticlePage() {
  // Estado para controlar o play do vídeo customizado
  const [isPlaying, setIsPlaying] = useState(false);
  const recentes = [
    {
      cat: "EM FOCO",
      readTime: "6",
      catBg: "bg-pink-100 text-pink-700",
      title: "Governo anuncia medidas para apoiar famílias e pequenas empresas.",
      excerpt: "Pacote inclui linhas de crédito e simplificação de procedimentos.",
      byline: "Por Redação",
      date: "24 Mar 2025",
      img: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=200&q=80",
    },
    {
      cat: "ECONOMIA",
      readTime: "6",
      catBg: "bg-amber-100 text-amber-800",
      title: "Inflação desce pelo terceiro mês consecutivo, segundo dados preliminares.",
      excerpt: "Analistas mantêm cautela face ao cenário internacional.",
      byline: "Por Economia",
      date: "24 Mar 2025",
      img: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=200&q=80",
    },
    {
      cat: "CULTURA",
      readTime: "6",
      catBg: "bg-violet-100 text-violet-800",
      title: "Museu inaugura exposição com obras inéditas de artistas locais.",
      excerpt: "Visitas guiadas e programa educativo arrancam no próximo fim de semana.",
      byline: "Por Cultura",
      date: "23 Mar 2025",
      img: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=200&q=80",
    },
    {
      cat: "SAÚDE",
      readTime: "6",
      catBg: "bg-emerald-100 text-emerald-800",
      title: "Campanha de vacinação alarga faixas etárias em todo o país.",
      excerpt: "Autoridades de saúde reforçam importância da adesão às janelas recomendadas.",
      byline: "Por Saúde",
      date: "23 Mar 2025",
      img: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=200&q=80",
    },
  ];

  const destaques = [
    {
      id: uuidv4(),
      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",
    },
    {
      id: uuidv4(),
      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",
    },
    {
      id: uuidv4(),
      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",
    },
    {
        id: uuidv4(),
        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",
    },
    {
        id: uuidv4(),
        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",
      },
      {
        id: uuidv4(),
        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",
      },
      {
        id: uuidv4(),
        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",
      },
      {
          id: uuidv4(),
          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",
      },
      {
        id: uuidv4(),
        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",
      },
      {
        id: uuidv4(),
        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",
      },
      {
        id: uuidv4(),
        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",
      },
      {
          id: uuidv4(),
          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",
      },
    ];
  
  return (
    <div className="min-h-screen bg-white font-sans text-[#1d1d1f] selection:bg-[#0066CC]/20">
      <TvonePromoStrip />
      <TvoneSiteNav />

      <main className="mx-auto max-w-[1240px] px-6 py-12">
        <div className="flex flex-col gap-16 lg:flex-row lg:items-start">
          
     
          {/* --- COLUNA PRINCIPAL (ARTIGO) --- */}
          <article className="flex-1 min-w-0"> 
            <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">
                    Noticias Recentes
                </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>
            </div>



        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-2">
            {destaques.map((item, index) => (
            <article
                key={item.id}
                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">
                <div className="flex items-center gap-3 pb-2">
                  <span className="text-[10px] font-bold uppercase tracking-wider text-blue-600">
                    {item.cat}
                  </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.date}
                  </span>
                </div>

                <h3 className="line-clamp-4 text-base font-bold leading-snug text-neutral-900 transition-colors group-hover:text-blue-600">
                  {item.title}
                </h3>
              </div>
                </Link>
            </article>
            ))}
        </div>

          </article>

          {/* --- SIDEBAR REFINADA --- */}

          {/* --- SIDEBAR REFINADA COM SOCIAL SHARE --- */}

          <aside className="w-full lg:w-[340px]  flex flex-col justify-center align-center items-center shrink-0">
            <div className="sticky top-10 space-y-10 max-w-[400px]">

            <div className="bg-white p-5 rounded-xl border border-neutral-100 shadow-[0_2px_15px_rgba(0,0,0,0.03)]">
              
              {/* 1. Header: Adapted from your Share component */}
              <div className="flex items-center gap-2 mb-4">
                {/* Usando Users icon for Community */}
                <Users size={15} className="text-neutral-400" />
                <h3 className="text-[11px] font-bold text-neutral-400 uppercase tracking-widest">
                  Community
                </h3>
              </div>
              
              {/* 2. Main Content Area: Simplified from the UI mockup */}
              <div className="flex flex-col gap-5">
                
                {/* Column for Brand and Button */}
                <div className="flex flex-col gap-4">
                  
                  {/* Brand Info */}
                  {/* Brand Info - A highly stylized placeholder that looks 'premium' */}
                  {/* Brand Info - FIXED to use your actual logo image */}
                  <div className="flex items-center gap-3">
                    {/* 1. Use Next/Image for your official icon */}
                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl overflow-hidden shadow-inner border border-neutral-100">
                      <Image 
                        src="/logo.png"  // <-- UPDATE THIS PATH to your square logo
                        alt="TVone Icon Logo"
                        width={48} // Width in pixels (matches h-12/w-12 class)
                        height={48} // Height in pixels
                        className="object-contain" // Ensures the logo doesn't stretch
                      />
                    </div>
                    
                    {/* 2. Brand text matches previous styling */}
                    <div>
                      <p className="text-sm font-bold text-neutral-900 leading-tight">TVone</p>
                      <p className="text-[11px] font-medium text-neutral-500">500k seguidores</p>
                    </div>
                  </div>
                  
                  {/* Main Action Button */}
                  <button className="flex h-11 w-full items-center justify-center gap-2.5 rounded-lg bg-[#1877F2] text-white font-semibold text-sm transition-all hover:bg-[#166fe5] active:scale-95 shadow-sm">
              
                    <SiFacebook size={16} />
                    Gosto da TVone
                  </button>
                </div>

              </div>
            </div>
                          
            {/* 1. SEÇÃO DE SHARE (ESTILO APPLE NEWS) */}
            {/* <div className="bg-white p-5 rounded-xl border border-neutral-100 shadow-[0_2px_15px_rgba(0,0,0,0.03)]">
              <div className="flex items-center gap-2 mb-4">
                <Share2 size={15} className="text-neutral-400" />
                <h3 className="text-[11px] font-bold text-neutral-400 uppercase tracking-widest">
                  Compartilhar
                </h3>
              </div>
              
              <div className="grid grid-cols-4 gap-3">
                
         
                <button className="group flex flex-col items-center gap-2">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-100 text-neutral-600 transition-all group-hover:bg-neutral-200 active:scale-95">
                    <SiWhatsapp size={20} />
                  </div>
                  <span className="text-[10px] font-medium text-neutral-500">WhatsApp</span>
                </button>

        
                <button className="group flex flex-col items-center gap-2">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-100 text-neutral-600 transition-all group-hover:bg-neutral-200 active:scale-95">
                    <SiFacebook size={20} />
                  </div>
                  <span className="text-[10px] font-medium text-neutral-500">Facebook</span>
                </button>

             
                <button className="group flex flex-col items-center gap-2">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-100 text-neutral-600 transition-all group-hover:bg-neutral-200 active:scale-95">
                    <SiX size={18} />
                  </div>
                  <span className="text-[10px] font-medium text-neutral-500">Twitter</span>
                </button>

    
                <button className="group flex flex-col items-center gap-2">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-100 text-neutral-600 transition-all group-hover:bg-neutral-200 active:scale-95">
                    <Link2 size={20} />
                  </div>
                  <span className="text-[10px] font-medium text-neutral-500">Link</span>
                </button>

              </div>
            </div> */}

              {/* 2. ADVERTORIAL (CEO UNITEL) - REPLACING TV CARD */}
              <div className="group cursor-pointer">
                <div className="flex items-center justify-between mb-3 px-1">
                  <span className="text-[10px] font-bold text-neutral-400 uppercase">Publicidade</span>
                </div>
                
                <div className="relative aspect-[4/5] w-full overflow-hidden rounded-xl bg-neutral-100 shadow-sm transition-shadow">
                  <Image 
                    src="/zap.jpeg" // Substitua pelo path real da imagem do print
                    alt="CEO da Unitel - O futuro do 5G em Angola"
                    fill
                    unoptimized
                    className="object-contain"
                  />
                  {/* Overlay de gradiente para legibilidade do texto se estiver na imagem */}
                  {/* <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60" /> */}
                  
                  {/* <div className="absolute bottom-6 left-6 right-6">
                    <span className="text-[10px] font-bold text-[#007AFF] uppercase tracking-widest">CEO DA UNITEL</span>
                    <h4 className="text-white text-xl font-bold mt-2 leading-tight">
                      "ro do 5G em Angola e a expansão da conectividade rural"
                    </h4>
                  </div> */}
                </div>
                
                {/* <div className="mt-4 px-1">
                  <div className="flex items-center text-[13px] font-bold text-[#007AFF]">
                    Ler entrevista completa <ChevronRight size={14} className="ml-1" />
                  </div>
                </div> */}
              </div>

              <div className="flex items-center justify-between mb-3 px-1">
                <span className="text-[10px] font-bold text-neutral-400 uppercase">Publicidade</span>
              </div>

              {/* 3. PREMIUM SUBSCRIPTION - APPLE STYLE */}
              <div className="bg-black p-7 rounded-xl relative overflow-hidden text-white shadow-xl">
                <div className="relative z-10">
                  <h4 className="text-[20px] font-bold leading-tight tracking-tight mb-2">
                    Assine o Premium.
                  </h4>
                  <p className="text-[13px] text-[#8E8E93] font-medium mb-6">
                    Acesso ilimitado às notícias e análises exclusivas.
                  </p>
                  
                  <button className="flex w-full items-center justify-center gap-2 rounded-xl bg-white py-3 text-black font-bold text-[15px] transition-all hover:bg-neutral-100 active:scale-95">
                    <svg viewBox="0 0 384 512" className="h-4 w-4 fill-black">
                      <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
                    </svg>
                    <span>Pay</span>
                  </button>
                </div>
                {/* Sutil glow de fundo */}
                <div className="absolute top-0 right-0 w-32 h-32 bg-blue-600/20 blur-[40px]" />
              </div>



              <div className="px-1">
                <div className="flex items-center justify-between mb-4 border-b border-neutral-100 pb-2">
                  <h3 className="text-[13px] font-bold text-black uppercase tracking-tight">Mais Lidas</h3>
                  <span className="text-[11px] font-medium text-neutral-400">Últimas 24h</span>
                </div>
                
                <div className="space-y-4">
                  {[
                    { id: "01", title: "Câmbio: Kwanza mantém trajetória de estabilidade frente ao Dólar", cat: "Economia" },
                    { id: "02", title: "Novas infraestruturas no Porto de Luanda aumentam eficiência", cat: "Logística" },
                    { id: "03", title: "Selecção Nacional prepara amistoso contra Marrocos", cat: "Desporto" }
                  ].map((news) => (
                    <div key={news.id} className="group cursor-pointer flex align-start justify-start gap-4 text-black">
                      <span className="text-2xl font-black text-black group-hover:text-blue transition-colors leading-none">
                        {news.id}
                      </span>
                      <div className="space-y-1 flex flex-col">
                        <span className="text-[10px] font-bold text-blue-600 uppercase tracking-widest">{news.cat}</span>
                        <h4 className="text-[14px] font-bold text-neutral-900 leading-tight group-hover:text-blue-600 transition-colors">
                          {news.title}
                        </h4>
                      </div>
                    </div>
                  ))}
                </div>


              <div className="grid gap-x-12 mt-12 gap-y-3 md:grid-cols-1">
                <div className="flex items-center justify-between mb-2 border-b border-neutral-100 pb-2">
                  <h3 className="text-[13px] font-bold text-black uppercase tracking-tight">Noticias Principais</h3>
                  {/* <span className="text-[11px] font-medium text-neutral-400">Últimas 24h</span> */}
                </div>

                {recentes.map((item) => (
                  <article key={item.title} className="group cursor-pointer mb-1">
                    <Link href="#" className="flex flex-row items-start gap-6">
                      
                      {/* 1. LADO DA IMAGEM (Limpo e Minimalista) */}
                      <div className="relative aspect-[4/3] w-25 shrink-0 overflow-hidden rounded-2xl bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-xl sm:w-25 md:w-25 lg:w-25">
                        <Image 
                          src={item.img} 
                          alt="" 
                          fill 
                          className="object-cover transition duration-700 group-hover:scale-110" 
                          sizes="(max-width: 60px) 60px, 64px" 
                        />
                      </div>

                      {/* 2. LADO DO TEXTO (Categoria externa ao topo) */}
                      <div className="flex flex-1 flex-col ">
                        {/* CATEGORIA E DATA LADO A LADO */}
                        <div className="gap-3 mb-2 flex flex-col justify-start items-start">
                          <span className="text-[10px] font-bold uppercase tracking-wider text-[#0066CC]">
                            {item.cat}
                          </span>
                          {/* <span className="h-1 w-1 rounded-2xl bg-neutral-300" /> */}
                          {/* <span className="text-[10px] font-semibold text-neutral-400 uppercase tracking-tight">
                            {item.date}
                          </span>
                          <span className="h-1 w-1 rounded-2xl bg-neutral-300" />
                          <span className="text-[10px] font-bold uppercase text-neutral-400">
                            {item.readTime} min
                        </span> */}
                        </div>

                        <h3 className="line-clamp-3 text-[14px] font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc]">
                          {item.title}
                        </h3>
                      

                      </div>

                    </Link>
                  </article>
                ))}
              </div>

              </div>



              {/* 2. VIDEO - Minimalist Edge-to-Edge */}
              <div className="group">
                <div className="flex items-center justify-between mb-3 px-1">
                  <h3 className="text-[13px] font-bold text-black tracking-tight">TV One Angola</h3>
                  <div className="flex items-center gap-1.5">
                    <span className="h-1.5 w-1.5 rounded-full bg-[#FF3B30] animate-pulse" />
                    <span className="text-[11px] font-bold text-[#FF3B30] uppercase">Ao Vivo</span>
                  </div>
                </div>
                
                <div className="relative aspect-video w-full overflow-hidden rounded-xl bg-black shadow-sm group-hover:shadow-md transition-shadow">
                  {!isPlaying ? (
                    <div className="absolute inset-0 z-10 cursor-pointer" onClick={() => setIsPlaying(true)}>
                      <Image 
                        src="https://i.ytimg.com/vi/bfEYtb2O3iI/maxresdefault.jpg"
                        alt="Workshop"
                        fill
                        className="object-cover transition-transform duration-500 group-hover:scale-105 opacity-90"
                      />
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white transition-all group-hover:bg-white group-hover:text-[#007AFF] group-hover:scale-110">
                          <svg className="h-6 w-6 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8 5v14l11-7z" />
                          </svg>
                        </div>
                      </div>
                    </div>
                  ) : (
                    <iframe 
                      className="absolute inset-0 h-full w-full"
                      src="https://www.youtube.com/embed/bfEYtb2O3iI?autoplay=1" 
                      frameBorder="0"
                      allow="autoplay; encrypted-media" 
                      allowFullScreen
                    />
                  )}
                </div>
                
                <div className="mt-3.5 px-1">
                  <h4 className="text-[16px] font-semibold text-black leading-snug tracking-tight group-hover:text-[#007AFF] transition-colors">
                    Workshop “Acelere a Sua Empresa” impulsiona o empreendedorismo em Angola
                  </h4>
                  <p className="mt-2 text-[12px] text-[#8E8E93] font-medium tracking-tight">Publicado em 24 de Março, 2026</p>
                </div>
              </div>


            </div>
          </aside>

        </div>
      </main>

      <TvoneAdBanner />
      <TvoneFooter />
    </div>
  );
}