klz-cables.com/app/[locale]/[slug]/page.tsx

import { notFound } from 'next/navigation';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { Container, Badge, Heading } from '@/components/ui';
import { getTranslations, setRequestLocale } from 'next-intl/server';
import { Metadata } from 'next';
import { getPageBySlug, getAllPages } from '@/lib/pages';
import { mdxComponents } from '@/components/blog/MDXComponents';
import { getOGImageMetadata } from '@/lib/metadata';
import { SITE_URL } from '@/lib/schema';

interface PageProps {
  params: Promise<{
    locale: string;
    slug: string;
  }>;
}

export async function generateStaticParams() {
  const locales = ['en', 'de'];
  const params = [];

  for (const locale of locales) {
    const pages = await getAllPages(locale);
    for (const page of pages) {
      params.push({ locale, slug: page.slug });
    }
  }

  return params;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { locale, slug } = await params;
  const pageData = await getPageBySlug(slug, locale);

  if (!pageData) return {};

  return {
    title: pageData.frontmatter.title,
    description: pageData.frontmatter.excerpt || '',
    alternates: {
      canonical: `/${locale}/${slug}`,
      languages: {
        de: `/de/${slug}`,
        en: `/en/${slug}`,
        'x-default': `/en/${slug}`,
      },
    },
    openGraph: {
      title: `${pageData.frontmatter.title} | KLZ Cables`,
      description: pageData.frontmatter.excerpt || '',
      url: `${SITE_URL}/${locale}/${slug}`,
      images: getOGImageMetadata(slug, pageData.frontmatter.title, locale),
    },
    twitter: {
      card: 'summary_large_image',
      title: `${pageData.frontmatter.title} | KLZ Cables`,
      description: pageData.frontmatter.excerpt || '',
    },
  };
}

export default async function StandardPage({ params }: PageProps) {
  const { locale, slug } = await params;
  setRequestLocale(locale);
  const pageData = await getPageBySlug(slug, locale);
  const t = await getTranslations('StandardPage');

  if (!pageData) {
    notFound();
  }

  return (
    <div className="flex flex-col min-h-screen bg-white">
      {/* Hero Section */}
      <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
        <div className="absolute inset-0 opacity-20">
          <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
        </div>
        <Container className="relative z-10">
          <div className="max-w-4xl animate-slide-up">
            <Badge variant="accent" className="mb-4 md:mb-6">
              {t('badge')}
            </Badge>
            <Heading level={1} className="text-white mb-0">
              {pageData.frontmatter.title}
            </Heading>
          </div>
        </Container>
      </section>

      {/* Main Content Area */}
      <div className="container mx-auto px-4 py-16 md:py-24">
        <div className="max-w-4xl mx-auto">
          {/* Excerpt/Lead paragraph if available */}
          {pageData.frontmatter.excerpt && (
            <div className="mb-16 animate-slight-fade-in-from-bottom">
              <p className="text-xl md:text-2xl text-text-primary leading-relaxed font-medium border-l-4 border-primary pl-8 py-2 italic">
                {pageData.frontmatter.excerpt}
              </p>
            </div>
          )}

          {/* Main content with shared blog components */}
          <div className="prose prose-lg md:prose-xl max-w-none prose-headings:font-bold prose-headings:text-text-primary prose-p:text-text-secondary prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-img:rounded-2xl prose-img:shadow-2xl prose-blockquote:border-primary prose-blockquote:bg-primary/5 prose-blockquote:rounded-r-2xl prose-strong:text-primary animate-slight-fade-in-from-bottom">
            <MDXRemote source={pageData.content} components={mdxComponents} />
          </div>

          {/* Support Section */}
          <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
            <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
            <div className="relative z-10 max-w-2xl">
              <h3 className="text-2xl md:text-3xl font-bold mb-4">{t('needHelp')}</h3>
              <p className="text-lg text-white/70 mb-8">{t('supportTeamAvailable')}</p>
              <a
                href={`/${locale}/contact`}
                className="inline-flex items-center px-8 py-4 bg-accent text-primary-dark font-bold rounded-full hover:bg-white transition-all duration-300 group/link"
              >
                {t('contactUs')}
                <span className="ml-2 transition-transform group-hover/link:translate-x-1">
                  &rarr;
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}