Portfolio/src/app/[locale]/portfolio/page.tsx

import { setRequestLocale } from 'next-intl/server';
import type { Metadata } from 'next';
import { getTranslations } from 'next-intl/server';
import { PortfolioGrid } from '@/components/portfolio';

type Props = {
  params: Promise<{ locale: string }>;
};

const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://damjan-savic.com';

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'portfolio.seo' });

  const keywords: Record<string, string[]> = {
    de: [
      'Portfolio Damjan Savić',
      'KI Projekte',
      'Automatisierung Projekte',
      'Python Entwicklung',
      'React Projekte',
      'RFID IoT',
      'n8n Automatisierung',
      'Web Entwicklung Köln',
    ],
    en: [
      'AI Developer Portfolio',
      'AI Projects',
      'Automation Projects',
      'Python Development',
      'React Projects',
      'n8n Automation',
      'Remote Developer Portfolio',
      'Hire AI Developer',
      'AI Agent Projects',
      'Voice AI Projects',
      'SaaS Development Portfolio',
    ],
    sr: [
      'Portfolio Damjan Savić',
      'AI Projekti',
      'Automatizacija Projekti',
      'Python Razvoj',
      'React Projekti',
      'RFID IoT',
      'n8n Automatizacija',
      'Web Razvoj Keln',
    ],
  };

  const localePath = locale === 'de' ? '/portfolio' : `/${locale}/portfolio`;

  return {
    title: t('title'),
    description: t('description'),
    keywords: keywords[locale] || keywords.de,
    alternates: {
      canonical: `${BASE_URL}${localePath}`,
      languages: {
        'x-default': `${BASE_URL}/portfolio`,
        de: `${BASE_URL}/portfolio`,
        en: `${BASE_URL}/en/portfolio`,
        sr: `${BASE_URL}/sr/portfolio`,
      },
    },
    openGraph: {
      title: t('title'),
      description: t('description'),
      url: `${BASE_URL}${localePath}`,
      type: 'website',
      locale: locale === 'de' ? 'de_DE' : locale === 'sr' ? 'sr_RS' : 'en_US',
      alternateLocale: ['de_DE', 'en_US', 'sr_RS'].filter(l => l !== (locale === 'de' ? 'de_DE' : locale === 'sr' ? 'sr_RS' : 'en_US')),
    },
  };
}

// Project data for SSG
const projects = [
  {
    slug: 'ai-data-reader',
    title: 'AI Document Reader',
    description: 'KI-gestützte Dokumentenanalyse mit OLLAMA und Python',
    excerpt: 'KI-gestützte PDF-Datenextraktion mit Claude AI und JTL-Integration',
    category: 'AI Development',
    date: '2024-01',
    technologies: ['Python', 'OLLAMA', 'FastAPI', 'React', 'Claude AI', 'JTL-Wawi'],
    featured: true,
  },
  {
    slug: 'smart-warehouse',
    title: 'Smart Warehouse RFID',
    description: 'RFID-basiertes Lagerverwaltungssystem mit IoT-Integration',
    excerpt: 'RFID-basierte Lagerverwaltung mit Zebra-Hardware und Echtzeit-Tracking',
    category: 'IoT',
    date: '2024-02',
    technologies: ['Python', 'RFID', 'IoT', 'PostgreSQL', 'Zebra Hardware'],
    featured: true,
  },
  {
    slug: 'website-mit-ki',
    title: 'Portfolio mit KI',
    description: 'Moderne Portfolio-Website mit KI-Integration',
    excerpt: 'Next.js 15 Portfolio mit SSR, i18n und modernen Web-Technologien',
    category: 'Full-Stack',
    date: '2024-03',
    technologies: ['Next.js', 'TypeScript', 'Tailwind', 'Supabase', 'React'],
    featured: true,
  },
  {
    slug: 'power-platform-governance',
    title: 'Power Platform Governance',
    description: 'Enterprise Governance-Lösung für Microsoft Power Platform',
    excerpt: 'Automatisierte Compliance-Prüfungen und Ressourcenverwaltung',
    category: 'Enterprise Software',
    date: '2023-11',
    technologies: ['Power Automate', 'SharePoint', 'Azure', 'TypeScript', 'Power Apps'],
    featured: false,
  },
  {
    slug: 'automated-ad-creatives',
    title: 'Automated Ad Creatives',
    description: 'Automatisierte Erstellung von Werbeanzeigen',
    excerpt: 'KI-gestützte Generierung von Marketing-Creatives',
    category: 'AI Development',
    date: '2023-10',
    technologies: ['Python', 'OpenAI', 'Pillow', 'FastAPI'],
    featured: false,
  },
  {
    slug: 'kamenpro',
    title: 'KamenPro',
    description: 'E-Commerce Platform für Steinprodukte',
    excerpt: 'Shopify-basierte E-Commerce-Lösung mit ERP-Integration',
    category: 'E-Commerce',
    date: '2023-08',
    technologies: ['Shopify', 'JavaScript', 'Liquid', 'ERP Integration'],
    featured: false,
  },
  {
    slug: 'ai-music-production',
    title: 'AI Music Production',
    description: 'KI-gestützte Musikproduktion',
    excerpt: 'Automatisierte Musikgenerierung mit Machine Learning',
    category: 'AI Development',
    date: '2023-06',
    technologies: ['Python', 'TensorFlow', 'MIDI', 'Audio Processing'],
    featured: false,
  },
  {
    slug: 'cursor-ide',
    title: 'Cursor IDE Integration',
    description: 'AI-gestützte Entwicklungsumgebung',
    excerpt: 'Integration von KI-Assistenten in den Entwicklungsworkflow',
    category: 'Developer Tools',
    date: '2023-05',
    technologies: ['TypeScript', 'VS Code API', 'Claude AI', 'GPT-4'],
    featured: false,
  },
];

export default async function PortfolioPage({ params }: Props) {
  const { locale } = await params;
  setRequestLocale(locale);

  const t = await getTranslations('portfolio');

  return (
    <div className="relative min-h-screen">
      <section className="py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h1 className="text-3xl font-bold text-white mb-4">
              {t('sections.title')}
            </h1>
            <p className="text-zinc-400 max-w-2xl mx-auto">
              {t('sections.subtitle')}
            </p>
          </div>

          <PortfolioGrid projects={projects} />
        </div>
      </section>
    </div>
  );
}