import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
import Link from "next/link";
import styles from "./ServiceSection.module.css";
import Image from "next/image";

const services = [
  {
    title: "Grundreinigung",
    description:
      "Regelmäßige Reinigung von Arbeitsplätzen, Besprechungsräumen und Gemeinschaftsbereichen für einen gepflegten Eindruck im Alltag.",
    image: "/images/services/grundreinigung.jpg",
    imageAlt: "Sauberer Büroarbeitsplatz nach der Reinigung",
    href: "/leistungen/bueroreinigung",
  },
  {
    title: "Glas- und Fensterreinigung",
    description:
      "Streifenfreie Reinigung von Fenstern, Glaselementen und Eingangsbereichen für einen professionellen ersten Eindruck.",
    image: "/images/services/Fensterreinigung.jpg",
    imageAlt: "Große gereinigte Fensterfront eines Geschäftsgebäudes",
    href: "/leistungen/glasreinigung",
  },
  {
    title: "Treppenhausreinigung",
    description:
      "Saubere Eingangs- und Treppenbereiche als Visitenkarte für Mitarbeitende, Kundschaft und Besucher.",
    image: "/images/services/treppenhausreinigung.jpg",
    imageAlt: "Sauberes Treppenhaus in einem Gewerbeobjekt",
    href: "/leistungen/treppenhausreinigung",
  },
  {
    title: "Unterhaltsreinigung",
    description:
      "Individuell abgestimmte Reinigungsintervalle für dauerhaft gepflegte Büro-, Praxis- und Gewerbeflächen.",
    image: "/images/services/unterhaltsreinigung.jpg",
    imageAlt: "Reinigungskraft bei der Unterhaltsreinigung in einem Büro",
    href: "/leistungen/unterhaltsreinigung",
  },
  {
    title: "Hausmeisterdienste",
    description:
      "Hausmeisterdienste für Kleinreparaturen bis zur Objektbetreuung – für reibungslose Abläufe.",
    image: "/images/services/Hausmeisterdienste.jpg",
    imageAlt: "Hausmeisterdienste für Gartenarbeit",
    href: "/leistungen/Hausmeisterdienste",
  },
];

export default function ServiceSection() {
  return (
    <section className={styles.services} aria-labelledby="services-heading">
      <div className={styles.inner}>
        <div className={styles.intro}>
          <h2 id="services-heading" className={styles.heading}>
            Professionelle Reinigung für Büros, Praxen und Geschäftsräume
          </h2>
          <p className={`lead ${styles.lead}`}>
            Individuelle Reinigungskonzepte für Unternehmen – damit Ihre Räume sauber, zuverlässig und professions sorgenfrei bleiben.
          </p>
        </div>

        <div className={styles.grid}>
          {services.map((service) => (
            <article key={service.title} className={styles.card}>
              <div className={styles.imageWrap}>
                <Image
                  src={service.image}
                  alt={service.imageAlt}
                  fill
                  sizes="(min-width: 1024px) 400px, (min-width: 768px) 50vw, 100vw"
                  className={styles.image}
                />
              </div>

              <div className={styles.cardBody}>
                <div className={styles.cardContent}>
                  <h3 className={styles.cardTitle}>{service.title}</h3>
                  <p className={styles.cardText}>{service.description}</p>
                </div>

                <Link href={service.href} className="btn btn--tertiary">
                  Mehr
                  <span className="btn-icon animate" aria-hidden="true">
                    <ArrowRightIcon size={16} weight="bold" />
                  </span>
                </Link>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}