manoon-headless/src/components/home/TestimonialsSection.tsx

"use client";

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

const testimonials = [
  {
    id: 1,
    name: "Sarah M.",
    skinType: "Dry, sensitive skin",
    text: "I've tried countless oils over the years, but ManoonOils is different. My skin has never felt this nourished and healthy. The argan oil is now a staple in my routine.",
    verified: true,
  },
  {
    id: 2,
    name: "James K.",
    skinType: "Hair care enthusiast",
    text: "Finally found an oil that actually tames my frizz without making my hair greasy. The jojoba oil works wonders for my beard too. Highly recommend!",
    verified: true,
  },
  {
    id: 3,
    name: "Emma L.",
    skinType: "Combination skin",
    text: "Was skeptical at first but after 3 weeks of using the rosehip oil, my skin texture has improved dramatically. The quality is unmatched.",
    verified: true,
  },
];

export default function TestimonialsSection() {
  return (
    <section className="py-24 lg:py-32 bg-[#F0F7FA]">
      <div className="max-w-[1400px] mx-auto px-6">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
            Testimonials
          </span>
          <h2 className="font-serif italic text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
            What our customers say
          </h2>
        </motion.div>

        {/* Testimonials Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {testimonials.map((testimonial, index) => (
            <motion.div
              key={testimonial.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              className="bg-white rounded-[6px] border border-[#1A1A1A]/[0.06] p-9 flex flex-col"
            >
              {/* Stars */}
              <div className="flex gap-1 mb-5">
                {[...Array(5)].map((_, i) => (
                  <Star
                    key={i}
                    className="w-4 h-4 fill-amber-400 text-amber-400"
                  />
                ))}
              </div>

              {/* Quote */}
              <p className="font-serif italic text-base lg:text-lg text-[#1A1A1A] leading-relaxed flex-1 mb-6">
                &ldquo;{testimonial.text}&rdquo;
              </p>

              {/* Author */}
              <div className="flex items-center justify-between pt-4 border-t border-[#1A1A1A]/[0.06]">
                <div>
                  <p className="text-sm font-medium text-[#1A1A1A]">
                    {testimonial.name}
                  </p>
                  <p className="text-xs text-[#4A4A4A]/70">
                    {testimonial.skinType}
                  </p>
                </div>

                {testimonial.verified && (
                  <div className="inline-flex items-center gap-1 text-[10px] tracking-wider uppercase text-emerald-600 font-medium">
                    <Check className="w-3 h-3" />
                    Verified purchase
                  </div>
                )}
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}