"use client";

import { motion } from "framer-motion";
import { stats } from "@/lib/placeholders";

export default function StatsRow() {
  return (
    <section className="py-16 sm:py-20 bg-muted/40 border-y border-border">
      <div className="container mx-auto px-6">
        {/* Eyebrow */}
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="text-center mb-10"
        >
          <span className="text-sm font-semibold uppercase tracking-widest text-primary">
            By the numbers
          </span>
          <p className="mt-2 text-lg text-muted-foreground">
            Trusted by thousands of businesses to deliver measurable results.
          </p>
        </motion.div>

        {/* Stats row */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-0">
          {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.5, delay: i * 0.1 }}
              className="relative flex flex-col items-center text-center"
            >
              {/* Divider (desktop only, between items) */}
              {i > 0 && (
                <div className="hidden lg:block absolute left-0 top-1/2 -translate-y-1/2 w-px h-12 bg-border" />
              )}

              <span className="text-4xl sm:text-5xl font-extrabold text-foreground tracking-tight">
                {stat.value}
              </span>
              <span className="mt-2 text-sm font-medium text-muted-foreground">
                {stat.label}
              </span>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}