/* global React, Crumbs */
/* ============================================================================
   sections/contact.jsx — the "contact.md" section.
   ----------------------------------------------------------------------------
   Contact details from data.person, laid out as a labelled code block.
   ============================================================================ */
function ViewContact({ data }) {
  const p = data.person;
  return (
    <>
      <Crumbs parts={["~", "portfolio", "contact.md"]} />
      <h1 className="rm-h1"><span className="hash">#</span>Contact</h1>
      <div className="rm-prose">
        <p>Open to graduate SDE / IT / data roles. Quickest reply over email.</p>
        <div className="rm-block">
          <div><span className="lbl">email</span>     <a className="link" href={`mailto:${p.email}`} data-cursor-label="email">{p.email}</a></div>
          <div><span className="lbl">phone</span>     {p.phone}</div>
          <div><span className="lbl">github</span>    <a className="link" href={`https://${p.github}`} data-cursor-label="visit">{p.github}</a></div>
          <div><span className="lbl">linkedin</span>  <a className="link" href={`https://${p.linkedin}`} data-cursor-label="visit">{p.linkedin}</a></div>
          <div><span className="lbl">gallery</span>   <a className="link" href={`https://${p.gallery}`} data-cursor-label="visit">{p.gallery}</a></div>
          <div><span className="lbl">discord</span>   {p.discord}</div>
          <div><span className="lbl">based</span>     {p.location} ({p.timezone})</div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { ViewContact });