From f71879da9c799432d07186eeb18a6d379edf943f Mon Sep 17 00:00:00 2001
From: "Carlos (Almeira)" <carlos@almeira.com.co>
Date: Thu, 26 Mar 2026 15:56:38 -0500
Subject: [PATCH] Refactor: Full-width support for Clasificados

---
 src/app/clasificados/page.tsx | 104 +++++++++++++++++++---------------
 1 file changed, 58 insertions(+), 46 deletions(-)

diff --git a/src/app/clasificados/page.tsx b/src/app/clasificados/page.tsx
index 6242429..33bf96f 100644
--- a/src/app/clasificados/page.tsx
+++ b/src/app/clasificados/page.tsx
@@ -2,6 +2,7 @@ import { APPWRITE_ALMEIRA_CONFIG } from '@/lib/appwrite';
 import { createAdminClient } from '@/lib/appwrite.server';
 import { Query } from 'node-appwrite';
 import { NewsCard } from '@/components/NewsCard';
+import { GlobalSidebar, hasSidebarContent } from '@/components/AdWrappers';
 import { Sparkles } from 'lucide-react';
 
 async function fetchClasificadosData() {
@@ -56,6 +57,7 @@ async function fetchClasificadosData() {
 
 export default async function ClasificadosPage() {
   const { posts, cardSettings } = await fetchClasificadosData();
+  const hasSidebar = await hasSidebarContent();
 
   return (
     <main className="animate-fade-in relative min-h-screen">
@@ -84,55 +86,65 @@ export default async function ClasificadosPage() {
         </div>
       </section>
 
-      <section id="noticias" className="container mx-auto px-4 py-20 relative z-10">
-        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
-           <div>
-              <div className="flex items-center gap-3 mb-2">
-                 <div className="w-12 h-1 bg-gradient-to-r from-purple-400 to-blue-600 rounded-full"></div>
-                 <span className="text-purple-400 font-bold tracking-widest uppercase text-sm">Avisos</span>
-              </div>
-              <h2 className="text-4xl font-outfit font-black text-white">Anuncios <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Recientes</span></h2>
-           </div>
-        </div>
-
-        {posts.length === 0 ? (
-             <div className="w-full py-20 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
-                <div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 relative z-10">
-                   <Sparkles size={48} className="text-purple-500" />
+      <section id="noticias" className="container mx-auto px-4 py-20 relative z-10 w-full">
+        <div className="flex flex-col lg:flex-row gap-8 w-full items-start">
+            <div className="flex-1 w-full relative">
+                <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
+                   <div>
+                      <div className="flex items-center gap-3 mb-2">
+                         <div className="w-12 h-1 bg-gradient-to-r from-purple-400 to-blue-600 rounded-full"></div>
+                         <span className="text-purple-400 font-bold tracking-widest uppercase text-sm">Avisos</span>
+                      </div>
+                      <h2 className="text-4xl font-outfit font-black text-white">Anuncios <span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-500">Recientes</span></h2>
+                   </div>
                 </div>
-                <h3 className="text-2xl font-black font-outfit text-white mb-2 relative z-10">Sin Anuncios Recientes</h3>
-                <p className="text-slate-400 relative z-10">El mercado se encuentra a la espera de nuevas ofertas globales.</p>
-             </div>
-        ) : (
-             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-               {posts.map((post) => {
-                 const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c';
-                 const ENDPOINT = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://appwrite.almeira.com.co/v1';
-                 let imagenUrl = post.og_image_url || null;
 
-                 if (post.resolved_media) {
-                    imagenUrl = `${ENDPOINT}/storage/buckets/${post.resolved_media.bucket_id}/files/${post.resolved_media.file_id}/preview?project=${PROJECT_ID}&width=800&height=500&quality=85`;
-                 }
+                {posts.length === 0 ? (
+                     <div className="w-full py-20 flex flex-col items-center justify-center border border-white/5 rounded-3xl glass-panel relative overflow-hidden">
+                        <div className="p-6 rounded-full bg-slate-800/80 mb-6 border border-white/10 relative z-10">
+                           <Sparkles size={48} className="text-purple-500" />
+                        </div>
+                        <h3 className="text-2xl font-black font-outfit text-white mb-2 relative z-10">Sin Anuncios Recientes</h3>
+                        <p className="text-slate-400 relative z-10">El mercado se encuentra a la espera de nuevas ofertas globales.</p>
+                     </div>
+                ) : (
+                     <div className={`grid grid-cols-1 md:grid-cols-2 ${hasSidebar ? 'lg:grid-cols-2 xl:grid-cols-3' : 'lg:grid-cols-3 xl:grid-cols-4'} gap-6`}>
+                       {posts.map((post) => {
+                         const PROJECT_ID = process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '69b84df5003bd8957c5c';
+                         const ENDPOINT = process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || 'https://appwrite.almeira.com.co/v1';
+                         let imagenUrl = post.og_image_url || null;
 
-                 return (
-                    <NewsCard 
-                        key={post.$id}
-                        id={post.$id}
-                        slug={post.slug || post.$id}
-                        titulo={post.titulo}
-                        resumen={post.resumen_redes || post.contenido?.replace(/<[^>]*>?/gm, '').substring(0, 150) + '...'}
-                        tipo="Aviso"
-                        fecha={post.fecha_publicacion || post.$createdAt}
-                        imagenUrl={imagenUrl}
-                        showCategory={cardSettings.showCategory}
-                        showFooterDate={cardSettings.showFooterDate}
-                        showFooterButton={cardSettings.showFooterButton}
-                        footerText={cardSettings.footerText}
-                    />
-                 )
-               })}
-             </div>
-        )}
+                         if (post.resolved_media) {
+                            imagenUrl = `${ENDPOINT}/storage/buckets/${post.resolved_media.bucket_id}/files/${post.resolved_media.file_id}/preview?project=${PROJECT_ID}&width=800&height=500&quality=85`;
+                         }
+
+                         return (
+                            <NewsCard 
+                                key={post.$id}
+                                id={post.$id}
+                                slug={post.slug || post.$id}
+                                titulo={post.titulo}
+                                resumen={post.resumen_redes || post.contenido?.replace(/<[^>]*>?/gm, '').substring(0, 150) + '...'}
+                                tipo="Aviso"
+                                fecha={post.fecha_publicacion || post.$createdAt}
+                                imagenUrl={imagenUrl}
+                                showCategory={cardSettings.showCategory}
+                                showFooterDate={cardSettings.showFooterDate}
+                                showFooterButton={cardSettings.showFooterButton}
+                                footerText={cardSettings.footerText}
+                            />
+                         )
+                       })}
+                     </div>
+                )}
+            </div>
+
+            {hasSidebar && (
+                <aside className="w-full lg:w-[320px] xl:w-[360px] shrink-0 mt-8 lg:mt-0 sticky top-24">
+                    <GlobalSidebar />
+                </aside>
+            )}
+        </div>
       </section>
     </main>
   );