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

const CERTS = [
  { issuer: "ISCEA",  title: "Certified Supply Chain Analyst (CSCA)", year: "2022", icon: "shield-check" },
  { issuer: "IBM",    title: "Data Visualization with Python",         year: "2021", icon: "pie-chart"    },
  { issuer: "IBM",    title: "Project Management",                     year: "2021", icon: "kanban"       },
  { issuer: "IBM",    title: "Agile Development & Scrum",          year: "2021", icon: "git-merge"    },
];

function Certifications() {
  return (
    <section id="certs" className="section certs">
      <div className="container">
        <Reveal>
          <SectionHeader
            align="center"
            eyebrow="Certifications"
            eyebrowIcon="award"
            title='Backed by <span class="grad">recognized programs.</span>'
            subtitle="Industry certifications across supply chain, data visualization, and modern delivery — plus ongoing training, seminars, and workshops."
          />
        </Reveal>

        <div className="certs-grid">
          {CERTS.map((c, i) => (
            <Reveal key={c.title} delay={(i % 4) * 70}>
              <div className="cert-card">
                <div className="cert-badge">
                  <div className="cert-badge-inner">
                    <Icon name={c.icon} size={26} />
                  </div>
                </div>
                <div className="cert-issuer">{c.issuer} · {c.year}</div>
                <h3 className="cert-title" dangerouslySetInnerHTML={{ __html: c.title }} />
                <span className="cert-meta">
                  <Icon name="check-circle" size={14} />
                  Verified credential
                </span>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={120}>
          <div className="cert-extras">
            <div className="cert-extras-cell">
              <div className="cert-extras-icon"><Icon name="book-open" size={20} /></div>
              <div>
                <div className="cert-extras-n">20+</div>
                <div className="cert-extras-l">Trainings completed</div>
              </div>
            </div>
            <div className="cert-extras-cell">
              <div className="cert-extras-icon"><Icon name="users" size={20} /></div>
              <div>
                <div className="cert-extras-n">30+</div>
                <div className="cert-extras-l">Seminars attended</div>
              </div>
            </div>
            <div className="cert-extras-cell">
              <div className="cert-extras-icon"><Icon name="presentation" size={20} /></div>
              <div>
                <div className="cert-extras-n">10+</div>
                <div className="cert-extras-l">Workshops delivered</div>
              </div>
            </div>
            <div className="cert-extras-cell" style={{ marginLeft: "auto" }}>
              <a href="#" className="btn btn--secondary">
                See full résumé
                <span className="btn-arrow"><Icon name="arrow-right" size={16} /></span>
              </a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Certifications = Certifications;