wip

app/[locale]/product/page.tsx

@@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
-import { getProductBySlug, getAllProducts, getCategoriesByLocale } from '@/lib/data';
+import { getProductBySlugWithExcel, getAllProducts, getCategoriesByLocale } from '@/lib/data';
 import { getSiteInfo, t, getLocaleFromPath, getLocalizedPath } from '@/lib/i18n';
 import { SEO } from '@/components/SEO';
 import { LocaleSwitcher } from '@/components/LocaleSwitcher';
@@ -16,7 +16,7 @@ interface PageProps {
 
 export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
   const locale = (params.locale as string) || 'en';
-  const product = getProductBySlug(params.slug, locale as 'en' | 'de');
+  const product = getProductBySlugWithExcel(params.slug, locale as 'en' | 'de');
   
   if (!product) {
     return {
@@ -67,7 +67,7 @@ export async function generateStaticParams() {
 
 export default async function ProductDetailPage({ params }: PageProps) {
   const locale = (params.locale as string) || 'en';
-  const product = getProductBySlug(params.slug, locale as 'en' | 'de');
+  const product = getProductBySlugWithExcel(params.slug, locale as 'en' | 'de');
   
   if (!product) {
     notFound();
@@ -87,6 +87,10 @@ export default async function ProductDetailPage({ params }: PageProps) {
     )
     .slice(0, 4);
 
+  // Prepare technical data for display
+  const hasExcelData = product.excelConfigurations && product.excelConfigurations.length > 0;
+  const hasExcelAttributes = product.excelAttributes && product.excelAttributes.length > 0;
+
   return (
     <>
       <SEO
@@ -184,6 +188,53 @@ export default async function ProductDetailPage({ params }: PageProps) {
                 </div>
               )}
 
+              {/* Excel Technical Data Section */}
+              {(hasExcelData || hasExcelAttributes) && (
+                <div className="border-t border-gray-200 pt-6 mb-8">
+                  <h3 className="text-sm font-medium text-gray-900 mb-3">
+                    {locale === 'de' ? 'Technische Daten' : 'Technical Data'}
+                  </h3>
+                  
+                  {/* Configurations */}
+                  {hasExcelData && (
+                    <div className="mb-4">
+                      <h4 className="text-xs font-semibold text-gray-600 mb-2">
+                        {locale === 'de' ? 'Konfigurationen' : 'Configurations'}
+                      </h4>
+                      <div className="flex flex-wrap gap-2">
+                        {product.excelConfigurations!.map((config: string, index: number) => (
+                          <span
+                            key={index}
+                            className="inline-flex items-center px-2 py-1 rounded-md bg-gray-100 text-sm text-gray-700"
+                          >
+                            {config}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Excel Attributes */}
+                  {hasExcelAttributes && (
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      {product.excelAttributes!.map((attr: any, index: number) => (
+                        <div key={index} className="bg-gray-50 rounded-lg p-3">
+                          <div className="text-xs font-semibold text-gray-700 mb-1">
+                            {attr.name}
+                          </div>
+                          <div className="text-sm text-gray-600">
+                            {attr.options.length === 1 
+                              ? attr.options[0] 
+                              : attr.options.slice(0, 3).join(' / ') + (attr.options.length > 3 ? ' / ...' : '')
+                            }
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+
               {/* Product Description */}
               {processedDescription && (
                 <div className="border-t border-gray-200 pt-6 mb-8">