/* global React, Icon, SectionHeader, Reveal */

const WORKSHOPS = [
  {
    mark: "TI",
    org:   "Telin",
    fullOrg: "PT Telekomunikasi Indonesia Internasional",
    title: "Power BI & AI Training",
    format: "Offline training",
    location: "Across Indonesia",
    participants: "18+",
    sessions: "Multi-day",
  },
  {
    mark: "XL",
    org:   "XLSMART",
    fullOrg: "XLSMART Indonesia",
    title: "Power BI Training Program",
    format: "Hybrid · Offline + Online",
    location: "Multi-site",
    participants: "150+",
    sessions: "Cohort",
  },
  {
    mark: "SC",
    org:   "SiCepat Express",
    fullOrg: "SiCepat Ekspres Indonesia",
    title: "Power BI Training",
    format: "Offline training",
    location: "Head Office, Jakarta",
    participants: "14",
    sessions: "Intensive",
  },
];

function Workshops() {
  return (
    <section id="workshops" className="section workshops">
      <div className="container">
        <Reveal>
          <SectionHeader
            eyebrow="Workshops &amp; training"
            eyebrowIcon="graduation-cap"
            title='Trusted to teach by <span class="grad">enterprise teams.</span>'
            subtitle="Power BI and AI training programs delivered for Indonesia's leading telecom and logistics companies — practical, hands-on, and built around real datasets."
          />
        </Reveal>

        <div className="workshops-grid">
          {WORKSHOPS.map((w, i) => (
            <Reveal key={w.org} delay={i * 80}>
              <div className="workshop-card">
                <div className="workshop-hero">
                  <div className="workshop-hero-mark">{w.mark}</div>
                  <span className="workshop-hero-format">
                    <Icon name="presentation" size={11} />
                    {w.format}
                  </span>
                </div>
                <div className="workshop-body">
                  <div className="workshop-eyebrow">{w.org}</div>
                  <h3 className="workshop-title" dangerouslySetInnerHTML={{ __html: w.title }} />
                  <p className="workshop-org">{w.fullOrg}</p>
                  <div className="workshop-stats">
                    <div>
                      <div className="workshop-stat-n">{w.participants}</div>
                      <div className="workshop-stat-l">Participants</div>
                    </div>
                    <div>
                      <div className="workshop-stat-n">{w.sessions}</div>
                      <div className="workshop-stat-l">Format</div>
                    </div>
                    <div>
                      <div className="workshop-stat-n" style={{ fontSize: 13, fontWeight: 700 }}>
                        <Icon name="map-pin" size={14} /> {w.location}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Workshops = Workshops;