import { Wifi, Tv, Phone } from "lucide-react";
import Container from "@/components/ui/Container";
import SectionHeading from "@/components/ui/SectionHeading";
import Card from "@/components/ui/Card";
import { SERVICES } from "@/lib/constants";

const icons = [Wifi, Tv, Phone];

export default function ServiceOverview() {
  return (
    <section className="py-20 lg:py-24" aria-labelledby="services-heading">
      <Container>
        <SectionHeading
          title="Was wir für Sie tun"
          subtitle="Drei Dienste, ein Ansprechpartner. Alles aus einer Hand, direkt vor Ort in Reutte."
        />
        <div className="grid grid-cols-1 gap-8 md:grid-cols-3" id="services-heading">
          {SERVICES.map((service, index) => {
            const Icon = icons[index];
            return (
              <Card
                key={service.title}
                title={service.title}
                description={service.description}
                imageSrc={service.image}
                imageAlt={service.imageAlt}
                href={service.href}
              >
                <div className="mt-4 flex items-center gap-2 text-primary-600 font-medium text-sm">
                  <Icon className="h-4 w-4" aria-hidden="true" />
                  <span>Mehr erfahren</span>
                </div>
              </Card>
            );
          })}
        </div>
      </Container>
    </section>
  );
}
