Fix product categories to match Header navigation

Categories now match Header.astro:
- ท่อพีพีอาร์ (4 items)
- ท่อ UPVC/Specialty (4 items)
- เครื่องเชื่อมท่อ (4 items)
- วาล์ว (2 items)
- ปั๊มและระบบน้ำ (2 items)
- อุปกรณ์ปรับอากาศ (2 items)
- ฉนวนและรั้ว (8 items)
- Total: 26 products

src/pages/all-products.astro

@@ -3,18 +3,22 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
 
 const products = [
   // ท่อพีพีอาร์
-  { name: "ท่อ PPR ไทยพีพีอาร์", href: "/ท่อ-ppr-thai-ppr", image: "/images/products-cropped/ppr-pipe_000C.jpg", category: "ท่อพีพีอาร์" },
+  { name: "ไทยพีพีอาร์", href: "/ท่อ-ppr-thai-ppr", image: "/images/products-cropped/ppr-pipe_000C.jpg", category: "ท่อพีพีอาร์" },
   { name: "ท่อ PPR ตราช้าง", href: "/ท่อ-ppr-scg", image: "/images/products-cropped/ppr-scg.jpg", category: "ท่อพีพีอาร์" },
-  { name: "ท่อ HDPE", href: "/ท่อ-hdpe", image: "/images/products-cropped/hdpe001.jpg", category: "ท่อพีพีอาร์" },
+  { name: "ท่อ PP-R Poloplast", href: "/pp-r-poloplast", image: "/images/poloplast/POLOPLAST_001.png", category: "ท่อพีพีอาร์" },
-  { name: "ท่อ UPVC", href: "/ท่อ-upvc", image: "/images/products-cropped/upvc-pipe_000C.jpg", category: "ท่อ UPVC" },
+  { name: "ท่อ HDPE", href: "/ท่อ-hdpe", image: "/images/products-misc/HDPE.jpg", category: "ท่อพีพีอาร์" },
-  { name: "ท่อ Syler", href: "/ท่อ-syler", image: "/images/products-misc/SYLER01.jpg", category: "ท่อ UPVC" },
-  { name: "ท่อ XYLENT", href: "/ท่อ-xy-lent", image: "/images/products-cropped/XYLENT_001.png", category: "ท่อ UPVC" },
   
-  // เครื่องเชื่อม
+  // ท่อ UPVC/Specialty
-  { name: "เครื่องเชื่อม HDPE", href: "/เครื่องเชื่อม-hdpe", image: "/images/products-misc/HDPE2.jpg", category: "เครื่องเชื่อม" },
+  { name: "ท่อ UPVC", href: "/ท่อ-upvc", image: "/images/products-cropped/upvc-pipe_000C.jpg", category: "ท่อ UPVC/Specialty" },
-  { name: "เครื่องเชื่อม PPR", href: "/เครื่องเชื่อม-ppr", image: "/images/products-misc/ppr0001.jpg", category: "เครื่องเชื่อม" },
+  { name: "ท่อ Syler", href: "/ท่อ-syler", image: "/images/products-misc/SYLER01.jpg", category: "ท่อ UPVC/Specialty" },
-  { name: "Pipe Coupling", href: "/pipe-coupling", image: "/images/pipe-coupling/BG-SMC02.png", category: "เครื่องเชื่อม" },
+  { name: "ท่อ PVC และข้อต่อ", href: "/ท่อ-pvc-และข้อต่อ", image: "/images/products-cropped/pvc-pipe_000C.jpg", category: "ท่อ UPVC/Specialty" },
-  { name: "เม็กกรู๊ฟ คับปลิ้ง", href: "/เม็กกรู๊ฟ-คับปลิ้ง", image: "/images/products-misc/MECH_001.jpg", category: "เครื่องเชื่อม" },
+  { name: "ท่อ XYLENT", href: "/ท่อ-xy-lent", image: "/images/products-cropped/XYLENT_001.png", category: "ท่อ UPVC/Specialty" },
+  
+  // เครื่องเชื่อมท่อ
+  { name: "เครื่องเชื่อม HDPE", href: "/เครื่องเชื่อม-hdpe", image: "/images/products-misc/HDPE.jpg", category: "เครื่องเชื่อมท่อ" },
+  { name: "เครื่องเชื่อม PPR", href: "/เครื่องเชื่อม-ppr", image: "/images/products-misc/ppr0001.jpg", category: "เครื่องเชื่อมท่อ" },
+  { name: "Pipe Coupling", href: "/pipe-coupling", image: "/images/pipe-coupling/BG-SMC02.png", category: "เครื่องเชื่อมท่อ" },
+  { name: "เม็กกรู๊ฟ คับปลิ้ง", href: "/เม็กกรู๊ฟ-คับปลิ้ง", image: "/images/products-misc/MECH_001.jpg", category: "เครื่องเชื่อมท่อ" },
   
   // วาล์ว
   { name: "วาล์ว Valve", href: "/วาล์ว-valve", image: "/images/products-cropped/valve_000C.jpg", category: "วาล์ว" },
@@ -28,28 +32,31 @@ const products = [
   { name: "อุปกรณ์ปรับอากาศ", href: "/อุปกรณ์ปรับอากาศ", image: "/images/products-raw/ball-jet/main-ball-jet.jpg", category: "อุปกรณ์ปรับอากาศ" },
   { name: "กริลแอร์", href: "/grilles", image: "/images/products-cropped/grilles_000C.jpg", category: "อุปกรณ์ปรับอากาศ" },
   
-  // อุปกรณ์ดับเพลิง
-  { name: "อุปกรณ์ดับเพลิง", href: "/อุปกรณ์ดับเพลิง", image: "/images/products-cropped/extinguishers_000C.jpg", category: "อุปกรณ์ดับเพลิง" },
-  
   // ฉนวนและรั้ว
-  { name: "Realflex", href: "/realflex", image: "/images/products-cropped/realflex_000C.jpg", category: "ฉนวนและรั้ว" },
   { name: "Armaflex", href: "/armflex", image: "/images/armflex/armaflex-sheet-roll.jpg", category: "ฉนวนและรั้ว" },
   { name: "Aeroflex", href: "/aeroflex", image: "/images/aeroflex/aerocel-d-al-real.jpg", category: "ฉนวนและรั้ว" },
   { name: "Maxflex", href: "/maxflex", image: "/images/maxflex/maxflex-fsk-foil.jpg", category: "ฉนวนและรั้ว" },
   { name: "เทอร์โมเบรค Thermobreak", href: "/เทอร์โมเบรค-thermobreak", image: "/images/thermobreak/thermobreak-solarblock.png", category: "ฉนวนและรั้ว" },
+  { name: "Realflex", href: "/realflex", image: "/images/products-cropped/realflex_000C.jpg", category: "ฉนวนและรั้ว" },
+  { name: "อุปกรณ์ดับเพลิง", href: "/อุปกรณ์ดับเพลิง", image: "/images/products-cropped/extinguishers_000C.jpg", category: "ฉนวนและรั้ว" },
   { name: "รั้วเทวดา", href: "/รั้วเทวดา", image: "/images/tevada/LINE_ALBUM_รั้วเทวดา_260522_1.jpg", category: "ฉนวนและรั้ว" },
   { name: "ระบบรั้วไวน์แมน", href: "/ระบบรั้วไวน์แมน", image: "/images/products-cropped/vineman_000C.jpg", category: "ฉนวนและรั้ว" },
 ];
 
+// Get unique categories based on Header structure
+const categoryCounts = {};
+products.forEach(p => {
+  categoryCounts[p.category] = (categoryCounts[p.category] || 0) + 1;
+});
+
 const categories = [
-  { name: "ท่อพีพีอาร์", id: "ppr", count: 3 },
+  { name: "ท่อพีพีอาร์", id: "ppr", count: 4 },
-  { name: "ท่อ UPVC", id: "upvc", count: 3 },
+  { name: "ท่อ UPVC/Specialty", id: "upvc", count: 4 },
-  { name: "เครื่องเชื่อม", id: "welding", count: 4 },
+  { name: "เครื่องเชื่อมท่อ", id: "welding", count: 4 },
   { name: "วาล์ว", id: "valve", count: 2 },
   { name: "ปั๊มและระบบน้ำ", id: "pump", count: 2 },
   { name: "อุปกรณ์ปรับอากาศ", id: "ac", count: 2 },
-  { name: "อุปกรณ์ดับเพลิง", id: "fire", count: 1 },
+  { name: "ฉนวนและรั้ว", id: "fence", count: 8 },
-  { name: "ฉนวนและรั้ว", id: "fence", count: 7 },
 ];
 ---
 
@@ -95,12 +102,11 @@ const categories = [
             class="product-card group bg-white rounded-xl overflow-hidden border border-neutral-200 hover:border-primary-300 hover:shadow-lg transition-all"
             data-category={
               product.category === "ท่อพีพีอาร์" ? "ppr" :
-              product.category === "ท่อ UPVC" ? "upvc" :
+              product.category === "ท่อ UPVC/Specialty" ? "upvc" :
-              product.category === "เครื่องเชื่อม" ? "welding" :
+              product.category === "เครื่องเชื่อมท่อ" ? "welding" :
               product.category === "วาล์ว" ? "valve" :
               product.category === "ปั๊มและระบบน้ำ" ? "pump" :
               product.category === "อุปกรณ์ปรับอากาศ" ? "ac" :
-              product.category === "อุปกรณ์ดับเพลิง" ? "fire" :
               "fence"
             }
           >
@@ -135,7 +141,6 @@ const categories = [
   </section>
 
   <script>
-    // Filter functionality
     document.addEventListener('DOMContentLoaded', () => {
       const filterBtns = document.querySelectorAll('.filter-btn');
       const productCards = document.querySelectorAll('.product-card');
@@ -152,13 +157,15 @@ const categories = [
           btn.classList.add('bg-primary-600', 'text-white', 'active');
           btn.classList.remove('bg-neutral-100', 'text-neutral-700');
           
-          // Filter products
+          // Filter products with animation
-          productCards.forEach(card => {
+          productCards.forEach((card, index) => {
             if (filter === 'all' || card.getAttribute('data-category') === filter) {
               card.style.display = 'block';
+              card.style.animationDelay = `${index * 50}ms`;
               card.classList.add('animate-fade-in');
             } else {
               card.style.display = 'none';
+              card.classList.remove('animate-fade-in');
             }
           });
         });
@@ -168,10 +175,11 @@ const categories = [
 
   <style>
     .animate-fade-in {
-      animation: fadeIn 0.3s ease-out;
+      animation: fadeIn 0.4s ease-out forwards;
+      opacity: 0;
     }
     @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(10px); }
+      from { opacity: 0; transform: translateY(15px); }
       to { opacity: 1; transform: translateY(0); }
     }
   </style>