import { Star, Quote } from "lucide-react";
import { motion } from "motion/react";

export default function Testimonials() {
  const reviews = [
    {
      id: "review-1",
      name: "Liam Carter",
      role: "Product Architect, Apex Design Group",
      feedback: "Lumina Convert has been a lifesaver for our design team. We work with massive TIFF imagery & raw assets which used to stretch our client non-disclosure boundaries on web converters. Having a 100% offline local utility is incredibly powerful.",
      rating: 5,
      initials: "LC",
      gradient: "from-violet-500 to-indigo-500",
    },
    {
      id: "review-2",
      name: "Elena Rostova",
      role: "Operations Director, LegalTrust Systems",
      feedback: "Under strict regulatory guidelines, our corporate contracts and depositions cannot traverse cloud platforms. Lumina solves our compliance headaches beautifully. The 100% offline GPU processing is unbelievably rapid.",
      rating: 5,
      initials: "ER",
      gradient: "from-indigo-500 to-sky-500",
    },
    {
      id: "review-3",
      name: "James Thornton",
      role: "Senior Frontend Engineer, SynthTech",
      feedback: "I drop huge directory bundles of thousands of audio tracks and SVGs. Web converters crash or crawl. Lumina's standalone batch converting remains responsive, and the fact that it is 100% free with absolutely no hidden upgrades is phenomenal.",
      rating: 5,
      initials: "JT",
      gradient: "from-fuchsia-500 to-pink-500",
    },
  ];

  return (
    <section className="py-24 bg-gradient-to-b from-[#FAF9FE] to-white relative overflow-hidden">
      <div className="absolute top-1/4 right-0 w-96 h-96 bg-indigo-50 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 md:px-8 relative z-10">
        {/* Header */}
        <div className="text-center max-w-2xl mx-auto mb-16">
          <span className="text-xs font-bold font-mono tracking-wider text-violet-600 uppercase bg-violet-50 px-3.5 py-1.5 rounded-full">
            User Testimonials
          </span>
          <h2 className="font-display font-bold text-3xl sm:text-4xl text-slate-900 tracking-tight mt-4 mb-4">
            Trusted by creators &{" "}
            <span className="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
              professionals
            </span>
          </h2>
          <p className="text-slate-500 text-sm md:text-base font-light">
            Read how small business managers, designers, and compliance teams protect their data with our local converters.
          </p>
        </div>

        {/* Reviews grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="testimonials-reviews-grid">
          {reviews.map((review, i) => (
            <motion.div
              key={review.id}
              initial={{ opacity: 0, y: 15 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1, duration: 0.4 }}
              className="p-8 rounded-[24px] bg-white border border-slate-100/80 shadow-md shadow-slate-100/10 hover:shadow-xl hover:shadow-slate-200/20 text-left flex flex-col justify-between relative transition-all"
              id={review.id}
            >
              <Quote className="absolute right-6 top-6 w-12 h-12 text-slate-55/70 rotate-180 opacity-10 pointer-events-none" />

              <div>
                {/* Stars bar */}
                <div className="flex space-x-1 mb-5">
                  {[...Array(review.rating)].map((_, index) => (
                    <Star key={index} className="w-4 h-4 fill-amber-400 text-amber-400" />
                  ))}
                </div>

                <p className="text-slate-600 text-sm italic font-light leading-relaxed mb-6">
                  &ldquo;{review.feedback}&rdquo;
                </p>
              </div>

              <div className="flex items-center space-x-3.5 border-t border-slate-50/50 pt-5">
                <div className={`w-10 h-10 rounded-full bg-gradient-to-tr ${review.gradient} flex items-center justify-center text-white text-xs font-bold font-mono shadow-sm`}>
                  {review.initials}
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-slate-900">{review.name}</h4>
                  <p className="text-xs text-slate-500 font-medium">{review.role}</p>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}