import { FaQuoteLeft, FaStar, FaUsers } from "react-icons/fa";

const testimonials = [
  {
    name: "Rahul Verma",
    role: "Volunteer",
    message:
      "Working with Rajvi Social Welfare Trust has been a life-changing experience. The organization genuinely focuses on community welfare and grassroots impact.",
  },
  {
    name: "Pooja Sharma",
    role: "Community Member",
    message:
      "The education and healthcare awareness programs have helped many families in our area. Their efforts create real and lasting change.",
  },
  {
    name: "Amit Singh",
    role: "Supporter",
    message:
      "Transparency, dedication and community service are the core strengths of Rajvi Social Welfare Trust. Proud to support their mission.",
  },
];

export default function Testimonials() {
  return (
    <section className="relative overflow-hidden bg-slate-950 py-14 text-white sm:py-16 lg:py-24">
      <div className="absolute right-0 top-0 h-72 w-72 rounded-full bg-amber-400/10 blur-3xl" />

      <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-3xl text-center">
          <span className="inline-flex rounded-full bg-white/10 px-4 py-2 text-[11px] font-bold uppercase tracking-widest text-[var(--accent)] sm:text-xs">
            Community Voices
          </span>

          <h2 className="mt-4 text-3xl font-extrabold leading-tight sm:text-4xl lg:text-5xl">
            Together We Can Create Lasting Social Change
          </h2>

          <p className="mt-4 text-sm leading-7 text-slate-300 sm:text-base sm:leading-8">
            Rajvi Social Welfare Trust believes in collective action. Every
            volunteer, donor and supporter helps us reach more people with
            care, awareness and hope.
          </p>
        </div>

        <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6">
          {testimonials.map((item) => (
            <div
              key={item.name}
              className="rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-sm transition duration-300 hover:bg-white/10 sm:p-6"
            >
              <FaQuoteLeft className="text-2xl text-[var(--accent)]" />

              <p className="mt-4 text-sm leading-7 text-slate-300">
                {item.message}
              </p>

              <div className="mt-6 flex items-center gap-1 text-[var(--accent)]">
                <FaStar />
                <FaStar />
                <FaStar />
                <FaStar />
                <FaStar />
              </div>

              <div className="mt-5 border-t border-white/10 pt-4">
                <h3 className="font-bold text-white">{item.name}</h3>
                <p className="text-sm text-slate-400">{item.role}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 rounded-3xl border border-white/10 bg-white/5 p-6 backdrop-blur-sm sm:p-8">
          <div className="flex flex-col items-center gap-4 text-center md:flex-row md:text-left">
            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[var(--accent)] text-2xl text-black">
              <FaUsers />
            </div>

            <div>
              <h3 className="text-2xl font-extrabold text-white">
                Join Our Growing Community
              </h3>

              <p className="mt-2 text-sm leading-7 text-slate-300 sm:text-base">
                Together we can create opportunities, support families and
                build stronger communities through education, healthcare and
                social welfare initiatives.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}