import { Activity, Zap, TrendingUp, BarChart3, Globe, Share2, Instagram, Search, Menu, Send, ChevronRight, MessageCircle, Bookmark, Volume2, ArrowRight } from 'lucide-react';

export default function PulseTheme({ posts = [], activeView = 'home', currentArticle, children }: { posts?: any[], activeView?: 'home' | 'article', currentArticle?: any, children?: React.ReactNode }) {
  
  const articlesToRender = posts && posts.length > 0 ? posts.map((p, i) => ({
    id: p.slug || p.id,
    category: p.category_name || 'ALERT',
    title: p.title,
    excerpt: p.excerpt,
    date: new Date(p.created_at || Date.now()).toLocaleDateString('pt-BR'),
    img: p.image || `https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=1200&random=${i}`,
    content: p.content
  })) : [
    { id: '1', title: 'Google Core Update 04.2026: Live Tracking', category: 'URGENT', img: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=1200' },
    { id: '2', title: 'Major Indexing Bug in Search Console Detected', category: 'SYSTEM', img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800' },
  ];

  const displayArticle = currentArticle ? {
    ...currentArticle,
    id: currentArticle.slug || currentArticle.id,
    category: currentArticle.category_name || 'UPDATE',
    img: currentArticle.image || `https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=1200`
  } : articlesToRender[0];

  return (
    <div className="seo-pulse bg-black text-white min-h-screen font-sans selection:bg-[#FF4D00] selection:text-white">
      
      {/* High-Octane Header */}
      <nav className="border-b-4 border-white p-6 sticky top-0 z-50 bg-black flex justify-between items-center">
         <div className="flex items-center gap-6">
            <Menu className="w-8 h-8 cursor-pointer hover:text-[#FF4D00] transition-colors" />
            <a href="/" className="text-4xl font-black italic tracking-tighter">SEO<span className="text-[#FF4D00]">PULSE</span></a>
         </div>
         <div className="hidden lg:flex items-center gap-12 text-xs font-black uppercase tracking-widest">
            <a href="/category/alerts" className="text-[#FF4D00]">Live Alerts</a>
            <a href="/category/all" className="hover:text-[#FF4D00] transition-colors">Archive</a>
            <a href="/category/tools" className="hover:text-[#FF4D00] transition-colors">Pulse Tools</a>
         </div>
         <div className="flex items-center gap-6">
            <Search className="w-6 h-6 cursor-pointer hover:text-[#FF4D00]" />
            <button className="bg-white text-black px-6 py-2 text-[10px] font-black uppercase tracking-widest hover:bg-[#FF4D00] hover:text-white transition-all">Emergency Access</button>
         </div>
      </nav>

      {activeView === 'home' ? (
        <main>
           {/* Section 1: Live HUD Hero */}
           <section className="p-6 md:p-12 border-b-4 border-white grid lg:grid-cols-2">
              <div className="p-8 md:p-16 flex flex-col justify-center border-b-4 lg:border-b-0 lg:border-r-4 border-white">
                 <div className="flex items-center gap-4 mb-10">
                    <div className="w-4 h-4 rounded-full bg-[#FF4D00] animate-ping"></div>
                    <span className="text-xs font-black uppercase tracking-[0.3em] text-[#FF4D00]">System Update Detected</span>
                 </div>
                 <h1 className="text-5xl md:text-8xl font-black italic tracking-tighter leading-[0.85] mb-12 uppercase italic">
                    Fast Data <br/> <span className="text-[#FF4D00]">Deep Insight.</span>
                 </h1>
                 <p className="text-xl font-bold uppercase leading-tight mb-16 max-w-md border-l-8 border-[#FF4D00] pl-8">O algoritmo do Google mudou há 12 minutos. Você está pronto para o impacto ou vai ficar para trás?</p>
                 <a href={`/${articlesToRender[0].id}`} className="bg-white text-black px-12 py-6 text-sm font-black uppercase tracking-[0.2em] hover:bg-[#FF4D00] hover:text-white transition-all w-fit shadow-[10px_10px_0_0_#FF4D00]">
                    Get The Report Now
                 </a>
              </div>
              <div className="aspect-video lg:aspect-auto relative overflow-hidden bg-zinc-900">
                 <img src={articlesToRender[0].img} className="w-full h-full object-cover grayscale opacity-50 group-hover:grayscale-0 transition-all duration-700" alt="pulse hero"/>
                 <div className="absolute top-10 right-10 flex flex-col items-end gap-2">
                    <span className="text-[10px] font-black bg-white text-black px-4 py-1 uppercase tracking-widest">Live Feed</span>
                    <span className="text-[10px] font-black bg-[#FF4D00] text-white px-4 py-1 uppercase tracking-widest">ID: {articlesToRender[0].id}</span>
                 </div>
              </div>
           </section>

           {/* Section 2: News Ticker Style Grid */}
           <section className="p-6 md:p-12">
              <div className="flex justify-between items-center mb-16 border-b-4 border-white pb-6">
                 <h2 className="text-4xl font-black italic tracking-tighter uppercase">Market Pulse</h2>
                 <a href="/category/all" className="text-xs font-black uppercase tracking-widest border-b-2 border-[#FF4D00] pb-1 text-[#FF4D00]">View Full Archive</a>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                 {articlesToRender.map((art, idx) => (
                    <a href={`/${art.id}`} key={art.id + idx} className="group border-4 border-white p-8 hover:bg-white hover:text-black transition-all block">
                       <div className="flex justify-between items-start mb-10">
                          <span className="text-[10px] font-black uppercase tracking-widest bg-[#FF4D00] text-white px-3 py-1">Alert // 2026</span>
                          <span className="text-[10px] font-black uppercase tracking-widest opacity-40">{art.date}</span>
                       </div>
                       <h3 className="text-3xl font-black uppercase tracking-tighter leading-none mb-8 group-hover:italic transition-all">{art.title}</h3>
                       <p className="text-sm font-bold uppercase opacity-60 mb-10 group-hover:opacity-100">{art.excerpt}</p>
                       <div className="flex items-center gap-4 text-xs font-black uppercase tracking-widest">
                          Read Report <ArrowRight className="w-4 h-4 group-hover:translate-x-4 transition-transform" />
                       </div>
                    </a>
                 ))}
              </div>
           </section>

           {/* High-Octane CTA */}
           <section className="bg-[#FF4D00] p-12 md:p-24 text-center">
              <Activity className="w-20 h-20 mx-auto mb-10 stroke-[4px]" />
              <h2 className="text-5xl md:text-8xl font-black italic tracking-tighter mb-10 uppercase leading-none">Stay Decoded.</h2>
              <p className="text-xl font-black uppercase mb-16 max-w-2xl mx-auto">Junte-se à rede de elite. Receba alertas de mudanças de algoritmo em tempo real via SMS e E-mail.</p>
              <div className="max-w-2xl mx-auto flex flex-col md:flex-row gap-6">
                 <input type="email" placeholder="YOUR ACCESS EMAIL..." className="flex-1 bg-black text-white border-4 border-white p-6 font-black uppercase placeholder-white/30 outline-none" />
                 <button className="bg-white text-black px-12 py-6 font-black uppercase tracking-widest hover:bg-black hover:text-white transition-all">Activate</button>
              </div>
           </section>
        </main>
      ) : (
        /* --- ARTICLE VIEW --- */
        <article className="pb-40">
           <div className="max-w-[1200px] mx-auto px-6 py-20">
              <div className="grid lg:grid-cols-12 gap-16">
                 <div className="lg:col-span-1 flex flex-col gap-8 text-[#FF4D00] sticky top-32 h-fit">
                    <Share2 className="w-8 h-8 cursor-pointer hover:scale-110 transition-transform" />
                    <MessageCircle className="w-8 h-8 cursor-pointer hover:scale-110 transition-transform" />
                    <Bookmark className="w-8 h-8 cursor-pointer hover:scale-110 transition-transform" />
                 </div>
                 <div className="lg:col-span-11">
                    <div className="flex items-center gap-4 mb-10">
                       <span className="bg-[#FF4D00] text-white text-[10px] font-black px-4 py-1 rounded uppercase tracking-[0.3em]">Verified_Intelligence</span>
                       <span className="text-xs font-black uppercase opacity-40">{displayArticle.date}</span>
                    </div>
                    <h1 className="text-5xl md:text-8xl font-black italic tracking-tighter leading-[0.85] mb-16 uppercase italic text-white">{displayArticle.title}</h1>
                    
                    <div className="aspect-video bg-zinc-900 border-4 border-white mb-20 overflow-hidden">
                       <img src={displayArticle.img} className="w-full h-full object-cover" alt="post img"/>
                    </div>

                    <div className="prose prose-2xl prose-invert max-w-none prose-p:font-bold prose-p:uppercase prose-p:tracking-tight prose-headings:font-black prose-headings:italic prose-a:text-[#FF4D00] prose-strong:text-[#FF4D00]">
                       {children}
                    </div>
                 </div>
              </div>
           </div>
        </article>
      )}

      {/* Pulse Footer */}
      <footer className="border-t-4 border-white py-24 px-6 bg-black text-white">
         <div className="max-w-[1400px] mx-auto">
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-20 mb-32">
               <div className="lg:col-span-2">
                  <h1 className="text-6xl font-black italic tracking-tighter mb-10">SEO<span className="text-[#FF4D00]">PULSE</span></h1>
                  <p className="text-gray-400 text-lg font-black uppercase leading-relaxed max-w-md mb-12">Monitoramento instantâneo do ecossistema de busca. Uma interface de alta voltagem para quem vive de dados e performance.</p>
                  <div className="flex gap-8">
                     <a href="#" className="w-14 h-14 border-4 border-white flex items-center justify-center hover:bg-[#FF4D00] transition-all"><Instagram className="w-6 h-6"/></a>
                     <a href="#" className="w-14 h-14 border-4 border-white flex items-center justify-center hover:bg-[#FF4D00] transition-all"><Globe className="w-6 h-6"/></a>
                     <a href="#" className="w-14 h-14 border-4 border-white flex items-center justify-center hover:bg-[#FF4D00] transition-all"><Share2 className="w-6 h-6"/></a>
                  </div>
               </div>
               
               <div>
                  <h4 className="text-[#FF4D00] text-xs font-black uppercase tracking-[0.4em] mb-10">Legal_Core</h4>
                  <ul className="space-y-6 text-[10px] font-black uppercase tracking-widest text-gray-500">
                     <li><a href="/privacy" className="hover:text-white transition-colors">Privacidade</a></li>
                     <li><a href="/terms" className="hover:text-white transition-colors">Termos_Uso</a></li>
                     <li><a href="/cookies" className="hover:text-white transition-colors">Cookies_Protocol</a></li>
                  </ul>
               </div>

               <div>
                  <h4 className="text-[#FF4D00] text-xs font-black uppercase tracking-[0.4em] mb-10">Network</h4>
                  <ul className="space-y-6 text-[10px] font-black uppercase tracking-widest text-gray-500">
                     <li><a href="/contact" className="hover:text-white transition-colors">Suporte_Direto</a></li>
                     <li><a href="/search" className="hover:text-white transition-colors">Busca_Global</a></li>
                     <li><a href="/about" className="hover:text-white transition-colors">Sobre_Nos</a></li>
                  </ul>
               </div>
            </div>
            
            <div className="flex flex-col md:flex-row justify-between items-center pt-16 border-t-2 border-white/10 text-[10px] font-black uppercase tracking-[0.5em] text-gray-600 text-center md:text-left gap-8">
               <span>© {new Date().getFullYear()} SEO PULSE SYSTEMS. ALL RIGHTS DECODED.</span>
               <div className="flex items-center gap-6">
                  <div className="flex items-center gap-2">
                     <Activity className="w-3 h-3 text-[#FF4D00]"/>
                     <span>Uptime: 99.9%</span>
                  </div>
                  <span>Version: 4.0.26_X</span>
               </div>
            </div>
         </div>
      </footer>
    </div>
  );
}