const NsIndustries = () => {
  const industries = [
    {
      title: 'Electronics Manufacturing',
      th: 'การผลิตสินค้าอิเล็กทรอนิกส์',
      image: 'assets/raw/1778155994125_0.jpg',
    },
    {
      title: 'Service Business',
      th: 'ธุรกิจบริการ',
      image: 'assets/raw/1778156004102_0.jpg',
    },
    {
      title: 'Leasing',
      th: 'ลิสซิ่ง',
      image: 'assets/raw/1778156023430_0.jpg',
    },
    {
      title: 'Hospital',
      th: 'โรงพยาบาล',
      image: 'assets/raw/1778156065747_0.jpg',
    },
    {
      title: 'System Integrated',
      th: 'ระบบบูรณาการ',
      image: 'assets/raw/1778156035522_0.jpg',
    },
    {
      title: 'EPC',
      th: 'วิศวกรรม จัดหา ก่อสร้าง',
      image: 'assets/raw/1778156072219_0.jpg',
    },
    {
      title: 'Transportation & Logistics',
      th: 'ขนส่งและโลจิสติกส์',
      image: 'assets/raw/1778156014944_0.jpg',
    },
    {
      title: 'Pharmaceutical Manufacturing',
      th: 'ผลิตยาแผนปัจจุบัน',
      image: 'assets/raw/1778156059276_0.jpg',
    },
  ];
  const carouselItems = [...industries, ...industries];

  return (
    <section className="ns-section ns-section--cream" id="industries">
      <div className="ns-container ns-industries">
        <div className="ns-section-head ns-industries__head">
          <div className="ns-eyebrow">Industries</div>
          <h2>ความเชี่ยวชาญในหลากหลายธุรกิจ</h2>
          <p className="ns-light-copy">
            ด้วยประสบการณ์ในหลากหลายอุตสาหกรรม เราช่วยวิเคราะห์กระบวนการทำงาน ระบุจุดเสี่ยง วางระบบควบคุมภายใน และพัฒนาแนวทางปฏิบัติที่สามารถนำไปใช้ได้จริง เพื่อให้ธุรกิจเติบโตอย่างมั่นคง โปร่งใส และพร้อมต่อการตรวจสอบในอนาคต
          </p>
          <div className="ns-gold-line" />
        </div>

        <div className="ns-industry-carousel" aria-label="Industry experience carousel">
          <div className="ns-industry-track">
            {carouselItems.map((item, index) => (
              <article className="ns-industry-card" key={`${item.title}-${index}`} aria-label={`${item.th} - ${item.title}`}>
                <img src={item.image} alt={`${item.th} - ${item.title}`} loading="lazy" />
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.NsIndustries = NsIndustries;