La Categoría a fondo: el bloque que profundiza

---
// USO BÁSICO · pásale las 4 props mínimas (eyebrow, title, body,
// gallery) y listo. La galería siempre lleva una main; los thumbs
// pueden ir vacíos. El componente se encarga del CLS (width/height),
// del lazy de las imágenes y del 2-col → 1-col en móvil.
import CategoryDetail from '@components/CategoryDetail.astro'
---

<section class="section">
  <div class="container">
    <CategoryDetail
      eyebrow="La categoría a fondo"
      title="Cascos de seguridad"
      body={[
        'Cascos homologados para industria pesada, ligeros y con barboquejo ajustable. Stock para entrega 24 h en CDMX y zona metropolitana, garantía de fábrica.',
        'Reposición de piezas, asesoría de uso y capacitación opcional para equipos grandes —el casco se cambia cuando toca, no cuando se ve gastado—.',
      ]}
      points={[
        'Homologación NOM-115-STPS y EN 397',
        'Entrega 24 h en CDMX (stock permanente)',
        'Reposición de barboquejo y suspensión',
        'Capacitación opcional para equipos grandes',
      ]}
      cta={{ label: 'Ver catálogo de cascos', href: '/productos/cascos' }}
      gallery={{
        main:   { src: '/images/showcase/cascos-seguridad-industrial.avif', alt: 'Cascos de seguridad industrial certificados, vista de catálogo' },
        thumbs: [
          { src: '/images/productos/cascos-construccion.avif',  alt: 'Cascos para obra de construcción' },
          { src: '/images/productos/cascos-accesorios.avif',    alt: 'Accesorios para cascos: barboquejo y suspensión' },
        ],
      }}
    />
  </div>
</section>

---
// DATA-DRIVEN DESDE UN MAP · cómo lo hace /modulos/index.astro.
// Una sola fuente (AFONDO en la página) alimenta los N bloques.
// Recorrer el array MODULOS de site.ts y por cada slug pintar su
// CategoryDetail: agregar un módulo a la SSoT se refleja aquí
// sin tocar el JSX.
import CategoryDetail from '@components/CategoryDetail.astro'
import { MODULOS } from '@config/site'

const AFONDO: Record<string, { body: string[]; points: string[] }> = {
  'topbar':  { body: [/* … */], points: [/* … */] },
  'header':  { body: [/* … */], points: [/* … */] },
  // …un objeto por cada módulo
}
const POOL = ['/images/showcase/a.avif', '/images/productos/b.avif', /* … */]
---

<div class="afondo">
  {MODULOS.map((m, i) => (
    <CategoryDetail
      eyebrow="El módulo a fondo"
      title={m.label}
      body={AFONDO[m.slug].body}
      points={AFONDO[m.slug].points}
      cta={m.estado === 'listo' ? { label: `Ver el módulo ${m.label}`, href: m.href } : undefined}
      gallery={{
        main:   { src: `/images/showcase/${m.slug}.avif`, alt: `Vista del módulo ${m.label}` },
        thumbs: [
          { src: POOL[(i + 1) % POOL.length], alt: `Detalle de ${m.label}` },
          { src: POOL[(i + 2) % POOL.length], alt: `Otro detalle de ${m.label}` },
        ],
      }}
    />
  ))}
</div>

<style>
  /* Regla del sitio: SIN zig-zag, gap uniforme entre bloques. */
  .afondo { display: grid; gap: clamp(2.5rem, 6vw, 5rem); margin-top: var(--sp-6); }
</style>

---
// REUSO DESDE EL CATÁLOGO · cómo cerrar la home sin duplicar datos.
// La vitrina (SHOWCASE) ya tiene cada categoría con su image, label,
// blurb y subcategorías. El bloque a fondo reusa label como title e
// image como gallery.main, y solo agrega el body largo y los puntos.
import CategoryDetail from '@components/CategoryDetail.astro'
import { SHOWCASE } from '@config/site'

// El body extendido y los puntos viven aparte (no caben en SHOWCASE,
// que se diseñó para la tarjeta corta). Map por slug:
const EXTENDIDO: Record<string, { body: string[]; points: string[] }> = {
  'cascos':   { body: [/* … */], points: [/* … */] },
  'botas':    { body: [/* … */], points: [/* … */] },
  // …una entrada por categoría destacada
}
---

<div class="afondo">
  {SHOWCASE.filter((c) => EXTENDIDO[c.slug]).map((c) => (
    <CategoryDetail
      eyebrow="La categoría a fondo"
      title={c.label}
      body={EXTENDIDO[c.slug].body}
      points={EXTENDIDO[c.slug].points}
      cta={{ label: `Ver catálogo de ${c.label}`, href: c.href }}
      gallery={{
        main:   { src: c.image, alt: `Catálogo de ${c.label}` },
        thumbs: c.subcategories.slice(0, 2).map((s) => ({
          src: s.image, alt: `Subcategoría ${s.label}`,
        })),
      }}
    />
  ))}
</div>