"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { motion } from "framer-motion";
import { Award, Users, Rocket, Heart } from "lucide-react";

const stats = [
  { number: "150+", label: "Projects Delivered", icon: Rocket },
  { number: "50+", label: "Happy Clients", icon: Heart },
  { number: "25+", label: "Team Members", icon: Users },
  { number: "15+", label: "Awards Won", icon: Award },
];

export function About() {
  return (
    <section id="about" className="py-32 bg-white dark:bg-slate-900">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <Heading className="mb-6">About NEXUS</Heading>
            <div className="space-y-4 text-lg text-slate-600 dark:text-slate-400 leading-relaxed">
              <p>
                We're a collective of designers, developers, and strategists who believe in the power of exceptional digital experiences.
              </p>
              <p>
                Founded in 2018, NEXUS has grown from a small studio to an award-winning agency, working with startups and Fortune 500 companies alike.
              </p>
              <p>
                Our approach combines creative excellence with technical expertise, ensuring every project not only looks stunning but performs flawlessly.
              </p>
              <p className="font-semibold text-slate-900 dark:text-white">
                We don't just build websites—we craft digital experiences that drive real business results.
              </p>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="grid grid-cols-2 gap-6"
          >
            {stats.map((stat, index) => {
              const Icon = stat.icon;
              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  className="p-8 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 rounded-2xl text-center border border-slate-200 dark:border-slate-700"
                >
                  <Icon className="w-8 h-8 mx-auto mb-4 text-violet-600 dark:text-violet-400" />
                  <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-violet-600 to-indigo-600 mb-2">
                    {stat.number}
                  </div>
                  <div className="text-sm font-medium text-slate-600 dark:text-slate-400">
                    {stat.label}
                  </div>
                </motion.div>
              );
            })}
          </motion.div>
        </div>
      </Container>
    </section>
  );
}