"use client";

import { motion } from "framer-motion";
import { Star } from "lucide-react";

export default function Testimonials() {
  const testimonials = [
    {
      content: "Absolutely love the food! It honestly feels like I'm eating at home. The rotis are soft, and the sabzi is perfectly spiced—not too oily.",
      author: "Rahul S.",
      role: "IT Professional, Sector 62",
      rating: 5,
    },
    {
      content: "I've tried many tiffin services in Noida, but Hometiffino is by far the best. Their delivery is always on time, and the variety keeps me coming back.",
      author: "Priya M.",
      role: "Student, Amity University",
      rating: 5,
    },
    {
      content: "The packaging is top-notch. No spills ever. More importantly, the food is hygienic and easy on the stomach. Highly recommend their monthly plan!",
      author: "Amit K.",
      role: "Banker, Sector 18",
      rating: 4,
    },
  ];

  return (
    <section id="testimonials" className="py-20 bg-white overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-base text-orange-500 font-semibold tracking-wide uppercase">Testimonials</h2>
          <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
            Loved by Noida
          </p>
          <p className="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
            Don&apos;t just take our word for it. Here&apos;s what our happy customers have to say about our food.
          </p>
        </div>

        <div className="mt-12 grid gap-8 lg:grid-cols-3 lg:gap-x-8">
          {testimonials.map((testimonial, index) => (
            <motion.div
              key={testimonial.author}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="bg-orange-50 rounded-2xl p-8 relative"
            >
              <div className="flex text-orange-400 mb-4">
                {[...Array(5)].map((_, i) => (
                  <Star
                    key={i}
                    className={`h-5 w-5 ${i < testimonial.rating ? "fill-current" : "text-gray-300"}`}
                  />
                ))}
              </div>
              <p className="text-gray-600 text-lg mb-6 italic">&quot;{testimonial.content}&quot;</p>
              <div className="mt-auto">
                <p className="text-base font-semibold text-gray-900">{testimonial.author}</p>
                <p className="text-sm text-gray-500">{testimonial.role}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}