---
import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro';
import Footer from '../../components/Footer.astro';
import BentoGrid from '../../components/BentoGrid.astro';
import BentoTile from '../../components/BentoTile.astro';
import DecoOrb from '../../components/DecoOrb.astro';
import Icon from '../../components/Icon.astro';
import { getCollection, render } from 'astro:content';

export async function getStaticPaths() {
  const services = await getCollection('services');
  return services.map(service => ({
    params: { slug: service.id },
    props: { service },
  }));
}

const { service } = Astro.props;
const { Content } = await render(service);

const slug = service.id;
const isWebDev = slug === 'webdev';
const isMarketing = slug === 'marketing';
const isAutomation = slug === 'automation';
const isTechConsult = slug === 'ai-consult';

// Service-specific data — keyed by slug, with safe fallback to webdev.
const serviceData: Record<string, any> = {
  'webdev': {
    badge: 'บริการรับทำเว็บไซต์สำหรับ SME ไทย',
    title: 'สร้างเว็บไซต์',
    titleAccent: 'เปลี่ยนแปลงเองได้',
    titleAccent2: 'ด้วย AI',
    desc: 'เว็บไซต์ที่คุณแก้ไขเองได้ง่าย ไม่ต้องรอเราทุกครั้ง พร้อม AI ช่วยสร้างเนื้อหาใหม่ ๆ ให้ทันที + GEO ติด ChatGPT, Perplexity, AI Search',
    whyUs: [
      { num: '01', title: 'ทำเสร็จไว', desc: 'เว็บ Astro 14-30 วัน · WordPress 1-3 เดือน' },
      { num: '02', title: 'แก้เองได้', desc: 'ลูกค้าดูแลเนื้อหาเอง ไม่ต้องพึ่งเราทุกครั้ง' },
      { num: '03', title: 'ติด Google + AI', desc: 'SEO + GEO ติด ChatGPT, Perplexity, Google AI' },
      { num: '04', title: 'Server ฟรีปีแรก', desc: 'พร้อม SSL และ Domain .com ปีแรก' },
    ],
    services: [
      {
        icon: 'pen', span: 6, surface: 'mint',
        title: 'แก้ไขเนื้อหาง่าย ไม่ต้องมีความรู้เทคนิค',
        bullets: [
          'ระบบหลังบ้านใช้ง่าย เปลี่ยนข้อความ รูปภาพ สินค้า ได้เอง',
          'อบรมการใช้งานให้ทีมของคุณ ใช้งานได้ทันที',
          'มีคู่มือ + วิดีโอประกอบ ทบทวนได้ทุกเมื่อ',
        ],
      },
      {
        icon: 'bot', span: 6, surface: 'yellow',
        title: 'AI ช่วยสร้างเนื้อหา + แนะนำการปรับปรุง',
        bullets: [
          'สั่ง AI เขียนบทความ SEO + GEO ได้ทันที',
          'AI แนะนำหัวข้อบทความใหม่ที่ตรงกับลูกค้าของคุณ',
          'AI วิเคราะห์เนื้อหาเดิม บอกจุดที่ควรปรับ',
        ],
      },
      {
        icon: 'search', span: 6, surface: 'purple-soft',
        title: 'SEO + GEO ติด Google และ AI Search',
        bullets: [
          'ติด ChatGPT, Perplexity, Google AI Overviews',
          'ถูกอ้างอิงเมื่อลูกค้าถาม AI เกี่ยวกับสินค้าของคุณ',
          'โครงสร้างเว็บไซต์ออกแบบมาเพื่อให้ AI อ่านเข้าใจ',
        ],
      },
      {
        icon: 'shield', span: 6, surface: 'teal-soft',
        title: 'Server + SSL + Backup ครบ ดูแลให้',
        bullets: [
          'Server เร็ว โหลดไว ไม่มี downtime บ่อย',
          'SSL ฟรี เว็บปลอดภัย + Google จัดอันดับดี',
          'Backup อัตโนมัติทุกวัน ไม่ต้องกลัวข้อมูลหาย',
        ],
      },
    ],
    techOptions: [
      { badge: 'A', name: 'Astro', surface: 'yellow', desc: 'เหมาะสำหรับเว็บไซต์ทั่วไป / Corporate เน้น AI และ SEO โหลดเร็ว ประสิทธิภาพสูง บล็อก / เว็บบริษัท', duration: '14-30 วัน', best: 'ธุรกิจที่ต้องการเว็บเร็ว ติด Google + AI Search' },
      { badge: 'WP', name: 'WordPress', surface: 'soft', desc: 'เหมาะสำหรับเว็บขายของ (E-commerce) เว็บไซต์ที่ซับซ้อน มีระบบหลังบ้านซับซ้อน ต้องการ Plugin เยอะ', duration: '2-4 เดือน', best: 'ร้านค้าออนไลน์ เว็บที่ต้องการ Plugin หลากหลาย' },
    ],
    workflow: [
      'สรุป requirement และปัญหาที่มีอยู่',
      'ออกแบบดีไซน์เบื้องต้น',
      'พัฒนาเว็บไซต์',
      'ทดสอบ',
      'ส่งมอบ',
    ],
    targets: [
      'ธุรกิจที่ยังไม่มีเว็บไซต์',
      'ธุรกิจที่ต้องการสร้างแบรนด์ หรือ สร้างการรับรู้',
      'ธุรกิจที่ต้องการทำการตลาดออนไลน์',
      'ธุรกิจที่ต้องการเปลี่ยนเว็บไซต์เก่า',
    ],
    pricing: [
      {
        tier: 'เริ่มต้น',
        label: 'Astro Landing',
        bestFor: 'เว็บ 1 หน้า ทดสอบตลาด',
        amount: '5,000',
        period: '/ เริ่มต้น',
        features: ['✓ เว็บ 1 หน้า', '✓ Responsive', '✓ SSL + Domain 1 ปี', '✗ ระบบหลังบ้าน'],
      },
      {
        tier: 'มาตรฐาน',
        label: 'Website Astro',
        bestFor: 'เว็บบริษัท 5-15 หน้า เน้น SEO + AI',
        amount: '5,000+',
        period: '/ เริ่มต้น',
        features: ['✓ เว็บ 5-15 หน้า', '✓ SEO + GEO (ติด ChatGPT)', '✓ AI ช่วยสร้างเนื้อหา', '✓ Server + SSL + Domain 1 ปี'],
      },
      {
        tier: 'ขั้นสูง',
        label: 'Website WordPress',
        bestFor: 'E-commerce + Plugin ครบ',
        amount: '15,000',
        period: '/ เริ่มต้น',
        features: ['✓ เว็บไม่จำกัดหน้า', '✓ E-commerce + ตะกร้า + ชำระเงิน', '✓ Plugin ตามต้องการ', '✓ อบรมการใช้งาน'],
      },
    ],
    realPortfolio: [
      { name: 'Dataroot', url: 'https://erp.dataroot.asia', industry: 'ตัวแทนจำหน่าย Odoo ERP', highlight: 'หน้าแรกโหลดไว + ติด Google ได้ผลดี' },
    ],
    faqs: [
      { q: 'แก้ไขเว็บเองยากไหม?', a: 'ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา คุณพิมพ์สั่ง AI ได้เลยว่าอยากได้เนื้อหาแบบไหน ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย เหมือนใช้ Word คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค และทีมเราจะอบรมการใช้งานให้ก่อนส่งมอบ' },
      { q: 'มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?', a: 'ค่าบริการ Server และโดเมนจะฟรีในปีแรก คุณจ่ายเฉพาะค่าทำเว็บไซต์ และจะมีค่าใช้จ่ายในปีถัดไป: ค่า Server ประมาณ 5,000 บาท/ปี + ค่าโดเมน 500 บาท/ปี ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม ถ้าเว็บมีคนเข้าน้อยกว่า 100,000 คน/เดือน ค่า Server ไม่เพิ่ม' },
      { q: 'Server ดูแลให้ไหม?', a: 'เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด อัปเดตความปลอดภัย และแก้ไขปัญหาเบื้องต้น ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป หรือถ้าเว็บมีฟีเจอร์ที่ต้องใช้ทรัพยากร Server สูง เช่น AI Chatbot ที่คุยกับลูกค้าจำนวนมาก' },
      { q: 'ทำเว็บขายของ (E-commerce) ได้ไหม?', a: 'ทำได้แน่นอน เราใช้ WordPress + WooCommerce เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน (PromptPay / โอนผ่านธนาคาร / บัตรเครดิต) ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร คุณสามารถเพิ่มสินค้า ลดราคา จัดโปรโมชั่น ได้ด้วยตัวเอง' },
      { q: 'ต้องมีความรู้ทางเทคนิคไหม?', a: 'ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ ถ้าเจอปัญหาการใช้งาน ทีมซัพพอร์ตพร้อมช่วยทันที' },
      { q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI เมื่อมีคนถามเกี่ยวกับสินค้าหรือบริการในกลุ่มของคุณ เป็นอีกช่องทางที่จะดึงลูกค้าเข้ามา' },
      { q: 'เว็บจะติด Google ในกี่เดือน?', a: 'ขึ้นอยู่กับคีย์เวิร์ดและการแข่งขัน สำหรับคีย์เวิร์ดที่มีการแข่งขันปานกลาง ประมาณ 2-3 เดือนจะเริ่มเห็นผล ส่วนคีย์เวิร์ดที่แข่งขันสูงอาจใช้เวลา 6 เดือนขึ้นไป เราจะวิเคราะห์คีย์เวิร์ดที่เหมาะสมก่อนเริ่มทำ SEO' },
      { q: 'ถ้าอยากเพิ่มฟีเจอร์ทีหลัง ทำได้ไหม?', a: 'ได้แน่นอน เว็บไซต์ที่เราทำออกแบบมาให้ขยายได้ คุณสามารถเพิ่มฟีเจอร์ เช่น ระบบจองคิว ระบบสมาชิก ระบบชำระเงินเพิ่ม หรือเชื่อมต่อกับ API ภายนอก ทีมเราจะประเมินราคาเพิ่มเติมตามฟีเจอร์ที่ต้องการ แจ้งราคาก่อนเริ่มงานทุกครั้ง ทั้งนี้ ถ้าเว็บไซต์ทำจาก Astro การเพิ่มบางฟีเจอร์ที่ซับซ้อนอาจจะมีค่าใช้จ่ายสูงมาก จนบางครั้งการเปลี่ยนระบบไปใช้ WordPress อาจจะมีค่าใช้จ่ายถูกกว่า เช่น การเปลี่ยนเว็บ Astro ให้เป็น E-commerce แบบมีสินค้ามากกว่า 5 ตัว มีระบบตะกร้า และต้องการระบบฐานข้อมูลด้วย เคสนี้เปลี่ยนไปใช้ WordPress จะมีค่าใช้จ่ายถูกกว่า แต่ถ้าเว็บ Astro จะเพิ่มให้มีปุ่มชำระเงินผ่าน Stripe ที่คนไทยใช้ได้โดยจ่ายผ่านบัตรเครดิต แบบนี้ทำได้ โดยค่าใช้จ่ายไม่เกิน 3,000 บาท' },
    ],
  },
  'marketing': {
    badge: 'บริการ Online Marketing Consult ครบวงจร',
    title: 'ที่ปรึกษา',
    titleAccent: 'Online Marketing',
    titleAccent2: 'พร้อม AI + Automation',
    desc: 'วางกลยุทธ์การตลาดออนไลน์จากข้อมูลจริง ออกแบบระบบงานให้พนักงานทำงานง่ายขึ้น พร้อมเครื่องมือ AI + n8n + ระบบรายงานเชิงลึก',
    whyUs: [
      { num: '01', title: 'ลดเวลาในการสร้างสื่อ', desc: 'ระบบ AI + Template ช่วยให้ทีมสร้างสื่อได้เร็วขึ้น ไม่ต้องเริ่มจากศูนย์' },
      { num: '02', title: 'เน้นงบคุ้มค่า', desc: 'ใช้เงินน้อยแต่หวังผลมาก ไม่หว่านเงิน ตัดสิ่งที่ไม่ Convert ออก' },
      { num: '03', title: 'เจาะกลุ่มเป้าหมาย', desc: 'ยิงให้ตรงกลุ่ม ไม่ใช่ยิงทุกคน เพิ่มโอกาสปิดดีล' },
      { num: '04', title: 'ไม่ตามกระแส', desc: 'ถ้าตามแล้วผลไม่คุ้ม ไม่แนะนำ เน้นกลยุทธ์ระยะยาว' },
    ],
    services: [
      {
        icon: 'pen', span: 6, surface: 'yellow',
        title: 'พัฒนาระบบงาน Marketing ให้สร้างสื่ออัตโนมัติ',
        bullets: [
          'วิเคราะห์การทำงาน + สไตล์การทำงานของพนักงาน + รวบรวมสถิติทางการตลาดเดิม',
          'ออกแบบระบบงานให้มี AI/Tool มาช่วย โดยไม่กระทบความเคยชินของพนักงาน',
          'เลือก Tool และ Platform ที่เหมาะกับงาน + ผลลัพธ์ที่ต้องการ',
        ],
      },
      {
        icon: 'barChart', span: 6, surface: 'mint',
        title: 'ระบบรายงานการตลาดเชิงลึก',
        bullets: [
          'เมื่อมีระบบการทำงานครบ จะมีสถิติข้อมูลเป็นระบบ',
          'นำข้อมูลมาวิเคราะห์ด้วย AI เพื่อหาโอกาสทางธุรกิจใหม่ ๆ',
          'แดชบอร์ดสรุปผลที่เข้าใจง่าย ดูผลได้ทันที',
        ],
      },
      {
        icon: 'megaphone', span: 12, surface: 'teal-soft',
        title: 'กลยุทธ์ด้านการตลาดออนไลน์',
        bullets: [
          'วางกลยุทธ์ให้เหมาะกับธุรกิจ สินค้า และกลุ่มเป้าหมาย',
          'SEO + GEO — สร้างแบรนด์และความน่าเชื่อถือระยะยาว',
          'การโฆษณา — ใช้งบอย่างมีประสิทธิภาพ เพิ่มยอดขายสูงสุด',
          'ช่องทางจำหน่าย — แนะนำช่องทางออนไลน์ที่เหมาะ ไม่ตามกระแสที่ผลระยะสั้น',
        ],
      },
    ],
    techOptions: [
      { badge: 'N8N', name: 'n8n', surface: 'yellow', desc: 'เครื่องมือ Automation แบบ Open Source ยืดหยุ่นสูง เชื่อมต่อได้หลายระบบ เหมาะกับ Workflow ที่ซับซ้อน', duration: 'ตามขอบเขต', best: 'งานที่ต้องเชื่อมหลาย Platform + AI' },
      { badge: 'G', name: 'Google Services', surface: 'mint', desc: 'Google Analytics, Search Console, Ads, Tag Manager, Business Profile', duration: 'ตามขอบเขต', best: 'การติดตาม + วัดผล SEO/โฆษณา Google' },
      { badge: 'M', name: 'Meta Services', surface: 'purple-soft', desc: 'Facebook Ads, Instagram Ads, Meta Business Suite, Pixel', duration: 'ตามขอบเขต', best: 'โฆษณา Social Media + Remarketing' },
      { badge: 'SOC', name: 'Social Media', surface: 'soft', desc: 'Facebook, Instagram, LINE Official, TikTok, X (Twitter), YouTube', duration: 'ตามขอบเขต', best: 'สร้างการรับรู้ + Engagement' },
      { badge: 'MS', name: 'Microsoft Clarity', surface: 'teal-soft', desc: 'Heatmap + Session Recording ฟรี ดูพฤติกรรมผู้ใช้จริงบนเว็บ', duration: 'ตามขอบเขต', best: 'วิเคราะห์ UX + จุดที่คนออก' },
      { badge: 'AI', name: 'LLM', surface: 'yellow', desc: 'ChatGPT, Claude, Gemini, Local LLM เลือกตามงบ + ความปลอดภัยข้อมูล', duration: 'ตามขอบเขต', best: 'สร้างเนื้อหา + วิเคราะห์ + Automation' },
      { badge: 'CA', name: 'Custom Apps', surface: 'purple-soft', desc: 'แอปที่เขียนเองเฉพาะงาน เช่น ระบบจัดการ, Dashboard, ระบบอัตโนมัติ', duration: 'ตามขอบเขต', best: 'งานเฉพาะทางที่ Tool ทั่วไปไม่ตอบโจทย์' },
    ],
    workflow: [
      'สรุป requirement และปัญหาที่มีอยู่',
      'ศึกษาและวิเคราะห์ข้อมูลทางการตลาด + คุยกับทีมงาน',
      'วางแผนกลยุทธ์',
      'สร้างระบบงาน + ระบบเก็บข้อมูลสถิติ + ระบบรายงาน',
      'นำกลยุทธ์ไปใช้จริง',
      'ประเมินผลงาน และปรับปรุงกลยุทธ์',
    ],
    targets: [
      'กลุ่ม SMEs ที่ต้องการเพิ่มกำไร',
      'กลุ่ม SMEs ที่มีปัญหาในการทำตลาดออนไลน์อยู่',
    ],
    realPortfolio: [
      { name: 'Dataroot', url: 'https://erp.dataroot.asia', industry: 'ตัวแทนจำหน่าย Odoo ERP', highlight: 'Impression +373%, Click +114.2%, Ad spend -28.3% จากการวิเคราะห์ข้อมูล 3 เดือน + เจาะกลุ่มใหม่' },
    ],
    faqs: [
      { q: 'ราคารวมค่าโฆษณาด้วยไหม?', a: 'ไม่รวม ค่าโฆษณาลูกค้าจ่ายตรงกับ Platform เอง (Google, Meta, etc.) เราดูแลเรื่องวางแผน + บริหารแคมเปญให้' },
      { q: 'ต้องมีความรู้ด้านเทคนิคไหม?', a: 'ไม่ต้องมี เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงให้ข้อมูลและดูผลลัพธ์' },
      { q: 'GEO คืออะไร?', a: 'GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI เมื่อมีคนถามเกี่ยวกับสินค้าหรือบริการในกลุ่มของคุณ' },
      { q: 'ใช้เวลาเห็นผลนานแค่ไหน?', a: 'SEO/GEO ใช้เวลา 3 เดือนขึ้นไปจึงจะเห็นผลชัดเจน ส่วนการโฆษณา (Google Ads, Facebook Ads) มักจะเห็นผลภายใน 2-3 วัน ทั้งนี้ขึ้นอยู่กับสินค้าและกลุ่มเป้าหมายของคุณด้วย' },
      { q: 'คุมงบโฆษณาเองได้ไหม?', a: 'ได้ ปกติเราจะใช้งบโฆษณาตามที่ลูกค้าแจ้งอยู่แล้ว และจะตั้งค่าไม่ให้ใช้งบประมาณเกินทุกเดือน' },
      { q: 'เหมาะกับธุรกิจแบบไหน?', a: 'ทุกธุรกิจ เพราะในมุมมองของการทำ Online Marketing นั้นไม่ใช่แค่การขายสินค้าออนไลน์ แต่รวมถึงการสร้างการรับรู้ และการสร้าง Brand ด้วย' },
    ],
  },
  'automation': {
    badge: 'บริการ AI Automation ครบวงจร',
    title: 'ระบบอัตโนมัติ',
    titleAccent: 'ทำงานแทนคน',
    titleAccent2: 'ด้วย AI + n8n',
    desc: 'แก้ปัญหาเฉพาะจุด พัฒนาระบบอัตโนมัติที่ทำงานแทนพนักงาน ลดเวลา + ลดความผิดพลาด + เชื่อมระบบเดิมเข้าด้วยกัน',
    whyUs: [
      { num: '01', title: 'ลดเวลาการทำงาน', desc: 'งานซ้ำ ๆ ที่ใช้เวลาเป็นชั่วโมง ลดเหลือไม่กี่นาที ระบบทำให้' },
      { num: '02', title: 'ลดความผิดพลาด', desc: 'ระบบทำงานด้วย Logic ที่ชัดเจน ไม่เหนื่อย ไม่ลืม ไม่พิมพ์ผิด' },
    ],
    services: [
      {
        icon: 'cog', span: 12, surface: 'teal-soft',
        title: 'พัฒนาระบบงานให้เป็น Automation',
        bullets: [
          'วิเคราะห์และวางระบบงาน เพื่อหาจุดที่ AI จะช่วยงานได้',
          'ปรับ Workflow ให้ผสานกับพฤติกรรมเดิมของพนักงาน แต่มี Tool/AI มาช่วย',
          'ต่างจาก AI Consult ตรงที่: เน้นการแก้ปัญหาเป็นจุด ๆ ไม่มี KM ไม่มีระบบพัฒนาตัวเอง',
        ],
      },
    ],
    techOptions: [
      { badge: 'N8N', name: 'n8n', surface: 'yellow', desc: 'เครื่องมือ Automation แบบ Open Source ยืดหยุ่นสูง เชื่อมต่อได้หลายระบบ เหมาะกับ Workflow ที่ซับซ้อน', duration: 'ตามขอบเขต', best: 'งานที่ต้องเชื่อมหลาย Platform + AI' },
      { badge: 'AI', name: 'LLM', surface: 'mint', desc: 'ChatGPT, Claude, Gemini, Local LLM เลือกตามงบ + ความปลอดภัยข้อมูล', duration: 'ตามขอบเขต', best: 'AI วิเคราะห์ข้อมูล + ตอบคำถาม + สร้างเนื้อหา' },
      { badge: 'CA', name: 'Custom Apps', surface: 'purple-soft', desc: 'แอปที่เขียนเองเฉพาะงาน เช่น ระบบจัดการ, Dashboard, ระบบอัตโนมัติ', duration: 'ตามขอบเขต', best: 'งานเฉพาะทางที่ Tool ทั่วไปไม่ตอบโจทย์' },
    ],
    workflow: [
      'สรุป requirement และปัญหาที่มีอยู่',
      'ศึกษาและวิเคราะห์ Flow งานปัจจุบัน',
      'กำหนด Flow งานใหม่',
      'พัฒนาแอป หรือ ระบบ AI',
      'ทดสอบเบื้องต้น',
      'ประเมินผลลัพธ์เบื้องต้น',
      'พนักงานบางส่วนทดลองใช้',
      'ปรับปรุงระบบ',
      'ให้พนักงานใช้งานจริง',
    ],
    targets: [
      'กลุ่ม SMEs ที่ต้องการลดต้นทุนและเวลา',
    ],
    faqs: [
      { q: 'ต้องมีความรู้ด้านเทคนิคไหม?', a: 'ไม่ต้องมี เราดูแลทุกอย่างตั้งแต่ต้นจนจบ' },
      { q: 'ระบบที่มีอยู่แล้วเชื่อมได้ไหม?', a: 'ได้ เราสามารถเชื่อมต่อระบบที่มีอยู่เข้ากับ AI ได้ ไม่ว่าจะเป็น Excel, Google Sheets, CRM, ERP หรือระบบอื่น ๆ' },
      { q: 'ใช้เวลา implement นานแค่ไหน?', a: 'ประมาณ 3-6 เดือน ขึ้นอยู่กับความซับซ้อนของงาน และค่านิยมขององค์กร' },
      { q: 'ข้อมูลบริษัทปลอดภัยไหม?', a: 'ข้อมูลบริการจะปลอดภัย แต่ทั้งนี้ขึ้นอยู่กับลูกค้า ปกติถ้าข้อมูลไม่ได้เป็นความลับมาก เราจะแนะนำให้ใช้ Cloud LLM ที่ไม่มีการนำข้อมูลไปฝึก AI แต่ถ้าลูกค้ากังวล หรือข้อมูลเป็นความลับมากจริง ๆ ก็สามารถใช้ Local LLM ได้ แต่จะมีการลงทุนเรื่อง Hardware เพิ่ม' },
      { q: 'ใช้เครื่องมืออะไร?', a: 'เรามักใช้ n8n ร่วมกับ AI เป็นหลัก และหลาย ๆ เคส เราอาจจะเขียน script สำหรับบางงานโดยเฉพาะ' },
      { q: 'ดูแลหลังส่งมอบยังไง?', a: 'บริการนี้เป็นบริการรายเดือน ถ้าลูกค้าใช้ server ของเรา (มีค่า Server แยก) เราดูแลให้ระบบใช้งานได้ตามปกติ รวมถึงอัพเดท software ถ้าลูกค้าใช้ server ของตัวเองและยังใช้บริการอยู่ เราดูแลให้ทุกอย่าง + สอนทีม IT ลูกค้าใช้งานได้ ถ้าไม่ได้ใช้บริการแล้ว ลูกค้าดูแล server เอง' },
      { q: 'ต่างจาก AI Consult ยังไง?', a: 'AI Consult เน้นการเก็บความรู้ของพนักงาน (KM) + ระบบ AI ที่เรียนรู้และพัฒนา skill ใหม่อัตโนมัติ ส่วน AI Automation เน้นแก้ปัญหาเฉพาะจุด ทำระบบเสร็จแล้วจบ ไม่มี KM ไม่มีระบบพัฒนาตัวเอง' },
    ],
  },
  'ai-consult': {
    badge: 'ที่ปรึกษา AI ครบวงจร',
    title: 'ที่ปรึกษา AI',
    titleAccent: 'ครบวงจร',
    titleAccent2: 'เก็บความรู้องค์กร',
    desc: 'พัฒนาระบบ AI เก็บความรู้และทักษะของพนักงาน ลดเวลา + ลดข้อผิดพลาด + ไม่ต้องพึ่งพนักงานคนใดคนหนึ่ง พร้อมให้ AI เรียนรู้และสร้าง skill ใหม่อัตโนมัติ',
    whyUs: [
      { num: '01', title: 'ไม่ต้องพึ่งพนักงานเก่า', desc: 'องค์กรไม่ต้องพึ่งพนักงานเก่ามากอีกต่อไป' },
      { num: '02', title: 'ความรู้ไม่หาย', desc: 'ความรู้จะไม่หายไปเมื่อพนักงานลาออก' },
      { num: '03', title: 'เร็วขึ้น ถูกลง', desc: 'การทำงานเร็วขึ้น ต้นทุนลดลง เวลาใช้น้อยลง' },
      { num: '04', title: 'พนักงานมีเวลามากขึ้น', desc: 'เวลาของพนักงานมีมากขึ้น ทำเรื่องอื่นที่สร้างมูลค่าได้' },
    ],
    services: [
      {
        icon: 'brain', span: 12, surface: 'teal-soft',
        title: 'พัฒนาระบบ AI เก็บความรู้และทักษะขององค์กร',
        bullets: [
          'วิเคราะห์และวางระบบงาน เพื่อหาจุดที่ AI จะช่วยงานได้',
          'วางระบบ AI ให้ผสานกับการทำงานของพนักงาน โดยพนักงานไม่ต้องปรับตัวมาก',
          'ยิ่งพนักงานใช้ AI มากขึ้น AI ยิ่งเก็บประสบการณ์ + สร้าง skill เฉพาะธุรกิจและลูกค้าของคุณ',
          'เมื่อพนักงานเปลี่ยน AI ช่วย support พนักงานใหม่ ลดข้อผิดพลาด + สื่อสารลูกค้าได้',
          'ผลสุดท้าย: AI Chatbot ในองค์กรที่พนักงานใช้ช่วยทำงานส่วนใหญ่ได้',
        ],
      },
    ],
    techOptions: [
      { badge: 'LLM', name: 'Local LLM', surface: 'yellow', desc: 'AI รันในองค์กรเอง ไม่มีข้อมูลส่งออก ความเป็นส่วนตัวสูง เหมาะกับข้อมูลความลับ', duration: 'ตามขอบเขต', best: 'ข้อมูลที่ต้องการ privacy สูง (ยอดขาย การเงิน สินค้า)' },
      { badge: 'GL', name: 'Google Cloud LLM', surface: 'mint', desc: 'Google Gemini, Vertex AI — ความปลอดภัยระดับองค์กร ข้อมูลไม่ถูกนำไปฝึก', duration: 'ตามขอบเขต', best: 'องค์กรที่ต้องการ AI คุณภาพสูง + compliance' },
      { badge: 'CL', name: 'Cloud LLM (ราคาถูก)', surface: 'teal-soft', desc: 'ChatGPT, Claude, DeepSeek ราคาประหยัด ใช้งานได้จริง', duration: 'ตามขอบเขต', best: 'KM พนักงานทั่วไป ไม่มีข้อมูลความลับมาก' },
    ],
    workflow: [
      'สรุป requirement และปัญหาที่มีอยู่',
      'ศึกษาและวิเคราะห์ Flow งานปัจจุบัน',
      'กำหนด Flow งานใหม่',
      'พัฒนาระบบ AI',
      'ทดสอบเบื้องต้น',
      'ประเมินผลลัพธ์เบื้องต้น',
      'พนักงานบางส่วนทดลองใช้',
      'ปรับปรุงระบบ',
      'ให้พนักงานใช้งานจริง',
      'ติดตามและประเมิน skill ที่ AI สร้าง',
      'ปรับ skill ให้เหมาะสม',
      'สร้างระบบพัฒนา skill อัตโนมัติ',
    ],
    targets: [
      'กลุ่ม SMEs ที่ต้องการใช้ AI เพื่อลดเวลาและต้นทุน',
      'กลุ่มธุรกิจที่ไม่ต้องการให้พนักงานบางคนมีอำนาจมากเกินไป',
    ],
    faqs: [
      { q: 'ที่ปรึกษา AI ช่วยอะไรได้บ้าง?', a: 'ช่วยลดเวลาการทำงาน ลดความผิดพลาด และที่สำคัญคือการเก็บรวบรวมพฤติกรรมและความรู้จากพนักงาน นำมาแบ่งปัน ทำให้ลดปัญหาพนักงานคนเดียวมีอำนาจมากเกินไปเพราะความรู้ พนักงานทุกคนสามารถเข้าถึงความรู้และใช้ AI ช่วยทำงานได้' },
      { q: 'มีค่าใช้จ่ายอะไรบ้าง?', a: 'เริ่มต้นจากการปรึกษาฟรี ค่าบริการจะขึ้นอยู่กับความซับซ้อนของโปรเจกต์และระยะเวลาที่ใช้ โดยจะแจ้งราคาให้ชัดเจนหลังคุยรายละเอียดแล้ว' },
      { q: 'ต้องมีความรู้เทคนิคไหม?', a: 'ไม่จำเป็น เราอธิบายให้เข้าใจง่าย และดูแลทุกอย่างให้' },
      { q: 'AI จะมาแทนที่พนักงานไหม?', a: 'ไม่ AI จะทำตัวเป็นผู้ช่วยงานหรือเลขาของพนักงาน คอยแนะนำ แต่งานที่มีผลลัพธ์ชัดเจน AI สามารถทำแทนได้เลย เช่น รายงาน การวิเคราะห์ข้อมูลเบื้องต้น' },
      { q: 'ใช้เวลาเห็นผลนานแค่ไหน?', a: 'ช่วงพัฒนา 1-3 เดือน หลังจากนั้นเป็นช่วงพนักงานปรับตัวเพื่อใช้ AI เป็นส่วนหนึ่งของงาน องค์กรจะเห็นผลชัดเจนเมื่อพนักงานใช้ AI จนชิน งานที่มี workflow ชัดเจนจะเร็วขึ้น พนักงานมีเวลาว่างไปทำงานสร้างมูลค่าอื่น รวมถึงพนักงานใหม่ใช้ AI เป็นพี่เลี้ยงทำงานต่อจากพนักงานเก่าที่ออกได้ทันที' },
      { q: 'ใช้ AI รุ่นไหน?', a: 'ขึ้นอยู่กับงบประมาณและความต้องการ ถ้าไม่มีข้อมูลความลับมาก ใช้ Cloud LLM ที่ไม่นำข้อมูลไปฝึก AI ก็ได้ แต่ถ้ามีข้อมูลความลับ (ยอดขาย การเงิน สินค้า แหล่งซื้อ) อาจจำเป็นต้องใช้ Local LLM ซึ่งต้องลงทุนเรื่อง Hardware เพิ่ม' },
      { q: 'ข้อมูลของเราปลอดภัยไหม?', a: 'ข้อมูลเบื้องต้นปลอดภัย เพราะเราใช้ VPS ของบริษัทเราเอง ข้อมูลการใช้ AI จะผ่าน Server เราก่อน จากนั้นขึ้นอยู่กับ LLM ที่ใช้ ถ้าใช้ Cloud LLM แบบไม่มีการนำข้อมูลไปฝึก เชื่อมั่นได้ระดับหนึ่ง ถ้าใช้ Local LLM ไม่ต้องกังวลเลย' },
      { q: 'มีบริการหลังขายไหม?', a: 'บริการนี้เป็นรายเดือน ค่า Server สำหรับระบบ AI คิดแยก ค่า LLM ลูกค้าจ่ายตรงกับผู้ให้บริการ หรือผ่านเราก็ได้ แต่ค่า LLM แยกจากค่า Server ปกติลูกค้าหยุดใช้บริการ AI Consult ได้เมื่อระบบนิ่งแล้ว (AI ของเราเรียนรู้สร้าง skill ใหม่ตลอด การยกเลิกไม่ได้หมายความว่า AI จะหยุด) แต่ถ้ายกเลิก ลูกค้ายังมีค่า Server + LLM เราจะดูแลให้ระบบใช้งานได้ + อัพเดทระบบ แต่ไม่พัฒนา skill ใหม่หรือเปลี่ยน AI Model ใหม่ ถ้าต้องการพัฒนาต่อ กลับมาใช้บริการใหม่ได้เลย' },
    ],
  },
};

const data = serviceData[slug] || serviceData['webdev'];
const featureList = data.features || data.services || [];
---

<Base title={`${service.data.title} | MoreminiMore`}>
  <Navigation />

  <!-- HERO -->
  <section class="service-hero section-bento">
    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.3} blur="80px" />
    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      <div class="hero-grid">
        <div class="hero-content">
          <span class="hero-badge">{data.badge}</span>
          <h1 class="hero-title">
            <span class="hero-line">{data.title}</span>
            <span class="hero-line hero-accent">{data.titleAccent}</span>
            {data.titleAccent2 && <span class="hero-line">{data.titleAccent2}</span>}
          </h1>
          <p class="hero-desc">{data.desc}</p>

          <div class="hero-actions">
            <a href="tel:0809955945" class="btn btn-primary">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
              </svg>
              โทรหาเรา
            </a>
            <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.627-.63.349 0 .631.285.631.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-9.491.371-.661.56-1.388.56-2.159"/></svg>
              ทัก LINE
            </a>
          </div>
        </div>

        <!-- Hero side — 4 why-us tiles stacked -->
        <div class="hero-visual">
          <div class="hero-trust-title">ทำไมต้องเลือกเรา</div>
          <div class="hero-trust-grid">
            {data.whyUs && data.whyUs.map((w: any) => (
              <div class="hero-trust-card">
                <div class="hero-trust-num">{w.num}</div>
                <div class="hero-trust-body">
                  <div class="hero-trust-name">{w.title}</div>
                  <div class="hero-trust-desc">{w.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- SECTION 2: SERVICES (vertical card stack) -->
  {data.services && (
    <section class="section section-bento">
      <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', left: '10%' }} opacity={0.2} blur="80px" />
      <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-100px', right: '5%' }} opacity={0.25} blur="80px" />
      <div class="container" style="position: relative; z-index: 1;">
        <div class="section-header reveal">
          <span class="section-badge">บริการที่คุณได้รับ</span>
          <h2 class="section-title">
            ทุกบริการ<span class="highlight">ที่เว็บไซต์ต้องมี</span>
          </h2>
          <p class="section-desc">ครบทุกฟีเจอร์ที่เว็บสมัยใหม่ต้องมี — ไม่ต้องจ้างเพิ่มทีหลัง</p>
        </div>

        <div class="service-stack">
          {data.services.map((s: any, idx: number) => (
            <div class="service-stack-item" data-surface={s.surface || 'white'}>
              <div class="service-stack-num">0{idx + 1}</div>
              <div class="service-stack-icon">
                <Icon name={s.icon as any} size={32} />
              </div>
              <div class="service-stack-body">
                <h3 class="service-stack-title">{s.title}</h3>
                <ul class="service-stack-bullets">
                  {(s.bullets || s.items || []).map((b: string) => <li>{b}</li>)}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )}

  <!-- SECTION 3: TECH COMPARISON + PORTFOLIO -->
  {(data.realPortfolio || data.techOptions) && (
    <section class="section section-soft section-bento">
      <DecoOrb color="mint" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
      <DecoOrb color="teal" size="300px" speed={0.4} position={{ bottom: '-100px', right: '10%' }} opacity={0.3} blur="80px" />
      <div class="container" style="position: relative; z-index: 1;">

        {data.techOptions && (
          <>
            <div class="section-header reveal">
              <span class="section-badge">เลือกระบบ</span>
              <h2 class="section-title">เลือกระบบที่<span class="highlight">เหมาะกับคุณ</span></h2>
              <p class="section-desc">แนะนำให้เลือกตามลักษณะธุรกิจ ไม่ใช่เลือกของแพง</p>
            </div>

            <div class="tech-comparison">
              {data.techOptions.map((t: any) => (
                <div class={`tech-col tech-col-${t.badge.toLowerCase()}`}>
                  <div class="tech-col-header">
                    <span class="tech-col-badge">{t.badge}</span>
                    <h3 class="tech-col-name">{t.name}</h3>
                    <p class="tech-col-duration">{t.duration}</p>
                  </div>
                  <div class="tech-col-body">
                    <p class="tech-col-desc">{t.desc}</p>
                    <div class="tech-col-best">
                      <span class="tech-col-label">✓ เหมาะกับ:</span>
                      <span class="tech-col-value">{t.best}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}

        {data.realPortfolio && (
          <>
            <div class="section-header reveal" style="margin-top: 80px;">
              <span class="section-badge">ผลงานจริง</span>
              <h2 class="section-title">เว็บไซต์ที่<span class="highlight">ใช้งานจริง</span></h2>
              <p class="section-desc">เว็บที่เราทำ ยังใช้งานอยู่ทุกวัน — คลิกเข้าไปดูได้เลย</p>
            </div>

            <div class="portfolio-grid-2x2">
              {data.realPortfolio.map((p: any) => (
                <a href={p.url} target="_blank" rel="noopener" class="portfolio-card-grid">
                  <div class="portfolio-card-top">
                    <span class="portfolio-card-badge">✓ ใช้งานจริง</span>
                    <span class="portfolio-card-arrow">→</span>
                  </div>
                  <h3 class="portfolio-card-name">{p.name}</h3>
                  <p class="portfolio-card-industry">{p.industry}</p>
                  <p class="portfolio-card-highlight">{p.highlight}</p>
                </a>
              ))}
            </div>
          </>
        )}
      </div>
    </section>
  )}

  <!-- SECTION 3B: TARGETS (เหมาะกับใคร) -->
  {data.targets && (
    <section class="section section-bento">
      <DecoOrb color="soft" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.4} blur="80px" />
      <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-100px', right: '5%' }} opacity={0.25} blur="80px" />
      <div class="container" style="position: relative; z-index: 1;">
        <div class="section-header reveal">
          <span class="section-badge">เหมาะกับใคร</span>
          <h2 class="section-title">บริการนี้<span class="highlight">เหมาะกับคุณไหม</span></h2>
          <p class="section-desc">ถ้าใช่ 2 ข้อนี้ คุยกับเราได้เลย</p>
        </div>

        <div class="targets-grid">
          {data.targets.map((t: string, i: number) => (
            <div class="target-card">
              <div class="target-num">0{i + 1}</div>
              <div class="target-text">{t}</div>
              <div class="target-check">✓</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )}

  <!-- SECTION 4: PRICING (dynamic: 3-tier OR consult CTA) -->
  <section class="section section-bento">
    <DecoOrb color="yellow" size="500px" speed={0.4} position={{ top: '-150px', right: '-100px' }} opacity={0.25} blur="80px" />
    <DecoOrb color="soft" size="400px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      {data.pricing ? (
        <>
          <div class="section-header reveal">
            <span class="section-badge">ราคา</span>
            <h2 class="section-title">ราคาค่า<span class="highlight">บริการ</span></h2>
            <p class="section-desc">เลือกแพ็คเกจที่ตรงกับความต้องการ — จ่ายเท่าที่ใช้</p>
          </div>
          <div class="pricing-tiers">
            {data.pricing.map((p: any, i: number) => (
              <div class={`pricing-tier pricing-tier-${i === 1 ? 'standard' : (i === 0 ? 'basic' : 'pro')}`}>
                {i === 1 && <div class="pricing-tier-recommended">⭐ แนะนำ</div>}
                <div class="pricing-tier-header">
                  <span class="pricing-tier-badge">{p.tier || (i === 0 ? 'เริ่มต้น' : i === 1 ? 'มาตรฐาน' : 'ขั้นสูง')}</span>
                  <h3 class="pricing-tier-name">{p.label}</h3>
                  <p class="pricing-tier-desc">{p.bestFor}</p>
                </div>
                <div class="pricing-tier-price">
                  <span class="pricing-tier-currency">฿</span>
                  <span class="pricing-tier-amount">{p.amount}</span>
                  <span class="pricing-tier-period">{p.period || '/ เริ่มต้น'}</span>
                </div>
                {p.features && (
                  <ul class="pricing-tier-features">
                    {p.features.map((f: string) => <li>{f}</li>)}
                  </ul>
                )}
                <a href="/contact" class={`pricing-tier-cta ${i === 1 ? 'pricing-tier-cta-primary' : ''}`}>เลือกแพ็คเกจนี้</a>
              </div>
            ))}
          </div>
        </>
      ) : (
        <div class="pricing-consult-cta">
          <div class="section-header reveal">
            <span class="section-badge">ราคา</span>
            <h2 class="section-title">ราคาขึ้นอยู่กับ<span class="highlight">ขอบเขตงาน</span></h2>
            <p class="section-desc">ทุกบริการมีรายละเอียดต่างกัน — เราแจ้งราคาหลังคุยรายละเอียดแล้วเท่านั้น เพื่อให้ตรงกับงานของคุณจริง ๆ</p>
          </div>
          <div class="consult-cta-card">
            <div class="consult-cta-icon">💬</div>
            <h3 class="consult-cta-title">ปรึกษาฟรี 30 นาที</h3>
            <p class="consult-cta-desc">คุยกับเราเพื่อประเมินขอบเขตงาน แล้วเราจะแจ้งราคา + ระยะเวลา + แผนงานให้ชัดเจน</p>
            <div class="consult-cta-actions">
              <a href="tel:0809955945" class="btn btn-dark btn-lg">
                โทร 080-995-5945
              </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 class="consult-cta-trust">
              <span>✓ ปรึกษาฟรี ไม่มีค่าใช้จ่าย</span>
              <span>✓ แจ้งราคาภายใน 2-3 วันหลังคุย</span>
              <span>✓ ปรับแผนได้ตามงบประมาณ</span>
            </div>
          </div>
        </div>
      )}
    </div>
  </section>

  <!-- SECTION 5: FAQ + MDX content -->
  <section class="section section-soft section-bento">
    <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '-100px', left: '20%' }} opacity={0.2} blur="80px" />
    <DecoOrb color="yellow" size="300px" speed={0.4} position={{ bottom: '-50px', right: '-50px' }} opacity={0.25} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      <div class="section-header reveal">
        <span class="section-badge">FAQ</span>
        <h2 class="section-title">คำถาม<span class="highlight">ที่พบบ่อย</span></h2>
        <p class="section-desc">รวมคำถามที่ลูกค้าถามบ่อยที่สุด — คลิกเพื่อดูคำตอบ</p>
      </div>

      <div class="faq-accordion">
        {data.faqs.map((faq: any, i: number) => (
          <details class="faq-item" name="webdev-faq">
            <summary class="faq-summary">
              <span class="faq-q-num">Q{i + 1}</span>
              <span class="faq-q-text">{faq.q}</span>
              <span class="faq-icon">+</span>
            </summary>
            <div class="faq-answer">
              <p>{faq.a}</p>
            </div>
          </details>
        ))}
      </div>

      <div class="workflow-timeline-section">
        <div class="section-header reveal" style="margin-top: 64px;">
          <span class="section-badge">ขั้นตอนการทำงาน</span>
          <h2 class="section-title">เริ่มงาน<span class="highlight">ยังไง</span></h2>
          <p class="section-desc">ขั้นตอนชัดเจน ไม่มีงง — เริ่มคุยฟรีก่อนได้</p>
        </div>
        <div class="workflow-timeline">
          {data.workflow && data.workflow.map((step: string, i: number) => (
            <div class="workflow-step">
              <div class="workflow-step-num">{String(i + 1).padStart(2, '0')}</div>
              <div class="workflow-step-connector"></div>
              <div class="workflow-step-text">{step}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>

  <!-- FINAL CTA -->
  <section class="section section-yellow cta-section">
    <div class="container">
      <div class="cta-content reveal">
        <h2 class="cta-title">ต้องการ{data.titleAccent}?</h2>
        <p class="cta-desc">ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้าง{data.title}ที่ตอบโจทย์ธุรกิจ</p>
        <div class="cta-actions">
          <a href="tel:0809955945" class="btn btn-dark btn-lg">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
              <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
            </svg>
            080-995-5945
          </a>
          <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener" class="btn btn-outline-dark btn-lg">สอบถามราคา</a>
        </div>
      </div>
    </div>
  </section>

  <Footer />
</Base>

<style>
  /* Section wrappers */
  .section-bento {
    position: relative;
    overflow: hidden;
  }
  .section-soft { background: var(--color-bg-alt); }
  .section-yellow { background: var(--color-primary); }

  /* HERO */
  .service-hero {
    background: var(--color-white);
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
  }
  .hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .hero-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: 24px;
  }
  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 900;
    line-height: 1.3;
    color: var(--color-black);
    margin-bottom: 20px;
  }
  .hero-line { display: block; }
  .hero-accent { color: var(--color-primary-dark); }
  .hero-desc {
    font-size: 18px;
    color: var(--color-gray-700);
    margin-bottom: 32px;
    line-height: 1.7;
  }
  .hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
  .hero-actions .btn svg { width: 18px; height: 18px; }
  .hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: var(--color-gray-700);
  }
  .trust-item { font-weight: 600; }

  /* Hero feature list (inside yellow tile) — uses numeral index, no icons */
  .hero-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hero-feature-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
  }
  .hero-feature-item + .hero-feature-item { border-top: 1px solid rgba(0, 0, 0, 0.1); }
  .hero-feature-index {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 2px solid var(--color-black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 900;
    color: var(--color-black);
    letter-spacing: -0.5px;
  }
  .hero-feature-content { display: flex; flex-direction: column; }
  .hero-feature-title { font-size: 15px; font-weight: 700; color: var(--color-black); }
  .hero-feature-desc { font-size: 13px; color: rgba(0, 0, 0, 0.7); }

  /* Section header */
  .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;
    color: var(--color-black);
    line-height: 1.2;
  }
  .section-title .highlight { color: var(--color-primary-dark); }
  .section-desc { font-size: 16px; color: var(--color-gray-600); margin-top: 8px; }

  /* Inline meta paragraphs inside tiles */
  .tile-meta {
    font-size: 14px;
    color: var(--color-gray-600);
  }
  .tile-meta-strong {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 700;
  }
  .tile-meta-dark {
    font-size: 14px;
    opacity: 0.7;
  }

  /* Inline FAQ (single answer per tile) */
  .faq-answer-inline p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-gray-700);
  }
  .surface-yellow .faq-answer-inline p { color: rgba(0, 0, 0, 0.85); }
  .surface-purple .faq-answer-inline p,
  .surface-teal .faq-answer-inline p,
  .surface-coral .faq-answer-inline p,
  .surface-dark .faq-answer-inline p { color: rgba(255, 255, 255, 0.95); }

  /* MDX content wrapper */
  .mdx-content { font-size: 16px; line-height: 1.7; color: var(--color-gray-700); }
  .mdx-content :global(h2) { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 24px 0 12px; color: var(--color-black); }
  .mdx-content :global(h3) { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 16px 0 8px; color: var(--color-black); }
  .mdx-content :global(p) { margin-bottom: 12px; }
  .mdx-content :global(ul) { padding-left: 20px; margin-bottom: 12px; }
  .mdx-content :global(li) { margin-bottom: 4px; }
  .mdx-content :global(strong) { color: var(--color-black); }

  /* MDX card (new) */
  .mdx-content-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 40px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-gray-700);
  }
  .mdx-content-card :global(h2) { font-family: var(--font-display); font-size: 24px; font-weight: 800; margin: 24px 0 12px; color: var(--color-black); }
  .mdx-content-card :global(h3) { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 16px 0 8px; color: var(--color-black); }
  .mdx-content-card :global(p) { margin-bottom: 12px; }
  .mdx-content-card :global(ul) { padding-left: 20px; margin-bottom: 12px; }
  .mdx-content-card :global(li) { margin-bottom: 4px; }
  .mdx-content-card :global(strong) { color: var(--color-black); }

  /* Hero trust grid (right column) */
  .hero-trust-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-gray-600);
    margin-bottom: 20px;
  }
  .hero-trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hero-trust-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s var(--ease-out-expo);
  }
  .hero-trust-card:hover {
    border-color: var(--color-primary);
    transform: translateX(4px);
  }
  .hero-trust-num {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    flex-shrink: 0;
  }
  .hero-trust-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 4px;
  }
  .hero-trust-desc {
    font-size: 14px;
    color: var(--color-gray-600);
    line-height: 1.5;
  }

  /* Service bullets inside bento tiles */
  .service-bullets {
    list-style: none;
    padding: 0;
    margin-top: 8px;
  }
  .service-bullets li {
    position: relative;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: inherit;
  }
  .service-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: currentColor;
    font-weight: 800;
    opacity: 0.7;
  }

  /* Tile CTA link (used in real portfolio tiles) */
  .tile-cta-link {
    display: inline-block;
    margin-top: 16px;
    padding: 8px 16px;
    background: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s var(--ease-out-expo);
  }
  .tile-cta-link:hover {
    background: var(--color-primary);
    color: var(--color-black);
    transform: translateX(4px);
  }

  /* Tile body detail (highlighted text in portfolio tile) */
  .tile-body-detail {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-gray-700);
    margin: 8px 0;
  }

  /* ============================================
     SERVICE STACK (vertical card list)
     ============================================ */
  .service-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
  }
  .service-stack-item {
    display: grid;
    grid-template-columns: 60px 60px 1fr;
    gap: 24px;
    align-items: flex-start;
    padding: 32px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    transition: all 0.3s var(--ease-out-expo);
  }
  .service-stack-item:hover {
    border-color: var(--color-primary);
    transform: translateX(4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  }
  .service-stack-num {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
  }
  .service-stack-icon {
    width: 60px;
    height: 60px;
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);
  }
  .service-stack-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 24px);
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 12px;
  }
  .service-stack-bullets {
    list-style: none;
    padding: 0;
  }
  .service-stack-bullets li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 6px;
    color: var(--color-gray-700);
  }
  .service-stack-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-weight: 800;
  }

  /* ============================================
     TECH COMPARISON (2-column table)
     ============================================ */
  .tech-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .tech-col {
    padding: 40px;
    border-right: 1px solid var(--color-gray-200);
  }
  .tech-col:last-child {
    border-right: none;
  }
  .tech-col-a {
    background: var(--color-primary);
    background: rgba(254, 212, 0, 0.08);
  }
  .tech-col-wp {
    background: var(--color-bg-soft);
  }
  .tech-col-header {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--color-gray-200);
  }
  .tech-col-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-black);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 800;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
  }
  .tech-col-name {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 900;
    color: var(--color-black);
    margin-bottom: 8px;
  }
  .tech-col-duration {
    font-size: 14px;
    color: var(--color-gray-600);
    font-weight: 600;
  }
  .tech-col-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-gray-700);
    margin-bottom: 20px;
  }
  .tech-col-best {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-primary);
    background: rgba(254, 212, 0, 0.15);
    border-radius: var(--radius-md);
  }
  .tech-col-wp .tech-col-best {
    background: rgba(13, 148, 136, 0.1);
  }
  .tech-col-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-black);
    flex-shrink: 0;
  }
  .tech-col-value {
    font-size: 14px;
    color: var(--color-gray-700);
    line-height: 1.5;
  }

  /* ============================================
     PORTFOLIO GRID 2x2
     ============================================ */
  .portfolio-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .portfolio-card-grid {
    display: block;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 32px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s var(--ease-out-expo);
    min-height: 200px;
  }
  .portfolio-card-grid:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  }
  .portfolio-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  .portfolio-card-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-primary);
    color: var(--color-black);
    font-size: 11px;
    font-weight: 800;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .portfolio-card-arrow {
    font-size: 24px;
    color: var(--color-black);
    transition: transform 0.2s;
  }
  .portfolio-card-grid:hover .portfolio-card-arrow {
    transform: translateX(4px);
  }
  .portfolio-card-name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 4px;
  }
  .portfolio-card-industry {
    font-size: 13px;
    color: var(--color-gray-600);
    margin-bottom: 12px;
  }
  .portfolio-card-highlight {
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-gray-700);
  }

  /* ============================================
     PRICING 3-TIER
     ============================================ */
  .pricing-tiers {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .pricing-tier {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    transition: all 0.3s var(--ease-out-expo);
  }
  .pricing-tier:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  }
  .pricing-tier-standard {
    border-color: var(--color-primary);
    border-width: 2px;
    transform: scale(1.04);
  }
  .pricing-tier-standard:hover {
    transform: scale(1.04) translateY(-4px);
  }
  .pricing-tier-recommended {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-black);
    color: var(--color-white);
    padding: 4px 16px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
  }
  .pricing-tier-header {
    text-align: center;
    margin-bottom: 24px;
  }
  .pricing-tier-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-bg-soft);
    color: var(--color-gray-600);
    font-size: 11px;
    font-weight: 800;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
  }
  .pricing-tier-standard .pricing-tier-badge {
    background: var(--color-primary);
    color: var(--color-black);
  }
  .pricing-tier-name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 900;
    color: var(--color-black);
    margin-bottom: 4px;
  }
  .pricing-tier-desc {
    font-size: 14px;
    color: var(--color-gray-600);
  }
  .pricing-tier-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding: 24px 0;
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 24px;
  }
  .pricing-tier-currency {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-black);
  }
  .pricing-tier-amount {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 900;
    color: var(--color-black);
    line-height: 1;
  }
  .pricing-tier-period {
    font-size: 14px;
    color: var(--color-gray-600);
  }
  .pricing-tier-features {
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
  }
  .pricing-tier-features li {
    padding: 8px 0;
    font-size: 15px;
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-100);
  }
  .pricing-tier-features li:last-child {
    border-bottom: none;
  }
  .pricing-tier-cta {
    display: block;
    text-align: center;
    padding: 12px 24px;
    background: var(--color-white);
    color: var(--color-black);
    border: 1.5px solid var(--color-black);
    border-radius: var(--radius-full);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
  }
  .pricing-tier-cta:hover {
    background: var(--color-black);
    color: var(--color-white);
  }
  .pricing-tier-cta-primary {
    background: var(--color-primary);
    color: var(--color-black);
    border-color: var(--color-primary);
  }
  .pricing-tier-cta-primary:hover {
    background: var(--color-black);
    color: var(--color-primary);
    border-color: var(--color-black);
  }

  /* Pricing extras (small list) */
  .pricing-extras {
    max-width: 700px;
    margin: 60px auto 0;
    padding: 32px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
  }
  .pricing-extras-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 16px;
    text-align: center;
  }
  .pricing-extras-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pricing-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-gray-100);
  }
  .pricing-extra:last-child {
    border-bottom: none;
  }
  .pricing-extra-name {
    font-size: 15px;
    color: var(--color-gray-700);
  }
  .pricing-extra-price {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--color-black);
  }

  /* ============================================
     FAQ ACCORDION
     ============================================ */
  /* ============================================
     TARGETS (เหมาะกับใคร)
     ============================================ */
  .targets-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
  }
  .target-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s var(--ease-out-expo);
  }
  .target-card:hover {
    border-color: var(--color-primary);
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }
  .target-num {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    flex-shrink: 0;
  }
  .target-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-gray-700);
    font-weight: 500;
  }
  .target-check {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primary);
    flex-shrink: 0;
  }

  /* ============================================
     CONSULT CTA (no pricing)
     ============================================ */
  .pricing-consult-cta {
    max-width: 800px;
    margin: 0 auto;
  }
  .consult-cta-card {
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-xl);
    padding: 48px 40px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(254, 212, 0, 0.15);
  }
  .consult-cta-icon {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 16px;
  }
  .consult-cta-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 900;
    color: var(--color-black);
    margin-bottom: 12px;
  }
  .consult-cta-desc {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-gray-700);
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  .consult-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
  }
  .consult-cta-trust {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--color-gray-600);
    font-weight: 500;
  }
  .consult-cta-trust span {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .consult-cta-trust span::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: 800;
  }

  /* ============================================
     WORKFLOW TIMELINE
     ============================================ */
  .workflow-timeline {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .workflow-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    align-items: flex-start;
    position: relative;
    padding: 20px 0;
  }
  .workflow-step-num {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
    position: relative;
    z-index: 2;
    background: var(--color-white);
    padding: 8px 0;
    text-align: center;
  }
  .workflow-step-connector {
    position: absolute;
    left: 39px;
    top: 50px;
    bottom: -10px;
    width: 2px;
    background: var(--color-gray-200);
    z-index: 1;
  }
  .workflow-step:last-child .workflow-step-connector {
    display: none;
  }
  .workflow-step-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-gray-700);
    padding: 16px 24px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    flex: 1;
  }

  .faq-accordion {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .faq-item {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
  }
  .faq-item[open] {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(254, 212, 0, 0.15);
  }
  .faq-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .faq-summary::-webkit-details-marker {
    display: none;
  }
  .faq-q-num {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    color: var(--color-primary);
    background: var(--color-black);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }
  .faq-q-text {
    flex: 1;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
  }
  .faq-icon {
    font-size: 28px;
    font-weight: 300;
    color: var(--color-gray-600);
    flex-shrink: 0;
    transition: transform 0.2s;
    line-height: 1;
  }
  .faq-item[open] .faq-icon {
    transform: rotate(45deg);
    color: var(--color-primary);
  }
  .faq-answer {
    padding: 0 24px 24px 56px;
  }
  .faq-answer p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-gray-700);
  }

  @media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .tech-comparison { grid-template-columns: 1fr; }
    .tech-col { border-right: none; border-bottom: 1px solid var(--color-gray-200); }
    .tech-col:last-child { border-bottom: none; }
    .portfolio-grid-2x2 { grid-template-columns: 1fr; }
    .pricing-tiers { grid-template-columns: 1fr; max-width: 480px; }
    .pricing-tier-standard { transform: none; }
    .pricing-tier-standard:hover { transform: translateY(-4px); }
  }
  @media (max-width: 640px) {
    .service-stack-item { grid-template-columns: 1fr; gap: 16px; }
    .service-stack-num { font-size: 28px; }
    .hero-actions, .cta-actions, .consult-cta-actions { flex-direction: column; }
    .hero-actions .btn, .cta-actions .btn, .consult-cta-actions .btn { width: 100%; justify-content: center; }
    .faq-summary { padding: 16px; gap: 12px; }
    .faq-q-text { font-size: 16px; }
    .faq-answer { padding: 0 16px 16px 16px; }
    .targets-grid { grid-template-columns: 1fr; }
    .target-card { padding: 20px; }
    .target-num { font-size: 24px; }
    .workflow-step { grid-template-columns: 60px 1fr; gap: 16px; }
    .workflow-step-num { font-size: 28px; }
    .consult-cta-card { padding: 32px 24px; }
    .consult-cta-title { font-size: 24px; }
  }

  /* 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; }
  .cta-actions .btn svg { display: inline-block; vertical-align: middle; margin-right: 6px; }

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

<script>
  // Parallax orbs (use data-parallax-speed from DecoOrb)
  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
  function updateParallax() {
    const scrolled = window.scrollY;
    parallaxEls.forEach(el => {
      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
      const ty = scrolled * speed * -0.3;
      el.style.transform = `translate3d(0, ${ty}px, 0)`;
    });
  }
  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
</script>