---
import PageShell from '../components/PageShell.astro';
import { services, process } from '../data/site.js';
---

<PageShell
  title="บริการ | MoreminiMore"
  description="บริการของ MoreminiMore สำหรับ SME ที่ต้องการทำเว็บ การตลาด ระบบอัตโนมัติ และ AI โดยเริ่มจากข้อมูลจริงก่อนเลือกวิธีทำ"
>
  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
    <p class="eyebrow">บริการ</p>
    <h1>เลือกบริการจากปัญหา ไม่ใช่จากชื่อแพ็กเกจ</h1>
    <p class="hero-lead">
      เราช่วยดูโจทย์ธุรกิจก่อน แล้วเลือกว่าควรเริ่มจากเว็บ การตลาด ระบบทำงาน หรือ AI จุดไหนคุ้มที่สุดสำหรับตอนนี้
    </p>
  </section>

  <section class="page-section">
    <div class="service-detail-grid">
      {services.map((service) => (
        <article id={service.slug} class="detail-card liquid-glass liquidGlass-wrapper">
          <div class="liquidGlass-effect" aria-hidden="true"></div>
          <div class="liquidGlass-tint" aria-hidden="true"></div>
          <div class="liquidGlass-shine" aria-hidden="true"></div>
          <span>{service.badge}</span>
          <h2>{service.name}</h2>
          <h3>{service.headline}</h3>
          <p>{service.detail}</p>
          <p class="detail-objective">เป้าหมายหลัก: {service.objective}</p>
          <div class="detail-actions">
            <a class="text-link" href={`/services/${service.slug}/`}>ดูรายละเอียดบริการนี้</a>
            <button class="text-link" type="button" data-open-lead>ส่งโจทย์บริการนี้</button>
          </div>
        </article>
      ))}
    </div>
  </section>

  <section class="page-section page-section-tight">
    <div class="section-heading">
      <p class="eyebrow">วิธีการทำงาน</p>
      <h2>ทำให้ง่ายต่อการตัดสินใจ ไม่ใช่ทำให้ดูเยอะ</h2>
    </div>
    <div class="process-grid">
      {process.map(([title, copy], index) => (
        <article>
          <span>{String(index + 1).padStart(2, '0')}</span>
          <h3>{title}</h3>
          <p>{copy}</p>
        </article>
      ))}
    </div>
  </section>

  <section class="final-cta">
    <div class="glass-panel liquid-glass liquidGlass-wrapper">
      <div class="liquidGlass-effect" aria-hidden="true"></div>
      <div class="liquidGlass-tint" aria-hidden="true"></div>
      <div class="liquidGlass-shine" aria-hidden="true"></div>
      <p class="eyebrow">ขั้นตอนถัดไป</p>
      <h2>ไม่แน่ใจว่าควรเริ่มบริการไหน ส่งโจทย์มาให้เราดูก่อนได้</h2>
      <button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
    </div>
  </section>
</PageShell>
