export default function Testimonials() {
  // Replace or extend these with real quotes/metrics when available.
  const metrics = [
    { title: "+38% faster TTFB", sub: "after Cloudflare tuning" },
    { title: "DMARC p=reject", sub: "in 48 hours, spoofing blocked" },
    { title: "7m 12s restore", sub: "backup drill to full recovery" },
  ];

  const quotes = [
    {
      quote:
        "Our forms finally land in the inbox and the site is measurably faster. The before/after report made it an easy yes.",
      name: "Marketing Lead",
      company: "B2B Services SMB",
    },
    {
      quote:
        "They implemented, tested, and documented everything in two days. We now have backups that actually restore.",
      name: "Founder",
      company: "E-commerce SME",
    },
  ];

  return (
    <section
      aria-labelledby="testimonials-heading"
      className="relative py-24 bg-gradient-to-b from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950"
    >
      <div className="container mx-auto max-w-6xl px-4">
        <h2
          id="testimonials-heading"
          className="text-center text-3xl sm:text-4xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
        >
          Proof we deliver
        </h2>

        {/* Metric badges */}
        <div className="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-4xl mx-auto">
          {metrics.map((m) => (
            <div
              key={m.title}
              className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-5 text-center"
            >
              <p className="text-2xl font-bold text-neutral-900 dark:text-white">{m.title}</p>
              <p className="text-sm text-neutral-600 dark:text-neutral-400">{m.sub}</p>
            </div>
          ))}
        </div>

        {/* Quotes */}
        <div className="mt-12 grid gap-6 sm:grid-cols-2">
          {quotes.map((q, i) => (
            <figure
              key={i}
              className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-6 shadow-sm"
            >
              <blockquote className="text-neutral-800 dark:text-neutral-200">
                “{q.quote}”
              </blockquote>
              <figcaption className="mt-4 text-sm text-neutral-600 dark:text-neutral-400">
                — {q.name}, {q.company}
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}