import { notFound } from "next/navigation";
import { leistungen } from "../data";
import Image from "next/image";
import Link from "next/link";
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
import { Slider } from "@/components/slider/Slider";
import styles from "./page.module.css";
import MaintenanceCleaningSection from "@/components/MaintenanceCleaningSection";
import QualityClaimSection from "@/components/QualityClaimSection";
import ConceptSection from "@/components/ConceptSection";
import ProcessSection from "@/components/ProcessSection";
import FaqSection from "@/components/faq/FaqSection";
import { leistungenFaq } from "@/components/faq/faqData";
import ContactCtaSection from "@/components/contact/ContactCtaSection";

export function generateStaticParams() {
  return leistungen.map((item) => ({
    slug: item.slug,
  }));
}

export default async function LeistungDetail({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  const leistung = leistungen.find((item) => item.slug === slug);
  const faqEntry = leistungenFaq.find((item) => item.slug === slug);

  if (!leistung) {
    notFound();
  }

  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}>
            {leistung.titleMain}
            <span className={styles.headingSub}>{leistung.titleSub}</span>
          </h1>

          <div className={styles.content}>
            <div className={styles.imageWrapper}>
              <div className={styles.imageFrame}>
                <Image
                  src={leistung.image}
                  alt={leistung.imageAlt}
                  fill
                  className={styles.image}
                  sizes="(max-width: 640px) 100vw, 260px"
                />
              </div>
            </div>

            <div className={styles.body}>
              <p className={`lead ${styles.lead}`}>{leistung.text}</p>

              <Link href="/kontakt" className="btn btn--filled">
                <span className="btn-icon animate" aria-hidden="true">
                  <ArrowRightIcon size={18} weight="bold" />
                </span>
                Jetzt Angebot anfragen
              </Link>
            </div>
          </div>
        </div>
      </section>

      {leistung.slides.length > 0 && (
        <section
          className={styles.sliderSection}
          aria-label={`Weitere Informationen zur ${leistung.titleMain}`}
        >
          <h2 className={styles.slidesHeading}>{leistung.titleSlides}</h2>
          <div className={styles.inner}>
            <Slider slides={leistung.slides} imageAlt={leistung.imageAlt} />
          </div>
        </section>
      )}

      <section>
        <MaintenanceCleaningSection {...leistung.maintenanceSection} />
      </section>

      <section>
        <QualityClaimSection {...leistung.qualityClaimSection} />
      </section>

      <section>
        <ConceptSection {...leistung.conceptSection} />
      </section>

      <section>
        <ProcessSection {...leistung.processSection} />
      </section>

      <section>
        <FaqSection
          title={faqEntry?.title ?? "Häufige Fragen"}
          items={faqEntry?.faq ?? []}
        />
      </section>

<section>
  <ContactCtaSection {...leistung.contactCtaSection} />
</section>
    </main>
  );
}