import { motion, useInView } from "framer-motion";
import { Award, Rocket, Users, Zap } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import PremiumBadge from "../shared/PremiumBadge";


const stats = [
  { icon: Zap, value: 10, suffix: "+", label: "Years Experience" },
  { icon: Rocket, value: 500, suffix: "+", label: "Projects Completed" },
  { icon: Users, value: 200, suffix: "+", label: "Happy Clients" },
  { icon: Award, value: 50, suffix: "+", label: "Awards Won" },
];

function AnimatedCounter({
  value,
  suffix,
  isInView,
}: {
  value: number;
  suffix: string;
  isInView: boolean;
}) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!isInView) return;

    let start = 0;
    const duration = 2000;
    const increment = value / (duration / 16);

    const timer = setInterval(() => {
      start += increment;
      if (start >= value) {
        setCount(value);
        clearInterval(timer);
      } else {
        setCount(Math.floor(start));
      }
    }, 16);

    return () => clearInterval(timer);
  }, [isInView, value]);

  return (
    <span className="text-4xl md:text-5xl font-bold text-primary">
      {count}
      {suffix}
    </span>
  );
}

export default function AboutSection() {
  const ref = useRef<HTMLElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <section
      id="about"
      ref={ref}
      className="py-24 relative overflow-hidden bg-secondary/30"
    >
      <div className="container mx-auto px-4 relative z-10">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Content */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6 }}
          >
            <PremiumBadge text="About Us" />
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
              About <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">TechZaa</span>
            </h2>
            <div className="space-y-4 text-muted-foreground text-lg">
              <p>
                Founded with a passion for innovation, TechZaa is a leading
                technology company dedicated to transforming businesses through
                cutting-edge digital solutions.
              </p>
              <p>
                Our team of expert developers, designers, and strategists work
                collaboratively to deliver exceptional results that exceed
                expectations. We believe in the power of technology to solve
                complex problems and create meaningful impact.
              </p>
              <p>
                From startups to enterprises, we've helped hundreds of clients
                achieve their digital transformation goals with our innovative
                approach and commitment to excellence.
              </p>
            </div>

            {/* Values */}
            <div className="mt-8 flex flex-wrap gap-3">
              {["Innovation", "Quality", "Integrity", "Excellence"].map(
                (value) => (
                  <span
                    key={value}
                    className="px-4 py-2 glass neon-glow text-sm font-medium hover:border-primary border rounded-md transition-all cursor-default "
                  >
                    {value}
                  </span>
                ),
              )}
            </div>
          </motion.div>

          {/* Stats Grid */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="grid grid-cols-2 gap-6"
          >
            {stats.map((stat, index) => (
              <motion.div
                key={stat.label}
                initial={{ opacity: 0, y: 20 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
                className="p-6  rounded-2xl hover:border transition-all text-center group shadow-sm shadow-primary"
              >
                {/* Icon */}
                <div className="w-12 h-12 rounded-xl bg-blend-lighten flex items-center justify-center mx-auto mb-4 neon-glow transition-all">
                  <stat.icon className="w-6 h-6 text-primary" />
                </div>

                {/* Counter */}
                <AnimatedCounter
                  value={stat.value}
                  suffix={stat.suffix}
                  isInView={isInView}
                />

                {/* Label */}
                <p className="text-muted-foreground text-sm mt-2">
                  {stat.label}
                </p>
              </motion.div>
            ))}
          </motion.div>
        </div>

        {/* Tech illustration - abstract shapes */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.5 }}
          className="mt-16 relative h-20 overflow-hidden"
        >
          <div className="absolute inset-0 flex items-center justify-center gap-4">
            {[...Array(20)].map((_, i) => (
              <motion.div
                key={i}
                className="w-8 h-8 rounded-md bg-gradient-to-br from-primary/20 to-neon-purple/20 border border-primary/20"
                animate={{
                  y: [0, -10, 0],
                  rotate: [0, 45, 0],
                }}
                transition={{
                  duration: 3,
                  repeat: Infinity,
                  delay: i * 0.1,
                }}
              />
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
}
