---
import BaseLayout from '@/layouts/BaseLayout.astro';
---

<BaseLayout title="เกี่ยวกับเรา - ดีล พลัส เทค" description="ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำคุณภาพสูง ราคาโรงงาน มีประสบการณ์กว่า 10 ปี">
  <!-- Hero -->
  <section class="bg-gradient-to-br from-primary-700 to-primary-600 text-white py-16 lg:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="max-w-3xl">
        <h1 class="text-4xl lg:text-5xl font-bold mb-6">เกี่ยวกับเรา</h1>
        <p class="text-lg text-primary-100">
          ดีล พลัส เทค จำกัด ผู้นำด้านระบบน้ำและสุขภัณฑ์คุณภาพสูง ท่อ PPR ท่อ HDPE อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ อุปกรณ์ปรับอากาศ และฉนวนหุ้มท่อสำหรับโรงงานและบ้านเรือน
        </p>
      </div>
    </div>
  </section>

  <!-- Company Info -->
  <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="grid lg:grid-cols-2 gap-12 items-center">
        <div>
          <h2 class="text-3xl font-bold text-primary-700 mb-6">บริษัท ดีล พลัส เทค จำกัด</h2>
          <div class="space-y-4 text-neutral-600">
            <p>
              ดีล พลัส เทค จำกัด เป็นผู้นำด้านระบบน้ำและสุขภัณฑ์คุณภาพสูง ด้วยประสบการณ์กว่า 10 ปีในอุตสาหกรรม ทำให้เราเข้าใจความต้องการของลูกค้าเป็นอย่างดี
            </p>
            <p>
              เราเป็นตัวแทนจำหน่ายและจัดจำหน่ายสินค้าระบบน้ำคุณภาพสูงจากแบรนด์ชั้นนำทั่วโลก อาทิ ท่อ PPR ไทยพีพีอาร์ ท่อ PPR ตราช้าง ท่อ HDPE ท่อ UPVC อุปกรณ์วาล์ว ปั๊มน้ำ เครื่องเชื่อมท่อ และอุปกรณ์ปรับอากาศ
            </p>
            <p>
              สินค้าของเราได้รับมาตรฐาน มอก. และได้รับความไว้วางใจจากโครงการทั่วประเทศ ทั้งโรงงานอุตสาหกรรม อาคารพาณิชย์ โรงแรม โรงพยาบาล และบ้านเรือน
            </p>
          </div>
        </div>
        <div class="bg-neutral-50 rounded-2xl p-8 border border-neutral-200">
          <h3 class="text-xl font-semibold text-primary-700 mb-6">สินค้าหลัก</h3>
          <div class="grid grid-cols-2 gap-4">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-primary-600" 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>
              </div>
              <span class="text-neutral-700">ท่อ PPR</span>
            </div>
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-primary-600" 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>
              </div>
              <span class="text-neutral-700">ท่อ HDPE</span>
            </div>
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-primary-600" 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>
              </div>
              <span class="text-neutral-700">เครื่องเชื่อมท่อ</span>
            </div>
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-primary-600" 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>
              </div>
              <span class="text-neutral-700">วาล์ว</span>
            </div>
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-primary-600" 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>
              </div>
              <span class="text-neutral-700">ปั๊มน้ำ</span>
            </div>
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-primary-600" 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>
              </div>
              <span class="text-neutral-700">ฉนวนท่อ</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Stats -->
  <section class="py-16 bg-neutral-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-3 gap-6 lg:gap-8">
        <div class="text-center p-8 bg-white rounded-2xl border border-neutral-200">
          <div class="text-4xl lg:text-5xl font-bold text-primary-600 mb-2">10+</div>
          <div class="text-neutral-600">ปีประสบการณ์</div>
        </div>
        <div class="text-center p-8 bg-white rounded-2xl border border-neutral-200">
          <div class="text-4xl lg:text-5xl font-bold text-primary-600 mb-2">1000+</div>
          <div class="text-neutral-600">โปรเจคสำเร็จ</div>
        </div>
        <div class="text-center p-8 bg-white rounded-2xl border border-neutral-200">
          <div class="text-4xl lg:text-5xl font-bold text-primary-600 mb-2">500+</div>
          <div class="text-neutral-600">สินค้าในคลัง</div>
        </div>
      </div>
    </div>
  </section>

  <!-- Why Choose Us -->
  <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="text-center mb-12">
        <h2 class="text-3xl font-bold text-primary-700 mb-4">ทำไมต้องเลือกเรา</h2>
      </div>
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="text-center p-6">
          <div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
            <svg class="w-8 h-8 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-primary-700 mb-2">คุณภาพสูง</h3>
          <p class="text-sm text-neutral-600">สินค้าผ่านมาตรฐาน มอก. รับประกันคุณภาพ</p>
        </div>
        <div class="text-center p-6">
          <div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
            <svg class="w-8 h-8 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-primary-700 mb-2">ราคาโรงงาน</h3>
          <p class="text-sm text-neutral-600">ราคาพิเศษ ราคาโรงงาน ไม่มีมาร์จิ้นกลาง</p>
        </div>
        <div class="text-center p-6">
          <div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
            <svg class="w-8 h-8 text-accent-500" 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-lg font-semibold text-primary-700 mb-2">จัดส่งรวดเร็ว</h3>
          <p class="text-sm text-neutral-600">สินค้าพร้อมส่ง จัดส่งภายใน 1-3 วัน</p>
        </div>
        <div class="text-center p-6">
          <div class="w-16 h-16 mx-auto mb-4 bg-accent-100 rounded-2xl flex items-center justify-center">
            <svg class="w-8 h-8 text-accent-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-primary-700 mb-2">บริการดี</h3>
          <p class="text-sm text-neutral-600">ให้คำปรึกษาฟรี ตอบคำถามทุกคำถาม</p>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="py-16 bg-gradient-to-br from-primary-700 to-primary-600 text-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <h2 class="text-3xl font-bold mb-6">ต้องการสินค้าคุณภาพ ราคาโรงงาน?</h2>
      <p class="text-lg text-primary-100 mb-8">ติดต่อเราวันนี้ 090-555-1415 หรือแอดไลน์ @JPPSELECTION</p>
      <div class="flex flex-wrap justify-center gap-4">
        <a href="/contact-us" class="bg-white text-primary-700 py-3 px-8 rounded-xl font-semibold hover:bg-primary-50 transition-colors">ติดต่อเรา</a>
        <a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" rel="noopener" class="bg-accent-500 hover:bg-accent-600 text-white py-3 px-8 rounded-xl font-semibold transition-colors">แอดไลน์</a>
      </div>
    </div>
  </section>
</BaseLayout>