/* Curriculum — academic journey + transcript. Renders inside /about page. */

const TRANSCRIPT_PDF = '/assets/Transcript_Bonnard_05-04-2026.pdf';

function Curriculum() {
  const t = window.t;
  const title = t('curriculum.sectionTitle');

  const handleView = () => window.open(TRANSCRIPT_PDF, '_blank', 'noopener');
  const handleDownload = () => {
    const a = document.createElement('a');
    a.href = TRANSCRIPT_PDF;
    a.download = 'Transcript_Bonnard_Alexis.pdf';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  return (
    <section className="section" id="curriculum">
      <div className="container">

        <div className="section-label reveal">
          <span className="num">02</span>
          <span>{t('curriculum.label')}</span>
          <span className="bar" />
          <span>{t('curriculum.tagline')}</span>
        </div>

        <h2 className="section-title reveal">
          {title.before}<em>{title.em}</em>{title.after}
        </h2>
        <p className="section-lede reveal delay-1">{t('curriculum.lede')}</p>

        <div className="cv-grid">
          <div className="cv-journey reveal">
            <h3 className="cv-subtitle">{t('curriculum.journeyTitle')}</h3>
            <p className="cv-desc">{t('curriculum.journeyDesc')}</p>

            <div className="cv-items">
              <div className="cv-item">
                <div className="cv-item-label">{t('curriculum.items.school42Label')}</div>
                <div className="cv-item-value">{t('curriculum.items.school42Value')}</div>
              </div>
              <div className="cv-item">
                <div className="cv-item-label">{t('curriculum.items.previousLabel')}</div>
                <div className="cv-item-value">{t('curriculum.items.previousValue')}</div>
              </div>
              <div className="cv-item">
                <div className="cv-item-label">{t('curriculum.items.baccalaureatLabel')}</div>
                <div className="cv-item-value">{t('curriculum.items.baccalaureatValue')}</div>
              </div>
            </div>
          </div>

          <div className="cv-transcript reveal delay-1">
            <h3 className="cv-subtitle">{t('curriculum.transcriptTitle')}</h3>

            <div className="cv-transcript-card">
              <svg className="cv-transcript-icon" width="56" height="56" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.2">
                <path d="M12 6h18l8 8v28a2 2 0 0 1-2 2H12a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z" />
                <path d="M30 6v8h8" />
                <path d="M16 24h16M16 30h16M16 36h10" />
              </svg>
              <div className="cv-transcript-meta">
                <span className="cv-transcript-name">{t('curriculum.transcriptFilename')}</span>
                <span className="cv-transcript-date">{t('curriculum.transcriptDate')}</span>
              </div>
            </div>

            <div className="cv-actions">
              <button type="button" className="btn btn-primary" onClick={handleView}>
                <span>{t('curriculum.viewAction')}</span>
                <svg className="btn-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
              <button type="button" className="btn btn-ghost" onClick={handleDownload}>
                <span>{t('curriculum.downloadAction')}</span>
              </button>
            </div>
          </div>
        </div>

        <p className="cv-footnote reveal delay-2">
          <span className="cv-footnote-mark">//</span> {t('curriculum.lastUpdated')}
        </p>
      </div>
    </section>
  );
}

window.Curriculum = Curriculum;