"use client";

import { useRef, useEffect } from "react";
import { motion, useAnimation, useInView, Variants } from "framer-motion";
import { Target, Shield, Heart, TrendingUp, Sparkles, Briefcase } from "lucide-react";

export default function About() {
  const controls = useAnimation();
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.2 });

  useEffect(() => {
    if (isInView) {
      controls.start("visible");
    }
  }, [controls, isInView]);

  const fadeUp: Variants = {
    hidden: { opacity: 0, y: 30 },
    visible: { 
      opacity: 1, 
      y: 0,
      transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
    }
  };

  const fadeLeft: Variants = {
    hidden: { opacity: 0, x: -40 },
    visible: { 
      opacity: 1, 
      x: 0,
      transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
    }
  };

  const fadeRight: Variants = {
    hidden: { opacity: 0, x: 40 },
    visible: { 
      opacity: 1, 
      x: 0,
      transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
    }
  };

  const stats = [
    { value: "10K+", label: "Active Members" },
    { value: "500+", label: "Companies" },
    { value: "98%", label: "Success Rate" }
  ];

  return (
    <section className="relative bg-gradient-to-br from-white via-slate-50 to-white py-16 sm:py-20 overflow-hidden">
      
      <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-12">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          
          {/* Left Side - Content */}
          <motion.div
            ref={ref}
            variants={fadeLeft}
            initial="hidden"
            animate={controls}
          >
            {/* Badge */}
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-sky-50 border border-sky-200 mb-4">
              <Briefcase className="w-3.5 h-3.5 text-sky-600" />
              <span className="text-[9px] font-black tracking-wider text-sky-700 uppercase">About PKI</span>
            </div>

            {/* Heading */}
            <h2 className="text-2xl sm:text-3xl font-black tracking-tight text-slate-900 mb-4">
              Connecting Faith and{' '}
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-600 to-blue-600">
                Marketplace Excellence
              </span>
            </h2>

            {/* Description */}
            <p className="text-sm text-slate-600 leading-relaxed mb-4">
              Professionals for Kingdom Impact (PKI) is a community of believers committed to 
              integrating faith and work, seeing their careers as a primary mission field.
            </p>
            
            <p className="text-sm text-slate-600 leading-relaxed mb-6">
              We equip professionals to lead with integrity, pursue excellence, and make 
              eternal impact in their workplaces and industries.
            </p>

            {/* Stats Row */}
            <div className="flex gap-6">
              {stats.map((stat, index) => (
                <div key={index}>
                  <p className="text-xl font-black text-slate-900">{stat.value}</p>
                  <p className="text-[10px] text-slate-500">{stat.label}</p>
                </div>
              ))}
            </div>
          </motion.div>

          {/* Right Side - Values Grid */}
          <motion.div
            variants={fadeRight}
            initial="hidden"
            animate={controls}
            className="grid grid-cols-2 gap-3"
          >
            {[
              { icon: Target, title: "Purpose-Driven", color: "from-sky-50 to-blue-50" },
              { icon: Shield, title: "Integrity First", color: "from-sky-50 to-blue-50" },
              { icon: Heart, title: "Servant Heart", color: "from-sky-50 to-blue-50" },
              { icon: TrendingUp, title: "Excellence", color: "from-sky-50 to-blue-50" }
            ].map((item, index) => {
              const Icon = item.icon;
              return (
                <div key={index} className={`p-4 rounded-xl bg-gradient-to-br ${item.color} border border-slate-100`}>
                  <Icon className="w-5 h-5 text-sky-600 mb-2" />
                  <h3 className="text-sm font-bold text-slate-900">{item.title}</h3>
                </div>
              );
            })}
          </motion.div>
        </div>
      </div>
    </section>
  );
}