---
import Layout from '../layouts/Layout.astro';

const portfolioItems = [
  {
    name: "Lungfinler",
    url: "https://lungfinler.com",
    category: "webdev",
    thumbnail: "/images/portfolio/lungfinler.png",
    description: "Digital Agency - บริการด้านการสร้างแบรนด์ กราฟิกดีไซน์ และถ่ายภาพสินค้าคุณภาพสูง",
    services: ["Website", "Branding", "Graphic Design", "Product Photography"]
  },
  {
    name: "Jet Industries",
    url: "https://jetindustries.co.th",
    category: "webdev",
    thumbnail: "/images/portfolio/jetindustries.png",
    description: "ผู้ผลิตพลาสติกฉีดขึ้นรูปอย่างแม่นยำ (Precision Plastic Injection Molding) มีประสบการณ์กว่า 40 ปี",
    services: ["Website", "Industrial Manufacturing"]
  },
  {
    name: "สำนักงานกฎหมาย ตถาตา",
    url: "https://lawyernoom.com",
    category: "webdev",
    thumbnail: "/images/portfolio/lawyernoom.png",
    description: "สำนักงานกฎหมายโดย ทนายความ คมสัน ศรีวนิชย์ - ให้บริการด้านคดีความ คดีแพ่ง คดีอาญา คดียาเสพติด กฎหมายภาษีอากร และการประกันตัว",
    services: ["Website", "Legal Services", "Criminal Law", "Tax Law"]
  },
  {
    name: "Underdog Marketing",
    url: "https://underdog.run",
    category: "webdev",
    thumbnail: "/images/portfolio/underdog.png",
    description: "บล็อกการตลาดและการขายสไตล์ \"ลุยไม่ยั้ง\" โดย บุ้ง ดีดติ่งหู - ที่ปรึกษาการตลาดและการขาย มีบทความ VDO Clip และหลักสูตรอบรม",
    services: ["Website", "Content Marketing", "Training Courses"]
  },
  {
    name: "Baofuling Shop",
    url: "https://baofulingshop.com",
    category: "ecommerce",
    thumbnail: "/images/portfolio/baofuling.png",
    description: "ร้านค้าออนไลน์ครีมบัวหิมะและผลิตภัณฑ์ความงามจีน - ครีมบัวหิมะ กอเอี๊ยะ น้ำมันชะมด ครีมไข่มุก และผลิตภัณฑ์ดูแลผิวพรรณ",
    services: ["E-commerce", "Beauty Products", "Skincare"]
  },
  {
    name: "เทรนเนอร์ซันนี่",
    url: "https://trainersunny.com",
    category: "webdev",
    thumbnail: "/images/portfolio/trainersunny.png",
    description: "ผู้เชี่ยวชาญด้านการพัฒนาบุคลากรและ Soft Skill - หลักสูตรฝึกอบรม การสื่อสาร ภาวะผู้นำ การทำงานเป็นทีม และการพัฒนาตนเอง",
    services: ["Website", "Corporate Training", "Soft Skill Development"]
  },
  {
    name: "เลือดจระเข้วานิไทย",
    url: "https://เลือดจระเข้วานิไทย.com",
    category: "ecommerce",
    thumbnail: "/images/portfolio/luadjob.png",
    description: "ตัวแทนจำหน่ายเลือดจระเข้วานิไทยอย่างเป็นทางการ - ผลิตภัณฑ์เสริมอาหารเลือดจระเข้แคปซูล จากงานวิจัย ม.เกษตรศาสตร์ บำรุงเลือด ลดน้ำตาลในเลือด",
    services: ["E-commerce", "Health Supplements", "Crocodile Blood"]
  },
  {
    name: "ทวนทอง 99",
    url: "https://tuanthong99.com",
    category: "ecommerce",
    thumbnail: "/images/portfolio/tuanthong.png",
    description: "ร้านค้าออนไลน์สมุนไพรไทยคุณภาพสูง - ยาสตรี ยาขับลม ยาริดสีดวงทวาร ขมิ้นชัน กระชายขาว และผลิตภัณฑ์สุขภาพอื่นๆ",
    services: ["E-commerce", "Thai Herbal Medicine", "Health Products"]
  },
  {
    name: "Odoo Portal",
    url: "https://odooportal.com",
    category: "marketing",
    thumbnail: "/images/portfolio/odooportal.png",
    description: "ตัวแทนจำหน่าย Odoo อย่างเป็นทางการในประเทศไทย - บริการติดตั้งและดูแลระบบ Odoo ERP สำหรับธุรกิจ",
    services: ["Odoo ERP", "System Implementation", "Technical Support"]
  }
];

const categories = [
  { id: 'all', name: 'ทั้งหมด', count: portfolioItems.length },
  { id: 'webdev', name: 'พัฒนาเว็บไซต์', count: portfolioItems.filter(p => p.category === 'webdev').length },
  { id: 'ecommerce', name: 'อีคอมเมิร์ซ', count: portfolioItems.filter(p => p.category === 'ecommerce').length },
  { id: 'marketing', name: 'ที่ปรึกษาการตลาด', count: portfolioItems.filter(p => p.category === 'marketing').length }
];
---

