/* global React, Crumbs */
/* ============================================================================
   sections/education.jsx — the "education.md" section.
   ----------------------------------------------------------------------------
   Degrees (data.education) followed by certifications (data.certifications).
   ============================================================================ */
function ViewEducation({ data }) {
  return (
    <>
      <Crumbs parts={["~", "portfolio", "education.md"]} />
      <h1 className="rm-h1"><span className="hash">#</span>Education</h1>
      <div className="rm-prose">
        {data.education.map((ed, i) => (
          <div key={i} className="rm-xp">
            <div className="hd">
              <h4>{ed.degree}</h4>
              <span className="pd">{ed.period}</span>
            </div>
            <div className="org">{ed.school}</div>
            {ed.notes && <p style={{ color: "var(--muted)" }}>{ed.notes}</p>}
          </div>
        ))}
        <h3 className="rm-h3"><span className="hash">###</span>Certifications</h3>
        <ul className="rm-ul">{data.certifications.map((c) => <li key={c}>{c}</li>)}</ul>
      </div>
    </>
  );
}

Object.assign(window, { ViewEducation });