opencode-skill/skills/thai-frontend-dev/scripts/templates/pages/index.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/common/Header.astro';
import Footer from '../components/common/Footer.astro';

const pageTitle = 'หน้าแรก';
const pageDescription = 'ผู้เชี่ยวชาญด้านระบบท่อและอุปกรณ์ติดตั้งคุณภาพสูง ราคาโรงงาน';
---

<BaseLayout title={pageTitle} description={pageDescription}>
  <Header slot="header" />
  
  <!-- Hero Section -->
  <section id="hero-section" class="relative bg-white section overflow-hidden pt-24 md:pt-32">
    <div id="hero-container" class="container-custom">
      <div id="hero-grid" class="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
        <div id="hero-content" class="animate-fade-in">
          <h1 id="hero-title" class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold text-secondary-900 mb-4 md:mb-6 leading-tight">
            ผู้เชี่ยวชาญระบบน้ำ<br/>
            <span class="text-green-600">คุณภาพสูง ราคาโรงงาน</span>
          </h1>
          <p id="hero-description" class="text-base sm:text-lg md:text-xl text-secondary-600 mb-6 md:mb-8 leading-relaxed">
            เราเป็นผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ท่อ HDPE ท่อ PVC และอุปกรณ์ติดตั้งคุณภาพสูง ราคาถูก
          </p>
          <div id="hero-buttons" class="flex flex-wrap justify-center gap-3 md:gap-4">
            <a id="hero-cta-products" href="/products" class="bg-green-600 hover:bg-green-700 text-white px-5 py-3 md:px-8 md:py-4 rounded-xl font-medium transition-all hover:shadow-lg active:scale-95 text-sm md:text-lg">
              ดูสินค้าทั้งหมด
            </a>
            <a id="hero-cta-contact" href="/contact" class="bg-white text-green-600 px-5 py-3 md:px-8 md:py-4 rounded-xl border-2 border-green-500 font-medium transition-all hover:shadow-lg active:scale-95 text-sm md:text-lg">
              ติดต่อเรา
            </a>
          </div>
          <div id="hero-stats" class="flex items-center sm:space-x-8 space-x-4 sm:mt-12 mt-8 justify-center">
            <div id="stat-experience">
              <div id="stat-experience-value" class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">10+</div>
              <div id="stat-experience-label" class="text-secondary-600 text-xs sm:text-base">ปีประสบการณ์</div>
            </div>
            <div id="stat-projects">
              <div id="stat-projects-value" class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">1000+</div>
              <div id="stat-projects-label" class="text-secondary-600 text-xs sm:text-base">โปรเจคต์</div>
            </div>
            <div id="stat-products">
              <div id="stat-products-value" class="text-xl sm:text-2xl md:text-3xl font-bold text-green-600">500+</div>
              <div id="stat-products-label" class="text-secondary-600 text-xs sm:text-base">สินค้า</div>
            </div>
          </div>
        </div>
        <div id="hero-image-container" class="relative animate-slide-up mt-6 md:mt-0">
          <div id="hero-image-wrapper" class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-accent-500/20 rounded-3xl blur-3xl"></div>
          <div id="hero-image-grid" class="grid grid-cols-3 gap-2 md:gap-4 relative">
            <div id="hero-image-main" class="col-span-2 row-span-2">
              <img id="hero-img-1" src="/images/hero-1.jpg" alt="Products" class="w-full h-full object-cover rounded-2xl shadow-xl" />
            </div>
            <div id="hero-image-2">
              <img id="hero-img-2" src="/images/hero-2.jpg" alt="Products" class="w-full h-full object-cover rounded-2xl shadow-xl" />
            </div>
            <div id="hero-image-3">
              <img id="hero-img-3" src="/images/hero-3.jpg" alt="Products" class="w-full h-full object-cover rounded-2xl shadow-xl" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- Categories Section -->
  <section id="categories-section" class="py-16 md:py-24 bg-gray-50">
    <div id="categories-container" class="container-custom">
      <div id="categories-header" class="text-center mb-12">
        <h2 id="categories-title" class="text-2xl md:text-3xl lg:text-4xl font-bold text-secondary-900 mb-4">
          หมวดสินค้า
        </h2>
        <p id="categories-subtitle" class="text-secondary-600 text-lg max-w-2xl mx-auto">
          สินค้าคุณภาพสูงสำหรับทุกการใช้งาน
        </p>
      </div>
      <div id="categories-grid" class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
        {['ท่อ PPR', 'ท่อ HDPE', 'ท่อ UPVC', 'วาล์ว', 'ข้อต่อ', 'อุปกรณ์ติดตั้ง', 'ปั๊มน้ำ', 'อุปกรณ์ดับเพลิง'].map((category, index) => (
          <a id={`category-card-${index}`} href={`/products/${category.toLowerCase().replace(' ', '-')}`} class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 text-center">
            <div id={`category-icon-${index}`} class="w-16 h-16 mx-auto mb-4 bg-primary-100 rounded-full flex items-center justify-center group-hover:bg-primary-600 transition-colors">
              <span class="text-2xl">{category[0]}</span>
            </div>
            <h3 id={`category-name-${index}`} class="font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">
              {category}
            </h3>
          </a>
        ))}
      </div>
    </div>
  </section>
  
  <!-- Featured Products Section -->
  <section id="featured-products-section" class="py-16 md:py-24 bg-white">
    <div id="featured-products-container" class="container-custom">
      <div id="featured-products-header" class="text-center mb-12">
        <h2 id="featured-products-title" class="text-2xl md:text-3xl lg:text-4xl font-bold text-secondary-900 mb-4">
          สินค้าแนะนำ
        </h2>
        <p id="featured-products-subtitle" class="text-secondary-600 text-lg max-w-2xl mx-auto">
          สินค้ายอดนิยมจากลูกค้า
        </p>
      </div>
      <div id="featured-products-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
        {[
          { name: 'ท่อ PPR ตราช้าง', description: 'ท่อ PPR คุณภาพสูง มาตรฐาน', image: '/images/products/ppr.jpg' },
          { name: 'วาล์วน้ำดับเพลิง', description: 'วาล์วคุณภาพสูง ทนทาน', image: '/images/products/valve.jpg' },
          { name: 'ข้อต่อ HDPE', description: 'ข้อต่อสำหรับท่อ HDPE', image: '/images/products/fitting.jpg' },
        ].map((product, index) => (
          <div id={`featured-product-card-${index}`} class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden">
            <div id={`featured-product-image-${index}`} class="aspect-video overflow-hidden">
              <img id={`featured-product-img-${index}`} src={product.image} alt={product.name} class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" />
            </div>
            <div id={`featured-product-content-${index}`} class="p-6">
              <h3 id={`featured-product-title-${index}`} class="font-bold text-lg text-secondary-900 mb-2">
                {product.name}
              </h3>
              <p id={`featured-product-desc-${index}`} class="text-secondary-600 mb-4">
                {product.description}
              </p>
              <a id={`featured-product-link-${index}`} href={`/products/${product.name.toLowerCase().replace(' ', '-')}`} class="text-primary-600 font-medium hover:text-primary-700 transition-colors">
                ดูรายละเอียด →
              </a>
            </div>
          </div>
        ))}
      </div>
      <div id="featured-products-cta" class="text-center mt-12">
        <a id="featured-products-all" href="/products" class="btn-primary px-8 py-3 text-lg rounded-xl">
          ดูสินค้าทั้งหมด
        </a>
      </div>
    </div>
  </section>
  
  <!-- Why Choose Us Section -->
  <section id="why-choose-us-section" class="py-16 md:py-24 bg-primary-50">
    <div id="why-choose-us-container" class="container-custom">
      <div id="why-choose-us-header" class="text-center mb-12">
        <h2 id="why-choose-us-title" class="text-2xl md:text-3xl lg:text-4xl font-bold text-secondary-900 mb-4">
          ทำไมต้องเลือกเรา
        </h2>
        <p id="why-choose-us-subtitle" class="text-secondary-600 text-lg max-w-2xl mx-auto">
          เรามีความมุ่งมั่นในการให้บริการที่ดีที่สุด
        </p>
      </div>
      <div id="why-choose-us-grid" class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
        {[
          { icon: '🏭', title: 'โรงงานผู้ผลิต', description: 'สินค้าจากโรงงานโดยตรง ราคาถูก' },
          { icon: '✅', title: 'มาตรฐาน', description: 'ผ่านการรับรอง มอก.' },
          { icon: '🚚', title: 'จัดส่งรวดเร็ว', description: 'ส่งทั่วประเทศไทย' },
        ].map((feature, index) => (
          <div id={`why-choose-us-card-${index}`} class="bg-white rounded-xl shadow-md p-8 text-center">
            <div id={`why-choose-us-icon-${index}`} class="text-4xl mb-4">{feature.icon}</div>
            <h3 id={`why-choose-us-feature-title-${index}`} class="font-bold text-xl text-secondary-900 mb-2">{feature.title}</h3>
            <p id={`why-choose-us-feature-desc-${index}`} class="text-secondary-600">{feature.description}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
  
  <!-- CTA Section -->
  <section id="cta-section" class="py-16 md:py-24 bg-green-600">
    <div id="cta-container" class="container-custom text-center">
      <h2 id="cta-title" class="text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-4">
        ต้องการคำปรึกษาฟรี?
      </h2>
      <p id="cta-description" class="text-white/80 text-lg mb-8 max-w-2xl mx-auto">
        ทีมงานของเราพร้อมให้คำปรึกษาฟรี ไม่มีค่าใช้จ่าย
      </p>
      <div id="cta-buttons" class="flex flex-wrap justify-center gap-4">
        <a id="cta-contact-btn" href="/contact" class="bg-white text-green-600 px-8 py-3 rounded-xl font-bold hover:bg-gray-100 transition-colors">
          ติดต่อเราวันนี้
        </a>
        <a id="cta-line-btn" href="https://line.me" target="_blank" class="bg-green-500 text-white px-8 py-3 rounded-xl font-bold hover:bg-green-400 transition-colors">
          ติดต่อผ่าน LINE
        </a>
      </div>
    </div>
  </section>
  
  <Footer slot="footer" />
</BaseLayout>