import React from "react";
import { motion } from "framer-motion";
import { CheckCircle2, Building2, Users2, ShieldCheck } from "lucide-react";

const ModelBenefits: React.FC = () => {
  const sections = [
    {
      title: "For Institutions",
      icon: <Building2 className="w-8 h-8 text-brand-green" />,
      benefits: [
        "Technology-enabled examination operations",
        "Ready-to-use digital platform",
        "Flexible control over student pricing",
        "Increased focus on teaching and academics",
        "Efficient and transparent fee collection",
      ],
      color: "bg-green-50",
    },
    {
      title: "For Students",
      icon: <Users2 className="w-8 h-8 text-blue-500" />,
      benefits: [
        "Institution-enabled access",
        "One platform for all practice tests",
        "Secure and fair testing environment",
        "Real-time performance reports",
      ],
      color: "bg-blue-50",
    },
  ];

  return (
    <section className="py-24 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-extrabold text-brand-navy mb-4">
            Why This Model Works
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            A balanced digital ecosystem that empowers institutions with
            infrastructure control while delivering a reliable experience for
            students.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {sections.map((section, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: idx * 0.2 }}
              className={`p-8 rounded-3xl ${section.color} border border-white shadow-xl`}
            >
              <div className="mb-6">{section.icon}</div>
              <h3 className="text-2xl font-bold text-brand-navy mb-6">
                {section.title}
              </h3>
              <ul className="space-y-4">
                {section.benefits.map((benefit, i) => (
                  <li
                    key={i}
                    className="flex items-start gap-3 text-gray-700 font-medium"
                  >
                    <CheckCircle2 className="w-5 h-5 text-brand-green flex-shrink-0 mt-0.5" />
                    <span>{benefit}</span>
                  </li>
                ))}
              </ul>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ModelBenefits;