import Image from "next/image";
import Container from "./Container";

const stats = [
  { value: "۲۳۰+", label: "رضایت مشتری" },
  { value: "۲۳", label: "سال تجربه" },
];

export default function Stats() {
  return (
    <section className="relative py-20 sm:py-28">
      <Image
        src="/images/stats-banner.jpg"
        alt=""
        fill
        className="object-cover"
        sizes="100vw"
      />
      <div className="absolute inset-0 bg-primary-dark/80" />
      <Container className="relative">
        <div className="grid grid-cols-2 max-w-xl mx-auto text-center gap-8">
          {stats.map((s) => (
            <div key={s.label}>
              <div className="text-4xl sm:text-5xl font-extrabold text-white">
                {s.value}
              </div>
              <div className="mt-3 text-white/80">{s.label}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}
