import type { Metadata } from 'next';
import { notFound } from 'next/navigation';

import { UseCasePageTemplate } from '@/components/marketing/UseCasePageTemplate';
import {
  getUseCasePageDe,
  useCasePagesDe,
  useCaseTemplateLabelsDe,
} from '@/lib/growth-pages-de';
import { buildLanguageAlternates, absoluteUrl } from '@/lib/i18n';

export const dynamicParams = false;

export function generateStaticParams() {
  return Object.keys(useCasePagesDe).map((slug) => ({ slug }));
}

export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
  const page = getUseCasePageDe(params.slug);

  if (!page) {
    return {};
  }

  const alternates = buildLanguageAlternates({
    en: page.enPath ?? `/use-cases/${page.enSlug}`,
    de: page.href,
  });

  return {
    title: {
      absolute: `${page.title} | QR Master`,
    },
    description: page.metaDescription,
    alternates: {
      // The German page canonicalizes to itself; hreflang links the pair.
      canonical: absoluteUrl(page.href),
      languages: alternates.languages,
    },
    openGraph: {
      title: `${page.title} | QR Master`,
      description: page.metaDescription,
      url: absoluteUrl(page.href),
      type: 'website',
      locale: 'de_DE',
      images: ['/og-image.png'],
    },
    twitter: {
      title: `${page.title} | QR Master`,
      description: page.metaDescription,
    },
  };
}

export default function UseCaseDetailPageDe({
  params,
}: {
  params: { slug: string };
}) {
  const page = getUseCasePageDe(params.slug);

  if (!page) {
    notFound();
  }

  return (
    <UseCasePageTemplate
      title={page.title}
      description={page.metaDescription}
      eyebrow={page.eyebrow}
      intro={page.intro}
      pageType="use_case"
      cluster={page.cluster}
      useCase={page.slug}
      breadcrumbs={[
        { name: 'Startseite', url: '/qr-code-erstellen' },
        { name: page.title, url: page.href },
      ]}
      answer={page.answer}
      whenToUse={page.whenToUse}
      comparisonItems={page.comparisonItems}
      howToSteps={page.howToSteps}
      primaryCta={{
        // German visitors should convert on the German generator page, not
        // the English commercial parent.
        href: '/qr-code-erstellen',
        label: page.ctaLabel,
      }}
      secondaryCta={{
        href: page.parentHref,
        label: `Mehr erfahren: ${page.parentTitle}`,
      }}
      workflowTitle={page.workflowTitle}
      workflowIntro={page.workflowIntro}
      workflowCards={page.workflowCards}
      checklistTitle={page.checklistTitle}
      checklist={page.checklist}
      supportLinks={page.supportLinks}
      faq={page.faq}
      heroImage={page.heroImage}
      heroImageAlt={page.heroImageAlt}
      authoritySignals={page.authoritySignals}
      directAnswer={page.directAnswer}
      enableScrollReveal={page.enableScrollReveal}
      labels={{
        ...useCaseTemplateLabelsDe,
        faqTitle: `FAQ: ${page.title}`,
      }}
    />
  );
}