import React from 'react';
import { Star, BadgeCheck } from 'lucide-react';

const REVIEWS = [
  {
    name: "Alex Chen",
    role: "Software Engineer",
    text: "Finally, an app that understands biology. No red text, just adjustments. I treat my body like a system now, not a moral failing.",
    rating: 5
  },
  {
    name: "Sarah Jenkins",
    role: "Product Manager",
    text: "The Training Day toggle is a game changer for my hypertrophy blocks. I eat 800 calories more on leg days and I'm leaner than ever.",
    rating: 5
  },
  {
    name: "Marcus Ford",
    role: "Powerlifter",
    text: "I used to binge after 'failing' my diet. FitMate just recalculates the route. It's removed the anxiety completely.",
    rating: 5
  },
  {
    name: "Elena R.",
    role: "Marathon Runner",
    text: "The fueling strategies for long run days vs recovery days are spot on. My recovery metrics have never been better.",
    rating: 5
  },
  {
    name: "David Kim",
    role: "Data Analyst",
    text: "Love the trend weight visualization. Scale weight is so noisy, this app helps me see the signal in the noise.",
    rating: 5
  },
  {
    name: "Jessica T.",
    role: "CrossFit Athlete",
    text: "It doesn't just track; it directs. I wake up and know exactly what the mission is for the day.",
    rating: 5
  }
];

export const Testimonials: React.FC = () => {
  return (
    <section id="reviews" className="py-32 bg-background relative scroll-mt-32">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-20">
           <h2 className="text-4xl md:text-6xl font-bold text-white mb-6 tracking-tighter">
             Trust the <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-blue-500">Process</span>.
           </h2>
           <p className="text-xl text-gray-400">
             Join thousands of high-performers who stopped guessing.
           </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {REVIEWS.map((review, idx) => (
             <div key={idx} className="p-8 rounded-3xl bg-surfaceHighlight border border-white/5 hover:border-primary-500/20 transition-colors duration-300 flex flex-col h-full">
                <div className="flex gap-1 mb-4">
                  {[...Array(review.rating)].map((_, i) => (
                    <Star key={i} size={16} fill="#22d3ee" className="text-primary-400" strokeWidth={0} />
                  ))}
                </div>
                <p className="text-gray-300 leading-relaxed mb-6 flex-1">
                  "{review.text}"
                </p>
                <div className="flex items-center justify-between mt-auto pt-6 border-t border-white/5">
                   <div>
                      <div className="font-bold text-white text-sm">{review.name}</div>
                      <div className="text-xs text-gray-500">{review.role}</div>
                   </div>
                   <BadgeCheck className="text-primary-500 w-5 h-5" />
                </div>
             </div>
           ))}
        </div>

      </div>
    </section>
  );
};