"use client";

import { m } from "framer-motion";
import { SectionHeading } from "@/components/patterns/SectionHeading";
import { Testimonial } from "@/components/patterns/Testimonial";
import { fadeUp, staggerContainer, scrollReveal } from "@/lib/motion";

/**
 * Section 14 — Testimonials.
 * Attribution is anonymized by role and sector rather than naming specific people
 * or organizations — ROPTS has not yet collected consented, attributable client
 * quotes, and inventing named endorsements would misrepresent real clients.
 * Replace with real, consented quotes (name + organization) as they're collected.
 */
const testimonials = [
  {
    quote: "We had been sending the same deck to forty investors for months. ROPTS told us exactly what was missing before we sent it to anyone.",
    name: "Founder",
    role: "Seed-stage clean energy startup",
    organization: "India",
  },
  {
    quote: "Most fundraising platforms treat us like a mailing list. ROPTS registered our mandate once and only sent NGOs that actually matched it.",
    name: "CSR Head",
    role: "Manufacturing sector corporate",
    organization: "India",
  },
  {
    quote: "The readiness review caught governance gaps in our documentation before a funder ever saw them.",
    name: "Program Director",
    role: "Regional NGO",
    organization: "India",
  },
];

export function TestimonialsSection() {
  return (
    <section aria-labelledby="testimonials-heading" className="border-b border-line bg-paper section-texture py-24">
      <div className="container">
        <SectionHeading id="testimonials-heading" eyebrow="From the Network" title="What founders, NGOs, and CSR partners say." />

        <m.div
          initial="hidden"
          whileInView="visible"
          viewport={scrollReveal}
          variants={staggerContainer}
          className="mt-14 grid gap-10 md:grid-cols-3"
        >
          {testimonials.map((t) => (
            <m.div key={t.quote} variants={fadeUp}>
              <Testimonial {...t} />
            </m.div>
          ))}
        </m.div>
      </div>
    </section>
  );
}