const serviceDetails = {
  ipo: {
    eyebrow: 'Capital Market Readiness',
    title: 'IPO Advisory',
    thaiTitle: 'ที่ปรึกษาเตรียมความพร้อมเข้าตลาดหลักทรัพย์',
    intro: 'สนับสนุนองค์กรที่เตรียมความพร้อมเข้าสู่ตลาดทุน ตั้งแต่การประเมินช่องว่างด้านระบบบัญชี การควบคุมภายใน ธรรมาภิบาล และเอกสารสนับสนุนการทำงานร่วมกับที่ปรึกษาทางการเงิน ผู้สอบบัญชี และหน่วยงานที่เกี่ยวข้อง',
    focus: [
      { title: 'IPO Readiness Assessment', body: 'ประเมินความพร้อมของระบบงานสำคัญ โครงสร้างการกำกับดูแล และประเด็นที่อาจกระทบต่อกระบวนการ IPO' },
      { title: 'Financial Reporting & Disclosure Readiness', body: 'สนับสนุนการจัดเตรียมข้อมูลทางบัญชี ประเด็นรายงานทางการเงิน และเอกสารประกอบการเปิดเผยข้อมูล' },
      { title: 'Governance & Internal Control Preparation', body: 'วางแนวทางด้านนโยบาย อำนาจอนุมัติ การควบคุมภายใน และการติดตามประเด็นปรับปรุงก่อนยื่น IPO' },
    ],
    scope: [
      'ประเมินช่องว่างเทียบกับความคาดหวังของตลาดทุน',
      'จัดทำ roadmap และ issue tracker สำหรับการเตรียมความพร้อม',
      'ประสานงานเชิงข้อมูลกับผู้บริหาร ฝ่ายบัญชี ผู้สอบบัญชี และที่ปรึกษาทางการเงิน',
      'ติดตามสถานะการแก้ไขประเด็นสำคัญจนพร้อมต่อการตรวจสอบ',
    ],
    deliverables: [
      'IPO readiness gap report',
      'Action plan and responsibility matrix',
      'Financial reporting issue summary',
      'Progress monitoring dashboard',
    ],
    outcome: 'องค์กรเห็นภาพเส้นทางสู่ IPO ชัดขึ้น รู้ช่องว่างที่ต้องปรับปรุง และมีแผนการทำงานที่ทุกฝ่ายใช้ร่วมกันได้',
  },
  acct: {
    eyebrow: 'Financial Reporting',
    title: 'Accounting Services',
    thaiTitle: 'บริการด้านบัญชีและมาตรฐานรายงานทางการเงิน',
    intro: 'ให้คำปรึกษาและสนับสนุนการจัดทำข้อมูลทางบัญชีและรายงานทางการเงินให้ถูกต้อง โปร่งใส และเป็นไปตามมาตรฐานรายงานทางการเงิน ครอบคลุมการปรับปรุงข้อมูลบัญชี การเตรียมเอกสารประกอบการตรวจสอบ และการเตรียมความพร้อมด้านรายงานทางการเงินสำหรับ IPO',
    focus: [
      { title: 'Financial Reporting Advisory', body: 'ให้คำแนะนำในการจัดทำงบการเงินรายไตรมาสและรายปีให้สอดคล้องกับมาตรฐานรายงานทางการเงิน รวมถึง TFRS for PAEs สำหรับองค์กรที่เตรียมเข้าสู่ตลาดทุน' },
      { title: 'Accounting Adjustment & Structure', body: 'วิเคราะห์รายการปรับปรุงทางบัญชี ยอดยกมา ผลกระทบจากข้อผิดพลาดหรือการเปลี่ยนแปลงมาตรฐาน รวมถึงการปรับโครงสร้างบัญชีให้สอดคล้องกับการบริหารกระแสเงินสด' },
      { title: 'Audit & IPO Preparation', body: 'สนับสนุนการจัดทำรายละเอียดประกอบงบการเงิน การเตรียม pre-audit การประสานงานกับผู้สอบบัญชี และการจัดทำงบการเงินรวมหรือข้อมูลทางการเงินที่จำเป็นก่อนเข้าสู่ IPO' },
    ],
    scope: [
      'ทบทวนและให้คำแนะนำต่อการจัดทำงบการเงินรายไตรมาสและรายปี',
      'วิเคราะห์ผลกระทบจากข้อผิดพลาดทางบัญชี การเปลี่ยนแปลงมาตรฐาน และรายการปรับปรุงที่มีสาระสำคัญ',
      'สนับสนุนการจัดทำรายละเอียดประกอบงบการเงิน working papers และเอกสารสำหรับผู้สอบบัญชี',
      'ให้คำแนะนำด้านงบการเงินรวม งบกระแสเงินสดรวม และข้อมูลทางการเงินเพื่อเตรียมความพร้อมก่อน IPO',
    ],
    deliverables: [
      'Financial reporting review notes',
      'Accounting adjustment and impact analysis memo',
      'Supporting schedules for audit and pre-audit',
      'Consolidated financial statement and cash flow support',
    ],
  },
  ic: {
    eyebrow: 'Control Environment',
    title: 'Internal Control Services',
    thaiTitle: 'บริการวางระบบควบคุมภายใน',
    intro: 'ให้บริการด้านการควบคุมภายในและธรรมาภิบาล เพื่อยกระดับระบบควบคุมภายในให้สอดคล้องกับวัตถุประสงค์ โครงสร้างองค์กร และความเสี่ยงของกระบวนการทำงาน โดยอ้างอิงแนวคิดการควบคุมภายในตามกรอบ COSO และออกแบบให้สามารถนำไปใช้ได้จริงในองค์กร',
    focus: [
      { title: 'Internal Control Check-up', body: 'ประเมินความเพียงพอของระบบการควบคุมภายใน จุดควบคุมสำคัญ เอกสารหลักฐาน และช่องว่างที่อาจกระทบต่อการดำเนินงานหรือการตรวจสอบ' },
      { title: 'COSO-based Control Design', body: 'ออกแบบและปรับปรุงระบบควบคุมภายในตามกรอบมาตรฐาน COSO ครอบคลุมกระบวนการทำงาน นโยบาย คู่มือปฏิบัติงาน และการติดตามผล' },
      { title: 'Governance & IPO Control Readiness', body: 'ปรับโครงสร้างบทบาท อำนาจอนุมัติ และนโยบายที่จำเป็น เพื่อสนับสนุนธรรมาภิบาล ลด conflict of interest และเตรียมความพร้อมสำหรับ IPO' },
    ],
    scope: [
      'ดำเนินการ check-up กระบวนการสำคัญเพื่อประเมินความเพียงพอของระบบควบคุมภายใน',
      'ออกแบบและปรับปรุง control activities, SOPs, flowcharts และ risk control matrix',
      'กำหนดนโยบาย อำนาจอนุมัติ และโครงสร้างการควบคุมที่เหมาะสมกับธุรกิจ',
      'ให้คำปรึกษาด้านการบริหารความเสี่ยง การประเมินความเสี่ยงองค์กร และการเตรียมระบบควบคุมภายในสำหรับ IPO',
    ],
    deliverables: [
      'Internal control check-up report',
      'SOPs, process flowcharts and policy framework',
      'Risk control matrix and authority approval matrix',
      'IPO internal control readiness roadmap',
    ],
    image: 'assets/service-internal-control-journey.jpg',
    imageAlt: 'Journey with NorthStar for Internal Control Services',
    outcome: 'ธุรกิจมีระบบควบคุมภายในที่ชัดเจน โปร่งใส ลดความเสี่ยงจากการพึ่งพาบุคคล และพร้อมต่อการตรวจสอบในอนาคต',
  },
  ia: {
    eyebrow: 'Assurance Services',
    title: 'Internal Audit',
    thaiTitle: 'บริการตรวจสอบภายใน',
    intro: 'ให้บริการตรวจสอบภายในตามแนวทางการตรวจสอบที่เป็นระบบและอิงความเสี่ยง ครอบคลุมการประเมินความเพียงพอและประสิทธิผลของระบบการควบคุมภายใน การบริหารความเสี่ยง การกำกับดูแลกิจการ และการปฏิบัติตามนโยบาย ระเบียบ และขั้นตอนการปฏิบัติงานขององค์กร',
    focus: [
      { title: 'Internal Audit Outsourcing', body: 'วางแผนและดำเนินงานตรวจสอบภายในประจำปี ตั้งแต่วัตถุประสงค์ ขอบเขต audit program การตรวจภาคสนาม และรายงานต่อผู้บริหารหรือคณะกรรมการตรวจสอบ' },
      { title: 'Internal Audit For IPO', body: 'ตรวจสอบและประเมินความเพียงพอของระบบควบคุมภายในในกระบวนการสำคัญ เทียบกับนโยบาย ขั้นตอนการทำงาน และแนวคิดการควบคุมภายในที่เหมาะสม' },
      { title: 'Risk-based Internal Audit', body: 'จัดลำดับพื้นที่ตรวจสอบตามระดับความเสี่ยง วิเคราะห์ control gaps และมุ่งตรวจประเด็นที่มีผลต่อเป้าหมายทางธุรกิจ การเงิน และการดำเนินงาน' },
      { title: 'Compliance & SOP Review', body: 'ตรวจสอบการปฏิบัติตามนโยบาย ระเบียบ อำนาจอนุมัติ และ SOPs เพื่อประเมินว่ากระบวนการปฏิบัติงานจริงสอดคล้องกับแนวทางที่องค์กรกำหนด' },
      { title: 'IT & Application Control Review', body: 'ประเมินการควบคุมทั่วไปด้านระบบสารสนเทศและการควบคุมในระบบงาน เช่น สิทธิ์การเข้าถึง การแบ่งแยกหน้าที่ และความครบถ้วนของข้อมูล' },
    ],
    scope: [
      'จัดทำ annual internal audit plan, audit universe และ audit program ตามระดับความเสี่ยง',
      'สัมภาษณ์ผู้เกี่ยวข้อง walkthrough กระบวนการ ตรวจทานเอกสาร และทดสอบ key controls',
      'ประเมินการปฏิบัติตามนโยบาย SOPs อำนาจอนุมัติ และข้อกำหนดภายในองค์กร',
      'ตรวจสอบประเด็นด้าน IT controls หรือ application controls ที่เกี่ยวข้องกับกระบวนการสำคัญ',
      'หารือข้อสังเกตกับเจ้าของกระบวนการ จัดระดับความเสี่ยง และติดตาม management action plan',
    ],
    deliverables: [
      'Annual internal audit plan and audit program',
      'Working papers and control testing results',
      'Internal audit report with observation, risk rating, root cause and recommendation',
      'Management response and action plan',
      'Follow-up report on remediation status',
    ],
  },
  erm: {
    eyebrow: 'Risk Governance',
    title: 'Enterprise Risk Management',
    thaiTitle: 'การบริหารความเสี่ยงองค์กร ERM',
    intro: 'ออกแบบกรอบการบริหารความเสี่ยงองค์กรที่เชื่อมโยงกับกลยุทธ์ การดำเนินงาน และการกำกับดูแล เพื่อให้ผู้บริหารมองเห็นความเสี่ยงสำคัญ ตัดสินใจได้ดีขึ้น และติดตามแผนจัดการความเสี่ยงได้อย่างต่อเนื่อง',
    focus: [
      { title: 'ERM Framework Design', body: 'กำหนดโครงสร้าง บทบาท ความรับผิดชอบ และแนวทางบริหารความเสี่ยงที่สอดคล้องกับองค์กร' },
      { title: 'Risk Identification & Assessment', body: 'ระบุ ประเมิน และจัดลำดับความเสี่ยงด้วย risk register, likelihood-impact criteria และ risk heat map' },
      { title: 'Risk Response & Monitoring', body: 'จัดทำแผนจัดการความเสี่ยง KRI และรายงานสำหรับผู้บริหารหรือคณะกรรมการ' },
    ],
    scope: [
      'จัด workshop เพื่อระบุความเสี่ยงร่วมกับเจ้าของกระบวนการ',
      'กำหนด risk criteria, risk appetite และระดับความเสี่ยงที่ยอมรับได้',
      'จัดทำ risk register, heat map และ action plan',
      'ออกแบบรูปแบบรายงานความเสี่ยงสำหรับผู้บริหาร',
    ],
    deliverables: [
      'ERM framework and risk policy',
      'Risk register and risk heat map',
      'Risk action plan and KRI',
      'ERM report for management review',
    ],
    image: 'assets/service-erm-journey.jpg',
    imageAlt: 'ERM framework and risk management journey',
    outcome: 'ผู้บริหารเห็นความเสี่ยงสำคัญอย่างเป็นระบบ ติดตามแผนจัดการความเสี่ยงได้ และเชื่อมโยงการกำกับดูแลเข้ากับการเติบโตขององค์กร',
  },
  'sme-health': {
    eyebrow: 'Operational Review',
    title: 'SMEs Health Check',
    thaiTitle: 'ตรวจสุขภาพกระบวนการธุรกิจ',
    intro: 'บริการประเมินสุขภาพระบบงานสำหรับ SMEs และ Startup ที่ต้องการยกระดับการดำเนินงานให้เป็นระบบมากขึ้น ครอบคลุมกระบวนการบัญชี การเงิน การขาย การจัดซื้อ สินค้าคงคลัง และการควบคุมภายในที่จำเป็น',
    focus: [
      { title: 'Process Diagnostic', body: 'ทบทวนกระบวนการทำงานหลักเพื่อค้นหาจุดติดขัด งานซ้ำซ้อน ช่องว่างในการควบคุม และความเสี่ยงเชิงปฏิบัติการ' },
      { title: 'Finance & Control Health Check', body: 'ประเมินความพร้อมด้านบัญชี การเงิน เอกสารหลักฐาน การอนุมัติ และรายงานเพื่อการบริหาร' },
      { title: 'Practical Improvement Roadmap', body: 'จัดลำดับประเด็นที่ควรปรับปรุงและเสนอแนวทางที่เหมาะกับขนาดและทรัพยากรของกิจการ' },
    ],
    scope: [
      'สัมภาษณ์ผู้เกี่ยวข้องและ walkthrough กระบวนการสำคัญ',
      'วิเคราะห์เอกสาร รายงาน ระบบอนุมัติ และจุดควบคุมที่มีอยู่',
      'ระบุ quick wins และประเด็นที่ควรปรับปรุงระยะกลาง',
      'จัดทำแผนยกระดับระบบงานให้เหมาะกับการเติบโตของธุรกิจ',
    ],
    deliverables: [
      'Business process health check report',
      'Key risk and control gap summary',
      'Quick-win recommendation list',
      'Improvement roadmap for management',
    ],
  },
};

