"use client";
import React, { useState } from 'react';
import Image from 'next/image';
import { ThumbsUp, MessageCircle, Send, Share2 } from 'lucide-react';
import { TvoneAdBanner, TvoneFooter } from '../components/tvone-content';
import { TvonePromoStrip } from '../components/tvone-promo-strip';
import { TvoneSiteNav } from '../components/tvone-site-nav';

export default function NewsArticlePage() {
  // Estado para controlar o play do vídeo customizado
  const [isPlaying, setIsPlaying] = useState(false);

  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-6">
              <span className="rounded-md bg-blue-600 px-2.5 py-1 text-[11px] font-[900] uppercase tracking-wider text-white">
                Música
              </span>
            </div>

            <h1 className="Text-3xl font-bold tracking-tight text-neutral-900 text-2xl md:text-4xl">
              Adele: A Turnê Mundial que Redefiniu a Indústria Musical em 2016.
            </h1>

            
            {/* Hero Image (Bordas Apple 32px) */}
            <div className="relative mt-10 aspect-video w-full overflow-hidden rounded-2xl bg-neutral-100 shadow-sm border border-black/5">
              <Image
                src="https://images.unsplash.com/photo-1543900694-133f37abaaa5"
                alt="Adele Live 2016"
                fill
                className="object-cover transition-transform duration-700 hover:scale-105"
                priority
              />
            </div>

            {/* Corpo do Conteúdo */}
            <div className="mt-12 space-y-8 text-[20px] leading-[1.6] text-[#333] lg:text-[21px]">
              <p className="text-1xl md:text-2xl font-bold leading-snug text-black lg:tracking-tight">
                A turnê de Adele em 2016 foi o ápice de sua carreira, uma celebração de puro talento e conexão emocional que parou o mundo.
              </p>
              
              <p>
                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
              </p>



              <p>
                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
              </p>

              <p>
                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
              </p>

              <p>
                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
              </p>

              <p>
                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
              </p>

              <p>
                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
              </p>

              <p>
                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
              </p>

              <p>
                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
              </p>

              <p>
                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
              </p>


              {/* Galeria Grid */}
              <div className="grid grid-cols-2 gap-6 mt-12">
                <div className="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 border border-black/5">
                   <Image unoptimized src="https://images.unsplash.com/photo-1493225255756-d9584f8606e9" fill className="object-cover" alt="Concerto Adele 1" />
                </div>
                <div className="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 border border-black/5">
                   <Image unoptimized src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745" fill className="object-cover" alt="Concerto Adele 2" />
                </div>
              </div>
            </div>

            {/* Autor e Meta Info */}
            <div className="mt-4 flex items-center justify-between  pt-8">
              <div className="flex items-center gap-4">
                <div className="relative h-12 w-12 overflow-hidden rounded-full bg-blue-50 border border-blue-100 flex items-center justify-center">
                  <span className="text-[#0066CC] font-bold text-lg">R</span>
                </div>
                <div>
                  <p className="text-[15px] font-bold text-black">Por <span className="text-[#0066CC]">Redação</span></p>
                  <p className="text-[13px] text-neutral-400 font-medium">12 de Junho, 2016 | 09:30 UTC</p>
                </div>
              </div>

              {/* Share Buttons (Estilo Clean Apple) */}
              {/* <div className="flex items-center gap-2.5">
                <button className="flex h-10 w-10 items-center justify-center rounded-2xl bg-neutral-50 text-neutral-500 transition-all hover:bg-[#25D366] hover:text-white hover:scale-110 active:scale-95">
                  <FaWhatsapp size={20} />
                </button>
                <button className="flex h-10 w-10 items-center justify-center rounded-2xl bg-neutral-50 text-neutral-500 transition-all hover:bg-[#1877F2] hover:text-white hover:scale-110 active:scale-95">
                  <FaFacebookF size={18} />
                </button>
                <button className="flex h-10 w-10 items-center justify-center rounded-2xl bg-neutral-50 text-neutral-500 border border-neutral-200 transition-all hover:bg-black hover:text-white hover:scale-110 active:scale-95">
                  <FaInstagram size={20} />
                </button>
              </div> */}
            </div>


            {/* Seção de Comentários */}
            <section className="mt-24 border-t border-neutral-100 pt-16">
               <h3 className="text-2xl font-[900] mb-8 flex items-center gap-3 tracking-tight">
                 <MessageCircle size={28} className="text-[#0066CC]"/> Comentários
               </h3>
               <div className="rounded-2xl bg-neutral-50 p-8 border border-neutral-100 transition-all focus-within:border-[#0066CC]/30 focus-within:bg-white focus-within:shadow-xl focus-within:shadow-blue-500/5">
                 <textarea 
                   className="w-full bg-transparent outline-none text-lg placeholder:text-neutral-400" 
                   placeholder="Partilhe a sua opinião..." 
                   rows={4} 
                 />
                 <div className="mt-4 flex justify-end">
                   <button className="flex items-center gap-2 rounded-2xl bg-[#0066CC] px-10 py-3 font-bold text-white transition-all hover:opacity-90 active:scale-95 shadow-lg shadow-blue-500/20">
                    Enviar <Send size={18}/>
                   </button>
                 </div>
               </div>
            </section>
          </article>

          {/* --- SIDEBAR REFINADA --- */}
          <aside className="w-full lg:w-[340px] shrink-0">
            <div className="sticky top-10 space-y-10">
              
              {/* 1. CARD DE VÍDEO TV ONE COM PLAY CUSTOMIZADO */}
              <div className="rounded-2xl bg-white p-4 shadow-[0_8px_40px_rgba(0,0,0,0.04)] border border-neutral-100">
                <h3 className="text-[13px] font-black text-neutral-400 uppercase tracking-[0.1em] mb-4 pl-2">TV One em Destaque</h3>
                
                <div className="relative aspect-video w-full overflow-hidden rounded-2xl bg-black shadow-inner border border-black/5 group">
                  {!isPlaying ? (
                    <div className="absolute inset-0 z-10 cursor-pointer" onClick={() => setIsPlaying(true)}>
                      <Image 
                        src="https://i.ytimg.com/vi/bfEYtb2O3iI/maxresdefault.jpg"
                        alt="Thumbnail TV One"
                        fill
                        className="object-cover transition-transform duration-700 group-hover:scale-105 opacity-80"
                      />
                      <div className="absolute inset-0 bg-black/10 transition-opacity group-hover:bg-black/5" />
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-white/20 backdrop-blur-xl border border-white/30 text-white shadow-2xl transition-all group-hover:bg-white group-hover:text-[#0066CC] group-hover:scale-110">
                          <svg className="h-7 w-7 ml-1" 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" 
                      title="TV One Video"
                      frameBorder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                      allowFullScreen
                    />
                  )}
                </div>
                
                <div className="mt-4 px-2 pb-1">
                  <p className="text-[15px] font-bold text-black leading-tight">
                    Workshop “Acelere a Sua Empresa” impulsiona o empreendedorismo em Angola
                  </p>
                  <div className="mt-4 flex flex-col gap-3">
                    <a href="https://www.youtube.com/watch?v=bfEYtb2O3iI" target="_blank" className="flex w-full items-center justify-center gap-2 rounded-2xl bg-[#f5f5f7] py-3 text-[14px] font-bold text-[#0066CC] transition-all hover:bg-[#e8e8ed] active:scale-95">
                      Assistir no YouTube
                    </a>
                    <div className="flex items-center gap-2">
                      <span className="h-1.5 w-1.5 rounded-2xl bg-red-500 animate-pulse" />
                      <p className="text-[11px] text-neutral-400 font-bold uppercase tracking-wider">TV One Angola</p>
                    </div>
                  </div>
                </div>
              </div>

              {/* 2. BOTÃO CUSTOM iOS PAY */}
              <div className="rounded-2xl bg-white p-8 shadow-[0_8px_40px_rgba(0,0,0,0.04)] border border-neutral-100">
                <p className="text-[13px] font-black text-neutral-400 uppercase tracking-[0.1em] mb-6 text-center">Assinatura Premium</p>
                <button className="group relative flex w-full items-center justify-center gap-2 overflow-hidden rounded-2xl bg-black py-4 transition-all hover:bg-neutral-800 active:scale-95 shadow-xl shadow-black/10">
                  <svg viewBox="0 0 384 512" className="h-5 w-5 fill-white transition-transform group-hover:scale-110">
                    <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 className="text-[17px] font-bold tracking-tight text-white">Pay</span>
                  <div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-1000 group-hover:translate-x-full" />
                </button>
                <p className="mt-4 text-[11px] text-center text-neutral-400 font-medium leading-relaxed">
                  Pagamento seguro via Apple Pay. <br/>Cancele a qualquer momento.
                </p>
              </div>

              {/* 3. CARD DE FEEDBACK */}
              <div className="rounded-2xl bg-white p-8 shadow-[0_8px_40px_rgba(0,0,0,0.04)] border border-neutral-100 text-center">
                <h3 className="text-[13px] font-black text-neutral-400 uppercase tracking-[0.1em] mb-6">Feedback</h3>
                <button className="flex w-full items-center justify-center gap-3 rounded-2xl bg-[#0066CC] py-4.5 text-white font-[800] shadow-xl shadow-blue-500/25 transition-transform hover:scale-[1.02] active:scale-[0.98]">
                  <ThumbsUp size={20} />
                  Curtidas
                </button>
              </div>

              {/* 4. BANNERS PATROCINADOS */}
              <div className="group relative aspect-[3/4] w-full overflow-hidden rounded-2xl bg-[#1d1d1f] p-10 text-white border border-white/5">
                <div className="relative z-10 h-full flex flex-col justify-between">
                  <span className="text-[11px] font-[900] tracking-[0.2em] opacity-40 uppercase">Patrocinado</span>
                  <div>
                    <h4 className="text-[28px] font-[900] leading-tight tracking-tight">BAI Directo:<br/>Banca no seu pulso.</h4>
                    <p className="mt-4 text-sm font-medium opacity-50 leading-relaxed">Simples e rápido. Faça o download na App Store.</p>
                  </div>
                </div>
                <div className="absolute -bottom-20 -right-20 h-64 w-64 rounded-2xl bg-blue-600/30 blur-[80px] transition-opacity group-hover:opacity-50" />
              </div>

              <div className="w-full rounded-2xl bg-gradient-to-br from-[#FF6600] to-[#FF9900] p-9 text-white shadow-2xl shadow-orange-500/20 border border-white/10">
                <h4 className="text-[24px] font-[900] leading-tight tracking-tight">Unitel NetCASA 5G</h4>
                <p className="mt-3 text-[12px] font-black uppercase tracking-wider opacity-90">O futuro chegou ao Namibe!</p>
              </div>

            </div>
          </aside>

        </div>
      </main>

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