/* global React, Crumbs, ImageSlot */
/* ============================================================================
   sections/projects.jsx — the "projects/" page.
   ----------------------------------------------------------------------------
   The whole projects page. Every project in data.projects becomes its own
   roomy CARD with clear breathing room between them (see .pf-project /
   .pf-projects in styles.css) — that's the fix for the old cramped list where
   entries ran together.

   Each card has:
     • an image slot (left on desktop, top on mobile)
     • an index number + the project's real NAME (not a "slug.md")
     • a meta row: type · role · year
     • the summary, the tech stack, and repo / live links

   📷 ADDING A SCREENSHOT TO A PROJECT
     1. Drop the image into  public/images/   (e.g. everyday-tracking.png)
     2. In src/data.js, set that project's `image` field to its path:
            image: "public/images/everyday-tracking.png"
     The <ImageSlot> swaps the placeholder for your screenshot automatically.

   Props:  data — window.PORTFOLIO
           navigate(page) — used by the "back to README" link
   ============================================================================ */
function ViewProjects({ data, navigate }) {
  return (
    <>
      <Crumbs parts={["~", "portfolio", "projects/"]} />
      <h1 className="rm-h1"><span className="hash">#</span>Projects</h1>

      <div className="rm-prose">
        <p style={{ color: "var(--muted)", fontSize: 14 }}>
          {data.projects.length} projects. Most have public repos. Click a name to jump to it.
        </p>
      </div>

      {/* Quick index — chips that scroll to each card */}
      <nav className="pf-index" aria-label="Project index">
        {data.projects.map((pr) => (
          <a key={pr.id} href={`#prj-${pr.id}`} data-cursor-label="jump">{pr.name}</a>
        ))}
      </nav>

      {/* The cards */}
      <div className="pf-projects">
        {data.projects.map((pr, i) => (
          <article key={pr.id} id={`prj-${pr.id}`} className="pf-project">
            {/* Cover image only when a screenshot exists. With no image the card
                simply leads with the project NAME (no placeholder box). Add one
                by setting `image` in data.js — see the note at the top. */}
            {pr.image && (
              <div className="cover">
                <ImageSlot src={pr.image} alt={`${pr.name} screenshot`} caption={pr.name} />
              </div>
            )}

            {/* Text body */}
            <div className="body">
              <span className="idx">{String(i + 1).padStart(2, "0")} / {String(data.projects.length).padStart(2, "0")}</span>
              <h2 className="pf-name">{pr.name}</h2>

              <div className="meta">
                <span><b>{pr.type}</b></span>
                <span>{pr.role}</span>
                <span>{pr.tag}</span>
                <span>{pr.year}</span>
              </div>

              <p className="sum">{pr.summary}</p>

              <div className="rm-badges">{pr.stack.map((s) => <span key={s}>{s}</span>)}</div>

              {(pr.links.repo || pr.links.live) && (
                <div className="links">
                  {pr.links.repo && (
                    <a href={`https://${pr.links.repo}`} target="_blank" rel="noopener" data-cursor-label="repo →">
                      ⌥ repo
                    </a>
                  )}
                  {pr.links.live && (
                    <a href={`https://${pr.links.live}`} target="_blank" rel="noopener" data-cursor-label="open →">
                      ↗ live site
                    </a>
                  )}
                </div>
              )}
            </div>
          </article>
        ))}
      </div>

      {/* Back to home */}
      <div style={{ marginTop: 48, padding: "16px 0", borderTop: "1px solid var(--rule)",
                    fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted)" }}>
        <a href="#" onClick={(e) => { e.preventDefault(); navigate("home"); }}
           data-cursor-label="back" style={{ color: "var(--accent)", textDecoration: "none" }}>← README.md</a>
      </div>
    </>
  );
}

Object.assign(window, { ViewProjects });