import { notFound } from 'next/navigation';
import { getTranslations, setRequestLocale } from 'next-intl/server';
import { locales, type Locale } from '@/i18n/config';
import Link from 'next/link';
import Image from 'next/image';
import type { Metadata } from 'next';
import { BreadcrumbJsonLd, ArticleJsonLd } from '@/components/seo';
import { getBlogPostBySlug, getBlogPostSlugs } from '@/lib/blog';
import { renderMarkdown } from '@/lib/markdown';

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

// Legacy blog posts with full translations
const legacyBlogPosts: Record<string, Record<string, {
  title: string;
  date: string;
  excerpt: string;
  category: string;
  tags: string[];
  coverImage: string;
  content: string;
}>> = {
  de: {
    'n8n-automatisierung-tutorial': {
      title: 'n8n Tutorial: Workflows automatisieren ohne Code - Schritt für Schritt',
      date: '2026-01-18',
      excerpt: 'Lernen Sie, wie Sie mit n8n leistungsstarke Automatisierungen erstellen. Von der Installation bis zum ersten produktiven Workflow - inklusive Best Practices.',
      category: 'Automatisierung',
      tags: ['n8n', 'Tutorial', 'Automatisierung', 'Workflow', 'No-Code', 'Self-Hosted'],
      coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
      content: `
## n8n Tutorial: Der vollständige Leitfaden für Workflow-Automatisierung

n8n ist die führende Open-Source-Alternative zu Zapier und Make. In diesem umfassenden Tutorial zeige ich Ihnen alles, was Sie für den Einstieg brauchen.

### Was ist n8n?

n8n (gesprochen "n-eight-n") ist eine Open-Source-Workflow-Automatisierungsplattform, die es ermöglicht, verschiedene Anwendungen und Dienste miteinander zu verbinden. Der Name steht für "nodemation" - eine Kombination aus "node" und "automation".

### Warum n8n wählen?

Im Vergleich zu anderen Tools bietet n8n:
- **Self-Hosting**: Volle Kontrolle über Ihre Daten (DSGVO!)
- **Kostenlos**: Die Self-Hosted-Version ist komplett kostenlos
- **Fair-Code**: Open Source mit einer fairen Lizenz
- **300+ Integrationen**: Von CRM bis KI-APIs

### Installation: 3 Wege zum Ziel

#### Option 1: Docker (Empfohlen)

\`\`\`bash
docker run -it --rm --name n8n -p 5678:5678 -v ~/.n8n:/home/node/.n8n n8nio/n8n
\`\`\`

#### Option 2: NPM

\`\`\`bash
npm install n8n -g
n8n start
\`\`\`

#### Option 3: n8n Cloud

Für einen schnellen Start ohne Infrastruktur-Aufwand können Sie n8n Cloud nutzen.

### Ihr erster Workflow: E-Mail zu Slack

Lassen Sie uns einen praktischen Workflow erstellen, der neue E-Mails automatisch in Slack postet:

1. **Trigger hinzufügen**: Gmail Node als Trigger
2. **Transformation**: Function Node für Textformatierung
3. **Ausgabe**: Slack Node für die Nachricht

### Best Practices für n8n

Nach über 100 n8n-Projekten empfehle ich:

- **Fehlerbehandlung**: Immer Error Workflow einrichten
- **Dokumentation**: Sticky Notes im Workflow nutzen
- **Versionierung**: Workflows regelmäßig exportieren
- **Monitoring**: Execution Log im Auge behalten

### n8n mit KI kombinieren

Die wahre Stärke von n8n zeigt sich in Kombination mit KI:

1. Dokumente mit OpenAI analysieren
2. Automatische Zusammenfassungen generieren
3. Sentiment-Analyse für Kundenfeedback
4. Content-Generierung für Marketing

### Fortgeschrittene Techniken

Für Power-User:
- **Custom Nodes**: Eigene Integrationen entwickeln
- **Webhooks**: Echtzeit-Triggers von externen Systemen
- **Code Nodes**: JavaScript für komplexe Logik
- **Sub-Workflows**: Modularisierung für Wiederverwendbarkeit

### Fazit

n8n ist das mächtigste Automatisierungstool für Teams, die Wert auf Datenschutz und Flexibilität legen. Mit diesem Tutorial haben Sie das Fundament für professionelle Workflow-Automatisierung gelegt.

**Nächster Schritt**: Starten Sie mit einem einfachen Use Case und erweitern Sie schrittweise.
      `,
    },
    'geo-generative-engine-optimization': {
      title: 'GEO: Generative Engine Optimization - SEO für die KI-Ära',
      date: '2026-01-17',
      excerpt: 'Wie Sie Ihre Inhalte für ChatGPT, Perplexity und andere KI-Suchmaschinen optimieren. Der neue Standard nach klassischem SEO.',
      category: 'Marketing',
      tags: ['GEO', 'SEO', 'KI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
      coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
      content: `
## GEO: Generative Engine Optimization - Der ultimative Guide

Die Spielregeln für Online-Sichtbarkeit ändern sich grundlegend. Während SEO auf Google-Rankings abzielt, geht es bei GEO darum, von KI-Systemen wie ChatGPT, Perplexity und Google SGE zitiert zu werden.

### Was ist Generative Engine Optimization (GEO)?

GEO beschreibt die Optimierung von Inhalten, um von KI-gestützten Suchsystemen als Quelle verwendet zu werden. Im Gegensatz zu klassischem SEO geht es nicht um Rankings, sondern darum, als vertrauenswürdige Quelle für KI-generierte Antworten zu gelten.

### Warum GEO jetzt wichtig wird

Die Zahlen sprechen für sich:
- **30% weniger Google-Klicks** seit ChatGPT-Launch
- **50% der Gen-Z** nutzt TikTok und KI statt Google
- **Perplexity** verzeichnet 10 Mio. monatliche Nutzer

### Die 7 Säulen der GEO-Optimierung

#### 1. Autorität aufbauen (E-E-A-T)

KI-Systeme bevorzugen Quellen mit nachweisbarer Expertise:
- Autor-Biografie mit Qualifikationen
- Zitate von Experten
- Verlinkung zu primären Quellen
- Regelmäßige Aktualisierungen

#### 2. Strukturierte Daten nutzen

Schema.org-Markup hilft KI, Ihre Inhalte zu verstehen:
- Article Schema mit Autor
- FAQ Schema für Fragen
- HowTo Schema für Anleitungen
- Organization Schema

#### 3. Direkte Antworten liefern

KI-Systeme lieben präzise, zitierbare Aussagen:
- Definitionen am Anfang von Abschnitten
- Bullet Points für Listen
- Zahlen und Statistiken
- Klare Wenn-Dann-Aussagen

#### 4. Semantische Tiefe

Behandeln Sie Themen umfassend:
- Alle relevanten Unterthemen abdecken
- Häufige Fragen beantworten
- Verschiedene Perspektiven zeigen
- Praxisbeispiele einbinden

#### 5. Unique Content

KI bevorzugt originelle Inhalte:
- Eigene Studien und Daten
- Fallstudien aus der Praxis
- Experteninterviews
- Proprietäre Frameworks

#### 6. Technische Optimierung

Stellen Sie sicher, dass KI-Crawler Ihre Inhalte lesen können:
- Robots.txt für GPTBot erlauben
- Schnelle Ladezeiten
- Mobile-First Design
- Saubere HTML-Struktur

#### 7. Multi-Format-Strategie

Verbreiten Sie Expertise auf verschiedenen Kanälen:
- Blog-Artikel (Google)
- YouTube-Videos (Perplexity)
- Podcast (Audio-KI)
- Social Media (Training-Daten)

### GEO vs. SEO: Die Unterschiede

| Aspekt | SEO | GEO |
|--------|-----|-----|
| Ziel | Ranking | Zitation |
| Metriken | Position, CTR | Mentions, Citations |
| Keywords | Exakt Match | Semantisch |
| Format | Optimiert für Nutzer | Optimiert für KI-Parsing |

### Praktische GEO-Checkliste

Für jeden Artikel prüfen:

1. ✅ Klare Definition im ersten Absatz?
2. ✅ Strukturierte Daten implementiert?
3. ✅ Zahlen und Fakten mit Quellen?
4. ✅ FAQ-Sektion vorhanden?
5. ✅ Autor-Expertise erkennbar?
6. ✅ Aktualitätsdatum sichtbar?

### Fazit: Die Zukunft ist GEO

GEO ist kein Ersatz für SEO, sondern eine Erweiterung. Wer jetzt in GEO investiert, wird in 2-3 Jahren einen erheblichen Wettbewerbsvorteil haben, da KI-Suche klassische Suchmaschinen zunehmend ergänzt oder ersetzt.

**Mein Rat**: Beginnen Sie heute mit der Optimierung Ihrer wichtigsten Inhalte nach GEO-Prinzipien.
      `,
    },
    'gpt-api-integration-praxisguide': {
      title: 'GPT API Integration: Vom API-Key zur produktionsreifen Anwendung',
      date: '2026-01-16',
      excerpt: 'Praktische Anleitung zur Integration von OpenAI GPT-4 in Ihre Anwendungen. Token-Optimierung, Fehlerbehandlung und Best Practices.',
      category: 'KI-Entwicklung',
      tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
      coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
      content: `
## GPT API Integration: Der Praxisguide

Die OpenAI API ist das Tor zu leistungsstarken KI-Funktionen in Ihren Anwendungen. In diesem Guide zeige ich Ihnen, wie Sie die Integration professionell und kostenbewusst umsetzen.

### Erste Schritte mit der OpenAI API

#### API-Key erstellen

1. Account auf platform.openai.com erstellen
2. API Keys im Dashboard generieren
3. Sicher speichern (nie im Code!)

#### Python-Setup

\`\`\`python
import openai
from dotenv import load_dotenv
import os

load_dotenv()
client = openai.OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
\`\`\`

### Die verschiedenen Modelle

Wählen Sie das richtige Modell für Ihren Use Case:

| Modell | Stärken | Kosten |
|--------|---------|--------|
| GPT-4o | Multimodal, schnell | $5/1M tokens |
| GPT-4 | Beste Qualität | $30/1M tokens |
| GPT-3.5 | Schnell, günstig | $0.5/1M tokens |
| GPT-4o-mini | Ideal für Produktion | $0.15/1M tokens |

### Token-Optimierung: Kosten senken

Tokens sind die Grundlage der Abrechnung. So optimieren Sie:

#### 1. Prompt-Engineering

- Präzise Anweisungen
- Beispiele statt Erklärungen
- System-Prompts wiederverwenden

#### 2. Response-Limits

\`\`\`python
response = client.chat.completions.create(
    model="gpt-4o-mini",
    messages=[{"role": "user", "content": prompt}],
    max_tokens=500,  # Limit setzen
    temperature=0.7
)
\`\`\`

#### 3. Caching implementieren

Für wiederkehrende Anfragen:

\`\`\`python
import hashlib
from functools import lru_cache

@lru_cache(maxsize=1000)
def cached_completion(prompt_hash):
    # API-Aufruf nur bei Cache-Miss
    pass
\`\`\`

### Fehlerbehandlung für Produktion

Robuste Fehlerbehandlung ist essentiell:

\`\`\`python
import time
from openai import RateLimitError, APIError

def robust_completion(prompt, retries=3):
    for attempt in range(retries):
        try:
            response = client.chat.completions.create(
                model="gpt-4o-mini",
                messages=[{"role": "user", "content": prompt}]
            )
            return response.choices[0].message.content
        except RateLimitError:
            wait_time = 2 ** attempt
            time.sleep(wait_time)
        except APIError as e:
            if attempt == retries - 1:
                raise
    return None
\`\`\`

### Streaming für bessere UX

Für Chat-Anwendungen ist Streaming wichtig:

\`\`\`python
stream = client.chat.completions.create(
    model="gpt-4o-mini",
    messages=[{"role": "user", "content": prompt}],
    stream=True
)

for chunk in stream:
    if chunk.choices[0].delta.content:
        print(chunk.choices[0].delta.content, end="")
\`\`\`

### Function Calling: GPT mit Tools verbinden

Das mächtigste Feature für Agenten:

\`\`\`python
tools = [
    {
        "type": "function",
        "function": {
            "name": "get_weather",
            "description": "Wetter für Stadt abrufen",
            "parameters": {
                "type": "object",
                "properties": {
                    "city": {"type": "string"}
                },
                "required": ["city"]
            }
        }
    }
]
\`\`\`

### Sicherheit und DSGVO

Wichtige Aspekte für den produktiven Einsatz:

- **Keine sensiblen Daten** in Prompts
- **Audit-Logging** für Compliance
- **Data Processing Agreement** mit OpenAI
- **Opt-out** aus Training-Nutzung

### Monitoring und Kosten-Tracking

Behalten Sie die Kosten im Blick:

\`\`\`python
def track_usage(response):
    usage = response.usage
    cost = (usage.prompt_tokens * 0.00003) +
           (usage.completion_tokens * 0.00006)
    log_to_database(cost, usage)
\`\`\`

### Fazit

Die GPT API bietet enorme Möglichkeiten, erfordert aber sorgfältige Planung. Mit den hier vorgestellten Best Practices sind Sie für den produktiven Einsatz gerüstet.

**Nächster Schritt**: Starten Sie mit einem kleinen Proof-of-Concept und skalieren Sie schrittweise.
      `,
    },
    'ki-agenten-unternehmen-guide': {
      title: 'KI-Agenten für Unternehmen: Der ultimative Praxisguide 2026',
      date: '2026-01-15',
      excerpt: 'Wie Unternehmen KI-Agenten einsetzen können, um Prozesse zu automatisieren, Kosten zu senken und Wettbewerbsvorteile zu gewinnen.',
      category: 'KI-Entwicklung',
      tags: ['KI-Agenten', 'Automatisierung', 'GPT-4', 'Claude', 'LLM', 'Unternehmen'],
      coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
      content: `
## KI-Agenten für Unternehmen: Der ultimative Praxisguide 2026

KI-Agenten revolutionieren die Art und Weise, wie Unternehmen arbeiten. In diesem umfassenden Guide zeige ich Ihnen, wie Sie KI-Agenten erfolgreich in Ihrem Unternehmen einsetzen können.

### Was sind KI-Agenten?

KI-Agenten sind autonome Softwaresysteme, die auf Basis von Large Language Models (LLMs) wie GPT-4 oder Claude komplexe Aufgaben eigenständig ausführen können. Im Gegensatz zu einfachen Chatbots können sie:
- **Mehrstufige Aufgaben** selbstständig planen und ausführen
- **Tools und APIs** nutzen, um mit externen Systemen zu interagieren
- **Kontextbezogene Entscheidungen** treffen

### Anwendungsfälle für KI-Agenten

Die häufigsten Einsatzbereiche in Unternehmen sind:
1. Kundenservice-Automatisierung mit 24/7 Verfügbarkeit
2. Dokumentenanalyse und Datenextraktion
3. Lead-Qualifizierung und Vertriebsunterstützung
4. Code-Review und Entwicklungsassistenz

### Technologie-Stack für KI-Agenten

Für die Entwicklung von KI-Agenten empfehle ich folgende Technologien:
- **LLM-Anbieter**: OpenAI (GPT-4), Anthropic (Claude), oder Open-Source (Llama)
- **Frameworks**: LangChain, LlamaIndex, AutoGen
- **Vektor-Datenbanken**: Pinecone, Weaviate, Chroma

### ROI und Kostenbetrachtung

Die Investition in KI-Agenten zahlt sich in der Regel innerhalb von 6-12 Monaten aus. Typische Einsparungen:
- **60-80% Zeitersparnis** bei repetitiven Aufgaben
- **Verbesserte Qualität** durch konsistente Ausführung
- **Skalierbarkeit** ohne proportionale Kostensteigerung

### Fazit

KI-Agenten sind keine Zukunftsmusik mehr, sondern bereits heute einsatzbereit. Der Schlüssel zum Erfolg liegt in der richtigen Auswahl der Anwendungsfälle und einer schrittweisen Implementierung.
      `,
    },
    'n8n-make-zapier-vergleich': {
      title: 'n8n vs Make vs Zapier: Welches Automatisierungstool passt zu Ihnen?',
      date: '2026-01-10',
      excerpt: 'Ein detaillierter Vergleich der führenden Workflow-Automatisierungstools mit Vor- und Nachteilen für verschiedene Anwendungsfälle.',
      category: 'Automatisierung',
      tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatisierung', 'No-Code'],
      coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
      content: `
## n8n vs Make vs Zapier: Der ultimative Vergleich

Die Wahl des richtigen Automatisierungstools kann über den Erfolg Ihrer Digitalisierungsstrategie entscheiden. In diesem Artikel vergleiche ich die drei führenden Plattformen.

### Zapier - Der Platzhirsch

Zapier ist mit über 7.000 Integrationen der Marktführer für einfache Automatisierungen.
- **Vorteile**: Riesige App-Bibliothek, sehr einfach zu bedienen
- **Nachteile**: Teuer bei hohem Volumen, begrenzte Komplexität
- **Preis**: Ab $19.99/Monat für 750 Tasks

### Make (ehemals Integromat) - Der Allrounder

Make bietet eine perfekte Balance zwischen Benutzerfreundlichkeit und Leistung.
- **Vorteile**: Visuelle Oberfläche, faire Preise, gute Datenverarbeitung
- **Nachteile**: Lernkurve steiler als Zapier
- **Preis**: Ab €9/Monat für 10.000 Operationen

### n8n - Die Open-Source-Alternative

n8n ist ideal für technisch versierte Teams, die maximale Kontrolle wollen.
- **Vorteile**: Self-Hosting möglich, unbegrenzte Workflows, Open Source
- **Nachteile**: Erfordert technisches Know-how
- **Preis**: Self-Hosted kostenlos, Cloud ab €20/Monat

### Meine Empfehlung

Die Wahl hängt von Ihren Anforderungen ab:
1. **Zapier** für Einsteiger und einfache Automatisierungen
2. **Make** für mittelständische Unternehmen mit komplexeren Anforderungen
3. **n8n** für technische Teams mit Datenschutzanforderungen

### Fazit

Es gibt kein "bestes" Tool - nur das beste Tool für Ihren Anwendungsfall. Testen Sie alle drei mit kostenlosen Tarifen, bevor Sie sich entscheiden.
      `,
    },
    'voice-ai-kundenservice-trends': {
      title: 'Voice AI im Kundenservice: Trends und Best Practices 2026',
      date: '2026-01-05',
      excerpt: 'Wie Voice AI den Kundenservice revolutioniert und welche Technologien Sie für Ihr Unternehmen evaluieren sollten.',
      category: 'Voice AI',
      tags: ['Voice AI', 'Sprachassistent', 'Kundenservice', 'NLP', 'Chatbot', 'Vapi'],
      coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
      content: `
## Voice AI im Kundenservice: Die Zukunft ist jetzt

2026 markiert einen Wendepunkt für Voice AI im Kundenservice. Laut Gartner werden bis Ende des Jahres 30% aller Kundeninteraktionen von KI-gesteuerten Sprachassistenten abgewickelt.

### Warum Voice AI jetzt durchstartet

Mehrere Faktoren treiben die Adoption:
- **Verbesserte Sprachqualität**: Moderne TTS-Systeme wie ElevenLabs sind kaum von menschlichen Stimmen zu unterscheiden
- **Niedrigere Kosten**: Die Kosten pro Minute sind um 70% gesunken
- **Höhere Akzeptanz**: 64% der Kunden vertrauen empathischen KI-Agenten

### Technologie-Landschaft 2026

Die führenden Plattformen für Voice AI:
1. **Vapi** - Spezialisiert auf Telefon-Bots mit niedriger Latenz
2. **Twilio** - Enterprise-Lösung mit voller Kontrolle
3. **ElevenLabs** - Beste Sprachqualität für Text-to-Speech
4. **Whisper** - Open-Source für Speech-to-Text

### Implementierungsstrategien

Für einen erfolgreichen Start empfehle ich:
- **Klein anfangen**: Starten Sie mit einem spezifischen Use Case
- **Hybridmodell**: Nahtlose Übergabe an menschliche Agenten bei Bedarf
- **Kontinuierliches Training**: Verbessern Sie die Erkennung basierend auf realen Gesprächen

### ROI-Berechnung

Typische Ergebnisse nach 6 Monaten:
- **45% Kostenreduktion** im Kundenservice
- **24/7 Verfügbarkeit** ohne Mehrkosten
- **15% höhere Kundenzufriedenheit** durch kürzere Wartezeiten

### Fazit

Voice AI ist reif für den produktiven Einsatz. Unternehmen, die jetzt investieren, sichern sich einen entscheidenden Wettbewerbsvorteil.
      `,
    },
    'saas-mvp-entwicklung-4-wochen': {
      title: 'SaaS MVP in 4 Wochen: Von der Idee zum Launch',
      date: '2025-12-20',
      excerpt: 'Schritt-für-Schritt Anleitung zur schnellen Entwicklung eines SaaS MVP mit Next.js, Prisma und modernen Cloud-Diensten.',
      category: 'SaaS-Entwicklung',
      tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Produktentwicklung', 'React'],
      coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
      content: `
## SaaS MVP in 4 Wochen: Der Praxisleitfaden

Ein MVP (Minimum Viable Product) ist der schnellste Weg, Ihre SaaS-Idee am Markt zu validieren. In diesem Artikel zeige ich Ihnen, wie Sie in nur 4 Wochen ein funktionsfähiges Produkt entwickeln.

### Der optimale Tech-Stack 2026

Nach über 20 SaaS-Projekten empfehle ich:
- **Frontend**: Next.js 15 mit App Router
- **Backend**: Next.js API Routes oder FastAPI
- **Datenbank**: PostgreSQL mit Prisma ORM
- **Auth**: NextAuth.js oder Clerk
- **Hosting**: Vercel oder Railway
- **Payments**: Stripe

### Woche 1: Foundation

In der ersten Woche legen wir das Fundament:
1. Projekt-Setup mit Next.js und TypeScript
2. Datenbank-Schema mit Prisma definieren
3. Authentication implementieren
4. Basis-UI mit Tailwind CSS

### Woche 2: Core Features

Fokus auf die Kernfunktionalität:
1. Haupt-Feature implementieren
2. API-Endpunkte entwickeln
3. Datenbankoperationen (CRUD)
4. Error Handling

### Woche 3: Polish & Integration

Verfeinerung und Integrationen:
1. Stripe Payment Integration
2. E-Mail-Benachrichtigungen
3. Dashboard und Analytics
4. Responsive Design

### Woche 4: Launch Preparation

Vorbereitung auf den Launch:
1. Testing und Bug-Fixes
2. SEO-Optimierung
3. Monitoring einrichten
4. Dokumentation erstellen

### Kosten-Überblick

Typische monatliche Kosten für ein MVP:
- **Vercel**: $0-20 (Hobby bis Pro)
- **Database**: $0-25 (Supabase/Neon)
- **Domain**: ~$12/Jahr
- **Stripe**: 2.9% + 30¢ pro Transaktion

### Fazit

Mit dem richtigen Stack und fokussierter Entwicklung ist ein SaaS MVP in 4 Wochen absolut realistisch. Der Schlüssel ist, sich auf die Kernfunktionalität zu konzentrieren und alles andere für spätere Iterationen aufzuheben.
      `,
    },
    'erp-integration-breuninger': {
      title: 'ApparelMagic und TradeByte: Analyse komplexer Integrationen',
      date: '2024-02-09',
      excerpt: 'Detaillierte Analyse einer E-Commerce-Integration zwischen Apparel Magic und Breuninger via TradeByte',
      category: 'System Integration',
      tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
      coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
      content: `
## Apparel Magic meets Breuninger: Eine technische Analyse der TradeByte-Integration

Die Integration von E-Commerce-Systemen mit etablierten Marktplätzen stellt Unternehmen vor besondere Herausforderungen. In diesem Artikel teile ich meine Erfahrungen aus einem komplexen Integrationsprojekt zwischen Apparel Magic als ERP-System und der Breuninger-Plattform über TradeByte.

### Projekthintergrund

Das Projekt umfasste:
- **Apparel Magic** als ERP-System für Produktdaten und Bestandsmanagement
- **TradeByte** als Middleware für die Breuninger-Plattform

### Herausforderungen

Die wichtigsten Herausforderungen waren:
1. Bidirektionale Synchronisation von Bestellungen
2. Automatisierte Kundenanlage
3. Verwaltung von Lieferscheinen
4. Bestandsmanagement in Echtzeit

### Technische Architektur

Die Lösung basiert auf einer Python-basierten Middleware mit MariaDB als zentralem Datenspeicher. Die API-Kommunikation erfolgt sowohl über REST als auch XML-basierte Schnittstellen.

### Fazit

Die entwickelte Lösung verarbeitet erfolgreich Bestellungen und ermöglicht eine nahtlose Integration zwischen den Systemen.
      `,
    },
  },
  en: {
    'n8n-automatisierung-tutorial': {
      title: 'n8n Tutorial: Automate Workflows Without Code - Step by Step',
      date: '2026-01-18',
      excerpt: 'Learn how to create powerful automations with n8n. From installation to your first production workflow - including best practices.',
      category: 'Automation',
      tags: ['n8n', 'Tutorial', 'Automation', 'Workflow', 'No-Code', 'Self-Hosted'],
      coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
      content: `
## n8n Tutorial: The Complete Guide to Workflow Automation

n8n is the leading open-source alternative to Zapier and Make. In this comprehensive tutorial, I show you everything you need to get started.

### What is n8n?

n8n (pronounced "n-eight-n") is an open-source workflow automation platform that allows you to connect various applications and services. The name stands for "nodemation" - a combination of "node" and "automation".

### Why Choose n8n?

Compared to other tools, n8n offers:
- **Self-Hosting**: Full control over your data (GDPR!)
- **Free**: The self-hosted version is completely free
- **Fair-Code**: Open source with a fair license
- **300+ Integrations**: From CRM to AI APIs

### Installation: 3 Paths to Success

#### Option 1: Docker (Recommended)

\`\`\`bash
docker run -it --rm --name n8n -p 5678:5678 -v ~/.n8n:/home/node/.n8n n8nio/n8n
\`\`\`

#### Option 2: NPM

\`\`\`bash
npm install n8n -g
n8n start
\`\`\`

### Conclusion

n8n is the most powerful automation tool for teams who value data privacy and flexibility. With this tutorial, you have laid the foundation for professional workflow automation.
      `,
    },
    'geo-generative-engine-optimization': {
      title: 'GEO: Generative Engine Optimization - SEO for the AI Era',
      date: '2026-01-17',
      excerpt: 'How to optimize your content for ChatGPT, Perplexity and other AI search engines. The new standard after traditional SEO.',
      category: 'Marketing',
      tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
      coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
      content: `
## GEO: Generative Engine Optimization - The Ultimate Guide

The rules for online visibility are fundamentally changing. While SEO targets Google rankings, GEO is about being cited by AI systems like ChatGPT, Perplexity and Google SGE.

### What is Generative Engine Optimization (GEO)?

GEO describes the optimization of content to be used as a source by AI-powered search systems. Unlike traditional SEO, it's not about rankings, but about being considered a trustworthy source for AI-generated answers.

### Why GEO Matters Now

The numbers speak for themselves:
- **30% fewer Google clicks** since ChatGPT launch
- **50% of Gen-Z** use TikTok and AI instead of Google
- **Perplexity** records 10 million monthly users

### The 7 Pillars of GEO Optimization

1. Build Authority (E-E-A-T)
2. Use Structured Data
3. Provide Direct Answers
4. Semantic Depth
5. Unique Content
6. Technical Optimization
7. Multi-Format Strategy

### Conclusion

GEO is not a replacement for SEO, but an extension. Those who invest in GEO now will have a significant competitive advantage in 2-3 years as AI search increasingly complements or replaces traditional search engines.
      `,
    },
    'gpt-api-integration-praxisguide': {
      title: 'GPT API Integration: From API Key to Production-Ready Application',
      date: '2026-01-16',
      excerpt: 'Practical guide to integrating OpenAI GPT-4 into your applications. Token optimization, error handling and best practices.',
      category: 'AI Development',
      tags: ['GPT-4', 'OpenAI', 'API', 'Integration', 'Python', 'LLM', 'Prompt Engineering'],
      coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
      content: `
## GPT API Integration: The Practical Guide

The OpenAI API is the gateway to powerful AI capabilities in your applications. In this guide, I show you how to implement integration professionally and cost-consciously.

### Getting Started with the OpenAI API

#### Create API Key

1. Create account on platform.openai.com
2. Generate API keys in dashboard
3. Store securely (never in code!)

#### Python Setup

\`\`\`python
import openai
from dotenv import load_dotenv
import os

load_dotenv()
client = openai.OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
\`\`\`

### Token Optimization: Reduce Costs

Tokens are the basis of billing. Here's how to optimize:

1. Prompt Engineering
2. Response Limits
3. Implement Caching

### Conclusion

The GPT API offers enormous possibilities but requires careful planning. With the best practices presented here, you are equipped for production use.
      `,
    },
    'ki-agenten-unternehmen-guide': {
      title: 'AI Agents for Business: The Ultimate Practical Guide 2026',
      date: '2026-01-15',
      excerpt: 'How companies can use AI agents to automate processes, reduce costs and gain competitive advantages.',
      category: 'AI Development',
      tags: ['AI Agents', 'Automation', 'GPT-4', 'Claude', 'LLM', 'Enterprise'],
      coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
      content: `
## AI Agents for Business: The Ultimate Practical Guide 2026

AI agents are revolutionizing the way businesses operate. In this comprehensive guide, I show you how to successfully deploy AI agents in your company.

### What are AI Agents?

AI agents are autonomous software systems that can independently perform complex tasks based on Large Language Models (LLMs) such as GPT-4 or Claude. Unlike simple chatbots, they can:
- **Plan and execute multi-step tasks** independently
- **Use tools and APIs** to interact with external systems
- **Make context-based decisions**

### Use Cases for AI Agents

The most common applications in business are:
1. Customer service automation with 24/7 availability
2. Document analysis and data extraction
3. Lead qualification and sales support
4. Code review and development assistance

### Technology Stack for AI Agents

For developing AI agents, I recommend the following technologies:
- **LLM Providers**: OpenAI (GPT-4), Anthropic (Claude), or Open Source (Llama)
- **Frameworks**: LangChain, LlamaIndex, AutoGen
- **Vector Databases**: Pinecone, Weaviate, Chroma

### ROI and Cost Considerations

Investment in AI agents typically pays off within 6-12 months. Typical savings:
- **60-80% time savings** on repetitive tasks
- **Improved quality** through consistent execution
- **Scalability** without proportional cost increase

### Conclusion

AI agents are no longer futuristic - they are ready for deployment today. The key to success lies in selecting the right use cases and implementing them step by step.
      `,
    },
    'n8n-make-zapier-vergleich': {
      title: 'n8n vs Make vs Zapier: Which Automation Tool is Right for You?',
      date: '2026-01-10',
      excerpt: 'A detailed comparison of leading workflow automation tools with pros and cons for different use cases.',
      category: 'Automation',
      tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automation', 'No-Code'],
      coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
      content: `
## n8n vs Make vs Zapier: The Ultimate Comparison

Choosing the right automation tool can determine the success of your digitalization strategy. In this article, I compare the three leading platforms.

### Zapier - The Market Leader

Zapier is the market leader for simple automations with over 7,000 integrations.
- **Pros**: Huge app library, very easy to use
- **Cons**: Expensive at high volume, limited complexity
- **Price**: From $19.99/month for 750 tasks

### Make (formerly Integromat) - The All-Rounder

Make offers a perfect balance between usability and performance.
- **Pros**: Visual interface, fair prices, good data processing
- **Cons**: Steeper learning curve than Zapier
- **Price**: From €9/month for 10,000 operations

### n8n - The Open Source Alternative

n8n is ideal for technically savvy teams who want maximum control.
- **Pros**: Self-hosting possible, unlimited workflows, open source
- **Cons**: Requires technical know-how
- **Price**: Self-hosted free, cloud from €20/month

### My Recommendation

The choice depends on your requirements:
1. **Zapier** for beginners and simple automations
2. **Make** for medium-sized companies with more complex requirements
3. **n8n** for technical teams with data protection requirements

### Conclusion

There is no "best" tool - only the best tool for your use case. Test all three with free tiers before deciding.
      `,
    },
    'voice-ai-kundenservice-trends': {
      title: 'Voice AI in Customer Service: Trends and Best Practices 2026',
      date: '2026-01-05',
      excerpt: 'How Voice AI is revolutionizing customer service and which technologies you should evaluate for your business.',
      category: 'Voice AI',
      tags: ['Voice AI', 'Voice Assistant', 'Customer Service', 'NLP', 'Chatbot', 'Vapi'],
      coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
      content: `
## Voice AI in Customer Service: The Future is Now

2026 marks a turning point for Voice AI in customer service. According to Gartner, by the end of the year, 30% of all customer interactions will be handled by AI-powered voice assistants.

### Why Voice AI is Taking Off Now

Several factors are driving adoption:
- **Improved voice quality**: Modern TTS systems like ElevenLabs are almost indistinguishable from human voices
- **Lower costs**: Cost per minute has dropped by 70%
- **Higher acceptance**: 64% of customers trust empathetic AI agents

### Technology Landscape 2026

The leading platforms for Voice AI:
1. **Vapi** - Specialized in phone bots with low latency
2. **Twilio** - Enterprise solution with full control
3. **ElevenLabs** - Best voice quality for text-to-speech
4. **Whisper** - Open source for speech-to-text

### Implementation Strategies

For a successful start, I recommend:
- **Start small**: Begin with a specific use case
- **Hybrid model**: Seamless handover to human agents when needed
- **Continuous training**: Improve recognition based on real conversations

### ROI Calculation

Typical results after 6 months:
- **45% cost reduction** in customer service
- **24/7 availability** at no extra cost
- **15% higher customer satisfaction** due to shorter wait times

### Conclusion

Voice AI is ready for productive use. Companies that invest now will secure a decisive competitive advantage.
      `,
    },
    'saas-mvp-entwicklung-4-wochen': {
      title: 'SaaS MVP in 4 Weeks: From Idea to Launch',
      date: '2025-12-20',
      excerpt: 'Step-by-step guide to quickly developing a SaaS MVP with Next.js, Prisma and modern cloud services.',
      category: 'SaaS Development',
      tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Product Development', 'React'],
      coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
      content: `
## SaaS MVP in 4 Weeks: The Practical Guide

An MVP (Minimum Viable Product) is the fastest way to validate your SaaS idea in the market. In this article, I show you how to develop a functional product in just 4 weeks.

### The Optimal Tech Stack 2026

After over 20 SaaS projects, I recommend:
- **Frontend**: Next.js 15 with App Router
- **Backend**: Next.js API Routes or FastAPI
- **Database**: PostgreSQL with Prisma ORM
- **Auth**: NextAuth.js or Clerk
- **Hosting**: Vercel or Railway
- **Payments**: Stripe

### Week 1: Foundation

In the first week, we lay the foundation:
1. Project setup with Next.js and TypeScript
2. Define database schema with Prisma
3. Implement authentication
4. Basic UI with Tailwind CSS

### Week 2: Core Features

Focus on core functionality:
1. Implement main feature
2. Develop API endpoints
3. Database operations (CRUD)
4. Error handling

### Week 3: Polish & Integration

Refinement and integrations:
1. Stripe payment integration
2. Email notifications
3. Dashboard and analytics
4. Responsive design

### Week 4: Launch Preparation

Preparing for launch:
1. Testing and bug fixes
2. SEO optimization
3. Set up monitoring
4. Create documentation

### Cost Overview

Typical monthly costs for an MVP:
- **Vercel**: $0-20 (Hobby to Pro)
- **Database**: $0-25 (Supabase/Neon)
- **Domain**: ~$12/year
- **Stripe**: 2.9% + 30¢ per transaction

### Conclusion

With the right stack and focused development, a SaaS MVP in 4 weeks is absolutely realistic. The key is to focus on core functionality and save everything else for later iterations.
      `,
    },
    'erp-integration-breuninger': {
      title: 'ApparelMagic and TradeByte: Complex Integration Analysis',
      date: '2024-02-09',
      excerpt: 'Detailed analysis of an e-commerce integration between Apparel Magic and Breuninger via TradeByte',
      category: 'System Integration',
      tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integration', 'Python', 'MariaDB'],
      coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
      content: `
## Apparel Magic meets Breuninger: A Technical Analysis of TradeByte Integration

Integrating e-commerce systems with established marketplaces poses unique challenges for businesses. In this article, I share my experiences from a complex integration project between Apparel Magic as an ERP system and the Breuninger platform via TradeByte.

### Project Background

The project included:
- **Apparel Magic** as ERP system for product data and inventory management
- **TradeByte** as middleware for the Breuninger platform

### Challenges

The main challenges were:
1. Bidirectional synchronization of orders
2. Automated customer creation
3. Management of delivery notes
4. Real-time inventory management

### Technical Architecture

The solution is based on Python middleware with MariaDB as central data store. API communication uses both REST and XML-based interfaces.

### Conclusion

The developed solution successfully processes orders and enables seamless integration between systems.
      `,
    },
  },
  sr: {
    'n8n-automatisierung-tutorial': {
      title: 'n8n Tutorial: Automatizujte Radne Tokove Bez Koda - Korak po Korak',
      date: '2026-01-18',
      excerpt: 'Naučite kako da kreirate moćne automatizacije sa n8n. Od instalacije do prvog produktivnog radnog toka - uključujući najbolje prakse.',
      category: 'Automatizacija',
      tags: ['n8n', 'Tutorial', 'Automatizacija', 'Workflow', 'No-Code', 'Self-Hosted'],
      coverImage: '/images/posts/n8n-automatisierung-tutorial/cover.jpg',
      content: `
## n8n Tutorial: Kompletni Vodič za Automatizaciju Radnih Tokova

n8n je vodeća open-source alternativa Zapier-u i Make-u. U ovom sveobuhvatnom tutorialu pokazujem vam sve što vam je potrebno za početak.

### Šta je n8n?

n8n (izgovara se "n-osam-n") je open-source platforma za automatizaciju radnih tokova koja omogućava povezivanje različitih aplikacija i servisa.

### Zašto Izabrati n8n?

- **Self-Hosting**: Potpuna kontrola nad podacima (GDPR!)
- **Besplatno**: Self-hosted verzija je potpuno besplatna
- **300+ Integracija**: Od CRM do AI API-ja

### Zaključak

n8n je najmoćniji alat za automatizaciju za timove koji cene privatnost podataka i fleksibilnost.
      `,
    },
    'geo-generative-engine-optimization': {
      title: 'GEO: Generative Engine Optimization - SEO za AI Eru',
      date: '2026-01-17',
      excerpt: 'Kako da optimizujete sadržaj za ChatGPT, Perplexity i druge AI pretraživače. Novi standard posle klasičnog SEO-a.',
      category: 'Marketing',
      tags: ['GEO', 'SEO', 'AI', 'ChatGPT', 'Perplexity', 'Content Marketing', 'AEO'],
      coverImage: '/images/posts/geo-generative-engine-optimization/cover.jpg',
      content: `
## GEO: Generative Engine Optimization - Ultimativni Vodič

Pravila za online vidljivost se fundamentalno menjaju. Dok SEO cilja Google rangiranja, GEO je o tome da vas citiraju AI sistemi kao što su ChatGPT, Perplexity i Google SGE.

### Šta je Generative Engine Optimization (GEO)?

GEO opisuje optimizaciju sadržaja da bi ga AI-powered sistemi pretrage koristili kao izvor.

### Zašto je GEO Sada Važan

Brojevi govore sami za sebe:
- **30% manje Google klikova** od lansiranja ChatGPT-a
- **50% Gen-Z** koristi TikTok i AI umesto Google-a

### Zaključak

GEO nije zamena za SEO, već proširenje. Oni koji sada investiraju u GEO imaće značajnu konkurentsku prednost za 2-3 godine.
      `,
    },
    'gpt-api-integration-praxisguide': {
      title: 'GPT API Integracija: Od API Ključa do Produkcione Aplikacije',
      date: '2026-01-16',
      excerpt: 'Praktični vodič za integraciju OpenAI GPT-4 u vaše aplikacije. Optimizacija tokena, rukovanje greškama i najbolje prakse.',
      category: 'AI Razvoj',
      tags: ['GPT-4', 'OpenAI', 'API', 'Integracija', 'Python', 'LLM', 'Prompt Engineering'],
      coverImage: '/images/posts/gpt-api-integration-praxisguide/cover.jpg',
      content: `
## GPT API Integracija: Praktični Vodič

OpenAI API je kapija ka moćnim AI mogućnostima u vašim aplikacijama.

### Početak sa OpenAI API

1. Kreiranje naloga na platform.openai.com
2. Generisanje API ključeva u dashboard-u
3. Sigurno čuvanje (nikad u kodu!)

### Zaključak

GPT API nudi ogromne mogućnosti ali zahteva pažljivo planiranje. Sa najboljim praksama predstavljenim ovde, spremni ste za produkcijsku upotrebu.
      `,
    },
    'ki-agenten-unternehmen-guide': {
      title: 'AI Agenti za Preduzeća: Ultimativni Praktični Vodič 2026',
      date: '2026-01-15',
      excerpt: 'Kako kompanije mogu koristiti AI agente za automatizaciju procesa, smanjenje troškova i sticanje konkurentskih prednosti.',
      category: 'AI Razvoj',
      tags: ['AI Agenti', 'Automatizacija', 'GPT-4', 'Claude', 'LLM', 'Preduzeća'],
      coverImage: '/images/posts/ki-agenten-unternehmen-guide/cover.jpg',
      content: `
## AI Agenti za Preduzeća: Ultimativni Praktični Vodič 2026

AI agenti revolucionišu način na koji preduzeća rade. U ovom sveobuhvatnom vodiču pokazujem vam kako uspešno implementirati AI agente u vašoj kompaniji.

### Šta su AI Agenti?

AI agenti su autonomni softverski sistemi koji mogu samostalno izvršavati složene zadatke na osnovu velikih jezičkih modela (LLM) kao što su GPT-4 ili Claude. Za razliku od jednostavnih chatbotova, oni mogu:
- **Planirati i izvršavati višestepene zadatke** samostalno
- **Koristiti alate i API-je** za interakciju sa eksternim sistemima
- **Donositi kontekstualne odluke**

### Slučajevi upotrebe za AI Agente

Najčešće primene u preduzećima su:
1. Automatizacija korisničke službe sa 24/7 dostupnošću
2. Analiza dokumenata i ekstrakcija podataka
3. Kvalifikacija lead-ova i podrška prodaji
4. Pregled koda i razvojna pomoć

### Zaključak

AI agenti više nisu budućnost - spremni su za upotrebu već danas.
      `,
    },
    'n8n-make-zapier-vergleich': {
      title: 'n8n vs Make vs Zapier: Koji Alat za Automatizaciju je Pravi za Vas?',
      date: '2026-01-10',
      excerpt: 'Detaljna uporedna analiza vodećih alata za automatizaciju radnih tokova sa prednostima i manama za različite slučajeve upotrebe.',
      category: 'Automatizacija',
      tags: ['n8n', 'Make', 'Zapier', 'Workflow', 'Automatizacija', 'No-Code'],
      coverImage: '/images/posts/n8n-make-zapier-vergleich/cover.jpg',
      content: `
## n8n vs Make vs Zapier: Ultimativno Poređenje

Izbor pravog alata za automatizaciju može odrediti uspeh vaše strategije digitalizacije.

### Zapier - Lider na Tržištu

Zapier je lider na tržištu za jednostavne automatizacije sa preko 7.000 integracija.

### Make (ranije Integromat) - Svestrani Alat

Make nudi savršen balans između upotrebljivosti i performansi.

### n8n - Open Source Alternativa

n8n je idealan za tehnički napredne timove koji žele maksimalnu kontrolu.

### Zaključak

Ne postoji "najbolji" alat - samo najbolji alat za vaš slučaj upotrebe.
      `,
    },
    'voice-ai-kundenservice-trends': {
      title: 'Voice AI u Korisničkoj Službi: Trendovi i Najbolje Prakse 2026',
      date: '2026-01-05',
      excerpt: 'Kako Voice AI revolucioniše korisničku službu i koje tehnologije treba da evaluirate za vaš posao.',
      category: 'Voice AI',
      tags: ['Voice AI', 'Glasovni Asistent', 'Korisnička Služba', 'NLP', 'Chatbot', 'Vapi'],
      coverImage: '/images/posts/voice-ai-kundenservice-trends/cover.jpg',
      content: `
## Voice AI u Korisničkoj Službi: Budućnost je Sada

2026 označava prekretnicu za Voice AI u korisničkoj službi. Prema Gartner-u, do kraja godine 30% svih interakcija sa kupcima će obrađivati AI-pokretani glasovni asistenti.

### Zašto Voice AI Sada Raste

Nekoliko faktora pokreće usvajanje:
- **Poboljšani kvalitet glasa**: Moderni TTS sistemi poput ElevenLabs su gotovo nerazlučivi od ljudskih glasova
- **Niži troškovi**: Cena po minuti je pala za 70%
- **Veće prihvatanje**: 64% kupaca veruje empatičnim AI agentima

### Zaključak

Voice AI je spreman za produktivnu upotrebu. Kompanije koje sada investiraju osiguravaju odlučujuću konkurentsku prednost.
      `,
    },
    'saas-mvp-entwicklung-4-wochen': {
      title: 'SaaS MVP za 4 Nedelje: Od Ideje do Lansiranja',
      date: '2025-12-20',
      excerpt: 'Korak-po-korak vodič za brz razvoj SaaS MVP-a sa Next.js, Prisma i modernim cloud servisima.',
      category: 'SaaS Razvoj',
      tags: ['SaaS', 'MVP', 'Next.js', 'Startup', 'Razvoj Proizvoda', 'React'],
      coverImage: '/images/posts/saas-mvp-entwicklung-4-wochen/cover.jpg',
      content: `
## SaaS MVP za 4 Nedelje: Praktični Vodič

MVP (Minimalno Održivi Proizvod) je najbrži način za validaciju vaše SaaS ideje na tržištu.

### Optimalni Tech Stack 2026

Nakon preko 20 SaaS projekata, preporučujem:
- **Frontend**: Next.js 15 sa App Router
- **Backend**: Next.js API Routes ili FastAPI
- **Baza podataka**: PostgreSQL sa Prisma ORM
- **Auth**: NextAuth.js ili Clerk
- **Hosting**: Vercel ili Railway
- **Plaćanja**: Stripe

### Zaključak

Sa pravim stack-om i fokusiranim razvojem, SaaS MVP za 4 nedelje je apsolutno realan.
      `,
    },
    'erp-integration-breuninger': {
      title: 'ApparelMagic i TradeByte: Analiza kompleksnih integracija',
      date: '2024-02-09',
      excerpt: 'Detaljna analiza e-commerce integracije izmedu Apparel Magic i Breuninger putem TradeByte',
      category: 'Sistemska Integracija',
      tags: ['ERP', 'Apparel Magic', 'TradeByte', 'API Integracija', 'Python', 'MariaDB'],
      coverImage: '/images/posts/erp-integration-breuninger/cover.jpg',
      content: `
## Apparel Magic i Breuninger: Tehnicka analiza TradeByte integracije

Integracija e-commerce sistema sa uspostavljenim trzistima predstavlja posebne izazove za preduzeca. U ovom clanku delim svoja iskustva iz kompleksnog projekta integracije izmedu Apparel Magic kao ERP sistema i Breuninger platforme putem TradeByte.

### Pozadina projekta

Projekat je obuhvatao:
- **Apparel Magic** kao ERP sistem za podatke o proizvodima i upravljanje zalihama
- **TradeByte** kao middleware za Breuninger platformu

### Izazovi

Glavni izazovi bili su:
1. Bidirekciona sinhronizacija narudzbi
2. Automatizovano kreiranje kupaca
3. Upravljanje otpremnicama
4. Upravljanje zalihama u realnom vremenu

### Tehnicka arhitektura

Resenje se zasniva na Python middleware-u sa MariaDB kao centralnim skladistem podataka.

### Zakljucak

Razvieno resenje uspesno obraduje narudzbe i omogucava nesmetanu integraciju izmedu sistema.
      `,
    },
  },
};

export async function generateStaticParams() {
  // Get slugs from both legacy posts and dynamic markdown files
  const legacySlugs = Object.keys(legacyBlogPosts.de);
  const dynamicSlugs = getBlogPostSlugs();

  // Combine unique slugs
  const allSlugs = [...new Set([...legacySlugs, ...dynamicSlugs])];

  return locales.flatMap((locale) =>
    allSlugs.map((slug) => ({
      locale,
      slug,
    }))
  );
}

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

// Helper to get post from either legacy or dynamic source
function getPost(locale: string, slug: string) {
  // First check legacy posts (they have translations)
  const legacyPost = legacyBlogPosts[locale]?.[slug] || legacyBlogPosts.de[slug];
  if (legacyPost) return legacyPost;

  // Fall back to dynamic posts (German only for now)
  return getBlogPostBySlug(slug);
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { locale, slug } = await params;
  const post = getPost(locale, slug);

  if (!post) {
    return {
      title: 'Post Not Found',
    };
  }

  return {
    title: post.title,
    description: post.excerpt,
    keywords: post.tags,
    alternates: {
      canonical: `${BASE_URL}/${locale}/blog/${slug}`,
      languages: {
        'x-default': `${BASE_URL}/de/blog/${slug}`,
        de: `${BASE_URL}/de/blog/${slug}`,
        en: `${BASE_URL}/en/blog/${slug}`,
        sr: `${BASE_URL}/sr/blog/${slug}`,
      },
    },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.date,
      tags: post.tags,
      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')),
      url: `${BASE_URL}/${locale}/blog/${slug}`,
    },
  };
}

