/* global React, Crumbs */
/* ============================================================================
   sections/about.jsx — the "about.md" section.
   ----------------------------------------------------------------------------
   Long-form bio. The text comes from data.person.longBlurb, where paragraphs
   are separated by blank lines ("\n\n"); we split on that and render each as
   its own <p>.
   ============================================================================ */
function ViewAbout({ data }) {
  const p = data.person;
  const paragraphs = p.longBlurb.split("\n\n");
  return (
    <>
      <Crumbs parts={["~", "portfolio", "about.md"]} />
      <h1 className="rm-h1"><span className="hash">#</span>About</h1>
      <div className="rm-prose">
        {paragraphs.map((para, i) => <p key={i}>{para}</p>)}
        <p style={{ color: "var(--muted)", fontSize: 13 }}>
          (Order of operations — I started programming by teaching it. That's why
          I tend to explain things before I optimise them, and try to write code
          that a future me, or a student, can actually read.)
        </p>
      </div>
    </>
  );
}

Object.assign(window, { ViewAbout });