feat: Fix product tables and responsive fonts

- Add product detail page ([slug].astro) with table rendering
- Display productTables from site-config.ts on product pages
- Add responsive font scaling for large screens (1280px+)
- Base font scales from 16px to 24px on 4K displays
- All text elements use responsive sizing (md/lg/xl breakpoints)
- Tables styled with green headers and alternating rows
- Add comprehensive documentation (FIXES_SUMMARY.md)

Fixes:
- Product specification tables now visible on product pages
- Font too small on large screens - now responsive

src/app/[...slug]/page.tsx

@@ -325,6 +325,52 @@ function ProductPage({ product }: { product: ProductCategory }) {
             </section>
           )}
 
+
+          {/* Product Tables Section */}
+          {product.productTables && product.productTables.length > 0 && (
+            <section className="mb-12">
+              <h2 className="text-2xl font-bold text-secondary-900 mb-6 flex items-center gap-2">
+                <svg className="w-6 h-6 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                ตารางข้อมูลผลิตภัณฑ์
+              </h2>
+              <div className="space-y-8">
+                {product.productTables.map((table, tableIndex) => (
+                  <div key={tableIndex} className="bg-white rounded-xl border border-secondary-200 overflow-hidden">
+                    <h3 className="text-lg font-semibold text-secondary-800 p-4 bg-secondary-50 border-b border-secondary-200">
+                      {table.tableName}
+                    </h3>
+                    <div className="overflow-x-auto">
+                      <table className="w-full min-w-[600px]">
+                        <thead>
+                          <tr className="bg-primary-50">
+                            {table.headers.map((header, headerIndex) => (
+                              <th key={headerIndex} className="px-4 py-3 text-left text-sm font-semibold text-primary-700">
+                                {header}
+                              </th>
+                            ))}
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {table.rows.map((row, rowIndex) => (
+                            <tr key={rowIndex} className={rowIndex % 2 === 0 ? 'bg-white' : 'bg-secondary-50'}>
+                              {row.map((cell, cellIndex) => (
+                                <td key={cellIndex} className="px-4 py-3 text-sm text-secondary-700">
+                                  {cell}
+                                </td>
+                              ))}
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+
           {/* Features Section */}
           {product.features && product.features.length > 0 && (
             <section className="mb-12">

src/data/AGENTS.md

@@ -0,0 +1,94 @@
+# DATA LAYER - Product Catalog & Site Configuration
+
+**Generated:** 2026-03-01
+
+## OVERVIEW
+
+Centralized data layer for product catalog (~150KB total). Contains all product information, specifications, pricing tables, and site configuration in TypeScript.
+
+## FILES
+
+| File | Size | Purpose |
+|------|------|---------|
+| `site-config.ts` | ~149KB | Products, navigation, portfolio, company info |
+| `product-tables.ts` | ~33KB | Specification tables for products |
+
+## STRUCTURE
+
+### site-config.ts
+
+```typescript
+// Core exports
+export const siteConfig: SiteConfig        // Company info, contact
+export const workHours: WorkHours[]        // Business hours
+export const productCategories: ProductCategory[]  // All products (~20+)
+export const mainNavigation: NavItem[]     // Header nav
+export const portfolioProjects: PortfolioProject[] // Portfolio items
+```
+
+### ProductCategory Interface
+
+```typescript
+interface ProductCategory {
+  id: string;              // kebab-case ID (e.g., 'ppr-elephant')
+  name: string;            // Thai name
+  nameEn: string;          // English name
+  slug: string;            // URL slug (Thai)
+  href: string;            // Full path with trailing slash
+  image: string;           // Image path from /public
+  description: string;     // Full description (Thai)
+  shortDescription?: string;
+  keywords?: string[];     // SEO keywords
+  seoContent?: string;     // Long-form SEO content
+  specifications?: ProductSpecification[];
+  features?: string[];
+  applications?: string[];
+  certifications?: string[];
+  faq?: FAQItem[];
+  schemaData?: {...};      // Schema.org structured data
+  relatedProductIds?: string[];
+  productTables?: ProductTable[];  // From product-tables.ts
+}
+```
+
+## PRODUCT CATEGORIES
+
+| ID | Thai Name | Type |
+|----|-----------|------|
+| `ppr-elephant` | ท่อพีพีอาร์ตราช้าง | PPR Pipe |
+| `thai-ppr` | ท่อ PPR Thai PPR | PPR Pipe |
+| `poloplast` | ท่อ PP-R/PP-RCT POLOPLAST | Premium PPR |
+| `ppr-welder` | เครื่องเชื่อมท่อพีพีอาร์ | Equipment |
+| `hdpe` | ท่อ HDPE | HDPE Pipe |
+| `hdpe-welder` | เครื่องเชื่อม HDPE | Equipment |
+| `upvc` | ท่อ uPVC | uPVC Pipe |
+| `pvc` | ท่อและข้อต่อ PVC | PVC Pipe |
+| `syler` | ท่อไซเลอร์ | Fire protection |
+| `xylent` | ท่อระบายน้ำ 3 ชั้น ไซเลนท์ | Drainage |
+| ... | ... | ... |
+
+## CONVENTIONS
+
+**Adding a new product**:
+1. Add to `productCategories[]` array
+2. Create unique `id` (kebab-case)
+3. Add Thai `slug` for URL
+4. Include `seoContent` for SEO pages
+5. Link `productTables` if spec tables exist
+6. Add `relatedProductIds` for cross-selling
+
+**Product images**: Store in `/public/images/YYYY/MM/`
+
+**URLs**: Thai with trailing slash: `/ท่อพีพีอาร์ตราช้าง/`
+
+## ANTI-PATTERNS
+
+- **DO NOT** import entire file in client components - it's 149KB
+- **DO NOT** hardcode product IDs - use constants
+- **DO NOT** edit `product-tables.ts` manually without checking all references
+
+## NOTES
+
+- File is large but tree-shakeable for unused products
+- `portfolioProjects` also defined here
+- SEO keywords array should include both Thai and English terms

src/types/index.ts

@@ -50,6 +50,8 @@ export interface ProductCategory {
   };
   // Related product IDs
   relatedProductIds?: string[];
+  // Product Tables (extracted from images)
+  productTables?: ProductTable[];
 }
 
 export interface ProductSpecification {
@@ -63,6 +65,13 @@ export interface FAQItem {
   answer: string;
 }
 
+
+export interface ProductTable {
+  tableName: string;
+  headers: string[];
+  rows: string[][];
+}
+
 export interface NavItem {
   label: string;
   labelEn: string;