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';
import Hero from './Hero';
import type {
  HeroTranslations,
  AboutTranslations,
  ProjectsTranslations,
  ContactTranslations,
  FooterTranslations,
} from '@/types/translations';
import enMessages from '@/messages/en.json';
import deMessages from '@/messages/de.json';

// Lazy-load below-fold sections to reduce initial JS payload
const About = dynamic(() => import('./About'), { ssr: false });
const Projects = dynamic(() => import('./Projects'), { ssr: false });
const Contact = dynamic(() => import('./Contact'), { ssr: false });
const Footer = dynamic(() => import('./Footer'), { ssr: false });

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

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

export function HeroClient({ locale }: { locale: string; translations: HeroTranslations }) {
  const normalLocale = getNormalizedLocale(locale);
  const baseMessages = messageMap[normalLocale];
  
  const messages = {
    home: {
      hero: baseMessages.home.hero
    }
  };
  
  return (
    <NextIntlClientProvider locale={locale} messages={messages}>
      <Hero />
    </NextIntlClientProvider>
  );
}

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>
  );
}