'use client';

import React from 'react';

/**
 * Impact Section component
 * Minimalist professional design with clean icon presentation
 */
export const Impact: React.FC = () => {
  const impactAreas = [
    {
      icon: '📚',
      title: 'Education',
      description: 'Providing access to quality education and learning resources for children and adults.',
      stat: '2.5M+',
      statLabel: 'Students Educated',
      color: 'blue'
    },
    {
      icon: '🌾',
      title: 'Agriculture & Food Security',
      description: 'Livelihood skills that help families produce food and earn with more security.',
      stat: 'Women',
      statLabel: 'Livelihood programmes',
      color: 'amber'
    },
    {
      icon: '🎓',
      title: 'Youth Support',
      description: 'Vocational training, literacy, and leadership pathways for Afghan youth.',
      stat: '1,800+',
      statLabel: 'Vocational & literacy',
      color: 'teal'
    },
    {
      icon: '🌱',
      title: 'School Support',
      description: 'Libraries, computer labs, and renovated classrooms so children can keep learning.',
      stat: '13',
      statLabel: 'School libraries',
      color: 'green'
    },
    {
      icon: '👥',
      title: 'Community Building',
      description: 'Strengthening social bonds and creating inclusive spaces for all community members.',
      stat: '120+',
      statLabel: 'Communities Served',
      color: 'purple'
    },
    {
      icon: '🛡️',
      title: 'Emergency Relief',
      description: 'Providing rapid response and support during crises and natural disasters.',
      stat: '500K+',
      statLabel: 'Families Helped',
      color: 'red'
    }
  ];

  const overallStats = [
    { number: '$150M+', label: 'Funds Distributed' },
    { number: '95%', label: 'Program Efficiency' },
    { number: '500+', label: 'Active Volunteers' },
    { number: '5M+', label: 'Lives Changed' }
  ];
  
  return (
    <section id="impact" className="relative py-24 md:py-32 bg-white">
      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-20">
          <div className="inline-flex items-center gap-3 mb-6">
            <div className="h-0.5 w-16 bg-gradient-to-r from-transparent via-primary-500 to-primary-500" />
            <span className="px-6 py-2.5 bg-gradient-to-r from-primary-500 to-primary-400 text-neutral-900 rounded-full text-sm font-bold shadow-xl tracking-wide uppercase">
              Our Impact
            </span>
            <div className="h-0.5 w-16 bg-gradient-to-l from-transparent via-primary-500 to-primary-500" />
          </div>
          
          <h2 className="text-5xl md:text-6xl lg:text-7xl font-black text-primary-500 mb-6 leading-[1.1]">
            Making a{' '}
            <span className="relative inline-block">
              <span className="bg-gradient-to-r from-primary-500 via-primary-400 to-primary-500 bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient">
                Measurable Difference
              </span>
              <span className="absolute -bottom-2 left-0 right-0 h-3 bg-gradient-to-r from-primary-500/30 to-primary-600/30 blur-xl" />
            </span>
          </h2>
          
          <p className="text-xl md:text-2xl text-neutral-600 max-w-3xl mx-auto leading-relaxed font-light">
            We work across multiple sectors throughout Afghanistan to create comprehensive, sustainable change that addresses the root causes of poverty and inequality.
          </p>
        </div>
        
        {/* Impact Areas Grid - Minimalist Design */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
          {impactAreas.map((area, index) => (
            <div
              key={index}
              className="group relative bg-white rounded-xl p-8 border-2 border-neutral-100 hover:border-primary-200 transition-all duration-300 hover:shadow-lg"
            >
              <div className="relative">
                {/* Minimalist Icon - Large Emoji */}
                <div className="mb-6">
                  <div className="text-5xl mb-4 transform group-hover:scale-110 transition-transform duration-300">
                    {area.icon}
                  </div>
                </div>
                
                {/* Title */}
                <h3 className="text-2xl font-bold text-neutral-900 mb-3 group-hover:text-primary-600 transition-colors duration-300">
                  {area.title}
                </h3>
                
                {/* Description */}
                <p className="text-neutral-600 mb-6 leading-relaxed text-base">
                  {area.description}
                </p>
                
                {/* Stats - Minimalist */}
                <div className="pt-6 border-t border-neutral-100">
                  <div className="text-4xl font-black text-primary-600 mb-2">
                    {area.stat}
                  </div>
                  <div className="text-sm font-semibold text-neutral-500 uppercase tracking-wide">
                    {area.statLabel}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
        
        {/* Overall Stats Banner - Minimalist */}
        <div className="relative bg-gradient-to-r from-primary-500 to-primary-400 rounded-2xl p-12 md:p-16 text-neutral-900">
          <div className="text-center mb-12">
            <h3 className="text-3xl md:text-4xl font-bold mb-3">Overall Impact</h3>
            <p className="text-lg text-neutral-800/80">Numbers that tell our story</p>
          </div>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {overallStats.map((stat, index) => (
              <div
                key={index}
                className="text-center"
              >
                <div className="text-5xl md:text-6xl font-black mb-3">{stat.number}</div>
                <div className="text-base font-semibold text-neutral-800/80 uppercase tracking-wide">
                  {stat.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};