/* global React, Crumbs, FileIcon, GithubContrib */
/* ============================================================================
   sections/home.jsx — the landing section (README.md).
   ----------------------------------------------------------------------------
   The first thing visitors see: a one-line intro, a "whoami" code block, a row
   of pinned projects, the live GitHub contribution graph, and quick links.

   Props:  data — window.PORTFOLIO
           goToProject(id) — jump to a project card on the projects page
           tweaks — current Tweaks (used to colour the contribution graph)
   ============================================================================ */
function ViewHome({ data, goToProject, tweaks }) {
  const p = data.person, s = data.status;

  // Resolve the pinned project ids (from data.pinned) into full project objects.
  const pinned = (data.pinned || [])
    .map((id) => data.projects.find((pr) => pr.id === id))
    .filter(Boolean);

  // ghchart wants a hex without "#"; match it to the chosen accent.
  const accentHex = ({ slate: "5b6b80", olive: "6a7045", clay: "8a5a3b", plum: "6b4f6e" }[tweaks?.accent]) || "5b6b80";

  return (
    <>
      <Crumbs parts={["~", "portfolio", "README.md"]} />
      <h1 className="rm-h1">
        <span className="hash">#</span>{p.name}{" "}
        <span style={{ color: "var(--muted)", fontStyle: "italic" }}>({p.alias})</span>
      </h1>

      <div className="rm-prose">
        {/* Lead blurb, set larger in serif */}
        <p style={{ fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.4, color: "var(--ink)", maxWidth: "52ch" }}>
          {p.blurb}
        </p>

        {/* "whoami" terminal-style summary */}
        <div className="rm-block">
          <div><span className="cm">$</span> who am i</div>
          <div><span className="lbl">→</span> {p.name}, {p.role.toLowerCase()}, {p.location}</div>
          <div><span className="cm">$</span> current</div>
          <div><span className="lbl">→</span> {s.now}</div>
          <div><span className="cm">$</span> contact</div>
          <div><span className="lbl">→</span> <a className="link" href={`mailto:${p.email}`} data-cursor-label="email">{p.email}</a></div>
        </div>

        {/* Pinned projects — click to open the matching card on the projects page */}
        <h2 className="rm-h2"><span className="hash">##</span>Pinned</h2>
        <div className="rm-pin-grid">
          {pinned.map((pr) => (
            <div key={pr.id} className="rm-pin" data-cursor-label="open"
                 onClick={() => goToProject(pr.id)}>
              <div className="head"><FileIcon /><span className="name">{pr.name}</span></div>
              <p className="desc">{pr.summary.split(". ")[0]}.</p>
              <div className="foot">
                <span className="lang">{pr.stack[0]}</span>
                <span>{pr.type}</span>
                <span>{pr.year}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Live GitHub contributions */}
        <h2 className="rm-h2"><span className="hash">##</span>Contributions</h2>
        <p style={{ color: "var(--muted)", fontSize: 13 }}>
          The last year of commits on <a className="link" href={`https://${p.github}`} target="_blank" rel="noopener">{p.github}</a>.
        </p>
        <GithubContrib username={(p.github || "").replace(/^github\.com\//, "")} color={accentHex} />

        {/* Quick links */}
        <h2 className="rm-h2"><span className="hash">##</span>Quick links</h2>
        <ul className="rm-ul">
          <li><a className="link" href={`https://${p.github}`}   data-cursor-label="visit">{p.github}</a></li>
          <li><a className="link" href={`https://${p.linkedin}`} data-cursor-label="visit">{p.linkedin}</a></li>
          <li><a className="link" href={`https://${p.gallery}`}  data-cursor-label="visit">{p.gallery} <span style={{ color: "var(--muted)" }}>(photo gallery)</span></a></li>
          <li><a className="link" href={`https://${p.site}`}     data-cursor-label="visit">{p.site} <span style={{ color: "var(--muted)" }}>(v1, archived)</span></a></li>
          <li><a className="link" href={`mailto:${p.email}`}     data-cursor-label="email">{p.email}</a></li>
        </ul>
      </div>
    </>
  );
}

Object.assign(window, { ViewHome });