"use client";

import { motion } from "framer-motion";

const STATS = [
  { label: "Maksimum Kapasite", value: "150T" },
  { label: "Teknik Destek", value: "24/7" },
  { label: "Modern Filo", value: "15+" },
  { label: "Güvenlik Kaydı", value: "100%" },
];

export function StatsGrid() {
  return (
    <section className="grid grid-cols-2 md:grid-cols-4 bg-surface-container-lowest">
      {STATS.map((stat, idx) => (
        <motion.div 
          key={stat.label}
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ delay: idx * 0.1, duration: 0.5 }}
          viewport={{ once: true }}
          className={cn(
            "p-8 md:p-16 flex flex-col justify-center transition-colors hover:bg-surface-container-low group",
            idx % 2 === 0 ? "bg-surface-container-lowest" : "bg-surface-container/30"
          )}
        >
          <span className="text-primary font-headline text-4xl md:text-6xl font-black mb-2 group-hover:scale-105 transition-transform origin-left">{stat.value}</span>
          <span className="font-label text-[10px] md:text-xs uppercase tracking-[0.2em] text-on-surface-variant font-bold">{stat.label}</span>
        </motion.div>
      ))}
    </section>
  );
}

import { cn } from "@/lib/utils";