/* global React, Crumbs */
/* ============================================================================
   sections/experience.jsx — the "experience.md" section.
   ----------------------------------------------------------------------------
   Work history from data.experience. Each entry shows role, period, employer
   (linked if a url is present), bullet points, and the tech used.
   ============================================================================ */
function ViewExperience({ data }) {
  return (
    <>
      <Crumbs parts={["~", "portfolio", "experience.md"]} />
      <h1 className="rm-h1"><span className="hash">#</span>Experience</h1>
      <div className="rm-prose">
        {data.experience.map((e, i) => (
          <div key={i} className="rm-xp">
            <div className="hd">
              <h4>{e.role}</h4>
              <span className="pd">{e.period}</span>
            </div>
            <div className="org">
              {e.url
                ? <a className="link" href={`https://${e.url}`} target="_blank" rel="noopener"
                     data-cursor-label="visit →"
                     style={{ color: "var(--accent)", textDecoration: "none", borderBottom: "1px solid currentColor" }}>
                    {e.org} ↗
                  </a>
                : e.org}
              <span style={{ color: "var(--muted)" }}> · {e.location}</span>
            </div>
            <ul className="rm-ul">{e.bullets.map((b, j) => <li key={j}>{b}</li>)}</ul>
            <div className="rm-badges">{e.stack.map((s) => <span key={s}>{s}</span>)}</div>
          </div>
        ))}
      </div>
    </>
  );
}

Object.assign(window, { ViewExperience });