import React from 'react';
import { Section } from './Section';
import { Card } from './Card';

/**
 * Testimonials Section component
 * Showcases stories and feedback from beneficiaries
 */
export const Testimonials: React.FC = () => {
  const testimonials = [
    {
      quote: "The education program gave my children hope for a better future. Now they're thriving in school and dreaming big.",
      author: "Fatima A.",
      role: "Community Member",
      location: "Kabul Province"
    },
    {
      quote: "Thanks to the microfinance initiative, I was able to start my own business and support my family independently.",
      author: "Ahmad K.",
      role: "Entrepreneur",
      location: "Herat Province"
    },
    {
      quote: "The healthcare services provided to our village have been life-changing. We're grateful for the dedicated team.",
      author: "Zahra R.",
      role: "Village Leader",
      location: "Balkh Province"
    }
  ];
  
  return (
    <Section id="testimonials" background="gray">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-neutral-900 mb-4">
            Stories of Impact
          </h2>
          <p className="text-xl text-neutral-600 max-w-3xl mx-auto">
            Hear from the people whose lives have been transformed through our programs and your generous support.
          </p>
        </div>
        
        {/* Testimonials Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <Card key={index} padding="lg" hover>
              <div className="flex flex-col h-full">
                {/* Quote Icon */}
                <div className="text-primary-400 mb-4">
                  <svg className="w-10 h-10" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
                  </svg>
                </div>
                
                {/* Quote */}
                <p className="text-lg text-neutral-700 mb-6 flex-grow italic">
                  "{testimonial.quote}"
                </p>
                
                {/* Author */}
                <div className="border-t border-neutral-200 pt-4">
                  <div className="font-semibold text-neutral-900">
                    {testimonial.author}
                  </div>
                  <div className="text-sm text-neutral-600">
                    {testimonial.role}
                  </div>
                  <div className="text-sm text-primary-600 flex items-center mt-1">
                    <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
                    </svg>
                    {testimonial.location}
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>
        
        {/* Stats Section */}
        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          <div>
            <div className="text-4xl font-bold text-primary-600 mb-2">98%</div>
            <div className="text-neutral-600">Satisfaction Rate</div>
          </div>
          <div>
            <div className="text-4xl font-bold text-primary-600 mb-2">10K+</div>
            <div className="text-neutral-600">Success Stories</div>
          </div>
          <div>
            <div className="text-4xl font-bold text-primary-600 mb-2">4.9/5</div>
            <div className="text-neutral-600">Program Rating</div>
          </div>
          <div>
            <div className="text-4xl font-bold text-primary-600 mb-2">100%</div>
            <div className="text-neutral-600">Transparency</div>
          </div>
        </div>
      </div>
    </Section>
  );
};