import { Star } from "lucide-react";
import ScrollReveal from "@/components/ScrollReveal";

interface Testimonial {
  text: string;
  name: string;
  from: string;
}

interface TestimonialsSectionProps {
  testimonials: Testimonial[];
  lang: string;
}

export default function TestimonialsSection({ testimonials, lang }: TestimonialsSectionProps) {
  return (
    <section className="py-28 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <ScrollReveal className="text-center mb-16">
          <span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
            {lang === "en" ? "Guest Reviews" : "Misafir Yorumları"}
          </span>
          <h2 className="font-serif text-5xl font-bold text-dark">
            {lang === "en" ? "Experiences" : "Deneyimler"}
          </h2>
        </ScrollReveal>

        <ScrollReveal stagger className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {testimonials.map((t, i) => (
            <div key={i} className="relative bg-sand rounded-2xl p-8 border border-sand overflow-hidden">
              {/* Large decorative quote */}
              <span className="absolute top-3 right-5 font-serif text-[8rem] leading-none text-primary/8 select-none">
                "
              </span>
              {/* Stars */}
              <div className="flex gap-1 mb-5 relative z-10">
                {Array.from({ length: 5 }).map((_, j) => (
                  <Star key={j} className="w-3.5 h-3.5 text-accent" fill="#E87040" />
                ))}
              </div>
              <p className="text-foreground/75 text-[13px] leading-relaxed mb-6 relative z-10 italic">
                "{t.text}"
              </p>
              <div className="flex items-center gap-3 relative z-10">
                <div className="w-9 h-9 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                  <span className="text-primary font-bold text-sm">{t.name[0]}</span>
                </div>
                <div>
                  <span className="block font-semibold text-dark text-sm">{t.name}</span>
                  <span className="text-muted text-xs">{t.from}</span>
                </div>
              </div>
            </div>
          ))}
        </ScrollReveal>
      </div>
    </section>
  );
}