const NsServices = ({ onSelect = () => {} }) => {
  const services = [
    {
      id: 'ipo',
      num: '01',
      eyb: 'Capital Market Readiness',
      title: 'IPO Advisory',
      th: 'ที่ปรึกษาเตรียมความพร้อมเข้าตลาดหลักทรัพย์',
      body: '',
      tags: ['IPO Readiness Assessment', 'Strategic & Corporate Structuring'],
      accent: 'var(--ns-svc-ipo)',
    },
    {
      id: 'acct',
      num: '02',
      eyb: 'Financial Reporting',
      title: 'Accounting Services',
      th: 'บริการด้านบัญชี',
      body: 'ให้คำปรึกษาด้านรายงานทางการเงิน TFRS รายการปรับปรุงทางบัญชี pre-audit และการเตรียมข้อมูลทางการเงินเพื่อรองรับการตรวจสอบและ IPO',
      accent: 'var(--ns-svc-accounting)',
    },
    {
      id: 'ic',
      num: '03',
      eyb: 'Control Environment',
      title: 'Internal Control Services',
      th: 'บริการวางระบบควบคุมภายใน',
      body: 'ออกแบบและยกระดับระบบควบคุมภายในตามแนวคิด COSO ครอบคลุม SOPs ผังกระบวนการ นโยบาย อำนาจอนุมัติ ธรรมาภิบาล และการเตรียมความพร้อมสำหรับ IPO',
      accent: 'var(--ns-svc-ic)',
    },
    {
      id: 'ia',
      num: '04',
      eyb: 'Assurance Services',
      title: 'Internal Audit',
      th: 'บริการตรวจสอบภายใน',
      body: 'ให้บริการตรวจสอบภายในตามแนวทาง Risk-based Internal Audit ครอบคลุมการวางแผน ตรวจสอบระบบควบคุมภายใน การปฏิบัติตามนโยบาย และติดตามการแก้ไขข้อสังเกต',
      accent: 'var(--ns-svc-success)',
    },
    {
      id: 'erm',
      num: '05',
      eyb: 'Risk Governance',
      title: 'Enterprise Risk Management',
      th: 'การบริหารความเสี่ยงองค์กร ERM',
      body: 'ออกแบบกรอบการบริหารความเสี่ยงองค์กร เพื่อสนับสนุนการตัดสินใจ การกำกับดูแล และการเติบโตอย่างยั่งยืน',
      accent: 'var(--ns-svc-ic-alt)',
    },
    {
      id: 'sme-health',
      num: '06',
      eyb: 'Operational Review',
      title: 'SMEs Health Check',
      th: 'ตรวจสุขภาพกระบวนการธุรกิจ',
      body: 'วิเคราะห์ระบบบัญชี การเงิน การควบคุมภายใน และกระบวนการสำคัญ เพื่อยกระดับการดำเนินงานขององค์กร',
      accent: 'var(--ns-gold-600)',
    },
  ];

  const selectService = (service) => {
    if (window.nsTrack) {
      window.nsTrack('click_service_card', {
        service_id: service.id,
        service_name: service.title,
      });
    }
    onSelect(service.id);
  };

  return (
    <section className="ns-section ns-section--cream" id="services">
      <div className="ns-container">
        <div className="ns-section-head">
          <div className="ns-eyebrow">Our Services</div>
          <h2 className="ns-section-head__thai">ยกระดับองค์กรให้เติบโตด้วยระบบที่เป็นมาตรฐานและน่าเชื่อถือ</h2>
          <div className="ns-gold-line" />
        </div>

        <div className="ns-service-grid">
          {services.map(s => (
            <article id={`service-${s.id}`} className="ns-service-card" key={s.id} onClick={() => selectService(s)} style={{ '--card-accent': s.accent }}>
              <div className="ns-service-card__bar" />
              <div className="ns-service-card__body">
                <div className="ns-service-card__num">{s.num}</div>
                <div className="ns-service-card__eyebrow">{s.eyb}</div>
                <h3>{s.title}</h3>
                <p className="ns-service-card__thai">{s.th}</p>
                {s.tags ? (
                  <div className="ns-service-card__tags">
                    {s.tags.map((tag) => <span key={tag}>{tag}</span>)}
                  </div>
                ) : (
                  <p className="ns-service-card__copy">{s.body}</p>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.NsServices = NsServices;