const NsHero = ({ onCTA = () => {} }) => {
  const trackHeroCTA = (target) => {
    if (window.nsTrack) {
      window.nsTrack(target === 'contact' ? 'click_get_in_touch' : 'click_explore_services', {
        location: 'hero',
      });
    }
    onCTA(target);
  };

  return (
    <section className="ns-hero">
      <div className="ns-hero__bg" />
      <div className="ns-hero__fade" />

      <div className="ns-hero__inner">
        <div className="ns-hero__content">
          <h1 className="ns-hero__title">
            ที่ปรึกษาบัญชีและการวางระบบการควบคุมภายใน <span>ตามมาตรฐานสากล</span>
          </h1>
          <div className="ns-hero__rule" />
          <p className="ns-hero__tag">
            สำหรับบริษัทที่เตรียมความพร้อมเข้าจดทะเบียนในตลาดหลักทรัพย์ รวมถึง SMEs และ Startup ที่ต้องการยกระดับระบบบัญชี กระบวนการทำงาน และการควบคุมภายในให้ได้มาตรฐาน
          </p>
          <div className="ns-hero__pills">
            <span>IPO Advisory</span>
            <span>Internal Control</span>
            <span>Accounting Services</span>
          </div>
          <div className="ns-hero__ctas">
            <button className="ns-btn ns-btn--gold" onClick={() => trackHeroCTA('contact')}>Get in touch</button>
            <button className="ns-btn ns-btn--ghost" onClick={() => trackHeroCTA('services')}>Explore services</button>
          </div>
        </div>

        <div className="ns-hero__proof" aria-label="NorthStar experience summary">
          <p>
            ด้วยประสบการณ์ของทีมงานกว่า 20 ปี ในสายงานตรวจสอบบัญชี ตรวจสอบภายใน และการให้คำปรึกษาแก่บริษัทจดทะเบียนในตลาดหลักทรัพย์ NorthStar มีความเชี่ยวชาญในการออกแบบและวางระบบบัญชี ระบบการควบคุมภายใน และโครงสร้างการกำกับดูแลกิจการ
          </p>
          <div className="ns-hero__proof-grid">
            <div>
              <strong>20+</strong>
              <span>ปีประสบการณ์ของทีมงาน</span>
            </div>
            <div>
              <strong>10+</strong>
              <span>IPO Success Cases</span>
              <small>NorthStar ได้มีส่วนร่วมในความสำเร็จของบริษัทที่เตรียมความพร้อมสู่ IPO</small>
            </div>
            <div>
              <strong>Multi-sector</strong>
              <span>ประสบการณ์หลากหลายอุตสาหกรรม</span>
              <small>การผลิต, บริการ, ขนส่งและโลจิสติกส์, ลิสซิ่ง, โรงพยาบาล, ยาแผนปัจจุบัน, เทคโนโลยี และธุรกิจอื่นๆ</small>
            </div>
          </div>
        </div>
      </div>

      <div className="ns-hero__bottom" />
    </section>
  );
};

window.NsHero = NsHero;