import Link from "next/link";
import styles from "./IndustrySolutionsSection.module.css";
import {
  BuildingsIcon,
  StethoscopeIcon,
  WarehouseIcon,
  HouseLineIcon,
  ArrowRightIcon,
} from "@phosphor-icons/react/dist/ssr";

const industries = [
  {
    title: "Büros",
    href: "/branchen/bueros",
    icon: BuildingsIcon,
  },
  {
    title: "Arztpraxen",
    href: "/branchen/arztpraxen",
    icon: StethoscopeIcon,
  },
  {
    title: "Hallen und Lagerflächen",
    href: "/branchen/hallen-lagerflaechen",
    icon: WarehouseIcon,
  },
  {
    title: "Wohn- und Geschäftshäuser",
    href: "/branchen/wohn-geschaeftshaeuser",
    icon: HouseLineIcon,
  },
  {
    title: "Zum Kontaktformular",
    href: "/kontakt",
    icon: ArrowRightIcon,
  },
];

export default function IndustrySolutionsSection() {
  return (
    <section
      className={styles.section}
      aria-labelledby="industry-solutions-heading"
    >
      <div className={styles.inner}>
        <div className={styles.intro}>
          <h2 id="industry-solutions-heading" className={styles.heading}>
            Reinigungsleistungen für verschiedene Branchen
          </h2>
          <p className={styles.lead}>
            Als Reinigungsfirma betreuen wir Unternehmen aus unterschiedlichen
            Branchen. Unsere Leistungen passen wir individuell an Nutzung,
            Objektgröße und branchenspezifische Anforderungen an.
          </p>
        </div>

        <div className={styles.grid}>
          {industries.map((industry) => {
            const Icon = industry.icon;

            return (
              <Link
                key={industry.title}
                href={industry.href}
                className={styles.card}
              >
                <span className={styles.cardText}>{industry.title}</span>

                <span className={styles.iconWrap} aria-hidden="true">
                  <Icon size={18} weight="bold" className={styles.icon} />
                </span>
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}