import { motion } from 'framer-motion';
import { Quote } from 'lucide-react';
import { testimonials } from '../../data/content';
import { GlassCard } from '../ui/GlassCard';
import { SectionShell } from '../ui/SectionShell';

export function Testimonials() {
  return (
    <section id="testimonials" className="relative py-20 md:py-28">
      <SectionShell
        eyebrow="Trusted"
        title="Dipercaya Organisasi Terdepan"
        subtitle="Rumah sakit, laundry medis, korporasi, dan manufacturing — semua membutuhkan visibilitas real-time yang sama."
      >
        <div className="grid gap-8 md:grid-cols-3">
          {testimonials.map((t) => (
            <GlassCard key={t.name} hover className="relative">
              <Quote className="absolute right-5 top-5 h-10 w-10 text-cyan-500/10" />
              <p className="relative text-sm leading-relaxed text-slate-300">&ldquo;{t.quote}&rdquo;</p>
              <div className="mt-6 flex items-center gap-3 border-t border-white/10 pt-5">
                <div className="flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-br from-cyan-400 to-sky-600 text-sm font-bold text-slate-950">
                  {t.name.charAt(0)}
                </div>
                <div>
                  <p className="font-semibold text-white">{t.name}</p>
                  <p className="text-xs text-slate-500">
                    {t.role} · {t.org}
                  </p>
                  <span className="mt-1 inline-block rounded-md bg-white/5 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-cyan-300">
                    {t.sector}
                  </span>
                </div>
              </div>
              <motion.div
                className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity hover:opacity-100"
                style={{
                  boxShadow: 'inset 0 0 60px rgba(34,211,238,0.06)',
                }}
              />
            </GlassCard>
          ))}
        </div>
      </SectionShell>
    </section>
  );
}
