import {
  UsersThreeIcon,
  GraduationCapIcon,
  ClockIcon,
  SealCheckIcon,
  LeafIcon,
  CurrencyCircleDollarIcon,
} from "@phosphor-icons/react/dist/ssr";
import styles from "./benefitsSection.module.css";

const benefits = [
  {
    icon: UsersThreeIcon,
    title: "Feste Ansprechpartner",
    description:
      "Keine wechselnden Zuständigkeiten – wir sind immer persönlich für Sie da.",
  },
  {
    icon: GraduationCapIcon,
    title: "Geschultes Personal",
    description:
      "Unsere Teams werden kontinuierlich in modernen Reinigungstechniken geschult.",
  },
  {
    icon: ClockIcon,
    title: "Flexible Zeiten",
    description:
      "Wir reinigen dann, wenn es Ihren Betriebsablauf am wenigsten stört.",
  },
  {
    icon: SealCheckIcon,
    title: "Höchste Qualität",
    description:
      "Strenges Qualitätsmanagement durch regelmäßige Objektkontrollen.",
  },
  {
    icon: LeafIcon,
    title: "Umweltfreundlich",
    description:
      "Einsatz von biologisch abbaubaren Reinigungsmitteln für die Umwelt.",
  },
  {
    icon: CurrencyCircleDollarIcon,
    title: "Transparente Kosten",
    description:
      "Klare Preisgestaltung ohne versteckte Nebenkosten für Ihre Planung.",
  },
];

export default function BenefitsSection() {
  return (
    <section className={styles.benefits} aria-labelledby="benefits-heading">
      <div className={styles.inner}>
        <div className={styles.intro}>
          <h2 id="benefits-heading" className={styles.heading}>
            Ihre Vorteile mit uns
          </h2>
          <p className={`lead ${styles.lead}`}>
            Wir verstehen die Anforderungen moderner Unternehmen an einen
            Facility-Partner: Verlässlichkeit, Professionalität und Transparenz.
          </p>
        </div>

        <div className={styles.grid}>
          {benefits.map((benefit) => {
            const Icon = benefit.icon;
            return (
              <article key={benefit.title} className={styles.card}>
                <span className={styles.iconWrap} aria-hidden="true">
                  <Icon size={24} weight="duotone" />
                </span>
                <div className={styles.cardContent}>
                  <h3 className={styles.cardTitle}>{benefit.title}</h3>
                  <p className={styles.cardText}>{benefit.description}</p>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}