'use client'
import React from 'react';


import { Separator } from '../ui/separator'
import { Card } from '@/components/ui/card'
import { motion } from 'framer-motion'
import { BookOpen, Accessibility, CheckCircle2, Smile } from 'lucide-react'
import { Award, UserPlus, GraduationCap } from 'lucide-react'


const impactStats = [
  {
    number: "129+",
    label: "Students Placed",
    description: "Directly admitted to school through our initiative",
    icon: <UserPlus className="size-6 text-white" />,
    bg: "bg-blue-600"
  },
  {
    number: "43%",
    label: "Girls Ratio",
    description: "Percentage of girls among placed students",
    icon: <GraduationCap className="size-6 text-white" />,
    bg: "bg-rose-500"
  },
  {
    number: "Scholarships",
    label: "Awarded",
    description: "Financial support for deserving students",
    icon: <Award className="size-6 text-white" />,
    bg: "bg-green-500"
  },
]

const achievements = [
  {
    title: "Free & Compulsory Education",
    description: "Ensuring no child pays fees that hinder their elementary education",
    icon: <BookOpen className="w-6 h-6 text-white" />
  },
  {
    title: "Inclusive Access",
    description: "Breaking down barriers for disadvantaged and marginalized communities",
    icon: <Accessibility className="w-6 h-6 text-white" />
  },
  {
    title: "Quality Standards",
    description: "Maintaining pupil-teacher ratios and infrastructure norms",
    icon: <CheckCircle2 className="w-6 h-6 text-white" />
  },
  {
    title: "Child-Friendly Environment",
    description: "Education free from fear, trauma, and anxiety",
    icon: <Smile className="w-6 h-6 text-white" />
  }
]

export default function EducationImpact() {
  return (
    <section className="py-16 lg:py-24 bg-white">
      <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Section Header */}
        <div className="max-w-2xl text-center mx-auto mb-16">
          <div className="inline-flex justify-center gap-x-1.5 py-2 px-3 rounded-full text-xs font-bold bg-green-100 text-green-800 dark:bg-green-800/30 dark:text-green-500 mb-4">
            Our Impact
          </div>
          <h2 className="block font-bold text-gray-800 text-3xl sm:text-4xl md:text-5xl dark:text-neutral-200 mb-6">
            Transforming Lives Through <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Education</span>
          </h2>
          <p className="text-lg text-gray-600 dark:text-neutral-400">
            Small acts of support create lasting impact. Join us—when you help a child access education through our platform, you&apos;re planting the seeds for a brighter future.
          </p>
        </div>

        {/* Impact Statistics Grid */}
        <div className="mx-auto max-w-4xl grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
              {impactStats.map((stat, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                  viewport={{ once: true }}
                >
                  <Card className="group flex flex-col h-full bg-white border border-gray-200 shadow-2xs rounded-xl dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70">
                    <div className={`h-52 flex flex-col justify-center items-center ${stat.bg} rounded-t-xl`}>
                      <div className="flex items-center justify-center">
                        <span className="w-16 h-16 flex items-center justify-center rounded-xl border-2 border-white">
                          {stat.icon}
                        </span>
                      </div>
                    </div>
                    <div className="p-4 md:p-6">
                      <span className={`block mb-1 text-xs font-semibold uppercase ${stat.bg.replace('bg-', 'text-')} dark:${stat.bg.replace('bg-', 'text-')}`}>{stat.label}</span>
                      <h3 className="text-xl font-semibold text-gray-800 dark:text-neutral-300 dark:hover:text-white">{stat.number}</h3>
                      <p className="mt-3 text-gray-500 dark:text-neutral-500">
                        {stat.description}
                      </p>
                    </div>
                  </Card>
                </motion.div>
              ))}
        </div>

        <Separator className="mx-auto w-full max-w-6xl opacity-60 mb-16" />

        {/* Key Achievements */}
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h3 className="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-neutral-200 mb-4">
              Key Achievements
            </h3>
            <p className="text-lg text-gray-600 dark:text-neutral-400">
              The ADITI Initiative focuses on four core pillars that drive meaningful change in education accessibility and quality.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {achievements.map((achievement, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: index % 2 === 0 ? -20 : 20 }}
                whileInView={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                viewport={{ once: true }}
              >
                <Card className="p-6 hover:shadow-lg transition-all duration-300 border-0 bg-white group cursor-pointer h-full relative overflow-hidden">
                  <div className="absolute inset-0 pointer-events-none bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:20px_20px] opacity-30 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_5%,transparent_110%)]" />
                  <div className="relative z-10 flex items-start space-x-4">
                    <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-teal-400 to-indigo-500 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300">
                      {achievement.icon}
                    </div>
                    <div>
                      <h4 className="text-xl font-semibold text-gray-800 mb-3">{achievement.title}</h4>
                      <p className="text-gray-600 leading-relaxed">{achievement.description}</p>
                    </div>
                  </div>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>

      </div>
    </section>
  )
}