const NsValueProps = () => {
  const values = [
    {
      title: 'Commitment',
      thai: 'ความมุ่งมั่น',
      body: 'เราอยู่เคียงข้างลูกค้าในทุกความท้าทาย ไม่ถอยห่างเมื่อพบอุปสรรค และถือว่าความสำเร็จของลูกค้าคือภารกิจของเราเช่นกัน',
    },
    {
      title: 'Action',
      thai: 'การลงมือทำ',
      body: 'เราไม่ใช่เพียงผู้ให้คำแนะนำ แต่ร่วมทำงาน ลงพื้นที่ วิเคราะห์ปัญหา และผลักดันแนวทางให้เกิดผลลัพธ์ที่นำไปใช้ได้จริง',
    },
    {
      title: 'Integrity',
      thai: 'ความซื่อสัตย์และจริยธรรม',
      body: 'เรารักษาความลับทางธุรกิจอย่างเคร่งครัด ทำงานด้วยความเป็นมืออาชีพ และยึดหลักจริยธรรมของวิชาชีพในทุกขั้นตอน',
    },
    {
      title: 'Collaboration',
      thai: 'การทำงานร่วมกัน',
      body: 'เราทำงานกับลูกค้าอย่างเป็นพันธมิตร เข้าใจบริบทขององค์กร และสื่อสารอย่างชัดเจนเพื่อให้ทุกฝ่ายเดินไปในทิศทางเดียวกัน',
    },
  ];

  return (
    <section className="ns-section ns-section--cream" id="value">
      <div className="ns-container">
        <div className="ns-section-head">
          <div className="ns-eyebrow">Core Values</div>
          <h2>หลักการที่กำหนดวิธีทำงานของเรา</h2>
          <p>
            Northstar ทำงานบนพื้นฐานของความมุ่งมั่น การลงมือทำจริง ความซื่อสัตย์ และการร่วมมือกับลูกค้าอย่างใกล้ชิด เพื่อให้คำแนะนำไม่ได้หยุดอยู่ที่แนวคิด แต่กลายเป็นระบบที่ใช้งานได้จริงในองค์กร
          </p>
          <div className="ns-gold-line" />
        </div>
        <div className="ns-value-grid">
          {values.map((item, index) => (
            <article className="ns-value-card" key={item.title}>
              <span>{String(index + 1).padStart(2, '0')}</span>
              <h3>{item.thai}</h3>
              <strong>{item.title}</strong>
              <p>{item.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.NsValueProps = NsValueProps;