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

<BaseLayout title="รั้วเทวดา" description="รั้วเทวดา แข็งแรง ทนทาน เหนียวกว่า ลวดแรงดึงสูง หนา 2.5 มม. สามารถทนแรงกระแทกได้สูง ทนสนิม ลวดชุบสังกะสีหนาพิเศษ ด้วยกระบวนการแบบจุ่มร้อน ตามมาตรฐานออสเตรเลีย">
  <Header slot="header" />

  <main class="bg-white min-h-screen">
    <!-- Hero Section -->
    <section class="hero-gradient py-16">
      <div class="container-custom">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
          <div class="order-2 lg:order-1">
            <div class="card-glass p-2">
              <img 
                src="/images/products-raw/tevada/TEVADA_001-987x1024.png" 
                alt="รั้วเทวดา" 
                class="w-full h-auto rounded-xl"
                width="600" height="622" loading="eager" fetchpriority="high" decoding="sync"
              />
            </div>
          </div>
          
          <div class="order-1 lg:order-2">
            <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
              รั้วเทวดา
            </span>
            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">รั้วเทวดา</h1>
            <p class="text-lg sm:text-xl text-white/80 mb-8 leading-relaxed">
              รั้วเทวดา แข็งแรง ทนทาน เหนียวกว่า ลวดแรงดึงสูง หนา 2.5 มม. สามารถทนแรงกระแทกได้สูง ทนสนิม ลวดชุบสังกะสีหนาพิเศษ ด้วยกระบวนการแบบจุ่มร้อน ตามมาตรฐานออสเตรเลีย
            </p>
            
            <div class="flex flex-wrap gap-4 mb-8">
              <a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white flex items-center gap-2">
                <span>แชท Line</span>
              </a>
              <a href="tel:0905551415" class="btn-white flex items-center gap-2">
                <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 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>
                <span>090-555-1415</span>
              </a>
            </div>
            
            <div class="flex flex-wrap gap-6">
              <div class="flex items-center gap-2 text-white/80">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>ลวดหนา 2.5 มม.</span>
              </div>
              <div class="flex items-center gap-2 text-white/80">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>ชุบสังกะสีจุ่มร้อน</span>
              </div>
              <div class="flex items-center gap-2 text-white/80">
                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                <span>มาตรฐานออสเตรเลีย</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ทำไมต้องรั้วตาข่ายเทวดา -->
    <section class="section bg-white">
      <div class="container-custom">
        <h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">ทำไมต้องรั้วตาข่ายเทวดา</h2>
        <div class="grid lg:grid-cols-2 gap-8 items-center">
          <div>
            <img 
              src="/images/products-raw/tevada/TEVADA_002-1024x278.png" 
              alt="ทำไมต้องรั้วเทวดา" 
              class="w-full h-auto rounded-xl"
            />
          </div>
          <div class="space-y-4">
            <div class="flex items-start space-x-3">
              <svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
              <span class="text-secondary-700">ลวดแรงดึงสูง หนา 2.5 มม. เหนียวกว่ารั้วทั่วไป</span>
            </div>
            <div class="flex items-start space-x-3">
              <svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
              <span class="text-secondary-700">ลวดชุบสังกะสีหนาพิเศษ ด้วยกระบวนการแบบจุ่มร้อน</span>
            </div>
            <div class="flex items-start space-x-3">
              <svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
              <span class="text-secondary-700">ทนสนิมได้ดีเยี่ยม ตามมาตรฐานออสเตรเลีย</span>
            </div>
            <div class="flex items-start space-x-3">
              <svg class="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
              <span class="text-secondary-700">สามารถทนแรงกระแทกได้สูง</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- เปรียบเทียบ -->
    <section class="section bg-gray-50">
      <div class="container-custom">
        <h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">เปรียบเทียบความแตกต่าง</h2>
        <img 
          src="/images/products-raw/tevada/TEVADA_003-1024x647.png" 
          alt="เปรียบเทียบรั้วเทวดา" 
          class="w-full h-auto rounded-xl max-w-4xl mx-auto"
        />
      </div>
    </section>

    <!-- รุ่นสินค้า -->
    <section class="section bg-white">
      <div class="container-custom">
        <h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">รุ่นสินค้า</h2>
        
        <!-- รุ่น 8-90-15 -->
        <div class="mb-12 p-6 bg-gray-50 rounded-xl">
          <h3 class="text-xl font-bold text-secondary-900 mb-4">รุ่น 8-90-15</h3>
          <div class="grid md:grid-cols-2 gap-6 items-center">
            <img 
              src="/images/products-raw/tevada/TEVADA_004.png" 
              alt="รุ่น 8-90-15" 
              class="w-full h-auto rounded-lg"
            />
            <div class="space-y-2 text-secondary-700">
              <p><strong>ความสูง:</strong> 90 ซม.</p>
              <p><strong>ระยะห่างเสา:</strong> 3 ม.</p>
              <p><strong>ขนาดลวด:</strong> 8 มม.</p>
            </div>
          </div>
        </div>

        <!-- รุ่น 10-120-15 -->
        <div class="mb-12 p-6 bg-gray-50 rounded-xl">
          <h3 class="text-xl font-bold text-secondary-900 mb-4">รุ่น 10-120-15</h3>
          <div class="grid md:grid-cols-2 gap-6 items-center">
            <img 
              src="/images/products-raw/tevada/TEVADA_005.png" 
              alt="รุ่น 10-120-15" 
              class="w-full h-auto rounded-lg"
            />
            <div class="space-y-2 text-secondary-700">
              <p><strong>ความสูง:</strong> 120 ซม.</p>
              <p><strong>ระยะห่างเสา:</strong> 3 ม.</p>
              <p><strong>ขนาดลวด:</strong> 10 มม.</p>
            </div>
          </div>
        </div>

        <!-- รุ่น 12-165-15 -->
        <div class="mb-12 p-6 bg-gray-50 rounded-xl">
          <h3 class="text-xl font-bold text-secondary-900 mb-4">รุ่น 12-165-15</h3>
          <div class="grid md:grid-cols-2 gap-6 items-center">
            <img 
              src="/images/products-raw/tevada/TEVADA_006-766x1024.png" 
              alt="รุ่น 12-165-15" 
              class="w-full h-auto rounded-lg"
            />
            <div class="space-y-2 text-secondary-700">
              <p><strong>ความสูง:</strong> 165 ซม.</p>
              <p><strong>ระยะห่างเสา:</strong> 3 ม.</p>
              <p><strong>ขนาดลวด:</strong> 12 มม.</p>
            </div>
          </div>
        </div>

        <!-- รุ่น 12-120-10 -->
        <div class="mb-12 p-6 bg-gray-50 rounded-xl">
          <h3 class="text-xl font-bold text-secondary-900 mb-4">รุ่น 12-120-10</h3>
          <div class="grid md:grid-cols-2 gap-6 items-center">
            <img 
              src="/images/products-raw/tevada/TEVADA_007.png" 
              alt="รุ่น 12-120-10" 
              class="w-full h-auto rounded-lg"
            />
            <div class="space-y-2 text-secondary-700">
              <p><strong>ความสูง:</strong> 120 ซม.</p>
              <p><strong>ระยะห่างเสา:</strong> 2.5 ม.</p>
              <p><strong>ขนาดลวด:</strong> 12 มม.</p>
            </div>
          </div>
        </div>

        <!-- รุ่น 13-150-10 -->
        <div class="mb-12 p-6 bg-gray-50 rounded-xl">
          <h3 class="text-xl font-bold text-secondary-900 mb-4">รุ่น 13-150-10</h3>
          <div class="grid md:grid-cols-3 gap-4">
            <img 
              src="/images/products-raw/tevada/TEVADA_008.png" 
              alt="รุ่น 13-150-10 ด้านหน้า" 
              class="w-full h-auto rounded-lg"
            />
            <img 
              src="/images/products-raw/tevada/TEVADA_009-658x1024.png" 
              alt="รุ่น 13-150-10 ด้านข้าง" 
              class="w-full h-auto rounded-lg"
            />
            <div class="space-y-2 text-secondary-700 flex flex-col justify-center">
              <p><strong>ความสูง:</strong> 150 ซม.</p>
              <p><strong>ระยะห่างเสา:</strong> 2.5 ม.</p>
              <p><strong>ขนาดลวด:</strong> 13 มม.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- เสารั้ว Y-Post -->
    <section class="section bg-gray-50">
      <div class="container-custom">
        <h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">เสารั้ว Y-Post</h2>
        <div class="grid lg:grid-cols-2 gap-8 items-center">
          <img 
            src="/images/products-raw/tevada/TEVADA_010-1024x113.png" 
            alt="เสารั้ว Y-Post" 
            class="w-full h-auto rounded-xl"
          />
          <img 
            src="/images/products-raw/tevada/TEVADA_011-990x1024.png" 
            alt="เสารั้ว Y-Post" 
            class="w-full h-auto rounded-xl"
          />
        </div>
      </div>
    </section>

    <!-- วิธีติดตั้ง -->
    <section class="section bg-white">
      <div class="container-custom">
        <h2 class="text-2xl md:text-xl font-bold text-secondary-900 mb-8 text-center">วิธีติดตั้ง</h2>
        
        <div class="grid md:grid-cols-4 gap-6">
          <!-- ตั้ง -->
          <div class="text-center">
            <img 
              src="/images/products-raw/tevada/TEVADA_012.png" 
              alt="ตั้งเสา" 
              class="w-full h-auto rounded-xl mb-4"
            />
            <h3 class="text-lg font-bold text-secondary-900 mb-2">1. ตั้ง</h3>
            <p class="text-secondary-600 text-sm">ปักเสา Y-Post ลงดิน</p>
          </div>

          <!-- ผูก -->
          <div class="text-center">
            <img 
              src="/images/products-raw/tevada/TEVADA_013.png" 
              alt="ผูกลวด" 
              class="w-full h-auto rounded-xl mb-4"
            />
            <h3 class="text-lg font-bold text-secondary-900 mb-2">2. ผูก</h3>
            <p class="text-secondary-600 text-sm">ผูกลวดรั้วเข้ากับเสา</p>
          </div>

          <!-- ดึง -->
          <div class="text-center">
            <img 
              src="/images/products-raw/tevada/TEVADA_014.png" 
              alt="ดึงลวด" 
              class="w-full h-auto rounded-xl mb-4"
            />
            <h3 class="text-lg font-bold text-secondary-900 mb-2">3. ดึง</h3>
            <p class="text-secondary-600 text-sm">ดึงลวดให้ตึง</p>
          </div>

          <!-- มัด -->
          <div class="text-center">
            <img 
              src="/images/products-raw/tevada/TEVADA_015.png" 
              alt="มัดลวด" 
              class="w-full h-auto rounded-xl mb-4"
            />
            <h3 class="text-lg font-bold text-secondary-900 mb-2">4. มัด</h3>
            <p class="text-secondary-600 text-sm">มัดลวดรั้วให้แน่น</p>
          </div>
        </div>

        <div class="mt-8 text-center">
          <img 
            src="/images/products-raw/tevada/TEVADA_016-1024x819.png" 
            alt="ตัวอย่างการติดตั้ง" 
            class="w-full max-w-2xl mx-auto h-auto rounded-xl"
          />
        </div>
      </div>
    </section>

    <!-- Contact CTA -->
    <section class="cta-gradient py-16">
      <div class="container-custom text-center">
        <h2 class="text-xl sm:text-2xl font-bold text-white mb-6">สนใจสินค้าของเรา?</h2>
        <p class="text-lg text-white/80 mb-8 max-w-2xl mx-auto">
          ติดต่อเราวันนี้เพื่อรับคำแนะนำและราคาพิเศษ
        </p>
        <div class="flex flex-wrap justify-center gap-4">
          <a href="https://line.me/ti/p/~dealplustech" target="_blank" class="btn-white">
            Line: @dealplustech
          </a>
          <a href="tel:0905551415" class="btn-white">
            โทร 090-555-1415
          </a>
        </div>
        <p class="text-base text-white/70 mt-8">
          <strong>โทร:</strong> 090-555-1415 &nbsp;|&nbsp; <strong>Line Id:</strong> dealplustech &nbsp;|&nbsp; <strong>E-mail:</strong> dealplustech@gmail.com
        </p>
      </div>
    </section>
  </main>

  <Footer slot="footer" />
</BaseLayout>