Testimonials

// Edit the content below to customize your testimonials
const TESTIMONIALS = [
  {
    quote: 'This library cut our build time in half. Every component just works out of the box.',
    name: 'Sara Chen',
    role: 'Product Designer, Nova',
    initials: 'SC'
  },
  {
    quote: 'Clean code, no bloat. We copy, paste, and ship. Exactly what a component library should be.',
    name: 'James Ortiz',
    role: 'Frontend Lead, Fable',
    initials: 'JO'
  },
  {
    quote: 'The dark mode support alone saved us days of work. Everything matches out of the box.',
    name: 'Priya Nair',
    role: 'Founder, Loop',
    initials: 'PN'
  }
]

export default function Testimonials() {
  return (
    <section className="px-6 py-16">
      <div className="mx-auto max-w-5xl grid grid-cols-1 md:grid-cols-3 gap-5">
        {TESTIMONIALS.map((t) => (
          <div
            key={t.name}
            className="flex flex-col rounded-2xl border border-[#E5E5E5] dark:border-[#3A3A3A] bg-white dark:bg-[#161616] p-6"
          >
            <p className="text-[14px] leading-relaxed text-[#1d1d1f] dark:text-[#f5f5f7]">
              “{t.quote}”
            </p>
            <div className="mt-6 flex items-center gap-3">
              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#1d1d1f] dark:bg-white text-[12px] font-semibold text-white dark:text-[#1d1d1f]">
                {t.initials}
              </div>
              <div>
                <p className="text-[13px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7]">{t.name}</p>
                <p className="text-[12px] text-[#6e6e73] dark:text-[#a1a1a6]">{t.role}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}