<Layout title="ผลงานของเรา | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">

  <!-- Hero Section -->
  <section id="hero" class="relative overflow-hidden min-h-[50vh] flex items-center">
    <div class="absolute inset-0 bg-gradient-to-br from-teal-600 via-teal-500 to-teal-700"></div>
    <div class="absolute inset-0">
      <div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float"></div>
      <div class="absolute bottom-20 right-10 w-96 h-96 bg-teal-300/20 rounded-full blur-3xl animate-float-delay-1"></div>
      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float-delay-2"></div>
    </div>
    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>

    <div class="container mx-auto px-4 relative z-10 py-20">
      <div class="max-w-4xl mx-auto text-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
          ผลงานของเรา
        </h1>
        <p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
          ผลงานพัฒนาเว็บไซต์และลูกค้าที่ไว้วางใจเรา
        </p>
      </div>
    </div>
  </section>

  <!-- Portfolio Grid Section -->
  <section id="portfolio" class="py-20 bg-gray-50">
    <div class="container mx-auto px-4">

      <!-- Category Filter -->
      <div class="flex flex-wrap justify-center gap-3 mb-12">
        {categories.map((cat) => (
          <button
            class="filter-btn px-6 py-3 rounded-full font-medium transition-all duration-300"
            data-category={cat.id}
          >
            {cat.name} ({cat.count})
          </button>
        ))}
      </div>

      <!-- Portfolio Grid -->
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto" id="portfolio-grid">
        {portfolioItems.map((item, index) => (
          <article
            class="portfolio-card group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-500"
            data-category={item.category}
            style={`animation-delay: ${index * 0.1}s`}
          >
            <div class="relative h-48 bg-gradient-to-br from-gray-100 to-gray-200 overflow-hidden">
              <img
                src={item.thumbnail}
                alt={item.name}
                class="w-full h-full object-cover"
              />
              <div class="absolute inset-0 bg-teal-600/90 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                <a
                  href={item.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  class="bg-white text-teal-700 px-6 py-3 rounded-full font-bold transform scale-90 group-hover:scale-100 transition-transform duration-300"
                >
                  เยี่ยมชมเว็บไซต์ →
                </a>
              </div>
              <span class="absolute top-4 left-4 bg-white/90 backdrop-blur-sm text-gray-800 px-3 py-1 rounded-full text-sm font-semibold">
                {item.category === 'webdev' ? 'พัฒนาเว็บ' : item.category === 'ecommerce' ? 'อีคอมเมิร์ซ' : 'ที่ปรึกษาการตลาด'}
              </span>
            </div>

            <div class="p-6">
              <h3 class="text-xl font-bold text-gray-800 mb-2 group-hover:text-teal-600 transition-colors">
                {item.name}
              </h3>
              <p class="text-gray-700 text-sm mb-4 line-clamp-2">
                {item.description}
              </p>

              <div class="flex flex-wrap gap-2">
                {item.services.map((service) => (
                  <span class="bg-teal-50 text-teal-700 px-2 py-1 rounded-md text-xs font-medium">
                    {service}
                  </span>
                ))}
              </div>

              <a
                href={item.url}
                target="_blank"
                rel="noopener noreferrer"
                class="mt-4 inline-flex items-center text-teal-600 font-medium hover:text-teal-800 transition-colors"
              >
                เยี่ยมชมเว็บไซต์
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                </svg>
              </a>
            </div>
          </article>
        ))}
      </div>

      <!-- Empty State -->
      <div id="empty-state" class="hidden text-center py-16">
        <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
        <h3 class="text-xl font-bold text-gray-800 mb-2">ไม่พบผลงานในหมวดหมู่นี้</h3>
        <p class="text-gray-600">ลองเลือกหมวดหมู่อื่นๆ ดูนะครับ</p>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section id="cta" class="py-20 bg-gradient-to-br from-teal-600 to-teal-700">
    <div class="container mx-auto px-4">
      <div class="max-w-3xl mx-auto text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">
          อยากได้เว็บไซต์แบบนี้บ้าง?
        </h2>
        <p class="text-lg text-white/80 mb-8">
          ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบเว็บไซต์ที่เหมาะกับธุรกิจของคุณ
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <a href="/contact-us" class="bg-white text-gray-900 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors inline-flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10-10z"/>
            </svg>
            ปรึกษาฟรี
          </a>
          <a href="tel:0809955945" class="bg-teal-500 text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-teal-400 transition-colors inline-flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" 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>
            080-995-5945
          </a>
        </div>
      </div>
    </div>
  </section>
</Layout>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const filterBtns = document.querySelectorAll('.filter-btn');
    const portfolioCards = document.querySelectorAll('.portfolio-card');
    const emptyState = document.getElementById('empty-state');
    const grid = document.getElementById('portfolio-grid');

    filterBtns[0]?.classList.add('active');

    filterBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const category = btn.getAttribute('data-category');

        filterBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        let visibleCount = 0;
        portfolioCards.forEach(card => {
          const cardCategory = card.getAttribute('data-category');
          if (category === 'all' || cardCategory === category) {
            (card as HTMLElement).style.display = 'block';
            (card as HTMLElement).style.animation = 'fadeInUp 0.5s ease forwards';
            visibleCount++;
          } else {
            (card as HTMLElement).style.display = 'none';
          }
        });

        if (visibleCount === 0 && emptyState) {
          emptyState.classList.remove('hidden');
          grid?.classList.add('hidden');
        } else {
          emptyState?.classList.add('hidden');
          grid?.classList.remove('hidden');
        }
      });
    });
  });
</script>

<style>
  .filter-btn {
    background: white;
    color: #1f2937;
    border: 2px solid #d1d5db;
  }

  .filter-btn:hover {
    border-color: #0d9488;
    color: #0f766e;
  }

  .filter-btn.active {
    background: #0d9488;
    color: white;
    border-color: #0d9488;
  }
</style>
