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

const projects = [
  { name: 'Cyber World', slug: '/cyber-world', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/IMG_3089.jpg' },
  { name: 'Toyox', slug: '/toyox', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/IMG_2226-768x1024.jpg' },
  { name: 'โรงงานเอธานอล', slug: '/โรงงานเอธานอล', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/ลพบุรี5.jpg' },
  { name: 'บจก.หยั่น หว่อ หยุ่น', slug: '/บจกหยั่นหว่อหยุ่น', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/สมุทรสาคร2.jpg' },
  { name: 'ซีคอนบางแค', slug: '/ซีคอนบางแค', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/บางแค1.jpg' },
  { name: 'ซีพีแรม ลาดกระบัง', slug: '/ซีพีแรมลาดกระบัง', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/ลาดกระบัง1.jpg' },
  { name: 'ซีพีแรม (บ่อเงิน)', slug: '/ซีพีแรมบ่อเงิน', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/บ่อเงิน3.jpg' },
  { name: 'บริษัท บีกริม', slug: '/บริษัทบีกริม', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/บีกริม-จำกัด-e1503304339753.jpg' },
  { name: 'เอฟแอนด์เอฟ ฟูด', slug: '/เอฟแอนด์เอฟฟูด', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/เอฟแอนดืเอฟ2-horz.jpg' },
  { name: 'Eminent Air Factory', slug: '/eminent-air-factory', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/บางพลี1-horz.jpg' },
  { name: 'ไทยน้ำทิพย์', slug: '/ไทยน้ำทิพย์', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/ไทยน้ำทิพย์1-horz.jpg' },
  { name: 'Essilor Factory', slug: '/essilor-factory', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/Essilor1-horz.jpg' },
  { name: 'โครงการประชารัฐ', slug: '/โครงการประชารัฐ', image: 'https://www.dealplustech.co.th/wp-content/uploads/2021/02/ประชารัฐ1-e1503323597848.jpg' },
];
---

<BaseLayout title="ผลงาน | Portfolio" description="ผลงานของบริษัท ดีล พลัส เทค จำกัด ติดตั้งท่อ PPR ท่อ HDPE ระบบประปา">
  <Header slot="header" />
  
  <main class="bg-white min-h-screen">
    <!-- Hero Section -->
    <section class="hero-gradient py-16">
      <div class="container-custom">
        <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 max-w-2xl">ส่งฟรี กรุงเทพมหานคร ปริมณฑล สามารถสอบถามได้ที่ช่อง Chat หรือโทรหา ปรึกษา Dealplustech ได้ตลอดเวลาทำการ</p>
      </div>
    </section>
    
    <section id="portfolio-content" class="section">
      <div class="container-custom">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {projects.map(project => (
            <div class="card-glass overflow-hidden group">
              <div class="relative aspect-[4/3] overflow-hidden bg-secondary-100">
                <img 
                  src={project.image} 
                  alt={project.name} 
                  class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
                  loading="lazy" decoding="async"
                  onerror="this.src='/images/logo/dealplustech-logo.png'"
                />
              </div>
              <div class="p-6">
                <h3 class="text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">{project.name}</h3>
              </div>
            </div>
          ))}
        </div>
        
        <!-- CTA Section -->
        <section class="cta-gradient py-16 mt-16 rounded-xl">
          <div class="text-center">
            <h2 class="text-2xl sm:text-3xl 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="tel:0905551415" class="btn-white">
                โทร 090-555-1415
              </a>
              <a href="/contact-us" class="btn-white">
                ติดต่อเรา
              </a>
            </div>
          </div>
        </section>
      </div>
    </section>
  </main>
  
  <Footer slot="footer" />
</BaseLayout>
