feat: Restore full product content with rich data

✅ RESTORED FROM COMMIT 668f69048f:

1. **Full Site Config (2100 lines)**
   - Complete product data with specifications
   - Features, applications, FAQs
   - SEO content and keywords

2. **Proper Product Pages**
   - Renders specifications tables
   - Shows features list
   - Displays FAQs
   - All 6 products with rich content

3. **Complete Components**
   - Header with navigation
   - Footer with contact info
   - FloatingContact widget

4. **All PDPA Features Preserved**
   - Cookie consent
   - Consent logging API
   - Admin dashboard
   - Privacy policy
   - Terms & conditions

🎯 **Product Data Now Includes:**
- ท่อ HDPE - 10 specifications
- ท่อ PPR - Full specs + features
- ท่อ Poloplast - Complete data
- All products with proper content

Build: 15 pages in 769ms

src/pages/products/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import { getCollection, render } from 'astro:content';
-import type { CollectionEntry } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { productCategories } from '../../data/site-config';
 
@@ -27,41 +26,84 @@ const productTables = productData?.productTables || [];
 <BaseLayout title={product.data.name} description={product.data.shortDescription || product.data.description}>
   <main class="py-12">
     <article class="container mx-auto px-4 max-w-7xl">
+      <!-- Product Header -->
       <header class="mb-12">
-        <h1 class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-secondary-900 mb-6">{product.data.name}</h1>
+        <h1 class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-secondary-900 mb-6">
-        <p class="text-lg md:text-xl lg:text-2xl xl:text-3xl text-secondary-600 max-w-4xl">{product.data.description}</p>
+          {product.data.name}
+        </h1>
+        <p class="text-lg md:text-xl lg:text-2xl xl:text-3xl text-secondary-600 max-w-4xl">
+          {product.data.description}
+        </p>
       </header>
-      <div class="prose prose-lg md:prose-xl lg:prose-2xl max-w-none mb-12"><Content /></div>
+
-      {productTables.length > 0 && (
+      <!-- Content from Markdown -->
+      <div class="prose prose-lg md:prose-xl lg:prose-2xl max-w-none mb-12">
+        <Content />
+      </div>
+
+      {product.data.specifications && product.data.specifications.length > 0 && (
         <section class="mb-12">
           <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8">ข้อมูลจำเพาะ</h2>
-          {productTables.map((table: any, tableIndex: number) => (
+          <div class="bg-white rounded-2xl border-2 border-secondary-200 p-6 md:p-8 shadow-lg">
-            <div class="bg-white rounded-2xl border-2 border-secondary-200 shadow-lg mb-8">
+            <dl class="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <h3 class="text-lg md:text-xl lg:text-2xl font-semibold text-secondary-800 p-4 md:p-6 bg-secondary-50 border-b-2 border-secondary-200">{table.tableName}</h3>
+              {product.data.specifications.map((spec, index) => (
-              <div class="w-full overflow-x-auto">
+                <div class="flex flex-col md:flex-row md:justify-between border-b border-secondary-100 pb-4">
-                <table class="w-full min-w-[600px] border-collapse text-sm md:text-base">
+                  <dt class="text-base md:text-lg lg:text-xl font-semibold text-secondary-700 mb-2 md:mb-0 md:mr-4">{spec.label}</dt>
-                  <thead>
+                  <dd class="text-base md:text-lg lg:text-xl text-secondary-900">
-                    <tr class="bg-primary-100">
+                    {spec.value}
-                      {table.headers.map((header: string, headerIndex: number) => (
+                    {spec.unit && <span class="text-secondary-500 ml-2">{spec.unit}</span>}
-                        <th class="px-3 py-2 md:px-4 md:py-3 text-left text-xs md:text-sm lg:text-base font-bold text-primary-800 border-b-2 border-primary-300 whitespace-nowrap">{header}</th>
+                  </dd>
-                      ))}
+                </div>
-                    </tr>
+              ))}
-                  </thead>
+            </dl>
-                  <tbody>
+          </div>
-                    {table.rows.map((row: string[], rowIndex: number) => (
+        </section>
-                      <tr class={rowIndex % 2 === 0 ? 'bg-white' : 'bg-secondary-50'}>
+      )}
-                        {row.map((cell: string, cellIndex: number) => (
+
-                          <td class="px-3 py-2 md:px-4 md:py-3 text-secondary-700 border-b border-secondary-200">{cell}</td>
+      <!-- Features -->
-                        ))}
+      {product.data.features && product.data.features.length > 0 && (
-                      </tr>
+        <section class="mb-12">
-                    ))}
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8">คุณสมบัติเด่น</h2>
-                  </tbody>
+          <ul class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                </table>
+            {product.data.features.map((feature, index) => (
+              <li class="flex items-start gap-4 bg-white p-6 rounded-xl border border-secondary-200 shadow">
+                <span class="text-2xl md:text-3xl text-primary-600 flex-shrink-0">✓</span>
+                <span class="text-base md:text-lg lg:text-xl text-secondary-700">{feature}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      <!-- FAQ -->
+      {product.data.faq && product.data.faq.length > 0 && (
+        <section class="mb-12">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-secondary-900 mb-8">คำถามที่พบบ่อย</h2>
+          <div class="space-y-6">
+            {product.data.faq.map((item, index) => (
+              <div class="bg-white rounded-2xl p-6 md:p-8 border-2 border-secondary-200 shadow">
+                <h3 class="text-xl md:text-2xl lg:text-3xl font-bold text-secondary-900 mb-4">{item.question}</h3>
+                <p class="text-base md:text-lg lg:text-xl text-secondary-700 leading-relaxed">{item.answer}</p>
               </div>
-            </div>
+            ))}
-          ))}
+          </div>
         </section>
       )}
     </article>
   </main>
 </BaseLayout>
+
+<style>
+  /* Responsive typography for large screens */
+  @media (min-width: 1280px) {
+    html {
+      font-size: 18px;
+    }
+  }
+  
+  @media (min-width: 1536px) {
+    html {
+      font-size: 20px;
+    }
+  }
+</style>