---
import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro';
import Footer from '../../components/Footer.astro';
import PageHero from '../../components/PageHero.astro';
import ServiceCard from '../../components/ServiceCard.astro';
import { getCollection } from 'astro:content';

const services = await getCollection('services');
const techServices = services.filter(s => s.data.category === 'tech-consult');
const marketingServices = services.filter(s => s.data.category === 'marketing-consult');

// Map service slugs to images
const serviceImages: Record<string, string> = {
  'automation': '/images/services/automation.jpg',
  'ai-consult': '/images/services/ai-consult.jpg',
  'marketing': '/images/services/marketing.jpg',
  'webdev': '/images/services/webdev.jpg',
};
---

<Base title="บริการ | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
  <Navigation />

  <PageHero 
    badge="บริการ"
    title="บริการของเรา"
    subtitle="ครบจบทุกโซลูชันด้านดิจิทัลสำหรับธุรกิจไทย"
  />

  <section class="section">
    <div class="container">

      <!-- Tech Consult Category -->
      <div class="category-section">
        <div class="category-header">
          <div class="category-icon">🔧</div>
          <div class="category-info">
            <span class="category-badge">Technology Consult</span>
            <h2 class="category-title">ลดต้นทุนและเวลา</h2>
            <p class="category-desc">บริการให้คำปรึกษาด้านเทคโนโลยีเพื่อเพิ่มประสิทธิภาพการทำงานและลดค่าใช้จ่ายในระยะยาว</p>
          </div>
        </div>
        <div class="services-grid">
          {techServices.map(s => (
            <ServiceCard
              title={s.data.title}
              subtitle={s.data.subtitle}
              image={serviceImages[s.slug] || '/images/services/default.jpg'}
              link={`/services/${s.slug}`}
            />
          ))}
        </div>
        <div class="usp-box">
          <div class="usp-icon">🎁</div>
          <div class="usp-content">
            <h4 class="usp-title">สิทธิพิเศษสำหรับลูกค้า Consult</h4>
            <p class="usp-desc">ลูกค้าที่ใช้บริการ Technology Consult จะได้รับ Server ฟรีสำหรับ App และ AI (สำหรับการใช้งานปกติ) หากต้องการใช้งานหนักหรือ Resource-intensive จะมีค่าใช้จ่ายเพิ่มเติม</p>
          </div>
        </div>
      </div>

      <!-- Marketing Consult Category -->
      <div class="category-section">
        <div class="category-header">
          <div class="category-icon">📈</div>
          <div class="category-info">
            <span class="category-badge">Marketing Consult</span>
            <h2 class="category-title">เพิ่มยอดขาย</h2>
            <p class="category-desc">บริการด้านการตลาดที่ช่วยให้ธุรกิจของคุณเข้าถึงลูกค้าได้มากขึ้นและเพิ่มยอดขายอย่างเป็นระบบ</p>
          </div>
        </div>
        <div class="services-grid">
          {marketingServices.map(s => (
            <ServiceCard
              title={s.data.title}
              subtitle={s.data.subtitle}
              image={serviceImages[s.slug] || '/images/services/default.jpg'}
              link={`/services/${s.slug}`}
            />
          ))}
        </div>
        <div class="usp-box">
          <div class="usp-icon">🎁</div>
          <div class="usp-content">
            <h4 class="usp-title">สิทธิพิเศษสำหรับลูกค้า Website</h4>
            <p class="usp-desc">ลูกค้าที่ใช้ Server ของเราจะได้รับบริการแก้ไขและเพิ่มเนื้อหาเว็บไซต์ฟรี! จ่ายเฉพาะเมื่อต้องการ Redesign ทั้งหมด หรือ Upgrade ฟีเจอร์ใหญ่ เช่น เพิ่มระบบ E-commerce</p>
          </div>
        </div>
      </div>

    </div>
  </section>

  <!-- CTA Section -->
  <section class="section section-primary cta">
    <div class="container">
      <div class="cta-content">
        <h2 class="cta-title">พร้อมเริ่มต้นวันนี้?</h2>
        <p class="cta-desc">ปรึกษาฟรี! เราพร้อมช่วยวิเคราะห์และออกแบบโซลูชันที่เหมาะกับคุณ</p>
        <div class="cta-actions">
          <a href="/contact" class="btn btn-dark btn-lg">ติดต่อเรา</a>
          <a href="tel:0809955945" class="btn btn-outline-dark btn-lg">080-995-5945</a>
        </div>
      </div>
    </div>
  </section>

  <Footer />
</Base>

<style>
  .category-section {
    margin-bottom: 80px;
  }
  .category-section:last-of-type { margin-bottom: 0; }

  .category-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 40px;
    padding: 32px;
    background: var(--color-gray-100);
    border-radius: 20px;
  }
  .category-icon {
    font-size: 48px;
    flex-shrink: 0;
  }
  .category-info { flex: 1; }
  .category-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .category-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
  }
  .category-desc {
    font-size: 16px;
    color: var(--color-gray-600);
    line-height: 1.6;
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
  }

  .usp-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #ffe066 100%);
    border-radius: 16px;
  }
  .usp-icon { font-size: 32px; flex-shrink: 0; }
  .usp-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 8px;
  }
  .usp-desc {
    font-size: 14px;
    color: rgba(0,0,0,0.8);
    line-height: 1.6;
  }

  .section-primary { background: var(--color-primary); }
  .cta-content { text-align: center; }
  .cta-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--color-black);
  }
  .cta-desc {
    font-size: 18px;
    color: rgba(0,0,0,0.7);
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .btn-outline-dark {
    background: transparent;
    color: var(--color-black);
    border: 2px solid var(--color-black);
  }
  .btn-outline-dark:hover { background: var(--color-black); color: var(--color-white); }
  .btn-dark {
    background: var(--color-dark);
    color: var(--color-white);
  }
  .btn-dark:hover { background: var(--color-dark-light); }
  .btn-lg { padding: 16px 36px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

  @media (max-width: 1024px) {
    .services-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .category-header { flex-direction: column; }
    .cta-actions { flex-direction: column; }
    .btn-lg { width: 100%; }
  }
</style>