// About — atmosphere-first bio with portrait
const NikkiAbout = ({ bio }) => {
  return (
    <section className="nr-about" id="about" data-screen-label="About">
      <div className="nr-about-grid">
        <div className="nr-about-portrait">
          <div className="nr-portrait-frame">
            <img src="assets/nikki-portrait.png" alt="Nikki Riker portrait" />
            <div className="nr-portrait-corners" aria-hidden="true">
              <span /><span /><span /><span />
            </div>
          </div>
        </div>

        <div className="nr-about-copy">
          <span className="nr-eyebrow">About the author</span>
          <h2 className="nr-section-head">
            She writes the <em>dangerous</em><br />
            kind of love story.
          </h2>
          <div className="nr-about-body">
            {bio.split('\n\n').map((p, i) => <p key={i}>{p}</p>)}
          </div>
        </div>
      </div>
    </section>
  );
};

window.NikkiAbout = NikkiAbout;