---
import PageShell from '../../components/PageShell.astro';
import { services, portfolio } 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);
const cases = portfolio.filter((p) => p.tag.includes(service.name));
const isWD = service.slug === 'website-development';
const isMC = service.slug === 'marketing-consult';
const isAuto = service.slug === 'automation-workflow';
const isAI = service.slug === 'ai-consult';
const approachCols = service.approach.length === 4 ? '2' : '3';
const datarootCase = cases.find((p) => p.name === 'Dataroot');
---

<PageShell
  title={`${service.name} | MoreminiMore`}
  description={`${service.name} จาก MoreminiMore: ${service.copy}`}
>
  <!-- 1. Hero -->
  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
    <p class="eyebrow">{service.badge}</p>
    <h1>{service.headline}</h1>
    <p class="hero-lead">{service.copy}</p>
  </section>

  <!-- 2. Pain Points -->
  <section class="page-section-light">
    <div class="section-heading">
      <p class="eyebrow">คุณกำลังเจอแบบนี้อยู่หรือเปล่า?</p>
      <h2>ปัญหาเหล่านี้คือสิ่งที่เราเจอบ่อยที่สุด</h2>
    </div>
    <div class="service-pain-grid">
      {service.painPoints.map((item, i) => (
        <div class="service-pain-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 class="service-pain-num">{String(i + 1).padStart(2, '0')}</span>
          <p>{item}</p>
        </div>
      ))}
    </div>
  </section>

  <!-- 3. Why It Matters (dark) -->
  <section class="page-section scene-dark why-section" data-scene="dark">
    <div class="why-layout">
      <p class="eyebrow">ทำไมต้องแก้ตอนนี้</p>
      {typeof service.whyItMatters === 'object' ? (
        <>
          <h2>{service.whyItMatters.heading}</h2>
          <div class="why-cards-grid">
            {service.whyItMatters.cards.map((card) => (
              <div class="why-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>
                <strong>{card.label}</strong>
                <p>{card.desc}</p>
              </div>
            ))}
          </div>
        </>
      ) : (
        <>
          <h2>ถ้าไม่แก้ — จะเกิดอะไรขึ้น?</h2>
          <p class="why-text">{service.whyItMatters}</p>
        </>
      )}
    </div>
  </section>

  <!-- 4. Our Approach -->
  <section class="page-section-light">
    <div class="section-heading">
      <p class="eyebrow">เราแตกต่างยังไง</p>
      <h2>วิธีที่เราเข้าไปช่วย — ไม่เหมือนที่อื่น</h2>
    </div>
    {isMC || isAuto || isAI ? (
      <div class="service-timeline">
        {service.approach.map((item, i) => (
          <div class="timeline-item">
            <span class="timeline-dot">{String(i + 1).padStart(2, '0')}</span>
            <div class="timeline-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>
              <p>{item}</p>
            </div>
          </div>
        ))}
      </div>
    ) : (
      <div class={`service-approach-grid cols-${approachCols}`}>
        {service.approach.map((item, i) => (
          <div class="service-approach-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 class="service-approach-num">{String(i + 1).padStart(2, '0')}</span>
            <p>{item}</p>
          </div>
        ))}
      </div>
    )}
  </section>

  <!-- 5. What You Get -->
  <section class="page-section-light">
    <div class="section-heading">
      <p class="eyebrow">สิ่งที่คุณจะได้รับ</p>
      <h2>หลังทำงานกับเรา — คุณจะได้อะไร?</h2>
    </div>
    {isWD || isMC || isAuto || isAI ? (
      <div class="service-deliver-list">
        {service.deliverables.map((item, i) => (
          <div class="service-deliver-item 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 class="service-deliver-check" aria-hidden="true">✓</span>
            <p>{item}</p>
          </div>
        ))}
      </div>
    ) : (
      <div class="service-deliver-grid">
        {service.deliverables.map((item, i) => (
          <div class="service-deliver-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 class="service-deliver-num">{String(i + 1).padStart(2, '0')}</span>
            <p>{item}</p>
          </div>
        ))}
      </div>
    )}
  </section>

  <!-- 6. Case Study (dark) -->
  {isAuto || isAI ? null : isMC ? (
    <section class="case-section scene scene-dark" data-scene="dark">
      <div class="section-heading">
        <p class="eyebrow">กรณีศึกษา</p>
        <div>
          <h2>Dataroot</h2>
          <p>บริษัทให้บริการ ERP Software และการปรับแต่ง ERP Software สำหรับองค์กรขนาดใหญ่</p>
        </div>
      </div>

      <div class="case-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>
          <p class="case-story-title">เราทำอะไรบ้าง กับลูกค้าเจ้านี้</p>
          <div class="story-step">
            <span>01</span>
            <h3>ปัญหา</h3>
            <p>ยิงโฆษณาและทำการตลาดอยู่แล้ว แต่ต้องดูมีการใช้งบประมาณสูงมาก โดยลูกค้าที่ได้มาไม่คุ้มค่ากับงบประมาณที่จ่ายไป</p>
          </div>
          <div class="story-step">
            <span>02</span>
            <h3>สิ่งที่พบ</h3>
            <p>ตั้งค่าโฆษณากว้างมากเกินไป ทำให้เสียงบประมาณไปกับกลุ่มคนที่ไม่ใช่เป้าหมาย</p>
          </div>
          <div class="story-step">
            <span>03</span>
            <h3>สิ่งที่ปรับ</h3>
            <p>ปรับการตั้งค่าโดยโฟกัสกลุ่มเป้าหมาย เพื่อให้โฆษณาไปแสดงเฉพาะกลุ่มคนที่น่าจะเป็นลูกค้า</p>
          </div>
        </article>

        <div class="case-proof">
          {datarootCase && <img src={datarootCase.image} alt="Dataroot website screenshot" loading="lazy" />}
          <div class="metric-card">
            <strong>+373%</strong>
            <span>impression</span>
          </div>
          <div class="metric-card">
            <strong>+114.2%</strong>
            <span>click</span>
          </div>
          <div class="metric-card">
            <strong>−28.3%</strong>
            <span>ad spend</span>
          </div>
        </div>
      </div>
    </section>
  ) : (
    <section class="service-case-section" data-scene="dark">
      <div class="section-heading">
        <p class="eyebrow">เราเคยทำมาแล้ว</p>
        <h2>นี่คือผลลัพธ์จากลูกค้าจริง</h2>
      </div>

      {cases.length > 0 ? (
        <div class="portfolio-grid service-case-grid">
          {cases.map((item) => (
            <a class="portfolio-card featured liquid-glass liquidGlass-wrapper" href={item.href} target="_blank" rel="noopener noreferrer">
              <div class="liquidGlass-effect" aria-hidden="true"></div>
              <div class="liquidGlass-tint" aria-hidden="true"></div>
              <div class="liquidGlass-shine" aria-hidden="true"></div>
              <img src={item.image} alt={`${item.name} website screenshot`} loading="lazy" />
              <div>
                <span>{item.tag}</span>
                <h3>{item.name}</h3>
                <p>{item.description}</p>
              </div>
            </a>
          ))}
        </div>
      ) : (
        <p class="service-no-case">บริการนี้เป็นบริการใหม่ เรากำลังรวบรวมผลงานตัวอย่าง — ส่งโจทย์ของคุณมาเป็นเคสแรกกับเรา</p>
      )}

      <button class="button button-primary service-case-cta" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
    </section>
  )}

  <!-- 7. Packages (website-dev only) -->
  {isWD && service.packages && (
    <section class="page-section-light">
      <div class="section-heading">
        <p class="eyebrow">รูปแบบเว็บไซต์</p>
        <h2>เราให้คุณเลือกระบบที่เหมาะกับธุรกิจ</h2>
      </div>
      <div class="service-pkg-grid">
        {service.packages.map((pkg) => (
          <div class="service-pkg-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>
            <div class="service-pkg-header">
              <img class="service-pkg-logo" src={`/images/${pkg.icon}-logo.svg`} alt={pkg.name} width="48" height="48" />
              <div>
                <h3>{pkg.name}</h3>
                <p class="service-pkg-suit">{pkg.suit}</p>
              </div>
            </div>
            <div class="service-pkg-body">
              <ul class="service-pkg-features">
                {pkg.features.map((f) => <li>{f}</li>)}
              </ul>
              <div class="service-pkg-pricing">
                <div class="service-pkg-price-row">
                  <span>เว็บไซต์</span>
                  <strong>เริ่มต้น {pkg.price} บาท</strong>
                </div>
                <div class="service-pkg-price-row">
                  <span>Hosting</span>
                  <strong>{pkg.hosting === '0' ? 'เริ่มต้น 10,000 บาท/ปี (ฟรีปีแรก)' : `${pkg.hosting} บาท/ปี`}</strong>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
      {service.packageNote && (
        <p class="service-pkg-note">📝 {service.packageNote}</p>
      )}
    </section>
  )}

  <!-- 8. FAQ -->
  <section class="page-section-light">
    <div class="section-heading">
      <p class="eyebrow">คำถามที่พบบ่อย</p>
      <h2>ทุกคำถามที่คุณอาจสงสัย — ตอบตรงนี้</h2>
    </div>
    <div class="service-faq-grid">
      {service.faqs.map((item) => (
        <div class="service-faq-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>
          <h3>{item.question}</h3>
          <p>{item.answer}</p>
        </div>
      ))}
    </div>
  </section>

  <!-- 9. Related -->
  <section class="page-section-light page-section-light-tight">
    <div class="section-heading">
      <p class="eyebrow">บริการอื่นที่เกี่ยวข้อง</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>

</PageShell>

<style>
  /* ── Light Section (no filter) ── */
  .page-section-light { position: relative; padding: clamp(54px, 8vw, 104px) 0; width: var(--container); margin-inline: auto; }
  .page-section-light-tight { padding: clamp(40px, 7vw, 88px) 0; }
  .page-section-light .section-heading h2 { color: var(--ink); }
  .page-section-light .eyebrow { border-color: rgb(19 18 13 / .10); background: rgb(255 255 255 / .52); color: var(--muted); }

  /* ── Pain Points ── */
  .service-pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .service-pain-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: 22px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
  .service-pain-card:hover { transform: scale(1.03); }
  .service-pain-num { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--yellow); color: var(--ink); font-size: 1.25rem; font-weight: 900; flex: 0 0 auto; }
  .service-pain-card p { color: var(--ink); font-size: 1.05rem; font-weight: 700; line-height: 1.45; }

  /* ── Why It Matters ── */
  .why-section { position: relative; isolation: isolate; color: white; }
  .why-section::before { position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; content: ""; background: rgb(0 0 0 / .22); backdrop-filter: invert(1); -webkit-backdrop-filter: invert(1); }
  .why-layout { width: var(--container); margin-inline: auto; position: relative; z-index: 1; padding: clamp(40px, 7vw, 80px) 0; }
  .why-layout h2 { margin-top: 12px; color: white; font-size: clamp(2.4rem, 4vw, 4rem); }
  .why-text { margin-top: clamp(16px, 3vw, 28px); color: rgb(255 255 255 / .82); font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 600; line-height: 1.7; max-width: 48ch; }

  /* Why Cards (website-dev) */
  .why-cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(20px, 3vw, 36px); }
  .why-card { padding: clamp(22px, 3vw, 32px); border-radius: 22px; border: 1px solid transparent; transition: border-color .25s var(--ease); }
  .why-card:hover { border-color: var(--yellow); }
  .why-card strong { display: block; margin-bottom: 10px; color: var(--yellow); font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; }
  .why-card p { color: rgb(255 255 255 / .78); font-size: 0.95rem; line-height: 1.65; }

  /* ── Approach Grid ── */
  .service-approach-grid { display: grid; gap: 18px; }
  .service-approach-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-approach-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-approach-grid.cols-mc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-approach-grid.cols-mc .service-approach-card:last-child { grid-column: 1 / -1; max-width: 480px; justify-self: center; }
  .service-approach-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: 22px; transition: transform .2s var(--ease); }
  .service-approach-card:hover { transform: scale(1.03); }
  .service-approach-num { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--yellow); color: var(--ink); font-size: 1.25rem; font-weight: 900; flex: 0 0 auto; }
  .service-approach-card p { color: var(--ink); font-size: 1.05rem; font-weight: 700; line-height: 1.45; }

  /* Approach Timeline (marketing-consult) */
  .service-timeline {
    position: relative;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: clamp(20px, 3vw, 32px);
    padding-bottom: clamp(24px, 4vw, 40px);
    align-items: center;
  }

  .timeline-item:last-child {
    padding-bottom: 0;
  }

  /* vertical line */
  .timeline-item::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 52px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--yellow), rgb(19 18 13 / .10));
  }

  .timeline-item:last-child::before {
    display: none;
  }

  .timeline-dot {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 0 0 6px rgb(255 255 255 / .52), 0 4px 16px rgb(254 212 0 / .28);
  }

  .timeline-card {
    padding: clamp(18px, 3vw, 28px);
    border-radius: 22px;
    transition: transform .2s var(--ease);
  }

  .timeline-card:hover {
    transform: scale(1.02);
  }

  .timeline-card p {
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.55;
  }

  /* ── Deliverables ── */
  .service-deliver-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .service-deliver-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: 22px; transition: transform .2s var(--ease); }
  .service-deliver-card:hover { transform: scale(1.03); }
  .service-deliver-num { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--yellow); color: var(--ink); font-size: 1.25rem; font-weight: 900; flex: 0 0 auto; }
  .service-deliver-card p { color: var(--ink); font-size: 1.05rem; font-weight: 700; line-height: 1.45; }

  /* Deliverables List (website-dev) */
  .service-deliver-list { display: flex; flex-direction: column; gap: 14px; }
  .service-deliver-item { display: flex; align-items: center; gap: 16px; padding: clamp(18px, 3vw, 28px); border-radius: 22px; transition: transform .2s var(--ease); }
  .service-deliver-item:hover { transform: scale(1.03); }
  .service-deliver-check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--yellow); color: var(--ink); font-size: 1.1rem; font-weight: 900; flex: 0 0 auto; }
  .service-deliver-item p { color: var(--ink); font-size: 1.08rem; font-weight: 700; line-height: 1.5; }

  /* ── Case Study ── */
  .service-case-section { position: relative; isolation: isolate; padding: clamp(54px, 8vw, 104px) 0; color: white; }
  .service-case-section::before { position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; content: ""; background: rgb(0 0 0 / .18); backdrop-filter: invert(1); -webkit-backdrop-filter: invert(1); }
  .service-case-section .section-heading { width: var(--container); margin-inline: auto; }
  .service-case-section .section-heading h2 { color: white; }
  .service-case-section .eyebrow { border-color: var(--dark-line); background: rgb(255 255 255 / .10); color: rgb(255 255 255 / .72); }
  .service-case-grid { max-width: var(--container); margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-case-grid .portfolio-card { grid-column: span 1; }
  .service-case-grid .portfolio-card img { aspect-ratio: 16 / 10; }
  .service-no-case { width: var(--container); margin: 0 auto; color: rgb(255 255 255 / .72); font-size: 1.05rem; text-align: center; padding: clamp(32px, 6vw, 64px) 0; }
  .service-case-cta { display: block; margin: clamp(20px, 3vw, 32px) auto 0; width: fit-content; }

  /* ── Packages (website-dev) ── */
  .service-pkg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .service-pkg-card { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 40px); border-radius: 28px; text-align: left; transition: background .8s var(--ease), transform .7s var(--ease); }
  .service-pkg-card:hover { background: linear-gradient(135deg, #fed400, #ffffff52); transform: scale(1.01); }
  .service-pkg-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
  .service-pkg-logo { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; }
  .service-pkg-header h3 { color: var(--ink); font-size: 1.35rem; font-weight: 800; margin: 0 0 4px; }
  .service-pkg-suit { color: var(--muted); font-size: 0.88rem; font-weight: 600; line-height: 1.55; }
  .service-pkg-body { display: flex; flex-direction: column; gap: 18px; flex: 1; }
  .service-pkg-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .service-pkg-features li { position: relative; padding-left: 22px; color: var(--ink); font-size: 0.92rem; line-height: 1.6; }
  .service-pkg-features li::before { position: absolute; left: 0; top: .15em; content: '→ '; color: var(--ink); font-weight: 700; font-size: 0.85rem; }
  .service-pkg-pricing { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid rgb(19 18 13 / .10); }
  .service-pkg-price-row { display: flex; justify-content: space-between; align-items: baseline; }
  .service-pkg-price-row span { color: var(--muted); font-size: 0.85rem; }
  .service-pkg-price-row strong { color: var(--ink); font-size: 1rem; font-weight: 800; }
  .service-pkg-note { max-width: var(--container); margin: clamp(16px, 3vw, 28px) auto 0; color: var(--muted); font-size: 0.88rem; line-height: 1.6; text-align: center; }

  /* ── FAQ ── */
  .service-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .service-faq-card { padding: clamp(22px, 3vw, 32px); border-radius: 22px; transition: transform .2s var(--ease); }
  .service-faq-card:hover { transform: scale(1.03); }
  .service-faq-card h3 { color: var(--ink); font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; }
  .service-faq-card p { color: var(--muted); line-height: 1.65; }

  /* ── Related Services ── */
  .related-service-card { transition: background .8s var(--ease), transform .7s var(--ease); }
  .related-service-card:hover { background: linear-gradient(135deg, #fed400, #ffffff52); transform: scale(1.01); }

  /* ── Responsive ── */
  @media (max-width: 920px) {
    .service-pain-grid, .service-approach-grid, .service-deliver-grid, .why-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 620px) {
    .service-pain-grid, .service-approach-grid, .service-deliver-grid, .service-faq-grid, .service-case-grid, .service-pkg-grid, .related-service-grid, .why-cards-grid { grid-template-columns: 1fr; }
  }
</style>
