initial migration

app/[locale]/product/page.tsx

@@ -0,0 +1,278 @@
+import { Metadata } from 'next';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { getProductBySlug, getAllProducts, getCategoriesByLocale } from '@/lib/data';
+import { getSiteInfo, t, getLocaleFromPath, getLocalizedPath } from '@/lib/i18n';
+import { processHTML } from '@/lib/html-compat';
+import { SEO } from '@/components/SEO';
+import { LocaleSwitcher } from '@/components/LocaleSwitcher';
+
+interface PageProps {
+  params: {
+    slug: string;
+    locale?: string;
+  };
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const locale = (params.locale as string) || 'en';
+  const product = getProductBySlug(params.slug, locale as 'en' | 'de');
+  
+  if (!product) {
+    return {
+      title: 'Product not found',
+    };
+  }
+
+  const site = getSiteInfo();
+  
+  return {
+    title: `${product.name} | ${site.title}`,
+    description: product.shortDescriptionHtml || product.descriptionHtml.substring(0, 160) || '',
+    alternates: {
+      canonical: getLocalizedPath(`/product/${product.slug}`, locale as 'en' | 'de'),
+      languages: {
+        'en': `/en/product/${product.slug}`,
+        'de': `/de/product/${product.slug}`,
+      },
+    },
+    openGraph: {
+      title: product.name,
+      description: product.shortDescriptionHtml || product.descriptionHtml.substring(0, 160) || '',
+      type: 'website',
+      locale,
+      ...(product.images && product.images.length > 0 && {
+        images: product.images.map(img => ({ url: img, alt: product.name })),
+      }),
+    },
+  };
+}
+
+export async function generateStaticParams() {
+  const productsEN = getAllProducts();
+  const productsDE = getAllProducts();
+  
+  const enParams = productsEN.filter(p => p.locale === 'en').map((product) => ({
+    slug: product.slug,
+    locale: 'en',
+  }));
+  
+  const deParams = productsDE.filter(p => p.locale === 'de').map((product) => ({
+    slug: product.slug,
+    locale: 'de',
+  }));
+  
+  return [...enParams, ...deParams];
+}
+
+export default async function ProductDetailPage({ params }: PageProps) {
+  const locale = (params.locale as string) || 'en';
+  const product = getProductBySlug(params.slug, locale as 'en' | 'de');
+  
+  if (!product) {
+    notFound();
+  }
+
+  // Process description HTML with WordPress compatibility
+  const processedDescription = product.descriptionHtml ?
+    processHTML(product.descriptionHtml) : '';
+
+  // Get related products (same category)
+  const allProducts = getAllProducts();
+  const relatedProducts = allProducts
+    .filter((p: any) =>
+      p.locale === locale &&
+      p.slug !== product.slug &&
+      p.categories?.some((cat: any) => product.categories?.some((pc: any) => pc.slug === cat.slug))
+    )
+    .slice(0, 4);
+
+  return (
+    <>
+      <SEO
+        title={product.name}
+        description={product.shortDescriptionHtml || product.descriptionHtml.substring(0, 160) || ''}
+        locale={locale as 'en' | 'de'}
+        path={`/product/${product.slug}`}
+        type="product"
+        images={product.images}
+      />
+       
+      <div className="bg-white py-12 sm:py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          {/* Back to products link */}
+          <div className="mb-8">
+            <Link
+              href={getLocalizedPath('/products', locale as 'en' | 'de')}
+              className="inline-flex items-center text-sm text-gray-600 hover:text-gray-900 transition-colors"
+            >
+              <svg className="mr-2 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('products.backToProducts', locale as 'en' | 'de')}
+            </Link>
+          </div>
+
+          <div className="lg:grid lg:grid-cols-2 lg:gap-x-12 lg:items-start">
+            {/* Product Images */}
+            <div className="flex flex-col-reverse">
+              {product.images && product.images.length > 0 ? (
+                <>
+                  <div className="hidden lg:grid lg:grid-cols-1 lg:gap-4 mt-4">
+                    {product.images.map((img: string, index: number) => (
+                      <div key={index} className="aspect-square overflow-hidden rounded-lg bg-gray-100">
+                        <img
+                          src={img}
+                          alt={`${product.name} - ${index + 1}`}
+                          className="h-full w-full object-cover object-center"
+                          loading={index === 0 ? 'eager' : 'lazy'}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                  <div className="lg:hidden aspect-square overflow-hidden rounded-lg bg-gray-100 mb-4">
+                    <img
+                      src={product.images[0]}
+                      alt={product.name}
+                      className="h-full w-full object-cover object-center"
+                      loading="eager"
+                    />
+                  </div>
+                </>
+              ) : (
+                <div className="aspect-square overflow-hidden rounded-lg bg-gray-100 flex items-center justify-center">
+                  <svg className="h-24 w-24 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                  </svg>
+                </div>
+              )}
+            </div>
+
+            {/* Product Info */}
+            <div className="mt-10 px-4 sm:px-0 sm:mt-16 lg:mt-0">
+              {/* Categories */}
+              {product.categories && product.categories.length > 0 && (
+                <div className="flex flex-wrap gap-2 mb-4">
+                  {product.categories.map((cat: any) => (
+                    <Link
+                      key={cat.slug}
+                      href={getLocalizedPath(`/product-category/${cat.slug}`, locale as 'en' | 'de')}
+                      className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 hover:bg-blue-100 transition-colors"
+                    >
+                      {cat.name}
+                    </Link>
+                  ))}
+                </div>
+              )}
+
+              <h1 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl mb-4">
+                {product.name}
+              </h1>
+
+              {product.sku && (
+                <p className="text-sm text-gray-500 mb-4">
+                  {t('products.sku', locale as 'en' | 'de')}: {product.sku}
+                </p>
+              )}
+
+              {product.shortDescriptionHtml && (
+                <p className="text-lg text-gray-600 mb-6">
+                  {product.shortDescriptionHtml}
+                </p>
+              )}
+
+              {/* Product Description */}
+              {processedDescription && (
+                <div className="border-t border-gray-200 pt-6 mb-8">
+                  <h3 className="text-sm font-medium text-gray-900 mb-3">
+                    {t('products.description', locale as 'en' | 'de')}
+                  </h3>
+                  <div
+                    className="prose prose-sm max-w-none text-gray-600"
+                    dangerouslySetInnerHTML={{ __html: processedDescription }}
+                  />
+                </div>
+              )}
+
+              {/* Actions */}
+              <div className="border-t border-gray-200 pt-6">
+                <div className="flex flex-col sm:flex-row gap-4">
+                  <Link
+                    href={getLocalizedPath('/contact', locale as 'en' | 'de')}
+                    className="flex-1 inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors shadow-sm"
+                  >
+                    {t('products.inquire', locale as 'en' | 'de')}
+                    <svg className="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    </svg>
+                  </Link>
+                  <Link
+                    href={getLocalizedPath('/products', locale as 'en' | 'de')}
+                    className="flex-1 inline-flex justify-center items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors"
+                  >
+                    {t('products.backToProducts', locale as 'en' | 'de')}
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Related Products */}
+          {relatedProducts.length > 0 && (
+            <div className="mt-20 border-t border-gray-200 pt-12">
+              <h2 className="text-2xl font-bold text-gray-900 mb-6">
+                {t('products.relatedProducts', locale as 'en' | 'de')}
+              </h2>
+              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+                {relatedProducts.map((relatedProduct: any) => (
+                  <Link
+                    key={relatedProduct.slug}
+                    href={getLocalizedPath(`/product/${relatedProduct.slug}`, locale as 'en' | 'de')}
+                    className="group block bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-all"
+                  >
+                    {relatedProduct.images && relatedProduct.images.length > 0 ? (
+                      <div className="aspect-square bg-gray-100 overflow-hidden">
+                        <img
+                          src={relatedProduct.images[0]}
+                          alt={relatedProduct.name}
+                          className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-200"
+                          loading="lazy"
+                        />
+                      </div>
+                    ) : (
+                      <div className="aspect-square bg-gray-100 flex items-center justify-center">
+                        <svg className="h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                      </div>
+                    )}
+                    <div className="p-4">
+                      <h3 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors mb-1 line-clamp-2">
+                        {relatedProduct.name}
+                      </h3>
+                      {relatedProduct.shortDescriptionHtml && (
+                        <p className="text-sm text-gray-600 line-clamp-2 mb-2">
+                          {relatedProduct.shortDescriptionHtml}
+                        </p>
+                      )}
+                      <span className="text-xs text-blue-600 font-medium">
+                        {t('products.viewDetails', locale as 'en' | 'de')} →
+                      </span>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Locale Switcher */}
+      <div className="bg-gray-50 py-8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <LocaleSwitcher />
+        </div>
+      </div>
+    </>
+  );
+}