tvone/app/content/page.tsx

"use client";
import React from 'react';
import Image from 'next/image';
import { ThumbsUp, MessageCircle, Send, Share2 } from 'lucide-react';
// import { FaWhatsapp, FaFacebookF, FaInstagram } from 'react-icons/fa';
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() {
  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-[32px] 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-[28px] bg-neutral-100 border border-black/5">
                   <Image 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-[28px] bg-neutral-100 border border-black/5">
                   <Image 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-full 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-full 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-full 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-[32px] 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-full 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 COM VÍDEO TV ONE --- */}
          <aside className="w-full lg:w-[340px] shrink-0">
            <div className="sticky top-10 space-y-10">
              {/* Card de Vídeo Workshop */}
              <div className="rounded-[32px] 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-[24px] bg-black shadow-inner border border-black/5">
                  <iframe 
                    className="absolute inset-0 h-full w-full"
                    src="https://www.youtube.com/embed/bfEYtb2O3iI" 
                    title="Workshop Acelere a Sua Empresa"
                    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-2 flex items-center gap-2">
                        <span className="h-1.5 w-1.5 rounded-full bg-red-500 animate-pulse" />
                        <p className="text-[12px] text-neutral-400 font-medium uppercase tracking-wider">
                            Destaque TV One
                        </p>
                    </div>
                </div>
              </div>

              {/* Card de Curtidas */}
              <div className="rounded-[32px] 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>

              {/* Banner BAI (Estilo Dark Glass) */}
              <div className="group relative aspect-[3/4] w-full overflow-hidden rounded-[32px] 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-full bg-blue-600/30 blur-[80px] transition-opacity group-hover:opacity-50" />
              </div>

              {/* Banner Unitel */}
              <div className="w-full rounded-[32px] 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>
  );
}