basiclean-webapp/app/branchenloesungen/[slug]/page.tsx

import { notFound } from "next/navigation";
import { branchen } from "../data";
import { leistungen } from "../../leistungen/data";
import Image from "next/image";
import Link from "next/link";
import {
  ArrowRightIcon,
  CheckCircleIcon,
} from "@phosphor-icons/react/dist/ssr";
import styles from "./page.module.css";
import StaggeredGallery from "@/components/StaggeredGallery";
import FaqSection from "@/components/faq/FaqSection";
import { branchenFaq } from "@/components/faq/faqData";
import ContactCtaSection from "@/components/contact/ContactCtaSection";
import BentoGallery from "@/components/BentoGallery";

import type { Metadata } from "next";

const siteUrl = "https://basiclean.de";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const branche = branchen.find((item) => item.slug === slug);

  if (!branche) {
    return {
      title: "Nicht gefunden",
      robots: { index: false, follow: false },
    };
  }

  const hasCustomSeo = Boolean(branche.metaTitle);

  const title = hasCustomSeo
    ? { absolute: branche.metaTitle as string }
    : branche.titleMain;

  const flatTitle = hasCustomSeo
    ? (branche.metaTitle as string)
    : branche.titleMain;
  const description = branche.metaDescription ?? branche.text;
  const url = `${siteUrl}/branchenloesungen/${branche.slug}`;
  const ogImageUrl = branche.ogImage ?? branche.image;

  return {
    title,
    description,
    alternates: {
      canonical: url,
    },
    openGraph: {
      type: "website",
      siteName: "Basiclean",
      locale: "de_DE",
      title: flatTitle,
      description,
      url,
      images: [
        {
          url: ogImageUrl,
          alt: branche.imageAlt,
          width: 1200,
          height: 628,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      site: "@basiclean",
      title: flatTitle,
      description,
      images: [{ url: ogImageUrl, alt: branche.imageAlt }],
    },
  };
}

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

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

  const branche = branchen.find((item) => item.slug === slug);
  const faqEntry = branchenFaq.find((item) => item.slug === branche?.faqSlug);

  if (!branche) {
    notFound();
  }

  const empfohleneLeistungen = branche.relatedServices.slugs
    .map((leistungSlug) =>
      leistungen.find((item) => item.slug === leistungSlug),
    )
    .filter((item): item is (typeof leistungen)[number] => Boolean(item));

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

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

            <div className={styles.body}>
              <p className={`lead ${styles.lead}`}>{branche.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>

      <BentoGallery images={branche.gallery} />

      <section
        className={styles.challengesSection}
        aria-labelledby="challenges-heading"
      >
        <div className={styles.challengesInner}>
          <h2 id="challenges-heading" className={styles.challengesHeading}>
            {branche.challengesSection.heading}
          </h2>
          <p className={`lead ${styles.challengesLead}`}>
            {branche.challengesSection.lead}
          </p>

          <div className={styles.challengesList}>
            {branche.challengesSection.points.map((point) => (
              <article key={point} className={styles.challengesItem}>
                <span className={styles.challengesIcon} aria-hidden="true">
                  <CheckCircleIcon size={24} weight="duotone" />
                </span>
                <p className={styles.challengesText}>{point}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {empfohleneLeistungen.length > 0 && (
        <section className={styles.servicesSection}>
          <div className={styles.servicesInner}>
            <h2 className={styles.servicesHeading}>
              {branche.relatedServices.heading}
            </h2>
            <p className={styles.servicesLead}>
              {branche.relatedServices.lead}
            </p>

            <div className={styles.servicesGrid}>
              {empfohleneLeistungen.map((leistung) => (
                <Link
                  key={leistung.slug}
                  href={`/leistungen/${leistung.slug}`}
                  className={styles.serviceCard}
                >
                  <div className={styles.serviceCardImageWrapper}>
                    <Image
                      src={leistung.image}
                      alt={leistung.imageAlt}
                      fill
                      className={styles.serviceCardImage}
                      sizes="(max-width: 640px) 100vw, 320px"
                    />
                  </div>
                  <div className={styles.serviceCardBody}>
                    <h3 className={styles.serviceCardTitle}>
                      {leistung.titleMain}
                    </h3>
                    <span className={styles.serviceCardLink}>
                      Mehr erfahren
                      <ArrowRightIcon
                        size={16}
                        weight="bold"
                        aria-hidden="true"
                      />
                    </span>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>
      )}

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

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