La Tarjeta de servicio: la cara breve del catálogo

---
// USO BÁSICO · una sola card hard-coded. La card requiere title +
// description + href. icon, image, badge y ctaLabel son opcionales.
// Si pasas whatsapp={true}, el CTA muta a botón verde y abre wa.me.
// Reglas duras: SVG con stroke="currentColor" + waUrl() para WhatsApp.
import ServiceCard from '@components/ServiceCard.astro'
import { waUrl, WA_MESSAGES } from '@config/site'

const iconShield = `<svg viewBox="0 0 24 24" width="28" height="28"
  fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
  <path d="m9 12 2 2 4-4"/></svg>`
---

<section class="section">
  <div class="container">
    <!-- Modo ícono (catálogo por defecto) -->
    <ServiceCard
      icon={iconShield}
      title="Consultoría de seguridad industrial"
      description="Diagnóstico y acompañamiento técnico para alinear tu operación a la NOM-035-STPS. Respuesta en 24 h."
      href="/servicios/consultoria"
      badge="POPULAR"
      ctaLabel="Ver servicio"
    />

    <!-- Modo WhatsApp directo (venta consultiva) -->
    <ServiceCard
      icon={iconShield}
      title="Cotización urgente"
      description="¿Necesitas el alcance hoy? Cotizamos por chat sin pasar por formulario."
      href={waUrl(WA_MESSAGES.urgente)}
      ctaLabel="Cotizar por WhatsApp"
      whatsapp
    />
  </div>
</section>

---
// DATA-DRIVEN DESDE getCollection · cómo lo consumiría
// /servicios/index.astro (no existe aún; la collection y el schema sí).
// La fuente única es la colección `servicios` (src/content/servicios/*.md),
// validada por Zod en src/content.config.ts. Filtrá drafts, ordená por
// order ASC. Cada servicio puede traer su ícono pre-cargado en data.icon
// (string SVG) o caer al ícono por categoría del SERVICES de site.ts.
import { getCollection, getEntry } from 'astro:content'
import ServiceCard from '@components/ServiceCard.astro'
import { SERVICES } from '@config/site'

// Mapa de íconos por categoría — el fallback cuando un servicio no trae el
// suyo. SERVICES vive en TAXONOMY (site.ts) → no se hardcodea aquí.
const ICONS: Record<string, string> = {
  consultoria:    iconShield,
  implementacion: iconRocket,
  soporte:        iconWrench,
}

// getEntry hidrata relaciones (relatedServices, hero) si se necesitan; aquí
// con la collection basta para el grid.
const servicios = (await getCollection('servicios', ({ data }) => !data.draft))
  .sort((a, b) => (a.data.order ?? 0) - (b.data.order ?? 0))
---

<div class="grid">
  {servicios.map((s) => (
    <ServiceCard
      title={s.data.title}
      description={s.data.description}
      href={`/servicios/${s.id}`}
      icon={ICONS[s.data.category]}
      image={s.data.image}
      imageAlt={s.data.title}
      badge={s.data.featured ? 'POPULAR' : undefined}
    />
  ))}
</div>

<style>
  /* Vitrina del catálogo de servicios: 1 → 2 → 3 por fila (servicios suelen
     ser menos que productos; 3 columnas es el sweet spot). */
  .grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
  @media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
</style>

---
// INTEGRACIÓN CON RelatedLinks · servicios relacionados dentro de una FICHA L4
// (ServiceLayout). En la ficha L4 NO se usan ServiceCard para «relacionados»:
// se usa RelatedLinks, un componente genérico de cross-linking (PROYECTORED:
// CategoriasRelacionadas.astro) que toma una lista plana de { label, href, desc }
// y los pinta como tiles compactos. Evita el bucle «card de catálogo dentro de
// ficha de catálogo» y deja a ServiceCard cumpliendo un solo papel: vitrina.
import { getEntry } from 'astro:content'
import RelatedLinks from '@components/RelatedLinks.astro'

// El servicio actual y sus relacionados (referencias tipadas vía Zod).
const servicio = await getEntry('servicios', Astro.params.slug as string)
if (!servicio) return Astro.redirect('/404')

// relatedServices es array<reference('servicios')>; getEntry resuelve cada uno.
const relacionados = await Promise.all(
  (servicio.data.relatedServices ?? []).map((ref) => getEntry(ref))
)

const links = relacionados
  .filter((s): s is NonNullable<typeof s> => !!s)
  .map((s) => ({
    label: s.data.title,
    href: `/servicios/${s.id}`,
    desc: s.data.description,
  }))
---

<RelatedLinks
  title="Servicios relacionados"
  desc="Otros servicios que suelen combinarse con éste."
  links={links}
  limit={3}
/>