import type { Metadata } from "next";

import styles from "./page.module.css";
import ContactForm from "@/components/ContactForm";
import FaqSection from "@/components/faq/FaqSection";
import { homepageFaq } from "@/components/faq/faqData";

export const metadata: Metadata = {
  title: "Kontakt",
  description:
    "Kontaktieren Sie Basiclean für ein individuelles Angebot zu Reinigung und Hausmeisterdiensten in Hannover und Umgebung.",
};

export default function Page() {
  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}>
            Kontaktieren Sie uns
          </h1>
          <p className={`lead ${styles.lead}`}>
            Sie haben Fragen oder möchten ein individuelles Angebot anfragen?
            Füllen Sie das Formular aus – wir melden uns schnellstmöglich bei
            Ihnen zurück.
          </p>
        </div>
      </section>

      <section className={styles.formSection}>
        <div className={styles.formInner}>
          <div className={styles.formPanel}>
            <ContactForm />
          </div>

          <div className={styles.infoPanel}>
            <h2 className={styles.infoHeading}>So erreichen Sie uns</h2>

            <ul className={styles.infoList}>
              <li className={styles.infoItem}>
                <span className={styles.infoLabel}>Telefon</span>
                <a href="tel:+4951112345678" className={styles.infoValue}>
                  0511 123 456 78
                </a>
              </li>
              <li className={styles.infoItem}>
                <span className={styles.infoLabel}>E-Mail</span>
                <a href="mailto:info@basiclean.de" className={styles.infoValue}>
                  info@basiclean.de
                </a>
              </li>
              <li className={styles.infoItem}>
                <span className={styles.infoLabel}>Adresse</span>
                <span className={styles.infoValue}>
                  Musterstraße 12, 30159 Hannover
                </span>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <section>
        <FaqSection title="Häufige Fragen" items={homepageFaq} />
      </section>
    </main>
  );
}