import { Shield, MapPin, Headphones, Award } from "lucide-react";
import Container from "@/components/ui/Container";

const values = [
  {
    icon: Shield,
    title: "Zuverlässig",
    description: "Stabile Netze, die halten, was sie versprechen. Wir setzen auf Technik, der Sie vertrauen können.",
  },
  {
    icon: MapPin,
    title: "Regional",
    description: "Kein Callcenter, sondern echte Menschen in Reutte. Bei Fragen sind wir vor Ort.",
  },
  {
    icon: Headphones,
    title: "Persönlich",
    description: "Sie erreichen uns direkt — ohne Warteschleifen und ohne Weiterleitung.",
  },
  {
    icon: Award,
    title: "Kompetent",
    description: "Jahrelange Erfahrung im Außerfern. Wir kennen die Region und ihre Anforderungen.",
  },
];

export default function ValueProposition() {
  return (
    <section className="py-20 lg:py-24" aria-labelledby="values-heading">
      <Container>
        <h2 id="values-heading" className="sr-only">
          Unsere Werte
        </h2>
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {values.map((value) => {
            const Icon = value.icon;
            return (
              <div key={value.title} className="text-center">
                <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-100">
                  <Icon className="h-7 w-7 text-primary-700" aria-hidden="true" />
                </div>
                <h3 className="mt-4 text-lg font-semibold text-neutral-900">
                  {value.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-neutral-600">
                  {value.description}
                </p>
              </div>
            );
          })}
        </div>
      </Container>
    </section>
  );
}
