import React from "react";
import { motion } from "framer-motion";
import { School, BarChart3, ShieldCheck, Zap } from "lucide-react";

export const Features: React.FC = () => {
  return (
    <section id="features" className="py-24 bg-gray-50">
      <motion.div
        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.7 }}
      >
        {/* Heading */}
        <div className="text-center mb-16">
          <motion.h2
            className="text-3xl md:text-4xl font-extrabold text-brand-navy mb-4"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            Built for Modern Institutions
          </motion.h2>

          <motion.p
            className="text-lg text-gray-600 max-w-2xl mx-auto"
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ delay: 0.2 }}
          >
            A professional digital infrastructure to manage examinations and
            content efficiently. Institutions access the platform directly,
            while student access follows a simple usage-based model.
          </motion.p>
        </div>

        {/* Feature Cards Grid */}
        <motion.div
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
          initial="hidden"
          whileInView="show"
          viewport={{ once: true }}
          variants={{
            hidden: {},
            show: {
              transition: { staggerChildren: 0.15 },
            },
          }}
        >
          <FeatureCard
            icon={<Zap className="w-6 h-6 text-blue-500" />}
            title="Question Bank Management"
            description="Create, organize, and manage large-scale question banks using a structured digital system. Institutions can upload their own content or leverage intelligent tools for efficient question creation."
          />
          <FeatureCard
            icon={<ShieldCheck className="w-6 h-6 text-brand-green" />}
            title="Staff Management"
            description="Add and manage staff members with defined roles to handle content, assessments, and student operations efficiently."
          />
          <FeatureCard
            icon={<School className="w-6 h-6 text-brand-navy" />}
            title="Unlimited Test Management"
            description="Create, schedule, and manage practice tests efficiently through a unified digital examination infrastructure."
          />
          <FeatureCard
            icon={<BarChart3 className="w-6 h-6 text-brand-orange" />}
            title="Smart Analytics"
            description="Access comprehensive insights including student performance, total student participation, exam-wise distribution, and key institutional metrics through structured reports."
          />
        </motion.div>
      </motion.div>
    </section>
  );
};

const FeatureCard: React.FC<{
  icon: React.ReactNode;
  title: string;
  description: string;
}> = ({ icon, title, description }) => (
  <motion.div
    className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md h-full"
    variants={{
      hidden: { opacity: 0, y: 25 },
      show: {
        opacity: 1,
        y: 0,
        transition: { duration: 0.45, ease: "easeOut" },
      },
    }}
    whileHover={{ scale: 1.03, translateY: -4 }}
    transition={{ type: "spring", stiffness: 200, damping: 15 }}
  >
    <motion.div
      className="w-12 h-12 bg-gray-50 rounded-lg flex items-center justify-center mb-4"
      whileHover={{ rotate: 5 }}
    >
      {icon}
    </motion.div>

    <h3 className="text-lg font-bold text-gray-900 mb-2">{title}</h3>
    <p className="text-gray-600 leading-relaxed">{description}</p>
  </motion.div>
);
