Las Reseñas: la prueba social que convierte

---
// USO BÁSICO · una sola sección de reseñas hardcodeada, fuera de cualquier
// layout schema-driven. El componente NO emite JSON-LD por sí solo —no hay
// prop emitSchema— así que esta página no añade nada al grafo. Patrón
// idéntico al de la home actual de ejemplos.mx.
import ReviewCard from '@components/ReviewCard.astro'
import SectionHeading from '@components/SectionHeading.astro'

const reviews = [
  {
    quote: 'El sitio quedó listo en 9 días y no he tenido que tocar el código.',
    name: 'María González',
    role: 'Directora · Estudio de arquitectura',
    rating: 5,
  },
  {
    quote: 'Lo que más me sorprendió fue la velocidad y la facilidad de edición.',
    name: 'Luis Hernández',
    role: 'Fundador · Servicios industriales',
    rating: 5,
  },
  {
    quote: 'Pedí algo sencillo y obtuve uno que se ve serio. Mucha confianza.',
    name: 'Ana Patricia Ruiz',
    role: 'Consultora independiente',
    rating: 4,
  },
]
---

<section class="section section--surface">
  <div class="container">
    <SectionHeading
      eyebrow="Prueba social"
      title="Lo que dicen nuestros clientes"
      desc="Reseñas reales de proyectos publicados en los últimos seis meses."
    />
    <div class="reviews-grid">
      {reviews.map((r) => (
        <ReviewCard
          quote={r.quote}
          name={r.name}
          role={r.role}
          rating={r.rating}
        />
      ))}
    </div>
  </div>
</section>

<style>
  .reviews-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  @media (min-width: 640px)  { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
</style>

---
// DATA-DRIVEN DESDE UNA COLECCIÓN `reviews` · cómo se mantendría con
// reseñas reales sin tocar la página. La fuente única es una colección
// de Content Collections (Markdown frontmatter validado por Zod), igual
// que servicios/ y productos/. Cada reseña vive en un .md con frontmatter
// {quote, name, role, rating, date, source}; si la marca trae permiso por
// escrito, source apunta a la URL de la reseña original (Google Business).
import { getCollection } from 'astro:content'
import ReviewCard from '@components/ReviewCard.astro'

// Define la colección en src/content/config.ts:
//   const reviews = defineCollection({
//     schema: z.object({
//       quote:  z.string().min(10),
//       name:   z.string(),
//       role:   z.string().optional(),
//       rating: z.number().int().min(1).max(5),
//       date:   z.string(),                // ISO 'YYYY-MM-DD'
//       source: z.string().url().optional(),
//     }),
//   })
//   export const collections = { reviews }

// Cargar reseñas, ordenar por fecha desc, tomar las 6 más recientes.
const reviews = (await getCollection('reviews'))
  .sort((a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime())
  .slice(0, 6)
---

<section class="section section--surface">
  <div class="container">
    <div class="reviews-grid">
      {reviews.map((r) => (
        <ReviewCard
          quote={r.data.quote}
          name={r.data.name}
          role={r.data.role}
          rating={r.data.rating}
        />
      ))}
    </div>
  </div>
</section>

{/* Notar: el data del frontmatter incluye `source` (URL externa) y `date`,
    pero el ReviewCard hoy ignora esos campos. Para enchufarlos en la card
    haría falta extender el componente (variante «Con fuente externa»). Para
    el JSON-LD, `date` y `name` son obligatorios en reviewSchema(). */}

---
// INTEGRACIÓN CON SCHEMA Review / AggregateRating · DÓNDE VIVE EL EMISOR.
// Regla dura B3: UN único emisor por página. Regla dura B4: NUNCA emitir
// aggregateRating sin reseñas REALES de terceros verificables (Google
// Business Profile, Trustpilot…). Por eso el gate global SITE.allowSelfReviews
// está en false por default y el helper reviewSchema() es una función PURA
// (no gateada) que el llamador decide cuándo usar.
//
// CAVEAT (alineado con faqSchema · mayo 2026): Google solo pinta estrellas
// en la SERP para algunos tipos schema (Product/Recipe/Movie/Book). Para
// LocalBusiness/Service el schema sigue siendo válido y útil para entender
// la entidad, pero no esperes el efecto visual de las amarillas.
import PageLayout from '@layouts/PageLayout.astro'
import ReviewCard from '@components/ReviewCard.astro'
import { reviewSchema, type Review } from '@lib/seo'

// Reseñas reales y verificables (en este ejemplo, importadas de Google
// Business Profile vía export semanal). Mantén la trazabilidad de la fuente.
const reviews: Review[] = [
  { author: 'María González', text: 'El sitio quedó listo en 9 días.', rating: 5, date: '2026-05-14' },
  { author: 'Luis Hernández',  text: 'La velocidad fue la sorpresa.',   rating: 5, date: '2026-04-22' },
  { author: 'Ana Patricia Ruiz', text: 'Sencillo pero se ve serio.',    rating: 4, date: '2026-03-30' },
]

// Opción A · COMPONER UN NODO A MANO con reviewSchema (no enchufado al
// grafo automáticamente — el llamador lo añade a un nodo Service o Product
// en el grafo de la página). Útil cuando la entidad reviewada vive aquí.
const reviewBlock = reviewSchema({ items: reviews })
// reviewBlock = { aggregateRating: {...}, review: [...] }
// Spread dentro de un nodo Service que tú compones aquí, o pásalo como
// extraSchema={[...]} al PageLayout si tu layout lo soporta.
---

<PageLayout
  title="Servicios — desarrollo web profesional"
  description="Sitios Astro listos para producción con reseñas reales."
  pageType="service"
  data={{
    service: {
      name: 'Desarrollo web Astro',
      description: 'Sitios Astro listos para producción.',
      path: '/servicios/desarrollo-web',
      reviews,  // ← productSchema/serviceSchema delegan a emitReviews(),
                //   que gatea por SITE.allowSelfReviews y emite solo si
                //   el gate global está en true. Patrón canónico.
    },
  }}
>
  <section class="section">
    <div class="container">
      {reviews.map((r) => (
        <ReviewCard quote={r.text} name={r.author} role={undefined} rating={r.rating} />
      ))}
    </div>
  </section>
</PageLayout>

{/* Opción B · DEJAR QUE serviceSchema emita aggregateRating + review[]:
    Es el camino canónico: pasar reviews dentro de data.service.reviews y
    activar SITE.allowSelfReviews=true en site.ts si y solo si las reseñas
    son verificables. emitReviews() valida los campos y descarta inválidas.

    Opción C (debug) · ARMAR EL NODO A MANO para inspeccionarlo:
    import { reviewSchema } from '@lib/seo'
    const node = reviewSchema({ items: reviews })
    // node = { aggregateRating: {...}, review: [...] }

    NUNCA dos emisores a la vez (regla B3): si serviceSchema ya emitió
    aggregateRating, no lo emitas otra vez con reviewSchema en el mismo
    nodo —se duplica y Google ignora el rich result—. */}