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

"use client";

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

export default function TestimonialsSection() {
  const t = useTranslations("Testimonials");

  const reviews = t.raw("reviews") as Array<{
    name: string;
    skinType: string;
    text: string;
  }>;

  return (
    <section className="py-24 lg:py-32 bg-[#F0F7FA]">
      <div className="max-w-[1400px] mx-auto px-6">
        <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">
            {t("title")}
          </h2>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {reviews.map((review, index) => (
            <motion.div
              key={index}
              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"
            >
              <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>

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

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

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