export default async function BlogPostPage({ params }: Props) {
  const { locale, slug } = await params;

  setRequestLocale(locale);

  const post = getPost(locale, slug);
  const t = await getTranslations('blog');

  if (!post) {
    notFound();
  }

  const getFormattedDate = (date: string) => {
    const languageMap: Record<string, string> = {
      de: 'de-DE',
      en: 'en-US',
      sr: 'sr-RS',
    };

    return new Date(date).toLocaleDateString(languageMap[locale] || 'de-DE', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    });
  };

  const breadcrumbItems = [
    { name: 'Home', url: `/${locale}` },
    { name: 'Blog', url: `/${locale}/blog` },
    { name: post.title, url: `/${locale}/blog/${slug}` },
  ];

  return (
    <main className="min-h-screen py-16 sm:py-20 lg:py-24">
      <BreadcrumbJsonLd items={breadcrumbItems} locale={locale as Locale} />
      <ArticleJsonLd
        title={post.title}
        description={post.excerpt}
        url={`/${locale}/blog/${slug}`}
        imageUrl={post.coverImage}
        datePublished={post.date}
        tags={post.tags}
        locale={locale as Locale}
      />
      <article className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Back Link */}
        <Link
          href={`/${locale}/blog`}
          className="inline-flex items-center gap-2 text-zinc-400 hover:text-white transition-colors mb-8"
        >
          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          {t('ui.backToBlog')}
        </Link>

        {/* Header */}
        <header className="mb-12">
          <div className="flex items-center gap-4 mb-6 text-zinc-500">
            <time dateTime={post.date}>{getFormattedDate(post.date)}</time>
            <span className="px-3 py-1 bg-zinc-800 rounded-full text-sm">
              {post.category}
            </span>
          </div>

          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
            {post.title}
          </h1>

          <p className="text-xl text-zinc-400">
            {post.excerpt}
          </p>

          {/* Tags */}
          <div className="flex flex-wrap gap-2 mt-6">
            {post.tags?.map((tag, index) => (
              <span
                key={index}
                className="px-3 py-1 bg-zinc-800/50 text-sm text-zinc-400 rounded-full ring-1 ring-zinc-700/50"
              >
                {tag}
              </span>
            ))}
          </div>
        </header>

        {/* Cover Image */}
        <div className="aspect-[16/9] w-full mb-12 rounded-xl overflow-hidden bg-zinc-800 relative">
          <Image
            src={post.coverImage}
            alt={post.title}
            fill
            sizes="(max-width: 1024px) 100vw, 896px"
            className="object-cover"
            priority
          />
        </div>

        {/* Content */}
        {renderMarkdown(post.content || '')}
      </article>
    </main>
  );
}
