About Numbers

"use client";

import { motion } from "framer-motion";

interface Stat {
  value: string;
  label: string;
}

interface AboutNumbersProps {
  title?: string;
  description?: string;
  stats?: Stat[];
}

const EASE = [0.16, 1, 0.3, 1] as const;

export default function AboutNumbers({
  title = "Nos chiffres parlent d'eux-memes",
  description = "Depuis notre creation, nous accompagnons des entreprises ambitieuses.",
  stats = [],
}: AboutNumbersProps) {
  return (
    <section
      style={{
        paddingTop: "var(--section-padding-y)",
        paddingBottom: "var(--section-padding-y)",
        background: "var(--color-background)",
      }}
    >
      <div
        className="mx-auto"
        style={{
          maxWidth: "var(--container-max-width)",
          paddingLeft: "var(--container-padding-x)",
          paddingRight: "var(--container-padding-x)",
        }}
      >
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <motion.div
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, ease: EASE }}
          >
            <h2
              className="text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight mb-4"
              style={{ color: "var(--color-foreground)" }}
            >
              {title}
            </h2>
            <p className="text-sm leading-relaxed" style={{ color: "var(--color-foreground-muted)" }}>
              {description}
            </p>
          </motion.div>

          <div className="grid grid-cols-2 gap-6">
            {stats.map((stat, i) => (
              <motion.div
                key={stat.label}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.45, delay: i * 0.1, ease: EASE }}
                className="p-6 rounded-xl text-center"
                style={{
                  background: "var(--color-background-alt)",
                  border: "1px solid var(--color-border)",
                  borderRadius: "var(--radius-lg)",
                }}
              >
                <span
                  className="block text-3xl md:text-4xl font-bold mb-1"
                  style={{ color: "var(--color-accent)" }}
                >
                  {stat.value}
                </span>
                <span className="text-xs font-medium uppercase tracking-wider" style={{ color: "var(--color-foreground-muted)" }}>
                  {stat.label}
                </span>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}