import { Search, TrendingUp, BarChart3, Zap, Mail, Instagram, Globe, Share2, Bookmark, User, Clock, ChevronRight } from 'lucide-react';

export default function AuthorityTheme({ 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 || 'ANALYSIS',
    title: p.title,
    excerpt: p.excerpt,
    author: p.author_name || 'Alex Rivera',
    time: '8 min',
    img: p.image || `https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800&random=${i}`,
    content: p.content,
    date: new Date(p.created_at || Date.now()).toLocaleDateString('pt-BR')
  })) : [
    { id: '1', title: 'The New Era of SEO: Google AI Redefined', excerpt: 'It is no longer about keywords. It is about entity, authority, and real user experience.', category: 'ANALYSIS', author: 'Alex Rivera', time: '5 min', img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800' },
    { id: '2', title: 'SaaS SEO: The Growth Guide', excerpt: 'How to scale your SaaS organic traffic from zero to 100k.', category: 'CASE STUDY', author: 'Mariana Costa', time: '8 min', 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 || 'REPORT',
    author: currentArticle.author_name || 'SEO Team',
    img: currentArticle.image || `https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800`
  } : articlesToRender[0];

  return (
    <div className="bg-[#fcfcfc] text-[#111] min-h-screen font-sans selection:bg-[#0046FF] selection:text-white">
      
      {/* Premium Navigation */}
      <nav className="sticky top-0 bg-white/80 backdrop-blur-xl z-50 border-b border-gray-100">
         <div className="max-w-[1400px] mx-auto px-6 h-20 flex items-center justify-between">
            <div className="flex items-center gap-12">
               <a href="/" className="flex items-center gap-2">
                  <div className="w-10 h-10 bg-black rounded-[12px] flex items-center justify-center -rotate-6 shadow-xl shadow-black/20">
                     <BarChart3 className="w-6 h-6 text-white" />
                  </div>
                  <span className="text-xl font-black uppercase tracking-tighter italic">SEO<span className="text-[#0046FF]">AUTHORITY</span></span>
               </a>
               <div className="hidden lg:flex items-center gap-8">
                  {['Algorithms', 'Case Studies', 'E-commerce', 'AI'].map(cat => (
                    <a key={cat} href={`/category/${cat.toLowerCase()}`} className="text-[11px] font-black uppercase tracking-widest text-gray-400 hover:text-[#0046FF] transition-colors">{cat}</a>
                  ))}
               </div>
            </div>
            <div className="flex items-center gap-6">
               <button className="text-gray-400 hover:text-black transition-colors"><Search className="w-5 h-5"/></button>
               <button className="bg-black text-white px-6 py-2.5 rounded-full text-xs font-black uppercase tracking-widest hover:bg-[#0046FF] transition-all shadow-lg">Elite Login</button>
            </div>
         </div>
      </nav>

      {activeView === 'home' ? (
        <main className="max-w-[1400px] mx-auto px-6 py-12">
           {/* Hero Grid */}
           <div className="grid lg:grid-cols-4 gap-8 mb-20">
              <div className="lg:col-span-3 group relative">
                 <a href={`/${articlesToRender[0].id}`} className="relative block aspect-[16/8] rounded-[2rem] overflow-hidden shadow-2xl bg-black">
                    <img src={articlesToRender[0].img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000 opacity-80" alt="Main"/>
                    <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent p-12 flex flex-col justify-end">
                       <span className="bg-[#0046FF] text-white text-[10px] font-black px-4 py-1.5 rounded-full w-fit mb-6 shadow-xl">{articlesToRender[0].category}</span>
                       <h1 className="text-4xl md:text-6xl font-black text-white leading-[1.1] tracking-tight mb-6 max-w-4xl">{articlesToRender[0].title}</h1>
                       <p className="text-gray-300 text-lg font-medium max-w-2xl line-clamp-2">{articlesToRender[0].excerpt}</p>
                    </div>
                 </a>
              </div>
              <div className="hidden lg:flex flex-col gap-8">
                 <div className="bg-[#0046FF] rounded-[2rem] p-8 text-white flex flex-col justify-between h-full shadow-2xl relative overflow-hidden group">
                    <div className="relative z-10">
                       <h3 className="text-2xl font-black italic mb-4 leading-tight text-white">Next-Gen SEO Metrics</h3>
                       <p className="text-blue-100 text-sm font-medium">Optimize for Google SGE now.</p>
                    </div>
                    <button className="relative z-10 bg-white text-[#0046FF] w-full py-4 rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-black hover:text-white transition-all">Download Report</button>
                    <Zap className="absolute -bottom-10 -right-4 w-40 h-40 text-blue-400/20 rotate-12" />
                 </div>
              </div>
           </div>

           {/* Content Grid */}
           <div className="grid lg:grid-cols-12 gap-12">
              <div className="lg:col-span-8">
                 <div className="flex items-center justify-between mb-10 pb-4 border-b border-gray-100">
                    <h2 className="text-xs font-black uppercase tracking-[0.2em] text-gray-400 flex items-center gap-2">
                       <TrendingUp className="w-4 h-4 text-[#0046FF]"/> TRENDING NOW
                    </h2>
                    <a href="/category/all" className="text-xs font-bold text-[#0046FF] uppercase tracking-widest">View All</a>
                 </div>

                 <div className="flex flex-col gap-12">
                    {articlesToRender.slice(0, 5).map((art, idx) => (
                      <a href={`/${art.id}`} key={art.id + idx} className="grid md:grid-cols-5 gap-8 group">
                         <div className="md:col-span-2 aspect-[4/3] rounded-3xl overflow-hidden shadow-lg border border-gray-100 bg-gray-50">
                            <img src={art.img} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt={art.title}/>
                         </div>
                         <div className="md:col-span-3 flex flex-col justify-center">
                            <div className="flex items-center gap-3 mb-4">
                               <span className="text-[10px] font-black text-[#0046FF] uppercase tracking-widest">{art.category}</span>
                               <span className="text-[10px] font-bold text-gray-300">• 8 min read</span>
                            </div>
                            <h3 className="text-2xl font-black mb-4 group-hover:text-[#0046FF] transition-colors leading-tight">{art.title}</h3>
                            <div className="flex items-center gap-3">
                               <div className="w-6 h-6 rounded-full bg-gray-900" />
                               <span className="text-[11px] font-bold text-gray-500 uppercase">{art.author}</span>
                            </div>
                         </div>
                      </a>
                    ))}
                 </div>
              </div>

              <aside className="lg:col-span-4 h-fit sticky top-32">
                 <div className="bg-white rounded-[2.5rem] p-10 border border-gray-100 shadow-xl relative overflow-hidden group">
                    <Mail className="w-12 h-12 text-[#1a1a1a] mb-6" />
                    <h3 className="text-2xl font-black mb-4 leading-tight text-black">Get The SEO Report</h3>
                    <p className="text-gray-500 text-sm font-medium mb-8 leading-relaxed">Join 50k+ strategists and receive weekly market intelligence.</p>
                    <div className="space-y-4">
                       <input type="email" placeholder="Email Address..." className="w-full bg-gray-50 border border-gray-100 rounded-2xl p-4 text-sm outline-none focus:border-[#0046FF] transition-colors font-medium text-black" />
                       <button className="w-full bg-black text-white font-black text-[11px] uppercase tracking-widest py-4 rounded-2xl hover:bg-[#0046FF] transition-all shadow-xl">Subscribe Free</button>
                    </div>
                 </div>
              </aside>
           </div>
        </main>
      ) : (
        /* --- ARTICLE VIEW --- */
        <article className="pb-40">
           <div className="max-w-[900px] mx-auto px-6 pt-20">
              <div className="flex flex-col items-center text-center">
                 <span className="bg-[#0046FF]/10 text-[#0046FF] text-[10px] font-black px-4 py-1.5 rounded-full mb-8 tracking-widest uppercase">{displayArticle.category} // 2026</span>
                 <h1 className="text-4xl md:text-6xl lg:text-7xl font-black tracking-tighter leading-[1.05] mb-10 text-center text-black">{displayArticle.title}</h1>
                 <div className="flex items-center gap-4 mb-16">
                    <div className="w-12 h-12 rounded-full bg-black flex items-center justify-center text-white font-bold uppercase">{displayArticle.author.slice(0, 2)}</div>
                    <div className="text-left">
                       <p className="text-sm font-black uppercase tracking-widest text-black">{displayArticle.author}</p>
                       <p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Published {displayArticle.date}</p>
                    </div>
                 </div>
              </div>
              
              <div className="aspect-[16/9] rounded-[3rem] overflow-hidden shadow-3xl shadow-black/20 mb-16 bg-gray-900">
                 <img src={displayArticle.img} className="w-full h-full object-cover" alt="Article"/>
              </div>

              <div className="max-w-[700px] mx-auto prose prose-xl prose-p:text-gray-600 prose-p:font-medium prose-headings:font-black prose-headings:tracking-tighter prose-a:text-[#0046FF] prose-strong:text-black">
                 {children}
              </div>
           </div>
        </article>
      )}

      {/* Premium Footer */}
      <footer className="bg-black text-white pt-32 pb-20 px-6 overflow-hidden relative">
         <div className="max-w-[1400px] mx-auto relative z-10">
            <div className="grid md:grid-cols-4 gap-20 mb-20">
               <div className="md:col-span-2">
                  <div className="flex items-center gap-2 mb-8">
                     <BarChart3 className="w-8 h-8 text-[#0046FF]" />
                     <span className="text-2xl font-black uppercase tracking-tighter italic">SEO<span className="text-[#0046FF]">AUTHORITY</span></span>
                  </div>
                  <p className="text-gray-400 text-lg font-medium max-w-sm leading-relaxed mb-10">A plataforma definitiva para quem joga o jogo do SEO em nível elite. Inovação, análise e performance.</p>
                  <div className="flex gap-4">
                     <button className="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-[#0046FF] transition-all"><Instagram className="w-5 h-5"/></button>
                     <button className="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-[#0046FF] transition-all"><Globe className="w-5 h-5"/></button>
                     <button className="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-[#0046FF] transition-all"><Share2 className="w-5 h-5"/></button>
                  </div>
               </div>
               <div>
                  <h5 className="text-[10px] font-black uppercase tracking-[0.2em] text-[#0046FF] mb-10">Explorar</h5>
                  <ul className="space-y-4 text-sm font-bold text-gray-400">
                     <li><a href="/privacy" className="hover:text-white transition-colors">Privacidade</a></li>
                     <li><a href="/terms" className="hover:text-white transition-colors">Termos</a></li>
                     <li><a href="/cookies" className="hover:text-white transition-colors">Cookies</a></li>
                  </ul>
               </div>
               <div>
                  <h5 className="text-[10px] font-black uppercase tracking-[0.2em] text-[#0046FF] mb-10">Infraestrutura</h5>
                  <ul className="space-y-4 text-sm font-bold text-gray-400">
                     <li><a href="/contact" className="hover:text-white transition-colors">Contato</a></li>
                     <li><a href="/search" className="hover:text-white transition-colors">Busca</a></li>
                     <li><a href="/about" className="hover:text-white transition-colors">Sobre</a></li>
                  </ul>
               </div>
            </div>
            <div className="pt-12 border-t border-white/5 text-center">
               <p className="text-[10px] font-bold text-gray-600 uppercase tracking-widest">&copy; {new Date().getFullYear()} SEO AUTHORITY LABS. ALL SYSTEMS OPERATIONAL.</p>
            </div>
         </div>
         <div className="absolute top-0 right-0 text-[15rem] font-black text-white/[0.02] -rotate-12 transform translate-x-20 -translate-y-20 select-none pointer-events-none">AUTHORITY</div>
      </footer>
    </div>
  );
}