// BlueprintReportTOC.jsx
// Table of contents, single page

function TOCPage() {
  const rows = [
    { num: "01", title: "About this Blueprint",          page: "05" },
    { num: "02", title: "Current state assessment",      page: "08" },
    { num: "03", title: "The Five Pillars analysis",     page: "11" },
    { num: "04", title: "Prioritised use cases",         page: "22" },
    { num: "05", title: "Implementation roadmap",        page: "27" },
    { num: "06", title: "Governance & risk",             page: "30" },
    { num: "07", title: "Next steps & sign-off",         page: "33" },
    { num: "A",  title: "Glossary",                       page: "35" },
    { num: "B",  title: "Data sources & inputs",          page: "36" },
    { num: "C",  title: "Methodology",                    page: "37" },
  ];
  const front = [
    { label: "Executive summary",       page: "03" },
    { label: "Bottom-line outcome",     page: "04" },
  ];

  return (
    <window.ReportPage page={2} total={37} headerRight="Contents">
      <div style={{display: "flex", flexDirection: "column", gap: "24pt", flex: "1 1 auto"}}>
        <div>
          <div className="rp-section-eyebrow">Contents</div>
          <h2 className="rp-h1" style={{maxWidth: "22ch"}}>
            What is in this <i className="emph">document</i><i className="stop">.</i>
          </h2>
          <p className="rp-lede" style={{marginTop: "12pt", maxWidth: "56ch"}}>
            Seven sections, three appendices. The Executive Summary and Bottom-Line
            Outcome page (next two pages) are designed to be read first, alone, by
            anyone for whom the rest of the document is too detailed.
          </p>
        </div>

        <div>
          <div className="rp-toc__group-label">Front matter</div>
          {front.map(f => (
            <div className="rp-toc__row" key={f.label}>
              <div className="rp-toc__num"></div>
              <div className="rp-toc__title">{f.label}</div>
              <div className="rp-toc__leader"></div>
              <div className="rp-toc__page">{f.page}</div>
            </div>
          ))}
        </div>

        <div>
          <div className="rp-toc__group-label">Sections</div>
          {rows.slice(0, 7).map(r => (
            <div className="rp-toc__row" key={r.num}>
              <div className="rp-toc__num">{r.num}</div>
              <div className="rp-toc__title">{r.title}</div>
              <div className="rp-toc__leader"></div>
              <div className="rp-toc__page">{r.page}</div>
            </div>
          ))}
        </div>

        <div>
          <div className="rp-toc__group-label">Appendices</div>
          {rows.slice(7).map(r => (
            <div className="rp-toc__row" key={r.num}>
              <div className="rp-toc__num">{r.num}</div>
              <div className="rp-toc__title">{r.title}</div>
              <div className="rp-toc__leader"></div>
              <div className="rp-toc__page">{r.page}</div>
            </div>
          ))}
        </div>
      </div>
    </window.ReportPage>
  );
}

window.TOCPage = TOCPage;