window.BlogList = ({ theme, navigate, onOpenPost }) => {
    // Base de datos simulada
    const BLOG_POSTS = [
        { id: 1, title: "Psicología del Color en UI", cat: "Teoría", date: "12 Oct", img: "https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&w=1200&q=80", excerpt: "Cómo los colores afectan la toma de decisiones del usuario.", content: "El color no es solo estética. En el diseño de interfaces, el color guía la atención, evoca emociones y comunica jerarquía sin palabras. Estudios demuestran que el 60% de la aceptación de un producto se basa en su paleta cromática inicial." },
        { id: 2, title: "Sistemas de Diseño Escalables", cat: "Sistemas", date: "08 Oct", img: "https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&w=1200&q=80", excerpt: "Guía para crear componentes que crecen con tu producto.", content: "Tokenizar el diseño es el primer paso para la escalabilidad. Al definir variables para colores, espaciados y tipografías, creamos un lenguaje común entre diseño y desarrollo que permite iteraciones rápidas." },
        { id: 3, title: "Accesibilidad es Innovación", cat: "Ética", date: "01 Oct", img: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1200&q=80", excerpt: "Diseñar para todos mejora la experiencia.", content: "La inclusión digital no es una 'feature', es un requisito base. Cumplir con WCAG 2.1 no solo ayuda a personas con discapacidad, sino que mejora la usabilidad para todos en condiciones de baja luz o dispositivos limitados." }
    ];

    return (
        <div className="animate-fade-in max-w-7xl mx-auto px-6 text-inherit text-left">
            <button onClick={() => navigate('home', '/')} className="mb-10 flex items-center gap-2 text-[10px] font-black opacity-50 hover:opacity-100 uppercase tracking-widest transition-all">
                <window.Icon name="arrow-left" className="w-4 h-4" /> Dashboard
            </button>

            <div className="mb-16">
                <h2 className="text-5xl md:text-7xl font-extrabold tracking-tight mb-4 leading-[0.9] uppercase">Orbity<br/><span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-blue-500">Journal.</span></h2>
                <p className="opacity-60 max-w-xl font-light text-xl leading-relaxed mt-6">Exploraciones sobre ingeniería creativa, sistemas de diseño y el futuro de las interfaces digitales.</p>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                {BLOG_POSTS.map(post => (
                    <article key={post.id} onClick={() => onOpenPost(post)} className={`group cursor-pointer p-6 rounded-3xl border transition-all duration-300 ${theme==='dark'?'bg-white/5 border-white/10 hover:border-purple-500/50 hover:shadow-[0_0_30px_rgba(168,85,247,0.15)]':'bg-white border-slate-200 hover:border-purple-300 shadow-sm hover:shadow-xl'}`}>
                        <div className="aspect-[4/3] rounded-2xl overflow-hidden mb-6 relative">
                            <img src={post.img} className="w-full h-full object-cover grayscale opacity-80 group-hover:grayscale-0 group-hover:scale-105 transition-all duration-500" alt={post.title} />
                            <div className="absolute top-4 left-4">
                                <span className="px-3 py-1 bg-black/60 backdrop-blur-md text-white rounded-full text-[10px] font-black uppercase tracking-widest">{post.cat}</span>
                            </div>
                        </div>
                        <div className="flex justify-between items-center mb-3">
                            <span className="text-xs opacity-50 font-mono">{post.date}</span>
                            <window.Icon name="arrow-up-right" className="w-4 h-4 opacity-0 -translate-x-2 translate-y-2 group-hover:opacity-100 group-hover:translate-x-0 group-hover:translate-y-0 transition-all text-purple-500" />
                        </div>
                        <h3 className="text-2xl font-black mb-3 tracking-tight leading-none uppercase group-hover:text-purple-500 transition-colors">{post.title}</h3>
                        <p className="text-sm opacity-60 line-clamp-2 leading-relaxed">{post.excerpt}</p>
                    </article>
                ))}
            </div>
        </div>
    );
};