---
import BaseLayout from '../layouts/BaseLayout.astro';
import ContactForm from './ContactForm.astro';
import SiteFooter from './SiteFooter.astro';
import type { ServicePage } from '../data/servicePages';
import { servicePages } from '../data/servicePages';
import { breadcrumbSchema, organizationId } from '../data/schema';
import '../styles/service-page.css';

interface Props { service: ServicePage }
const { service } = Astro.props;
const related = servicePages.filter((item) => item.slug !== service.slug);
const serviceUrl = `https://moreminimore.com/services/${service.slug}/`;
const structuredData = [
  { '@context': 'https://schema.org', '@type': 'Service', '@id': `${serviceUrl}#service`, name: service.name, description: service.lead, url: serviceUrl, serviceType: service.name, provider: { '@id': organizationId }, areaServed: { '@type': 'Country', name: 'Thailand' } },
  breadcrumbSchema([{ name: 'หน้าหลัก', path: '/' }, { name: 'บริการ', path: '/services/' }, { name: service.name, path: `/services/${service.slug}/` }]),
];
---

<BaseLayout title={`${service.name} | MoreminiMore`} description={service.lead} structuredData={structuredData}>
  <header class="landing-header">
    <a class="landing-logo" href="/" aria-label="MoreminiMore หน้าหลัก"><img src="/images/logos/logo-long-black.png" width="195" height="42" alt="MoreminiMore" /></a>
    <nav aria-label="เมนูบริการ">
      <a href="/about/">เกี่ยวกับเรา</a>
      <details class="landing-services-menu"><summary>บริการ <span aria-hidden="true">+</span></summary><div><a href="/services/"><b>00</b><span>บริการทั้งหมด<small>เลือกบริการจากปัญหาธุรกิจ</small></span></a>{servicePages.map((item, index) => <a class:list={[item.slug === service.slug && 'active']} href={`/services/${item.slug}/`}><b>0{index + 1}</b><span>{item.name}<small>{item.title}</small></span></a>)}<a href="/about/"><b>→</b><span>เกี่ยวกับเรา</span></a><a href="/faq/"><b>→</b><span>คำถามที่พบบ่อย</span></a></div></details>
      <a href="/faq/">คำถามที่พบบ่อย</a>
      <a class="landing-blog-link" href="/blog/">บทความ</a>
    </nav>
    <a class="landing-contact" href="#contact">ลองคุยกัน 15 นาที ↗</a>
  </header>

  <main id="content">
    <section class="landing-hero" data-landing-hero>
      <div class="landing-hero-copy">
        <p class="landing-eyebrow">{service.label} / {service.name}</p>
        <h1>{service.title}</h1>
        <p class="landing-lead">{service.lead}</p>
        <a class="landing-button" href="#contact">ลองคุยกัน 15 นาที <span>↗</span></a>
      </div>
      <figure class="landing-visual" data-landing-signal><img src={`/images/illustrations/${service.slug}.jpg`} alt={`ภาพแนวคิดบริการ ${service.name}`} width="1536" height="1024" /></figure>
    </section>

    <div class="landing-ticker" aria-hidden="true"><div>{service.name} <span>✦</span> START WITH THE PROBLEM <span>✦</span> MEASURE WHAT MATTERS <span>✦</span> {service.name} <span>✦</span> START WITH THE PROBLEM <span>✦</span></div></div>

    <section class="landing-section pain-section" data-reveal>
      <div class="landing-heading">
        <p class="landing-eyebrow">คุณกำลังเจอแบบนี้อยู่หรือเปล่า?</p>
        <h2>ปัญหาที่เรา<br />เจอบ่อยที่สุด</h2>
      </div>
      <ol class="pain-list">{service.pains.map((pain, index) => <li><span>0{index + 1}</span><p>{pain}</p></li>)}</ol>
    </section>

    <section class="urgency" data-reveal>
      <p class="landing-eyebrow">ทำไมต้องแก้ตอนนี้</p>
      <h2>{service.urgencyTitle}</h2>
      <p>{service.urgency}</p>
    </section>

    <section class="landing-section approach-section" id="approach">
      <div class="landing-heading" data-reveal>
        <p class="landing-eyebrow">เราเข้าไปช่วยอย่างไร</p>
        <h2>เริ่มจากธุรกิจ<br />ไม่ใช่เครื่องมือ</h2>
      </div>
      <div class="approach-grid">{service.approach.map((item, index) => <article data-reveal><span>0{index + 1}</span><p>{item}</p></article>)}</div>
    </section>

    <section class="outcome-section">
      <div class="landing-heading" data-reveal>
        <p class="landing-eyebrow">สิ่งที่คุณจะได้รับ</p>
        <h2>ผลลัพธ์ที่นำไป<br />ทำงานต่อได้จริง</h2>
      </div>
      <ul>{service.outcomes.map((outcome) => <li data-reveal><span>✓</span>{outcome}</li>)}</ul>
    </section>

    {service.packages && <section class="landing-section package-section">
      <div class="landing-heading" data-reveal><p class="landing-eyebrow">รูปแบบเว็บไซต์</p><h2>เลือกระบบให้พอดี<br />กับธุรกิจ</h2></div>
      <div class="package-grid">{service.packages.map((pkg) => <article data-reveal><p class="package-name">{pkg.name}</p><h3>{pkg.suit}</h3><ul>{pkg.features.map((feature) => <li>{feature}</li>)}</ul><div class="package-price"><strong>{pkg.price}</strong><span>{pkg.hosting}</span></div></article>)}</div>
      <p class="package-note">ราคาที่แสดงเป็นราคาเริ่มต้น และอาจเปลี่ยนตามจำนวนหน้า ฟีเจอร์ การเชื่อม API หรือการออกแบบเฉพาะของแต่ละธุรกิจ</p>
    </section>}

    {service.caseStudy && <section class="landing-case">
      <div data-reveal><p class="landing-eyebrow">กรณีศึกษา / Dataroot</p><h2>ลดงบที่รั่ว<br />เพิ่มการเข้าถึงคนที่ใช่</h2><p>เราพบว่าการตั้งค่ากลุ่มเป้าหมายกว้างเกินไป จึงปรับให้โฆษณาแสดงกับคนที่มีแนวโน้มเป็นลูกค้ามากขึ้น</p></div>
      <figure><img src="/images/portfolio/dataroot.png" alt="หน้าเว็บไซต์ Dataroot" loading="lazy" decoding="async" /></figure>
      <div class="landing-metrics"><div><strong>+373%</strong><span>Impression</span></div><div><strong>+114.2%</strong><span>Click</span></div><div><strong>−28.3%</strong><span>Ad spend</span></div></div>
    </section>}

    <section class="landing-section faq-section" id="faq">
      <div class="landing-heading" data-reveal><p class="landing-eyebrow">คำถามที่พบบ่อย</p><h2>ตอบให้ชัด<br />ก่อนเริ่มงาน</h2></div>
      <div class="faq-list">{service.faqs.map((faq, index) => <details data-reveal><summary><span>0{index + 1}</span>{faq.question}<b aria-hidden="true">+</b></summary><p>{faq.answer}</p></details>)}</div>
    </section>

    <section class="related-section">
      <p class="landing-eyebrow">บริการอื่นที่เกี่ยวข้อง</p>
      <h2>บางทีปัญหาอาจเริ่มจากจุดอื่น</h2>
      <div class="related-grid">{related.map((item) => <a href={`/services/${item.slug}/`}><span>{item.name}</span><h3>{item.title}</h3><b>↗</b></a>)}</div>
    </section>

    <section class="landing-cta" id="contact">
      <div><p class="landing-eyebrow">เริ่มต้นง่าย ๆ</p><h2>ลองคุยกัน 15 นาที</h2><p>เล่าปัญหาที่อยากแก้แบบสั้น ๆ ทีมจะติดต่อกลับเพื่อช่วยดูว่าควรเริ่มจากจุดไหน โดยไม่แนะนำระบบที่เกินความจำเป็น</p><div class="landing-contact-list"><a href="tel:+66809955945"><span>โทร</span>080-995-5945 ↗</a><a href="mailto:contact@moreminimore.com"><span>อีเมล</span>contact@moreminimore.com ↗</a><a href="https://line.me/R/ti/p/@moreminimore" target="_blank" rel="noreferrer"><span>LINE</span>@moreminimore ↗</a></div></div>
      <ContactForm source={service.slug} />
    </section>
  </main>

  <SiteFooter />

  <script>
    import gsap from 'gsap';
    import ScrollTrigger from 'gsap/ScrollTrigger';
    gsap.registerPlugin(ScrollTrigger);
    const mm = gsap.matchMedia();
    mm.add({ desktop: '(min-width: 801px)', reduceMotion: '(prefers-reduced-motion: reduce)' }, (context) => {
      const { desktop, reduceMotion } = context.conditions as { desktop: boolean; reduceMotion: boolean };
      if (reduceMotion) return;
      gsap.timeline({ defaults: { ease: 'power3.out' } })
        .from('.landing-hero-copy > *', { autoAlpha: 0, y: 36, stagger: .09, duration: .85 })
        .from('[data-landing-signal]', { autoAlpha: 0, x: 60, rotation: 3, duration: 1 }, '-=.7');
      ScrollTrigger.batch('[data-reveal]', { start: 'top 88%', once: true, onEnter: (items) => gsap.from(items, { autoAlpha: 0, y: 46, duration: .8, stagger: .08, ease: 'power3.out' }) });
      if (desktop) {
        gsap.to('[data-landing-signal]', { yPercent: 4, rotation: -.4, ease: 'none', scrollTrigger: { trigger: '[data-landing-hero]', start: 'top top', end: 'bottom top', scrub: .9 } });
      }
    });
  </script>
</BaseLayout>
