e-tib.com/app/[locale]/page.tsx

import { Metadata } from 'next';
import { setRequestLocale } from 'next-intl/server';
import { notFound } from 'next/navigation';
import { getMdxContent } from '@/lib/mdx';
import { MDXRemote } from 'next-mdx-remote/rsc';

export const dynamic = 'force-dynamic';

// Import components used in MDX
import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
import { SubCompanyTiles as HomeSubCompanyTiles } from '@/components/blocks/SubCompanyTiles';
import { CompetenceBentoGrid as HomeCompetenceBentoGrid } from '@/components/blocks/CompetenceBentoGrid';
import { ReferencesSlider as HomeReferencesSlider } from '@/components/blocks/ReferencesSlider';
import { FaqBlock } from '@/components/blocks/FaqBlock';
import { CertificatesBlock } from '@/components/blocks/CertificatesBlock';
import { HeroSection } from '@/components/blocks/HeroSection';
import JsonLd from '@/components/JsonLd';

import { Button } from '@/components/ui/Button';
import { Heading } from '@/components/ui/Heading';
import { AnimatedCounter } from '@/components/ui';
import { InteractiveGermanyMap } from '@/components/blocks/InteractiveGermanyMap';
import { ScaleOfImpact } from '@/components/blocks/ScaleOfImpact';
import { getAllReferences } from '@/lib/references';

const mdxComponents = (references: any[]) => ({
  HomeHero,
  HomeSubCompanyTiles,
  HomeCompetenceBentoGrid,
  HomeReferencesSlider: (props: any) => <HomeReferencesSlider {...props} references={props.references || references} />,
  FaqBlock,
  CertificatesBlock,
  HeroSection,
  JsonLd,
  Button,
  Heading,
  AnimatedCounter,
  InteractiveGermanyMap,
  ScaleOfImpact,
});

export async function generateMetadata(props: any): Promise<Metadata> {
  const { locale } = await props.params;
  if (locale !== 'de' && locale !== 'en') return {};
  
  const mdx = await getMdxContent(locale, 'home');
  
  return {
    title: mdx?.frontmatter?.title || (locale === 'de' ? 'Startseite' : 'Home'),
    description: mdx?.frontmatter?.description,
  };
}

export default async function Home(props: any) {
  const { locale } = await props.params;
  
  if (locale !== 'de' && locale !== 'en') {
    notFound();
  }
  
  setRequestLocale(locale);

  const mdx = await getMdxContent(locale, 'home');
  const allReferences = await getAllReferences(locale);
  
  // Transform ReferenceData to the format expected by ReferencesSlider
  const sliderReferences = allReferences.map(ref => ({
    id: ref.slug,
    title: ref.frontmatter.title,
    slug: ref.slug,
    category: ref.frontmatter.location, // Using location as category if not specified
    image: ref.frontmatter.featuredImage
  })).slice(0, 6);

  if (!mdx) {
    notFound();
  }

  return (
    <main>
      <MDXRemote source={mdx.content} components={mdxComponents(sliderReferences)} />
    </main>
  );
}