"use client";

import { motion } from "framer-motion";
import { Star, Quote } from "lucide-react";
import { Reveal, Stagger, staggerItem } from "@/components/reveal";
import { testimonials } from "@/data/testimonials";

export function Testimonials() {
  return (
    <section className="section-pad relative">
      <div className="container">
        <div className="mx-auto max-w-2xl text-center">
          <Reveal>
            <span className="eyebrow">Loved by teams</span>
          </Reveal>
          <Reveal delay={0.1}>
            <h2 className="mt-5 text-3xl font-bold tracking-tight text-ink-900 sm:text-5xl dark:text-white">
              Businesses see the difference fast
            </h2>
          </Reveal>
        </div>

        <Stagger className="mt-16 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {testimonials.map((t) => (
            <motion.div
              key={t.name}
              variants={staggerItem}
              whileHover={{ y: -6 }}
              transition={{ type: "spring", stiffness: 300, damping: 20 }}
              className="relative flex h-full flex-col rounded-3xl border border-ink-900/8 bg-white p-7 shadow-card dark:border-white/10 dark:bg-white/[0.03] dark:shadow-card-dark"
            >
              <Quote className="h-7 w-7 text-whatsapp/30" />
              <div className="mt-3 flex gap-0.5">
                {Array.from({ length: t.rating }).map((_, i) => (
                  <Star key={i} className="h-4 w-4 fill-whatsapp text-whatsapp" />
                ))}
              </div>
              <p className="mt-4 flex-1 text-sm leading-relaxed text-ink-600 dark:text-white/60">
                &ldquo;{t.quote}&rdquo;
              </p>
              <div className="mt-6 flex items-center gap-3 border-t border-ink-900/5 pt-5 dark:border-white/10">
                <span className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-whatsapp to-whatsapp-dark text-sm font-bold text-white">
                  {t.initials}
                </span>
                <div>
                  <p className="text-sm font-semibold text-ink-900 dark:text-white">{t.name}</p>
                  <p className="text-xs text-ink-400 dark:text-white/40">
                    {t.role}, {t.company}
                  </p>
                </div>
              </div>
            </motion.div>
          ))}
        </Stagger>
      </div>
    </section>
  );
}