klz-cables.com/app/[locale]/blog/page.tsx

import Link from 'next/link';
import { getAllPosts } from '@/lib/blog';
import { getTranslations } from 'next-intl/server';

interface BlogIndexProps {
  params: {
    locale: string;
  };
}

export async function generateMetadata({ params: { locale } }: BlogIndexProps) {
  return {
    title: locale === 'de' ? 'Neuigkeiten zu Kabeln und Energielösungen' : 'News on Cables and Energy Solutions',
    description: locale === 'de'
      ? 'Bleiben Sie auf dem Laufenden! Lesen Sie aktuelle Themen und Insights zu Kabeltechnologie, Energielösungen und branchenspezifischen Innovationen.'
      : 'Stay up to date! Read current topics and insights on cable technology, energy solutions and industry-specific innovations.',
  };
}

export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
  const posts = await getAllPosts(locale);
  
  // Sort posts by date descending
  const sortedPosts = [...posts].sort((a, b) => 
    new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime()
  );

  const featuredPost = sortedPosts[0];
  const remainingPosts = sortedPosts.slice(1);

  return (
    <div className="bg-neutral-50 min-h-screen">
      {/* Hero Section */}
      <div className="bg-primary text-white py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl">
            <h1 className="text-5xl md:text-6xl font-extrabold mb-6 leading-tight">
              {locale === 'de' ? 'KLZ Blog' : 'KLZ Blog'}
            </h1>
            <p className="text-xl text-white/80 leading-relaxed">
              {locale === 'de'
                ? 'Insights, News und technisches Know-how aus der Welt der Kabelinfrastruktur und erneuerbaren Energien.'
                : 'Insights, news and technical know-how from the world of cable infrastructure and renewable energies.'}
            </p>
          </div>
        </div>
      </div>

      <div className="container mx-auto px-4 -mt-10 pb-20">
        {/* Featured Post */}
        {featuredPost && (
          <Link href={`/${locale}/blog/${featuredPost.slug}`} className="group block mb-16">
            <article className="bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col lg:flex-row transition-all hover:shadow-2xl">
              {featuredPost.frontmatter.featuredImage && (
                <div className="lg:w-1/2 relative h-64 lg:h-auto overflow-hidden">
                  <img
                    src={featuredPost.frontmatter.featuredImage}
                    alt={featuredPost.frontmatter.title}
                    className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-gradient-to-r from-black/20 to-transparent" />
                </div>
              )}
              <div className="lg:w-1/2 p-8 lg:p-12 flex flex-col justify-center">
                {featuredPost.frontmatter.category && (
                  <span className="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-bold uppercase tracking-widest rounded-full mb-6">
                    {featuredPost.frontmatter.category}
                  </span>
                )}
                <h2 className="text-3xl md:text-4xl font-bold text-text-primary mb-6 group-hover:text-primary transition-colors">
                  {featuredPost.frontmatter.title}
                </h2>
                <p className="text-lg text-text-secondary mb-8 line-clamp-3">
                  {featuredPost.frontmatter.excerpt}
                </p>
                <div className="flex items-center gap-4 mt-auto">
                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">
                    KLZ
                  </div>
                  <div>
                    <div className="text-sm font-bold text-text-primary">KLZ Cables</div>
                    <div className="text-xs text-text-secondary">
                      {new Date(featuredPost.frontmatter.date).toLocaleDateString(locale, {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                      })}
                    </div>
                  </div>
                </div>
              </div>
            </article>
          </Link>
        )}

        {/* Grid for remaining posts */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
          {remainingPosts.map((post) => (
            <Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block">
              <article className="bg-white rounded-xl shadow-sm overflow-hidden border border-neutral-200 h-full flex flex-col transition-all hover:shadow-lg hover:-translate-y-1">
                {post.frontmatter.featuredImage && (
                  <div className="relative h-56 overflow-hidden">
                    <img
                      src={post.frontmatter.featuredImage}
                      alt={post.frontmatter.title}
                      className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                    />
                    {post.frontmatter.category && (
                      <span className="absolute top-4 left-4 px-3 py-1 bg-white/90 backdrop-blur-sm text-primary text-[10px] font-bold uppercase tracking-wider rounded-md shadow-sm">
                        {post.frontmatter.category}
                      </span>
                    )}
                  </div>
                )}
                <div className="p-6 flex flex-col flex-1">
                  <div className="text-xs text-text-secondary mb-3">
                    {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                      year: 'numeric',
                      month: 'long',
                      day: 'numeric'
                    })}
                  </div>
                  <h3 className="text-xl font-bold text-text-primary mb-4 group-hover:text-primary transition-colors line-clamp-2">
                    {post.frontmatter.title}
                  </h3>
                  <p className="text-text-secondary text-sm line-clamp-3 mb-6">
                    {post.frontmatter.excerpt}
                  </p>
                  <div className="mt-auto pt-4 border-t border-neutral-100 flex items-center justify-between">
                    <span className="text-primary text-sm font-bold group-hover:underline">
                      {locale === 'de' ? 'Weiterlesen' : 'Read more'}
                    </span>
                    <svg className="w-5 h-5 text-primary transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                    </svg>
                  </div>
                </div>
              </article>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}