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

export function getStaticPaths() {
  return services.map((service) => ({
    params: { slug: service.slug },
    props: { service },
  }));
}

const { service } = Astro.props;
const relatedServices = services.filter((item) => item.slug !== service.slug);
---

<PageShell
  title={`${service.name} | MoreminiMore`}
  description={`${service.name} จาก MoreminiMore: ${service.copy}`}
>
  <section class="page-hero service-page-hero scene scene-light" data-scene="light">
    <div class="page-hero-grid">
      <div>
        <p class="eyebrow">{service.badge}</p>
        <h1>{service.headline}</h1>
      </div>
      <div class="service-hero-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>
        <span>{service.name}</span>
        <p>{service.copy}</p>
        <button class="button button-primary" type="button" data-open-lead>ส่งโจทย์บริการนี้</button>
      </div>
    </div>
  </section>

  <section class="page-section service-story-section">
    <div class="section-heading">
      <p class="eyebrow">Diagnosis first</p>
      <h2>เริ่มจากดูว่าโจทย์นี้ควรแก้ตรงไหนก่อน</h2>
    </div>
    <div class="service-story-grid">
      <article>
        <h3>ปัญหาที่มักเจอ</h3>
        <ul>
          {service.painPoints.map((item) => <li>{item}</li>)}
        </ul>
      </article>
      <article>
        <h3>วิธีที่เราเข้าไปช่วย</h3>
        <ul>
          {service.approach.map((item) => <li>{item}</li>)}
        </ul>
      </article>
      <article>
        <h3>สิ่งที่ได้จากงานนี้</h3>
        <ul>
          {service.deliverables.map((item) => <li>{item}</li>)}
        </ul>
      </article>
    </div>
  </section>

  <section class="case-section service-proof-section scene scene-dark" data-scene="dark">
    <div class="section-heading">
      <p class="eyebrow">What matters</p>
      <h2>{service.objective}</h2>
    </div>
    <div class="service-proof-grid">
      <article class="case-story 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>
        <span>{service.name}</span>
        <h3>{service.proof}</h3>
        <p>{service.detail}</p>
      </article>
      <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>
    </div>
  </section>

  <section class="page-section page-section-tight">
    <div class="section-heading">
      <p class="eyebrow">Other services</p>
      <h2>บางโจทย์อาจต้องเริ่มจากบริการอื่นก่อน</h2>
    </div>
    <div class="related-service-grid">
      {relatedServices.map((item) => (
        <a class="related-service-card liquid-glass liquidGlass-wrapper" href={`/services/${item.slug}/`}>
          <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>{item.badge}</span>
          <h3>{item.name}</h3>
          <p>{item.headline}</p>
        </a>
      ))}
    </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">Next step</p>
      <h2>เล่าโจทย์ของคุณก่อน แล้วเราช่วยดูว่าบริการนี้ใช่จุดเริ่มต้นไหม</h2>
      <button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
    </div>
  </section>
</PageShell>