const NsServiceDetail = ({ serviceId = 'ipo', onNavigate = () => {} }) => {
  const service = serviceDetails[serviceId] || serviceDetails.ipo;
  const trackAction = (eventName, target) => {
    if (window.nsTrack) {
      window.nsTrack(eventName, {
        location: 'service_detail',
        service_id: serviceId,
        service_name: service.title,
      });
    }
    onNavigate(target);
  };

  return (
    <main className="ns-service-detail">
      <section className="ns-service-hero">
        <div className="ns-container ns-service-hero__grid">
          <div className="ns-service-hero__copy">
            <button className="ns-service-detail__back" onClick={() => onNavigate('services')}>
              Back to services
            </button>
            <div className="ns-eyebrow">{service.eyebrow}</div>
            <h1>{service.title}</h1>
            <h2>{service.thaiTitle}</h2>
            <p>{service.intro}</p>
            <div className="ns-service-hero__actions">
              <button className="ns-btn ns-btn--gold" onClick={() => trackAction('click_get_in_touch', 'contact')}>Get in touch</button>
              <button className="ns-btn ns-btn--ghost" onClick={() => trackAction('click_view_all_services', 'services')}>View all services</button>
            </div>
          </div>
          <div className="ns-service-hero__panel">
            <span>Service Focus</span>
            {service.focus.map((item) => <strong key={item.title}>{item.title}</strong>)}
          </div>
        </div>
      </section>

      <section className="ns-section ns-section--cream ns-service-scope">
        <div className="ns-container">
          <div className="ns-section-head">
            <div className="ns-eyebrow">Service Scope</div>
            <h2 className="ns-section-head__thai">ขอบเขตการให้บริการที่ออกแบบให้ใช้ได้จริง</h2>
            <div className="ns-gold-line" />
          </div>
          <div className="ns-service-focus-grid">
            {service.focus.map((item) => (
              <article className="ns-service-focus-card" key={item.title}>
                <h3>{item.title}</h3>
                <p>{item.body}</p>
              </article>
            ))}
          </div>
          <div className="ns-service-two-col">
            <article>
              <span>What We Support</span>
              <ul>
                {service.scope.map((item) => <li key={item}>{item}</li>)}
              </ul>
            </article>
            <article>
              <span>Key Deliverables</span>
              <ul>
                {service.deliverables.map((item) => <li key={item}>{item}</li>)}
              </ul>
            </article>
          </div>
        </div>
      </section>

      {service.image ? (
        <section className="ns-section ns-section--cream ns-service-journey">
          <div className="ns-container">
            <div className="ns-section-head">
              <div className="ns-eyebrow">Journey</div>
              <h2 className="ns-section-head__thai">แนวทางการทำงานที่เห็นภาพชัดและนำไปใช้ได้จริง</h2>
              <p className="ns-light-copy">{service.outcome}</p>
              <div className="ns-gold-line" />
            </div>
            <figure className="ns-service-journey__frame">
              <img src={service.image} alt={service.imageAlt} />
            </figure>
          </div>
        </section>
      ) : null}

      <NsContact onSubmit={(f) => console.log('contact:', f)} />
    </main>
  );
};

window.NsServiceDetail = NsServiceDetail;