---
import BaseLayout from '@/layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

const articles = (await getCollection('blog')).sort(
  (a, b) => b.data.published_at.getTime() - a.data.published_at.getTime()
).slice(0, 3);
---

<BaseLayout title="ดีล พลัส เทค - ระบบน้ำคุณภาพสูง ราคาโรงงาน" description="ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำคุณภาพสูง ราคาโรงงาน ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ และอุปกรณ์โรงงานคุณภาพ">

  <!-- Hero Section with Modern Animations -->
  <section class="relative min-h-[70vh] flex items-center overflow-hidden bg-gradient-to-br from-primary-800 via-primary-700 to-primary-900 text-white">
    <!-- Advanced Animated Background -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <!-- Animated Gradient Orbs -->
      <div class="absolute -top-1/4 -right-1/4 w-[800px] h-[800px] bg-gradient-to-br from-primary-400/40 via-primary-500/20 to-transparent rounded-full blur-[120px] animate-mesh-1"></div>
      <div class="absolute -bottom-1/4 -left-1/4 w-[700px] h-[700px] bg-gradient-to-tr from-primary-300/30 via-primary-400/10 to-transparent rounded-full blur-[100px] animate-mesh-2"></div>
      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] bg-gradient-to-r from-primary-500/10 via-primary-400/5 to-primary-600/10 rounded-full blur-[150px] animate-mesh-3"></div>
      
      <!-- Floating Particles -->
      <div class="absolute top-1/4 left-1/4 w-2 h-2 bg-white/30 rounded-full animate-float"></div>
      <div class="absolute top-1/3 right-1/4 w-3 h-3 bg-primary-300/20 rounded-full animate-float-delayed-1"></div>
      <div class="absolute top-2/3 left-1/3 w-2 h-2 bg-primary-200/20 rounded-full animate-float-delayed-2"></div>
      <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-white/15 rounded-full animate-float"></div>
      <div class="absolute bottom-1/4 left-2/3 w-3 h-3 bg-primary-400/15 rounded-full animate-float-delayed-3"></div>
      
      <!-- Water-inspired Waves -->
      <svg class="absolute bottom-0 left-0 w-full h-[300px] opacity-20" viewBox="0 0 1440 300" preserveAspectRatio="none">
        <path d="M0,150 Q360,50 720,150 T1440,150 L1440,300 L0,300 Z" fill="none" stroke="url(#water-gradient)" stroke-width="2">
          <animate attributeName="d" dur="10s" repeatCount="indefinite" values="M0,150 Q360,50 720,150 T1440,150 L1440,300 L0,300 Z;M0,180 Q360,80 720,180 T1440,180 L1440,300 L0,300 Z;M0,150 Q360,50 720,150 T1440,150 L1440,300 L0,300 Z"/>
        </path>
        <defs>
          <linearGradient id="water-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#40916c"/>
            <stop offset="50%" stop-color="#74c69d"/>
            <stop offset="100%" stop-color="#40916c"/>
          </linearGradient>
        </defs>
      </svg>
      
      <!-- Second Wave Layer -->
      <svg class="absolute bottom-0 left-0 w-full h-[250px] opacity-10" viewBox="0 0 1440 250" preserveAspectRatio="none">
        <path d="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,250 L0,250 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
          <animate attributeName="d" dur="15s" repeatCount="indefinite" values="M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,250 L0,250 Z;M0,120 Q240,20 480,120 T960,120 T1440,120 L1440,250 L0,250 Z;M0,100 Q240,200 480,100 T960,100 T1440,100 L1440,250 L0,250 Z"/>
        </path>
      </svg>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 relative z-10">
      <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
        <!-- Text Content -->
        <div class="space-y-8">
          <!-- Badge -->
          <div data-animate="fade-up" class="inline-flex items-center gap-2 px-5 py-2 bg-white/10 backdrop-blur-sm rounded-full border border-white/20">
            <span class="w-2 h-2 bg-primary-400 rounded-full animate-pulse"></span>
            <span class="text-sm font-medium">ระบบน้ำคุณภาพสูง ราคาโรงงาน</span>
          </div>

          <!-- Main Heading with Text Reveal -->
          <h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold leading-[1.1] tracking-tight">
            <span data-animate="fade-up" data-animate-delay="100" class="block">ระบบน้ำ</span>
            <span data-animate="fade-up" data-animate-delay="200" class="block text-transparent bg-clip-text bg-gradient-to-r from-white to-primary-200">คุณภาพสูง</span>
            <span data-animate="fade-up" data-animate-delay="300" class="block mt-2">
              <span class="text-primary-300">ราคาโรงงาน</span>
            </span>
          </h1>

          <!-- Description -->
          <p data-animate="fade-up" data-animate-delay="400" class="text-lg lg:text-xl text-primary-100 max-w-xl leading-relaxed">
            ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำและสุขภัณฑ์คุณภาพสูง ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ อุปกรณ์ปรับอากาศ และฉนวนหุ้มท่อสำหรับโรงงานและบ้านเรือน
          </p>

          <!-- CTA Buttons -->
          <div data-animate="fade-up" data-animate-delay="500" class="flex flex-wrap gap-4">
            <a
              href="/all-products"
              class="group relative inline-flex items-center justify-center gap-3 bg-accent-500 hover:bg-accent-600 text-white py-4 px-8 rounded-xl font-semibold text-lg transition-all duration-300 hover:shadow-2xl hover:shadow-accent-500/30 hover:-translate-y-1 magnetic-btn btn-shimmer overflow-hidden"
            >
              <span class="relative z-10 flex items-center gap-2">
                ดูสินค้าทั้งหมด
                <svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </span>
            </a>
            <a
              href="/contact-us"
              class="group inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white py-4 px-8 rounded-xl font-semibold text-lg border border-white/30 transition-all duration-300 hover:-translate-y-1 magnetic-btn"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
              ติดต่อเรา
            </a>
          </div>
        </div>

        <!-- Floating Product Cards -->
        <div class="relative h-[300px] lg:h-[400px] perspective-1000">
          <!-- Card 1 - Small, back left -->
          <div class="absolute top-0 left-0 w-32 lg:w-44 rounded-2xl shadow-2xl overflow-hidden animate-float glass-strong tilt-card">
            <img src="/images/products-cropped/ppr-pipe_000C.jpg" alt="ท่อ PPR" class="w-full h-full object-cover" loading="lazy" />
          </div>

          <!-- Card 2 - Medium, back right -->
          <div class="absolute top-16 right-4 lg:right-12 w-40 lg:w-52 rounded-2xl shadow-2xl overflow-hidden animate-float-delayed-1 glass-strong tilt-card">
            <img src="/images/thermobreak/thermobreak-solarblock.png" alt="เทอร์โมเบรค" class="w-full h-full object-cover" loading="lazy" />
          </div>

          <!-- Card 3 - Large, center front -->
          <div class="absolute top-32 left-1/2 -translate-x-1/2 w-52 lg:w-72 rounded-2xl shadow-2xl overflow-hidden animate-float-delayed-2 glass-strong tilt-card z-10">
            <img src="/images/products-cropped/grilles_000C.jpg" alt="กริลแอร์" class="w-full h-full object-cover" loading="lazy" />
          </div>

          <!-- Decorative Elements -->
          <div class="absolute bottom-8 left-4 lg:left-8 w-20 h-20 rounded-full bg-primary-400/20 blur-xl animate-pulse-glow"></div>
          <div class="absolute top-8 right-8 w-16 h-16 rounded-full bg-primary-300/20 blur-xl animate-pulse-glow" style="animation-delay: 1s;"></div>
        </div>
      </div>
    </div>

    <!-- Scroll Indicator -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-primary-200">
      <span class="text-sm font-medium">เลื่อนลง</span>
      <div class="w-6 h-10 rounded-full border-2 border-primary-200/50 flex justify-center pt-2">
        <div class="w-1.5 h-3 bg-primary-200 rounded-full scroll-indicator"></div>
      </div>
    </div>
  </section>

  <!-- Featured Products Section -->
  <section class="py-16 lg:py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Section Header -->
      <div class="text-center mb-12 lg:mb-16" data-animate="fade-up">
        <span class="inline-block px-4 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">สินค้าของเรา</span>
        <h2 class="text-3xl lg:text-4xl xl:text-5xl font-bold text-neutral-900 mb-4">สินค้าแนะนำ</h2>
        <p class="text-neutral-600 max-w-2xl mx-auto text-lg">สินค้าคุณภาพสูงจากแบรนด์ชั้นนำ ที่ได้รับความไว้วางใจจากลูกค้าทั่วประเทศ</p>
      </div>

      <!-- Product Grid -->
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8" data-animate-stagger>
        <!-- Product Card 1 -->
        <a href="/ท่อ-ppr-thai-ppr" class="group bg-neutral-50 rounded-3xl overflow-hidden border border-neutral-200 hover:border-primary-300 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-600/10 hover:-translate-y-2">
          <div class="aspect-square img-hover relative overflow-hidden">
            <img
              src="/images/products-cropped/ppr-pipe_000C.jpg"
              alt="ท่อ PPR ไทยพีพีอาร์"
              class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
              loading="lazy"
            />
            <div class="absolute inset-0 bg-gradient-to-t from-primary-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="absolute bottom-4 left-4 right-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
              <span class="inline-flex items-center gap-2 text-white text-sm font-medium bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full">
                ดูรายละเอียด
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
              </span>
            </div>
          </div>
          <div class="p-6">
            <div class="flex items-center justify-between mb-2">
              <h3 class="text-xl font-bold text-primary-700 group-hover:text-primary-600 transition-colors">ท่อ PPR ไทยพีพีอาร์</h3>
              <svg class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </div>
            <p class="text-neutral-500">ท่อน้ำดื่มคุณภาพสูง ทนความร้อน ทนแรงดัน มาตรฐาน ม.อ.ก.</p>
          </div>
        </a>

        <!-- Product Card 2 -->
        <a href="/grilles" class="group bg-neutral-50 rounded-3xl overflow-hidden border border-neutral-200 hover:border-primary-300 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-600/10 hover:-translate-y-2">
          <div class="aspect-square img-hover relative overflow-hidden">
            <img
              src="/images/products-cropped/grilles_000C.jpg"
              alt="กริลแอร์"
              class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
              loading="lazy"
            />
            <div class="absolute inset-0 bg-gradient-to-t from-primary-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="absolute bottom-4 left-4 right-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
              <span class="inline-flex items-center gap-2 text-white text-sm font-medium bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full">
                ดูรายละเอียด
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
              </span>
            </div>
          </div>
          <div class="p-6">
            <div class="flex items-center justify-between mb-2">
              <h3 class="text-xl font-bold text-primary-700 group-hover:text-primary-600 transition-colors">กริลแอร์</h3>
              <svg class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </div>
            <p class="text-neutral-500">อุปกรณ์ปรับอากาศ ระบายอากาศคุณภาพสูง หลากหลายรูปแบบ</p>
          </div>
        </a>

        <!-- Product Card 3 -->
        <a href="/เทอร์โมเบรค-thermobreak" class="group bg-neutral-50 rounded-3xl overflow-hidden border border-neutral-200 hover:border-primary-300 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-600/10 hover:-translate-y-2">
          <div class="aspect-square img-hover relative overflow-hidden">
            <img
              src="/images/thermobreak/thermobreak-solarblock.png"
              alt="เทอร์โมเบรค ฉนวนหุ้มท่อ"
              class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
              loading="lazy"
            />
            <div class="absolute inset-0 bg-gradient-to-t from-primary-900/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="absolute bottom-4 left-4 right-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
              <span class="inline-flex items-center gap-2 text-white text-sm font-medium bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full">
                ดูรายละเอียด
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
              </span>
            </div>
          </div>
          <div class="p-6">
            <div class="flex items-center justify-between mb-2">
              <h3 class="text-xl font-bold text-primary-700 group-hover:text-primary-600 transition-colors">เทอร์โมเบรค</h3>
              <svg class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </div>
            <p class="text-neutral-500">ฉนวนกันความร้อน ประหยัดพลังงาน ทนทาน คุณภาพสูง</p>
          </div>
        </a>
      </div>

      <!-- View All Button -->
      <div class="text-center mt-12" data-animate="fade-up">
        <a
          href="/all-products"
          class="inline-flex items-center gap-2 bg-primary-600 hover:bg-primary-700 text-white py-4 px-8 rounded-xl font-semibold text-lg transition-all hover:shadow-lg hover:shadow-primary-600/25 hover:-translate-y-0.5 magnetic-btn btn-shimmer"
        >
          ดูสินค้าทั้งหมด
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </a>
      </div>
    </div>
  </section>

  <!-- Trust Badges with Counter Animation -->
  <section class="py-16 lg:py-20 bg-gradient-to-br from-neutral-50 to-primary-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8" data-animate-stagger>
        <!-- Badge 1 -->
        <div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
          <div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-2xl mb-4">
            <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
          </div>
          <h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
            <span data-counter="15">0</span>+
          </h3>
          <p class="text-neutral-600 font-medium">ปีประสบการณ์</p>
        </div>

        <!-- Badge 2 -->
        <div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
          <div class="inline-flex items-center justify-center w-16 h-16 bg-accent-100 rounded-2xl mb-4">
            <svg class="w-8 h-8 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
          </div>
          <h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
            <span data-counter="2500">0</span>+
          </h3>
          <p class="text-neutral-600 font-medium">ลูกค้าทั่วประเทศ</p>
        </div>

        <!-- Badge 3 -->
        <div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
          <div class="inline-flex items-center justify-center w-16 h-16 bg-primary-100 rounded-2xl mb-4">
            <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
            </svg>
          </div>
          <h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
            <span data-counter="5000">0</span>+
          </h3>
          <p class="text-neutral-600 font-medium">รายการสินค้า</p>
        </div>

        <!-- Badge 4 -->
        <div class="text-center p-6 bg-white rounded-3xl shadow-sm hover:shadow-lg transition-shadow duration-300">
          <div class="inline-flex items-center justify-center w-16 h-16 bg-accent-100 rounded-2xl mb-4">
            <svg class="w-8 h-8 text-accent-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <h3 class="text-3xl lg:text-4xl font-bold text-primary-700 mb-1">
            <span data-counter="98">0</span>%
          </h3>
          <p class="text-neutral-600 font-medium">ลูกค้าพึงพอใจ</p>
        </div>
      </div>
    </div>
  </section>

  <!-- บทความ Section -->
  <section class="py-16 lg:py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-end justify-between mb-12">
        <div>
          <span class="inline-block px-4 py-1.5 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">บทความ</span>
          <h2 class="text-3xl lg:text-4xl font-bold text-slate-900">บทความล่าสุด</h2>
          <p class="text-lg text-slate-600 mt-2">ความรู้และข้อมูลที่เป็นประโยชน์เกี่ยวกับระบบน้ำและอุปกรณ์</p>
        </div>
        <a href="/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1" class="hidden sm:inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-semibold transition-colors">
          ดูทั้งหมด
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
          </svg>
        </a>
      </div>

      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {articles.length > 0 && articles.map(article => (
          <a href={`/${encodeURI('บทความ')}/${encodeURIComponent(article.id)}`} class="group block bg-white rounded-3xl overflow-hidden border border-slate-100 hover:border-primary-200 hover:shadow-xl transition-all duration-300">
            <div class="aspect-[16/9] bg-slate-100 overflow-hidden">
              {article.data.featured_image ? (
                <img src={article.data.featured_image} alt={article.data.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
              ) : (
                <div class="w-full h-full flex items-center justify-center text-slate-300">
                  <svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                  </svg>
                </div>
              )}
            </div>
            <div class="p-6">
              <div class="flex items-center gap-3 text-sm text-slate-500 mb-3">
                {article.data.tags?.[0] && (
                  <span class="px-2.5 py-0.5 bg-primary-50 text-primary-600 rounded-full text-xs font-medium">{article.data.tags[0]}</span>
                )}
              </div>
              <h3 class="text-lg font-bold text-slate-900 group-hover:text-primary-600 transition-colors mb-2 line-clamp-2">{article.data.title}</h3>
              <p class="text-sm text-slate-600 line-clamp-2">{article.data.excerpt}</p>
            </div>
          </a>
        ))}
        {articles.length === 0 && (
          <div class="md:col-span-2 lg:col-span-3 text-center py-16">
            <div class="text-slate-300 mb-4">
              <svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
              </svg>
            </div>
            <p class="text-lg text-slate-400">ยังไม่มีบทความในขณะนี้</p>
          </div>
        )}
      </div>

      <div class="text-center mt-10 sm:hidden">
        <a href="/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1" class="inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-semibold transition-colors">
          ดูบทความทั้งหมด
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
          </svg>
        </a>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="py-16 lg:py-24 bg-gradient-to-br from-primary-700 via-primary-600 to-primary-800 text-white relative overflow-hidden">
    <!-- Background Elements -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-20 -right-20 w-[400px] h-[400px] bg-primary-400/20 rounded-full blur-3xl animate-mesh-1"></div>
      <div class="absolute -bottom-20 -left-20 w-[300px] h-[300px] bg-primary-300/20 rounded-full blur-3xl animate-mesh-2"></div>
    </div>

    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
      <h2 data-animate="fade-up" class="text-3xl lg:text-4xl xl:text-5xl font-bold mb-6">ต้องการสอบถามราคา?</h2>
      <p data-animate="fade-up" data-animate-delay="100" class="text-lg lg:text-xl text-primary-100 mb-10 max-w-2xl mx-auto">
        ติดต่อทีมงานของเราได้เลย พร้อมให้บริการให้คำปรึกษาฟรี ตอบทุกคำถามเรื่องระบบน้ำและอุปกรณ์ต่างๆ
      </p>
      <div data-animate="fade-up" data-animate-delay="200" class="flex flex-wrap justify-center gap-4">
        <a
          href="tel:090-555-1415"
          class="group inline-flex items-center justify-center gap-3 bg-white text-primary-700 py-4 px-10 rounded-xl font-semibold text-lg hover:bg-primary-50 transition-all hover:shadow-2xl hover:shadow-white/25 hover:-translate-y-1 magnetic-btn btn-shimmer"
        >
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
          </svg>
          090-555-1415
        </a>
        <a
          href="https://line.me/ti/p/~JPPSELECTION"
          target="_blank"
          rel="noopener"
          class="group inline-flex items-center justify-center gap-3 bg-accent-500 hover:bg-accent-600 text-white py-4 px-10 rounded-xl font-semibold text-lg transition-all hover:shadow-2xl hover:shadow-accent-500/30 hover:-translate-y-1 magnetic-btn btn-shimmer"
        >
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
          </svg>
          แอดไลน์
        </a>
      </div>
    </div>
  </section>
</BaseLayout>