feat(homepage): rework homepage + align about-us + footer popular products

## homepage (index.astro)

- Drop '500+ รายการสินค้า' from stat badges and rebuild the trust-badges
  section to show only 15+ ปีประสบการณ์, 400+ ลูกค้าทั่วประเทศ, 98%
  ลูกค้าพึงพอใจ — bigger numbers (text-5xl/6xl), no icons, counter animation
- Add 'ทำไมเลือกเรา' section (4 cards: ส่งฟรี กทม./ปริมณฑล, Lead time 1-3
  วัน, ราคาโรงงาน, ทีมช่างแนะนำ) — no icons, primary/accent border hover
- Add 'หมวดสินค้า' section (8 tiles: 7 categories + 'สินค้าทั้งหมด')
  placed after 'สินค้าแนะนำ' — each tile is a real product photo with
  dark gradient overlay and a CTA link to /all-products?filter=<id>
- Reorder: Hero → ทำไมเลือกเรา → สินค้าแนะนำ → หมวดสินค้า → Stats →
  บทความล่าสุด → CTA

## all-products (filter from URL)

- Script now reads ?filter=<id> on load and applies it without rewriting
  the URL, then on click updates both the filter and the URL via
  history.replaceState so the back/forward buttons work

## footer (BaseLayout.astro)

- Replace productLinks with the curated 6 popular products: ไทยพีพีอาร์,
  เทอร์โมเบรค, กริลแอร์, หัวจ่ายแอร์ Ball Jet, ท่อ HDPE, ท่อ Syler

## about-us

- Stats: 10+/1000+/500+ replaced with 15+ / 400+ + counter animation,
  bigger numbers, rounded-3xl + shadow (matches home)
- Why Choose Us: rebuilt with the same 4 cards + same style as home's
  'ทำไมเลือกเรา' (no icons, pill header, larger h2 + subtitle)

src/pages/all-products.astro

@@ -136,35 +136,58 @@ const categoryIdMap = Object.fromEntries(categories.map(c => [c.name, c.id]));
   </section>
 
   <script>
-    document.addEventListener('DOMContentLoaded', () => {
+    function applyFilter(filter, updateUrl = false) {
       const filterBtns = document.querySelectorAll('.filter-btn');
       const productCards = document.querySelectorAll('.product-card');
 
+      // Update active state on buttons
+      filterBtns.forEach(b => {
+        b.classList.remove('bg-primary-600', 'text-white', 'active');
+        b.classList.add('bg-neutral-100', 'text-neutral-700');
+        if (b.getAttribute('data-filter') === filter) {
+          b.classList.add('bg-primary-600', 'text-white', 'active');
+          b.classList.remove('bg-neutral-100', 'text-neutral-700');
+        }
+      });
+
+      // Filter products
+      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');
+        }
+      });
+
+      if (updateUrl) {
+        const url = new URL(window.location.href);
+        if (filter === 'all') {
+          url.searchParams.delete('filter');
+        } else {
+          url.searchParams.set('filter', filter);
+        }
+        window.history.replaceState({}, '', url);
+      }
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+      // Read ?filter=<id> from URL on page load
+      const params = new URLSearchParams(window.location.search);
+      const initialFilter = params.get('filter') || 'all';
+
+      const filterBtns = document.querySelectorAll('.filter-btn');
       filterBtns.forEach(btn => {
         btn.addEventListener('click', () => {
           const filter = btn.getAttribute('data-filter');
-
-          // Update active state
-          filterBtns.forEach(b => {
-            b.classList.remove('bg-primary-600', 'text-white', 'active');
-            b.classList.add('bg-neutral-100', 'text-neutral-700');
-          });
-          btn.classList.add('bg-primary-600', 'text-white', 'active');
-          btn.classList.remove('bg-neutral-100', 'text-neutral-700');
-
-          // Filter products with animation
-          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');
-            }
-          });
+          applyFilter(filter, true);
         });
       });
+
+      // Apply initial filter from URL (no URL update on load)
+      applyFilter(initialFilter, false);
     });
   </script>