import React from "react";
import { motion } from "framer-motion";
import { Shield, Rocket, BarChart3, Globe } from "lucide-react";

const WhoWeAre: React.FC = () => {
  return (
    <section className="py-24 bg-white overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="text-sm font-bold tracking-wider text-brand-green uppercase mb-4">
              Infrastructure First
            </h2>
            <h3 className="text-4xl md:text-5xl font-extrabold text-brand-navy mb-8 leading-tight">
              Who we are?
            </h3>
            <p className="text-xl text-gray-600 leading-relaxed mb-8">
              ExamInfra is a digital examination infrastructure platform built
              to strengthen institutions with reliable, scalable, and
              technology-driven assessment systems. <br /> We support
              institutions with end-to-end examination technology, secure
              payments, performance analytics, and scalable digital
              infrastructure - enabling confident growth in the digital era.
            </p>
            <p className="text-xl text-gray-600 leading-relaxed italic border-l-4 border-brand-green pl-6 mb-12">
              "We deliver the technology, insights, and scalable infrastructure
              institutions need to succeed in a digital-first environment."
            </p>

            <div className="grid grid-cols-2 gap-6">
              {[
                {
                  icon: <Shield className="text-brand-green" />,
                  label: "Secure Tech",
                },
                {
                  icon: <Rocket className="text-brand-orange" />,
                  label: "Massive Scale",
                },
                {
                  icon: <BarChart3 className="text-blue-500" />,
                  label: "Deep Analytics",
                },
                {
                  icon: <Globe className="text-purple-500" />,
                  label: "Global Access",
                },
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-3">
                  <div className="p-2 bg-gray-50 rounded-lg">{item.icon}</div>
                  <span className="font-semibold text-brand-navy">
                    {item.label}
                  </span>
                </div>
              ))}
            </div>
          </motion.div>

          <motion.div
            className="mt-16 lg:mt-0 relative"
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <div className="relative rounded-3xl overflow-hidden shadow-2xl">
              <img
                src="/who_we_are.png"
                alt="Technology team working"
                className="w-full h-[500px] object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-brand-navy/80 to-transparent flex items-end p-12">
                <p className="text-white text-2xl font-bold">
                  Focus on Teaching.
                  <br />
                  <span className="text-brand-green text-lg font-normal">
                    We manage the digital examination infrastructure.
                  </span>
                </p>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export default WhoWeAre;