import type { Metadata } from "next";
import { CheckCircleIcon } from "@phosphor-icons/react/dist/ssr";
import styles from "./page.module.css";
import ContactCtaSection from "@/components/contact/ContactCtaSection";

export const metadata: Metadata = {
  title: "Über uns",
  description:
    "Basiclean ist Ihr Partner für professionelle Gebäudereinigung in Hannover. Erfahren Sie mehr über unsere Werte, Ziele und unser Verständnis von Qualität.",
};

const werte = [
  {
    heading: "Zuverlässigkeit",
    text: "Wir halten Termine ein und sorgen für gleichbleibende Qualität – Woche für Woche, ohne Ausnahmen.",
  },
  {
    heading: "Transparenz",
    text: "Faire, nachvollziehbare Preise ohne versteckte Kosten. Sie wissen jederzeit, wofür Sie bezahlen.",
  },
  {
    heading: "Sorgfalt",
    text: "Wir behandeln Ihr Objekt so, als wäre es unser eigenes – mit Aufmerksamkeit für Details.",
  },
  {
    heading: "Nähe",
    text: "Als regionales Unternehmen sind wir persönlich erreichbar und kennen die Anforderungen vor Ort.",
  },
];

export default function UeberUns() {
  return (
    <main>
      <section className={styles.hero} aria-labelledby="hero-heading">
        <div className={styles.inner}>
          <div className={styles.decoration} aria-hidden="true">
            {Array.from({ length: 18 }).map((_, i) => (
              <span key={i} className={styles.dot} />
            ))}
          </div>

          <h1 id="hero-heading" className={styles.heading}>
            Über Basiclean
          </h1>
          <p className={`lead ${styles.lead}`}>
            Basiclean wurde mit dem Anspruch gegründet, Gebäudereinigung in
            Hannover verlässlicher, transparenter und persönlicher zu gestalten.
            Wir sind ein junges Unternehmen mit klarem Fokus: saubere Ergebnisse
            und langfristige Zusammenarbeit statt austauschbarer
            Standarddienstleistung.
          </p>
        </div>
      </section>

      <section className={styles.storySection}>
        <div className={styles.storyInner}>
          <div className={styles.storyText}>
            <h2 className={styles.storyHeading}>Wie wir angefangen haben</h2>
            <p className={styles.storyLead}>
              Basiclean ist ein neu gegründetes Unternehmen für Gebäudereinigung
              mit Sitz in Hannover. Der Anstoß war die Beobachtung, dass viele
              Reinigungsdienstleistungen unpersönlich und wenig flexibel
              organisiert sind. Wir wollten das anders machen: mit festen
              Ansprechpartnern, klaren Absprachen und einem Team, das sich
              wirklich für das Ergebnis verantwortlich fühlt.
            </p>
            <p className={styles.storyLead}>
              Von Anfang an haben wir uns auf Unterhalts-, Fenster- und
              Grundreinigung sowie Hausmeisterdienste für Büros, Wohn- und
              Geschäftshäuser, Kanzleien und Gewerbeflächen spezialisiert –
              statt alles anzubieten, konzentrieren wir uns auf das, was wir
              wirklich gut können.
            </p>
          </div>
        </div>
      </section>

      <section className={styles.werteSection}>
        <div className={styles.werteInner}>
          <h2 className={styles.werteHeading}>Was uns wichtig ist</h2>
          <p className={`lead ${styles.werteLead}`}>
            Diese Grundsätze bestimmen, wie wir arbeiten – bei jedem Auftrag,
            unabhängig von Objektgröße oder Branche.
          </p>

          <div className={styles.werteGrid}>
            {werte.map((wert) => (
              <article key={wert.heading} className={styles.werteCard}>
                <span className={styles.werteIcon} aria-hidden="true">
                  <CheckCircleIcon size={24} weight="duotone" />
                </span>
                <h3 className={styles.werteCardHeading}>{wert.heading}</h3>
                <p className={styles.werteCardText}>{wert.text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className={styles.philosophySection}>
        <div className={styles.philosophyInner}>
          <div className={styles.philosophyCol}>
            <h2 className={styles.philosophyHeading}>Unsere Philosophie</h2>
            <p className={styles.philosophyText}>
              Wir verstehen Reinigung nicht als reine Dienstleistung nach
              Checkliste, sondern als Teil der Wahrnehmung Ihres Unternehmens.
              Ein gepflegtes Gebäude schafft Vertrauen – bei Kunden,
              Mitarbeitenden und Besuchern gleichermaßen. Deshalb passen wir
              unsere Konzepte an das jeweilige Objekt an, statt starre
              Standardpakete zu verkaufen.
            </p>
          </div>
          <div className={styles.philosophyCol}>
            <h2 className={styles.philosophyHeading}>Unsere Ziele</h2>
            <p className={styles.philosophyText}>
              Kurzfristig wollen wir in Hannover und Umgebung als verlässlicher
              Partner für Gebäudereinigung wahrgenommen werden. Langfristig
              setzen wir auf nachhaltiges Wachstum durch zufriedene, langjährige
              Kunden statt kurzfristiger Einzelaufträge – getragen von einem
              Team, das fair behandelt wird und entsprechend motiviert arbeitet.
            </p>
          </div>
        </div>
      </section>

      <section>
        <ContactCtaSection
          heading="Lernen Sie uns persönlich kennen"
          lead="Sie möchten mehr über Basiclean erfahren oder direkt ein individuelles Angebot anfragen? Wir freuen uns auf Ihre Nachricht."
        />
      </section>
    </main>
  );
}