import Container from "@/components/ui/Container";

const stats = [
  { value: "20+", label: "Jahre Erfahrung" },
  { value: "1.000+", label: "Kunden in der Region" },
  { value: "Reutte", label: "Unser Standort" },
  { value: "24/7", label: "Netzüberwachung" },
];

export default function TrustSection() {
  return (
    <section className="bg-primary-950 py-16 lg:py-20" aria-labelledby="trust-heading">
      <Container>
        <h2 id="trust-heading" className="sr-only">
          TeleNetSystems in Zahlen
        </h2>
        <div className="grid grid-cols-2 gap-8 lg:grid-cols-4">
          {stats.map((stat) => (
            <div key={stat.label} className="text-center">
              <p className="text-3xl font-bold text-primary-400 sm:text-4xl">
                {stat.value}
              </p>
              <p className="mt-2 text-sm text-neutral-300">
                {stat.label}
              </p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}