auto-claude: subtask-1-3 - Add filtering logic and integrate components into blog page

- Created BlogList client component with search and category filtering
- Integrated SearchBar and CategoryFilter components
- Implemented case-insensitive search by title/excerpt/tags
- Added category filtering with AND logic for combined filters
- Updated pagination to work with filtered results
- Added search placeholder translations for de/en/sr
- Moved blog card and pagination logic to client component

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/app/[locale]/blog/page.tsx

@@ -1,16 +1,12 @@
 import { setRequestLocale } from 'next-intl/server';
 import { getTranslations } from 'next-intl/server';
-import { ArrowRight, Calendar, Tag, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react';
-import Link from 'next/link';
-import Image from 'next/image';
+import { ArrowRight } from 'lucide-react';
 import type { Metadata } from 'next';
 import { getAllBlogPosts, BlogPost } from '@/lib/blog';
-
-const POSTS_PER_PAGE = 12;
+import { BlogList } from '@/components/blog/BlogList';
 
 type Props = {
   params: Promise<{ locale: string }>;
-  searchParams: Promise<{ page?: string }>;
 };
 
 // Legacy blog posts with translations (these have manual translations)
@@ -307,277 +303,9 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
-function getFormattedDate(date: string, locale: 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',
-  });
-}
-
-function getImagePath(coverImage: string) {
-  if (coverImage.startsWith('http')) {
-    return coverImage;
-  }
-  return coverImage.replace('/blog/', '/images/posts/');
-}
-
-// Placeholder image for posts without cover images
-const PLACEHOLDER_IMAGE = 'data:image/svg+xml,' + encodeURIComponent(`
-  <svg width="1792" height="1024" xmlns="http://www.w3.org/2000/svg">
-    <rect width="100%" height="100%" fill="#181C14"/>
-    <rect x="40%" y="35%" width="20%" height="30%" rx="8" fill="#697565" opacity="0.3"/>
-    <circle cx="50%" cy="45%" r="8%" fill="#697565" opacity="0.2"/>
-    <rect x="30%" y="65%" width="40%" height="4%" rx="2" fill="#465B50" opacity="0.3"/>
-    <rect x="35%" y="72%" width="30%" height="3%" rx="2" fill="#465B50" opacity="0.2"/>
-  </svg>
-`);
-
-// Known existing images (from public/images/posts/)
-const EXISTING_IMAGES = new Set([
-  '/images/posts/erp-integration-breuninger/cover.jpg',
-  '/images/posts/fullstack-development-timetracking/cover.jpg',
-  '/images/posts/rfid-automation/cover.jpg',
-  '/images/posts/automated-ad-creatives/cover.jpg',
-]);
-
-// Blog image component with fallback
-function BlogImage({ src, alt, fallback }: { src: string; alt: string; fallback: string }) {
-  const imageSrc = EXISTING_IMAGES.has(src) ? src : fallback;
-
-  return (
-    <Image
-      src={imageSrc}
-      alt={alt}
-      fill
-      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-      className="object-cover transition-transform duration-700 group-hover:scale-110"
-      unoptimized={imageSrc.startsWith('data:')}
-    />
-  );
-}
-
-function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
-  return (
-    <Link
-      href={`/${locale}/blog/${post.slug}`}
-      className="group relative block bg-zinc-900/50 backdrop-blur-sm
-               rounded-xl shadow-lg hover:shadow-2xl
-               ring-1 ring-zinc-800 hover:ring-zinc-700
-               transition-all duration-500 focus:outline-none focus:ring-2
-               focus:ring-zinc-600 focus:ring-offset-2 focus:ring-offset-zinc-950
-               transform hover:-translate-y-1"
-    >
-      <div className="relative overflow-hidden rounded-xl">
-        {/* Image Container */}
-        <div className="aspect-[16/9] w-full relative overflow-hidden bg-zinc-900">
-          <BlogImage
-            src={getImagePath(post.coverImage)}
-            alt={post.title}
-            fallback={PLACEHOLDER_IMAGE}
-          />
-          <div className="absolute inset-x-0 -bottom-20 top-0 bg-gradient-to-t from-zinc-900 via-zinc-900/70 to-transparent opacity-95" />
-        </div>
-
-        {/* Content */}
-        <div className="relative -mt-2 p-6 bg-zinc-900 z-10">
-          <div className="flex items-center gap-4 mb-4 text-zinc-500">
-            <div className="flex items-center gap-2 text-sm">
-              <Calendar className="h-4 w-4" />
-              <span>{getFormattedDate(post.date, locale)}</span>
-            </div>
-            {post.tags && post.tags.length > 0 && (
-              <div className="flex items-center gap-2 text-sm">
-                <Tag className="h-4 w-4" />
-                <span>{post.tags.length} Tags</span>
-              </div>
-            )}
-          </div>
-
-          <h3 className="text-xl font-semibold text-white mb-3
-                       group-hover:text-zinc-100 transition-colors duration-300">
-            {post.title}
-          </h3>
-          <p className="text-zinc-400 text-sm line-clamp-2 mb-4
-                      group-hover:text-zinc-300 transition-colors duration-300">
-            {post.excerpt}
-          </p>
-
-          {/* Tags */}
-          <div className="flex flex-wrap gap-2">
-            {post.tags?.slice(0, 3).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 group-hover:ring-zinc-600/50
-                         group-hover:bg-zinc-800/70 group-hover:text-zinc-300
-                         transition-all duration-300"
-              >
-                {tag}
-              </span>
-            ))}
-            {post.tags && post.tags.length > 3 && (
-              <span className="text-sm text-zinc-600">
-                +{post.tags.length - 3} more
-              </span>
-            )}
-          </div>
-
-          {/* Link Icon */}
-          <div className="absolute top-6 right-6 p-2.5 rounded-full
-                        bg-zinc-800/60 backdrop-blur-sm ring-1 ring-zinc-700/50
-                        opacity-0 group-hover:opacity-100
-                        transform translate-y-2 group-hover:translate-y-0
-                        transition-all duration-300">
-            <ExternalLink className="h-4 w-4 text-zinc-400" />
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-}
-
-// Pagination component
-function Pagination({
-  currentPage,
-  totalPages,
-  locale,
-  t,
-}: {
-  currentPage: number;
-  totalPages: number;
-  locale: string;
-  t: (key: string) => string;
-}) {
-  const getPageNumbers = () => {
-    const pages: (number | 'ellipsis')[] = [];
-
-    if (totalPages <= 7) {
-      // Show all pages if 7 or fewer
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      // Always show first page
-      pages.push(1);
-
-      if (currentPage > 3) {
-        pages.push('ellipsis');
-      }
-
-      // Show pages around current
-      const start = Math.max(2, currentPage - 1);
-      const end = Math.min(totalPages - 1, currentPage + 1);
-
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-
-      if (currentPage < totalPages - 2) {
-        pages.push('ellipsis');
-      }
-
-      // Always show last page
-      pages.push(totalPages);
-    }
-
-    return pages;
-  };
-
-  if (totalPages <= 1) return null;
-
-  return (
-    <nav className="flex items-center justify-center gap-2 mt-12 sm:mt-16" aria-label="Pagination">
-      {/* Previous button */}
-      {currentPage > 1 ? (
-        <Link
-          href={`/${locale}/blog${currentPage > 2 ? `?page=${currentPage - 1}` : ''}`}
-          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
-                     bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
-                     hover:ring-zinc-600 transition-all duration-200"
-          aria-label={t('ui.pagination.previous')}
-        >
-          <ChevronLeft className="h-4 w-4" />
-          <span className="hidden sm:inline">{t('ui.pagination.previous')}</span>
-        </Link>
-      ) : (
-        <span
-          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
-                     bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
-          aria-disabled="true"
-        >
-          <ChevronLeft className="h-4 w-4" />
-          <span className="hidden sm:inline">{t('ui.pagination.previous')}</span>
-        </span>
-      )}
-
-      {/* Page numbers */}
-      <div className="flex items-center gap-1">
-        {getPageNumbers().map((page, index) => {
-          if (page === 'ellipsis') {
-            return (
-              <span key={`ellipsis-${index}`} className="px-2 text-zinc-600">
-                ...
-              </span>
-            );
-          }
-
-          const isCurrentPage = page === currentPage;
-
-          return (
-            <Link
-              key={page}
-              href={`/${locale}/blog${page > 1 ? `?page=${page}` : ''}`}
-              className={`min-w-[40px] h-10 flex items-center justify-center text-sm rounded-lg
-                         ring-1 transition-all duration-200
-                         ${isCurrentPage
-                           ? 'bg-[#697565] text-white ring-[#697565] font-medium'
-                           : 'text-zinc-400 hover:text-white bg-zinc-800/50 hover:bg-zinc-800 ring-zinc-700/50 hover:ring-zinc-600'
-                         }`}
-              aria-current={isCurrentPage ? 'page' : undefined}
-            >
-              {page}
-            </Link>
-          );
-        })}
-      </div>
-
-      {/* Next button */}
-      {currentPage < totalPages ? (
-        <Link
-          href={`/${locale}/blog?page=${currentPage + 1}`}
-          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
-                     bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
-                     hover:ring-zinc-600 transition-all duration-200"
-          aria-label={t('ui.pagination.next')}
-        >
-          <span className="hidden sm:inline">{t('ui.pagination.next')}</span>
-          <ChevronRight className="h-4 w-4" />
-        </Link>
-      ) : (
-        <span
-          className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
-                     bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
-          aria-disabled="true"
-        >
-          <span className="hidden sm:inline">{t('ui.pagination.next')}</span>
-          <ChevronRight className="h-4 w-4" />
-        </span>
-      )}
-    </nav>
-  );
-}
-
-export default async function BlogPage({ params, searchParams }: Props) {
+export default async function BlogPage({ params }: Props) {
   const { locale } = await params;
-  const { page } = await searchParams;
   setRequestLocale(locale);
 
   const t = await getTranslations('blog');
@@ -595,15 +323,6 @@ export default async function BlogPage({ params, searchParams }: Props) {
     ...legacyPosts,
   ].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 
-  // Pagination
-  const currentPage = Math.max(1, parseInt(page || '1', 10) || 1);
-  const totalPages = Math.ceil(allPosts.length / POSTS_PER_PAGE);
-  const validPage = Math.min(currentPage, totalPages || 1);
-
-  const startIndex = (validPage - 1) * POSTS_PER_PAGE;
-  const endIndex = startIndex + POSTS_PER_PAGE;
-  const posts = allPosts.slice(startIndex, endIndex);
-
   return (
     <main className="min-h-screen">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
@@ -619,37 +338,21 @@ export default async function BlogPage({ params, searchParams }: Props) {
           <p className="text-lg sm:text-xl text-zinc-400 max-w-2xl">
             {t('meta.header.subtitle')}
           </p>
-          {/* Post count */}
-          <p className="text-sm text-zinc-500 mt-4">
-            {t('ui.pagination.showing', {
-              start: startIndex + 1,
-              end: Math.min(endIndex, allPosts.length),
-              total: allPosts.length,
-            })}
-          </p>
         </div>
 
-        {/* Blog Posts Grid */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
-          {posts.map((post) => (
-            <BlogPostCard key={post.slug} post={post} locale={locale} />
-          ))}
-        </div>
-
-        {/* Pagination */}
-        <Pagination
-          currentPage={validPage}
-          totalPages={totalPages}
+        {/* Blog List with Search and Filters */}
+        <BlogList
+          posts={allPosts}
           locale={locale}
-          t={(key) => t(key)}
+          translations={{
+            searchPlaceholder: t('ui.search.placeholder'),
+            showingText: (start: number, end: number, total: number) =>
+              t('ui.pagination.showing', { start, end, total }),
+            noPostsText: t('ui.errors.posts'),
+            paginationPrevious: t('ui.pagination.previous'),
+            paginationNext: t('ui.pagination.next'),
+          }}
         />
-
-        {/* Empty State */}
-        {posts.length === 0 && (
-          <div className="text-center py-12">
-            <p className="text-zinc-400">{t('ui.errors.posts')}</p>
-          </div>
-        )}
       </div>
     </main>
   );