import type { Metadata } from "next";
import Image from "next/image";

import { GlassCard } from "@/components/shared/glass-card";
import { getTestimonials } from "@/lib/data/testimonials";
import { buildCmsPageMetadata } from "@/lib/seo/page-metadata";

export const revalidate = 120;

export async function generateMetadata(): Promise<Metadata> {
  return buildCmsPageMetadata(
    "testimonials",
    "Testimonials",
    "Client outcomes and feedback from the Big Boyz Body coaching experience.",
    "/testimonials",
  );
}

export default async function TestimonialsPage() {
  const testimonials = await getTestimonials();
  return (
    <div className="ds-container ds-section">
      <h1 className="font-display text-4xl tracking-tight sm:text-5xl">Testimonials</h1>
      <p className="mt-4 max-w-2xl text-base leading-relaxed text-muted-foreground">
        Real humans. Real structure. Proof over promises.
      </p>
      <div className="mt-14 grid gap-6 md:grid-cols-2">
        {testimonials.map((t) => (
          <GlassCard key={t.id} variant="blue">
            <div className="flex items-center gap-3">
              <div className="relative size-14 overflow-hidden rounded-full border border-white/10">
                <Image src={t.image} alt={t.name} fill className="object-cover" sizes="56px" />
              </div>
              <div>
                <p className="font-semibold">{t.name}</p>
                <p className="text-xs text-muted-foreground">{t.role}</p>
              </div>
            </div>
            <p className="mt-4 text-muted-foreground">“{t.quote}”</p>
            <p className="mt-4 text-sm font-semibold text-primary">{t.result}</p>
          </GlassCard>
        ))}
      </div>
    </div>
  );
}