import { Card } from "@/components/ui/card";
import { motion } from "framer-motion";

interface ResultsData {
  year: string;
  stats: {
    label: string;
    value: string;
    description: string;
  }[];
}

const resultsData: ResultsData[] = [
  {
    year: "JEE MAINS 2025",
    stats: [
      { label: "1291", value: "students", description: "Got 99+ percentile (overall)" },
      { label: "78", value: "students", description: "Got 100 percentile in one or more subjects" },
      { label: "6", value: "students", description: "Got All India Rank (AIR) under 100" },
      { label: "98.3%", value: "satisfaction", description: "Found the test series Most Relevant" }
    ]
  },
  {
    year: "NEET 2025",
    stats: [
      { label: "347", value: "students", description: "Got in AIIMS (overall)" },
      { label: "91", value: "students", description: "Got in Top 3 AIIMS" },
      { label: "4", value: "students", description: "Got All India Rank (AIR) under 100" },
      { label: "96.9%", value: "satisfaction", description: "Found the test series to-the-point" }
    ]
  }
];

export default function TestResults() {
  return (
    <section className="py-20 bg-gradient-to-b from-gray-50 to-white">
      <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center 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 mb-4">
            Our Results - The Choice of Toppers
          </div>
          <h2 className="text-4xl font-bold text-gray-900 mb-4">
            Trusted by Thousands of Students
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Exceptional results achieved by students who chose our test series for their preparation
          </p>
        </div>

        <div className="gap-2 mx-auto grid grid-cols-1 md:grid-cols-2">
          {resultsData.map((yearData, yearIndex) => (
            <motion.div
              key={yearData.year}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: yearIndex * 0.2 }}
              viewport={{ once: true }}
              className="max-w-lg relative"
            >
              <Card className="relative p-8 border-0 shadow-lg bg-white overflow-hidden">
                {/* Grid Background */}
                <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-100 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_5%,transparent_110%)]" />
                
                <div className="relative z-10">
                  <h3 className="text-lg font-bold text-center mb-8 text-gray-600 pb-4">
                    {yearData.year}
                  </h3>
                  <div className="grid grid-cols-2 gap-6">
                    {yearData.stats.map((stat, index) => (
                      <motion.div
                        key={index}
                        initial={{ scale: 0.8, opacity: 0 }}
                        whileInView={{ scale: 1, opacity: 1 }}
                        transition={{ duration: 0.5, delay: (yearIndex * 0.2) + (index * 0.1) }}
                        viewport={{ once: true }}
                        className="text-center"
                      >
                        <div className="text-3xl font-bold text-indigo-600 mb-2">
                          {stat.label}
                        </div>
                        <div className="text-sm text-gray-700 leading-tight">
                          {stat.description}
                        </div>
                      </motion.div>
                    ))}
                  </div>
                </div>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}