import { motion } from 'framer-motion'
import { Backpack, Shirt, Users, Heart, School, Home } from 'lucide-react'
import { SectionHeader } from '../ui/SectionHeader'

export function ProgramsSection() {
  const programs = [
    {
      icon: Backpack,
      title: "School Supplies",
      description: "Essential learning materials including notebooks, pens, calculators, and art supplies",
      impact: "2,847 students equipped",
      color: "from-blue-500 to-blue-600"
    },
    {
      icon: Shirt,
      title: "Clothing Support",
      description: "Quality clothing, shoes, and seasonal items to help students feel confident",
      impact: "1,203 wardrobes completed",
      color: "from-green-500 to-green-600"
    },
    {
      icon: Users,
      title: "Emergency Assistance",
      description: "Rapid response for urgent family needs including food, shelter, and utilities",
      impact: "856 families supported",
      color: "from-red-500 to-red-600"
    },
    {
      icon: School,
      title: "Educational Technology",
      description: "Laptops, tablets, and internet access for remote learning success",
      impact: "645 devices provided",
      color: "from-purple-500 to-purple-600"
    },
    {
      icon: Heart,
      title: "Mentorship Programs",
      description: "One-on-one support and guidance for academic and personal growth",
      impact: "432 mentor relationships",
      color: "from-pink-500 to-pink-600"
    },
    {
      icon: Home,
      title: "Family Support Services",
      description: "Comprehensive assistance for housing, transportation, and childcare",
      impact: "298 families stabilized",
      color: "from-orange-500 to-orange-600"
    }
  ]

  return (
    <section className="py-20 bg-white dark:bg-gray-900">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeader
          eyebrow="Our Programs"
          title="Comprehensive Student Support"
          subtitle="We provide holistic assistance that addresses the full spectrum of student needs"
        />
        
        <div className="mt-16 grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {programs.map((program, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1 }}
              className="card group hover:shadow-xl transition-all duration-300"
            >
              <div className={`w-16 h-16 mb-6 bg-gradient-to-br ${program.color} rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300`}>
                <program.icon className="h-8 w-8 text-white" />
              </div>
              
              <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-white">
                {program.title}
              </h3>
              
              <p className="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
                {program.description}
              </p>
              
              <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
                <p className="text-sm font-medium text-primary-600 dark:text-primary-400">
                  📊 {program.impact}
                </p>
              </div>
            </motion.div>
          ))}
        </div>
        
        {/* Call to Action */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="mt-16 text-center"
        >
          <a
            href="#/request-assistance"
            className="btn-primary inline-flex items-center justify-center"
          >
            Request Program Support
            <Backpack className="ml-2 h-5 w-5" />
          </a>
        </motion.div>
      </div>
    </section>
  )
}

export default ProgramsSection