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

const reviews = [
  { name: "Rahul S.", role: "Swing Trader", text: "The live mentorship completely changed how I read charts. The risk management module alone is worth it." },
  { name: "Priya M.", role: "Beginner", text: "I started with zero knowledge. Now I confidently take trades with proper stop-loss. Best decision!" },
  { name: "Arjun D.", role: "Pro Plan Student", text: "Smart Money Concepts and live sessions are top-notch. Mentor explains everything in simple language." },
  { name: "Sneha K.", role: "Elite Member", text: "1-on-1 guidance and the funding account support helped me get my first funded account. Highly recommend." },
];

export function Testimonials() {
  return (
    <section id="testimonials" className="mx-auto max-w-7xl px-4 py-24 md:px-8">
      <Reveal>
        <div className="mx-auto max-w-3xl text-center">
          <div className="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
            Student Stories
          </div>
          <h2 className="mt-4 text-4xl font-bold md:text-5xl">
            Loved by <span className="text-gradient-primary">5000+ traders</span>
          </h2>
        </div>
      </Reveal>
      <div className="mt-14 grid gap-5 md:grid-cols-2 lg:grid-cols-4">
        {reviews.map((r, i) => (
          <Reveal key={r.name} delay={i * 100}>
            <div className="group relative h-full overflow-hidden rounded-3xl border border-border bg-surface-elevated p-6 shadow-card transition-all hover:-translate-y-2 hover:shadow-glow">
              <Quote className="absolute right-4 top-4 h-10 w-10 text-primary/10 transition-transform group-hover:scale-125" />
              <div className="flex gap-0.5 text-[color:var(--gold)]">
                {Array.from({ length: 5 }).map((_, j) => (
                  <Star key={j} className="h-4 w-4 fill-current" />
                ))}
              </div>
              <p className="mt-4 text-sm leading-relaxed text-foreground/90">"{r.text}"</p>
              <div className="mt-6 flex items-center gap-3 border-t border-border pt-4">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-primary text-sm font-bold text-primary-foreground shadow-glow">
                  {r.name[0]}
                </div>
                <div>
                  <div className="text-sm font-semibold">{r.name}</div>
                  <div className="text-xs text-muted-foreground">{r.role}</div>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}
