---
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 Icon from '../../components/Icon.astro';
import { getCollection } from 'astro:content';

const services = await getCollection('services');

// Decision-table icon lookup
const serviceIcons: Record<string, string> = {
  'webdev': 'globe',
  'automation': 'cog',
  'marketing': 'megaphone',
  'seo': 'search',
  'consult': 'server',
  'audit': 'refresh',
};

// 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="บริการ 4 ด้าน · เริ่มต้น 15,000 บาท"
    title="โซลูชัน AI 4 ด้าน ที่คุณเลือกได้ตามงบ"
    subtitle="เลือกเฉพาะที่คุณต้องการ หรือให้เราวางแผนให้ทั้งระบบ"
  />

  <!-- Decision Table -->
  <section class="section decision-section">
    <div class="container">
      <div class="section-header">
        <span class="section-badge">ไม่แน่ใจว่าจะเริ่มจากตรงไหน?</span>
        <h2 class="section-title">เลือกบริการที่ใช่ <span class="highlight">ใน 30 วินาที</span></h2>
      </div>

      <div class="decision-table">
        <div class="decision-row decision-header">
          <div>คุณกำลังเจอ</div>
          <div>เริ่มที่</div>
          <div>คาดเห็นผลใน</div>
        </div>
        <div class="decision-row">
          <div>ยังไม่มีเว็บไซต์ หรือเว็บเก่าโหลดช้า</div>
          <div><span class="dec-tag"><Icon name="globe" size={14} class="dec-icon" />AI-Enhanced Website</span></div>
          <div>2–4 สัปดาห์</div>
        </div>
        <div class="decision-row">
          <div>ทีมเซลล์ตอบแชตไม่ทัน ลูกค้าหายตอนกลางคืน</div>
          <div><span class="dec-tag"><Icon name="cog" size={14} class="dec-icon" />AI Automation</span></div>
          <div>1–3 เดือน</div>
        </div>
        <div class="decision-row">
          <div>ลงโฆษณาเยอะ แต่ยอดขายไม่โต</div>
          <div><span class="dec-tag"><Icon name="megaphone" size={14} class="dec-icon" />Online Marketing Automation</span></div>
          <div>1–3 เดือน</div>
        </div>
        <div class="decision-row">
          <div>อยากติดหน้าแรก Google แต่ไม่รู้จะเริ่มยังไง</div>
          <div><span class="dec-tag"><Icon name="search" size={14} class="dec-icon" />SEO + AI Content</span></div>
          <div>3–6 เดือน</div>
        </div>
        <div class="decision-row">
          <div>ไม่อยากจ้างทีม IT ประจำ แต่อยากมี Server/ระบบหลังบ้าน</div>
          <div><span class="dec-tag"><Icon name="server" size={14} class="dec-icon" />Tech Consult</span></div>
          <div>2–6 สัปดาห์</div>
        </div>
        <div class="decision-row">
          <div>มีเว็บอยู่แล้ว แต่ขายไม่ได้</div>
          <div><span class="dec-tag"><Icon name="refresh" size={14} class="dec-icon" />เริ่มจาก Audit ฟรี 30 นาที</span></div>
          <div>1 สัปดาห์</div>
        </div>
      </div>

      <p class="decision-closing">
        ถ้ายังไม่แน่ใจ → กดปุ่ม "ปรึกษาฟรี" ด้านล่าง เราจะถาม 5 คำถามแล้วบอกคำตอบเอง
      </p>
    </div>
  </section>

  <!-- Service Grid -->
  <section class="section services-grid-section">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-badge">บริการทั้งหมด</span>
        <h2 class="section-title">เลือกตาม <span class="highlight">เป้าหมาย</span> ของคุณ</h2>
      </div>

      <div class="services-cards stagger-children">
        {services.map(s => (
          <a href={`/services/${s.id}`} class="service-block">
            <span class="service-tag">{s.data.badge}</span>
            <h3 class="service-name">{s.data.title}</h3>
            <p class="service-subtitle">{s.data.subtitle}</p>
            <div class="service-objective">
              <span class="obj-label">เป้าหมาย</span>
              <span class="obj-value">{s.data.objective}</span>
            </div>
            <span class="service-link">ดูรายละเอียด →</span>
          </a>
        ))}
      </div>
    </div>
  </section>

  <!-- Pricing tiers -->
  <section class="section pricing-section">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-badge">งบประมาณ</span>
        <h2 class="section-title">ไม่ใช่ทุกงบที่จะ<span class="highlight">เหมือนกัน</span></h2>
      </div>

      <div class="pricing-grid stagger-children">
        <div class="pricing-card">
          <h3 class="pricing-tier">เริ่มต้น</h3>
          <div class="pricing-range">15,000–35,000 บาท</div>
          <p class="pricing-desc">Landing Page + AI Chatbot</p>
        </div>
        <div class="pricing-card pricing-featured">
          <div class="pricing-popular">แนะนำ</div>
          <h3 class="pricing-tier">ธุรกิจ</h3>
          <div class="pricing-range">50,000–150,000 บาท</div>
          <p class="pricing-desc">เว็บไซต์เต็มรูป + SEO 3 เดือน</p>
        </div>
        <div class="pricing-card">
          <h3 class="pricing-tier">องค์กร</h3>
          <div class="pricing-range">200,000 บาทขึ้นไป</div>
          <p class="pricing-desc">ระบบครบวงจร + Automation</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section section-yellow cta-section">
    <div class="container">
      <div class="cta-content reveal">
        <h2 class="cta-title">ยังไม่รู้ว่าจะเริ่มจากตรงไหน?</h2>
        <p class="cta-desc">Audit ฟรี 30 นาที — เราจะถาม 5 คำถาม แล้วบอกว่าคุณควรลงทุนกับอะไรก่อน ไม่มี upsell ไม่มี commitment</p>
        <div class="cta-actions">
          <a href="/contact" class="btn btn-dark btn-lg">นัดคุยเลย →</a>
          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark btn-lg">ทัก LINE: @moreminimore</a>
        </div>
      </div>
    </div>
  </section>

  <Footer />
