portfolio/app/components/ClientWrappers.tsx

"use client";

/**
 * Transitional Wrapper für bestehende Components
 * Nutzt direkt JSON Messages statt komplexe Translation-Loader
 */

import { NextIntlClientProvider } from 'next-intl';
import dynamic from 'next/dynamic';

// Lazy-load below-fold components so their JS doesn't block initial paint / LCP.
// SSR stays on (default) so content is in the initial HTML for SEO.
const About = dynamic(() => import('./About'));
const Projects = dynamic(() => import('./Projects'));
const Contact = dynamic(() => import('./Contact'));
const Footer = dynamic(() => import('./Footer'));
import type {
  AboutTranslations,
  ProjectsTranslations,
  ContactTranslations,
  FooterTranslations,
} from '@/types/translations';
import enMessages from '@/messages/en.json';
import deMessages from '@/messages/de.json';

const messageMap = { en: enMessages, de: deMessages };

function getNormalizedLocale(locale: string): 'en' | 'de' {
  return locale.startsWith('de') ? 'de' : 'en';
}

export function AboutClient({ locale }: { locale: string; translations: AboutTranslations }) {
  const normalLocale = getNormalizedLocale(locale);
  const baseMessages = messageMap[normalLocale];
  
  const messages = {
    home: {
      about: baseMessages.home.about
    }
  };
  
  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      <About />
    </NextIntlClientProvider>
  );
}

export function ProjectsClient({ locale }: { locale: string; translations: ProjectsTranslations }) {
  const normalLocale = getNormalizedLocale(locale);
  const baseMessages = messageMap[normalLocale];
  
  const messages = {
    home: {
      projects: baseMessages.home.projects
    }
  };
  
  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      <Projects />
    </NextIntlClientProvider>
  );
}

export function ContactClient({ locale }: { locale: string; translations: ContactTranslations }) {
  const normalLocale = getNormalizedLocale(locale);
  const baseMessages = messageMap[normalLocale];
  
  const messages = {
    home: {
      contact: baseMessages.home.contact
    }
  };
  
  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      <Contact />
    </NextIntlClientProvider>
  );
}

export function FooterClient({ locale }: { locale: string; translations: FooterTranslations }) {
  const normalLocale = getNormalizedLocale(locale);
  const baseMessages = messageMap[normalLocale];
  
  const messages = {
    footer: baseMessages.footer
  };
  
  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      <Footer />
    </NextIntlClientProvider>
  );
}