import { motion } from 'motion/react';
import { ChevronRight, Activity } from 'lucide-react';
import { Link } from 'react-router-dom';
import { articles } from '@/data/articles';
import SEO from '@/components/SEO';

export default function Blog() {
  const featuredArticle = articles.find(a => a.featured) || articles[0];
  const otherArticles = articles.filter(a => a.id !== featuredArticle.id);

  return (
    <div className="min-h-screen pt-32 pb-24 text-white bg-black">
      <SEO 
        title="Blog | Agência Onyx"
        description="Leia nossas reflexões técnicas e estratégias de Marketing Digital."
        url="https://agencia-onyx.com/blog"
      />

      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute inset-0 bg-grid-pattern opacity-30" />
      </div>
      
      <div className="container mx-auto px-6 max-w-7xl relative z-10">
        
        {/* HEADER */}
        <div className="border-b border-white/10 pb-12 mb-16 flex flex-col md:flex-row justify-between items-start md:items-end gap-12 bg-black/50">
           <div className="max-w-3xl">
             <div className="inline-flex items-center gap-2 px-3 py-1.5 border border-white/20 bg-white/5 text-gray-300 text-[10px] font-mono uppercase tracking-widest mb-6">
               <Activity className="w-3 h-3 animate-pulse text-white" /> Diretório de Estratégias
             </div>
             <h1 className="text-5xl md:text-8xl font-display font-medium tracking-tighter mb-6 leading-[0.95]">
               ONYX <br/> <span className="text-gray-500">LAB.</span>
             </h1>
             <p className="font-sans text-xl text-gray-400 leading-relaxed max-w-xl">
               Táticas algorítmicas documentadas. Relatórios de marketing focados em redução de atrito e aumento de receita.
             </p>
           </div>
           
           <div className="hidden md:flex flex-col gap-2 font-mono text-[10px] uppercase tracking-widest text-gray-500 text-right">
              <span className="text-white">STATUS: ONLINE</span>
              <span>UPLINK: ATIVO</span>
              <span>ORDENAÇÃO: MAIS RECENTES</span>
           </div>
        </div>

        {/* FEATURED */}
        <motion.div 
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           className="mb-24 group"
        >
          <Link to={`/blog/${featuredArticle.slug}`} className="grid grid-cols-1 lg:grid-cols-12 gap-0 items-center bg-black border border-white/10 transition-colors hover:bg-white/5">
            <div className="lg:col-span-7 w-full aspect-[4/3] lg:aspect-auto lg:h-[500px] bg-white/5 relative border-b lg:border-b-0 lg:border-r border-white/10 grayscale group-hover:grayscale-0 transition-all duration-700">
               <img 
                  src={featuredArticle.imageUrl} 
                  alt={featuredArticle.title} 
                  className="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-700 mix-blend-luminosity hover:mix-blend-normal" 
               />
               <div className="absolute top-6 left-6 bg-black border border-white/20 px-3 py-1 text-[10px] uppercase font-bold tracking-widest text-white font-mono shadow-[0_0_20px_rgba(255,255,255,0.1)]">
                 ARTIGO PRINCIPAL
               </div>
            </div>
            
            <div className="lg:col-span-5 p-8 lg:p-12 flex flex-col justify-center h-full">
               <div className="flex items-center gap-3 text-[10px] uppercase tracking-widest text-gray-400 mb-6 font-mono">
                  <span className="text-white border border-white/20 bg-white/5 px-2 py-1">{featuredArticle.category}</span>
                  <span className="border border-white/10 px-2 py-1 text-gray-500">{featuredArticle.date}</span>
               </div>
               
               <h2 className="text-3xl lg:text-4xl font-display leading-tight mb-4 text-white">
                 {featuredArticle.title}
               </h2>
               
               <p className="font-sans text-gray-400 mb-8 line-clamp-3 leading-relaxed">
                 {featuredArticle.excerpt}
               </p>
               
               <span className="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-white font-mono mt-auto group-hover:text-gray-300 transition-colors">
                 Acessar Estudo <ChevronRight className="w-4 h-4 ml-1" />
               </span>
            </div>
          </Link>
        </motion.div>

        {/* GRID */}
        <div>
           <div className="flex justify-between items-end mb-12 border-b border-white/10 pb-4">
              <h3 className="text-2xl font-display font-medium tracking-tight">Arquivos</h3>
              <span className="text-[10px] font-mono text-gray-500 uppercase tracking-widest">ORDENAR: DATA</span>
           </div>
           
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[1px] bg-white/10 border border-white/10">
             {otherArticles.map((article, index) => (
               <motion.div
                 key={article.id}
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: (index % 3) * 0.1 }}
                 className="bg-black p-6 group hover:bg-white/5 transition-colors flex flex-col h-full"
               >
                 <Link to={`/blog/${article.slug}`} className="flex flex-col h-full flex-1">
                   <div className="w-full aspect-[4/3] bg-white/5 mb-6 overflow-hidden relative border border-white/10 grayscale group-hover:grayscale-0 transition-all duration-700">
                      {article.imageUrl && (
                        <img 
                           src={article.imageUrl} 
                           alt={article.title} 
                           className="absolute inset-0 w-full h-full object-cover opacity-50 mix-blend-luminosity group-hover:mix-blend-normal group-hover:opacity-100 group-hover:scale-105 transition-all duration-700" 
                        />
                      )}
                   </div>
                   
                   <div className="flex flex-col flex-1">
                     <div className="flex flex-wrap items-center gap-2 text-[10px] uppercase tracking-widest text-gray-500 font-mono mb-4">
                       <span className="text-white bg-white/5 px-2 py-0.5 border border-white/20">{article.category}</span>
                       <span className="border border-white/10 px-2 py-0.5">{article.date}</span>
                     </div>
                     
                     <h3 className="text-xl font-display font-medium text-white leading-snug mb-3">
                       {article.title}
                     </h3>
                     
                     <p className="text-sm text-gray-500 mb-6 flex-1 line-clamp-3 font-sans">
                       {article.excerpt}
                     </p>
                     
                     <div className="flex flex-wrap items-center justify-between mt-auto pt-4 border-t border-white/10">
                        <span className="text-[10px] uppercase font-mono tracking-widest text-gray-500">Autor: <span className="text-gray-300">{article.author}</span></span>
                        <span className="text-[10px] uppercase font-mono tracking-widest text-white border border-white/20 bg-white/5 px-2 py-0.5">{article.readTime}</span>
                     </div>
                   </div>
                 </Link>
               </motion.div>
             ))}
           </div>
        </div>

      </div>
    </div>
  );
}