</Base>

<style>
  .decision-section { background: var(--color-bg-alt); }
  .services-grid-section { background: var(--color-white); }
  .pricing-section { background: var(--color-bg-alt); }
  .section-yellow { background: var(--color-primary); }

  .section-header { text-align: center; margin-bottom: 48px; }
  .section-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
  }
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    line-height: 1.2;
    color: var(--color-black);
  }
  .section-title .highlight { color: var(--color-primary-dark); }

  /* Decision table */
  .decision-table {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .decision-row {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 0.8fr;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-gray-200);
    align-items: center;
    font-size: 15px;
    color: var(--color-gray-700);
  }
  .decision-row:first-child { border-top: none; }
  .decision-header {
    background: var(--color-bg-alt);
    font-weight: 800;
    color: var(--color-black);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .dec-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-primary);
    color: var(--color-black);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
  }
  .dec-icon { flex-shrink: 0; }
  .decision-closing {
    text-align: center;
    margin-top: 32px;
    font-size: 16px;
    color: var(--color-gray-700);
  }

  /* Service cards */
  .services-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .service-block {
    display: block;
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 32px;
    transition: all 0.3s ease;
  }
  .service-block:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  .service-tag {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  .service-name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 8px;
  }
  .service-subtitle {
    font-size: 15px;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: 16px;
  }
  .service-objective {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
  }
  .obj-label {
    font-size: 11px;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
  }
  .obj-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black);
  }
  .service-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Pricing */
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
  }
  .pricing-card {
    position: relative;
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 32px;
    text-align: center;
  }
  .pricing-featured {
    border-color: var(--color-primary);
    background: var(--color-bg-alt);
  }
  .pricing-popular {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-black);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .pricing-tier {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 12px;
  }
  .pricing-range {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primary-dark);
    margin-bottom: 8px;
  }
  .pricing-desc {
    font-size: 14px;
    color: var(--color-gray-600);
  }

  /* CTA */
  .cta-content { text-align: center; max-width: 700px; margin: 0 auto; }
  .cta-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    color: var(--color-black);
    margin-bottom: 16px;
  }
  .cta-desc {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 32px;
  }
  .cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
  }

  @media (max-width: 1024px) {
    .services-cards { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .decision-row { grid-template-columns: 1fr; gap: 8px; }
  }
  @media (max-width: 640px) {
    .cta-actions { flex-direction: column; }
    .cta-actions .btn { width: 100%; justify-content: center; }
  }
</style>