import React from 'react';
import Image from 'next/image';
import { Button } from './Button';

/**
 * Ways to Help Section
 * Showcases different ways people can contribute
 */
export const WaysToHelp: React.FC = () => {
  const ways = [
    {
      image: 'https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?q=80&w=2070&auto=format&fit=crop',
      title: 'Monthly Giving',
      description: 'Provide sustained support with a monthly donation and create lasting change in communities.',
      cta: 'Become a Monthly Donor',
      amount: '$25/month'
    },
    {
      image: 'https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=2070&auto=format&fit=crop',
      title: 'Emergency Response',
      description: 'Help us respond quickly to disasters and emergencies affecting children and families.',
      cta: 'Donate to Emergencies',
      amount: 'One-time'
    },
    {
      image: 'https://images.unsplash.com/photo-1593113598332-cd288d649433?q=80&w=2070&auto=format&fit=crop',
      title: 'Sponsor a Child',
      description: 'Create a personal connection and help a child reach their full potential through education.',
      cta: 'Start Sponsoring',
      amount: '$36/month'
    }
  ];

  return (
    <section className="py-20 md:py-28 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-primary-500 mb-4">
            Ways You Can Help
          </h2>
          <p className="text-xl text-neutral-600 max-w-3xl mx-auto">
            Your support creates real change. Choose how you'd like to make an impact today.
          </p>
        </div>

        {/* Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
          {ways.map((way, index) => (
            <div 
              key={index}
              className="group bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300"
            >
              {/* Image */}
              <div className="relative h-64 overflow-hidden">
                <div 
                  className="absolute inset-0 bg-cover bg-center transform group-hover:scale-110 transition-transform duration-500"
                  style={{ backgroundImage: `url('${way.image}')` }}
                />
                <div className="absolute top-4 right-4">
                  <span className="px-4 py-2 bg-primary-500 text-neutral-900 rounded-full text-sm font-semibold shadow-lg">
                    {way.amount}
                  </span>
                </div>
              </div>

              {/* Content */}
              <div className="p-6">
                <h3 className="text-2xl font-bold text-neutral-900 mb-3">
                  {way.title}
                </h3>
                <p className="text-neutral-600 mb-6 leading-relaxed">
                  {way.description}
                </p>
                <Button 
                  variant="primary" 
                  size="md" 
                  fullWidth
                  className="group-hover:bg-primary-700"
                >
                  {way.cta}
                </Button>
              </div>
            </div>
          ))}
        </div>

        {/* Bottom CTA */}
        <div className="text-center">
          <p className="text-lg text-neutral-600 mb-4">
            Can't donate right now? There are other ways to help.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Button variant="outline" size="md">
              Volunteer
            </Button>
            <Button variant="outline" size="md">
              Fundraise
            </Button>
            <Button variant="outline" size="md">
              Spread the Word
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};