/* global React, Container, Section, SectionIdx, useLang, t */

function Certifications() {
  useLang();
  // Build cards from translated strings + static PDF paths / proper nouns.
  const partnerships = [
    {
      issuer: '1С', issuerTag: t('certs.tagPartner'),
      title: t('certs.p1Title'), holder: 'EA-SOFT', holderRole: t('certs.roleCompany'),
      date: t('certs.p1Date'), note: t('certs.p1Note'),
    },
    {
      issuer: '1С-Битрикс', issuerTag: t('certs.tagPartner2'),
      title: t('certs.p2Title'), holder: 'EA-SOFT', holderRole: t('certs.roleCompany'),
      date: '18 · 05 · 2026', note: t('certs.p2Note'),
      pdf: '../../assets/certs/cert-1c-bitrix-partner.pdf',
    },
  ];
  const courses = [
    { issuer: 'Битрикс24', issuerTag: 'Курс · L1', title: t('certs.c1Title'),
      holder: 'Азат Массауров', holderRole: t('certs.roleEngineer'),
      date: '13 · 05 · 2026', credId: 'LRN-651446-212-450-9491868',
      pdf: '../../assets/certs/cert-bitrix24-basic.pdf' },
    { issuer: 'Битрикс24', issuerTag: 'Курс · CRM', title: t('certs.c2Title'),
      holder: 'Азат Массауров', holderRole: t('certs.roleEngineer'),
      date: '17 · 05 · 2026', credId: 'LRN-652018-424-570-9491868',
      pdf: '../../assets/certs/cert-bitrix24-crm.pdf' },
    { issuer: 'Битрикс24', issuerTag: 'Курс · APP', title: t('certs.c3Title'),
      holder: 'Азат Массауров', holderRole: t('certs.roleEngineer'),
      date: '14 · 05 · 2026', credId: 'LRN-651650-226-100-9491868',
      pdf: '../../assets/certs/cert-bitrix24-app.pdf' },
  ];
  const total = partnerships.length + courses.length;

  return (
    <Section id="certs">
      <Container>
        <SectionIdx n="03" name={t('certs.idx')} meta={`N=${total} · ${t('certs.idxMeta')}`} />

        <div className="ea-section-head">
          <h2 className="ea-h2">{t('certs.title')}</h2>
          <p className="ea-lead">{t('certs.lead')}</p>
        </div>
      </Container>

      <div className="ea-certs-grid ea-certs-grid-2">
        {partnerships.map((c, i) => <CertCard key={i} {...c} featured />)}
      </div>
      <div className="ea-certs-grid ea-certs-grid-3">
        {courses.map((c, i) => <CertCard key={i} {...c} />)}
      </div>
    </Section>
  );
}

function CertCard({ issuer, issuerTag, holder, holderRole, title, date, note, credId, pdf, featured }) {
  const Tag = pdf ? 'a' : 'div';
  const linkProps = pdf ? { href: pdf, target: '_blank', rel: 'noopener' } : {};
  return (
    <Tag className={`ea-cert${featured ? ' featured' : ''}${!pdf ? ' nolink' : ''}`} {...linkProps}>
      <div className="ea-cert-top">
        <div className="ea-cert-issuer">
          <span className="ea-cert-tag">{issuerTag}</span>
          <span className="ea-cert-issuer-name">{issuer}</span>
        </div>
        {pdf ? <span className="ea-cert-arrow">→</span> : <span className="ea-cert-arrow ea-cert-arrow-static">·</span>}
      </div>

      <div className="ea-cert-mid">
        <div className="ea-cert-title">{title}</div>
        <div className="ea-cert-holder">
          <b>{holder}</b> · {holderRole}
        </div>
      </div>

      <div className="ea-cert-foot">
        <span>{date}</span>
        <span className="ea-cert-cred">{credId || note || ''}</span>
      </div>
    </Tag>
  );
}

window.Certifications = Certifications;