const { PageHeader, ReportCard, Notice, Eyebrow } = window.InstituteCanTBeCountedDesignSystem_69f83b;

const REPORTS = [
  { title: "Open research report", date: "March 2027", summary: "Findings from a London network of 15 to 20 cultural organisations working from commercially owned space, weighted towards the three most deprived deprivation deciles.", meta: "Research Lead: Tim Jones, TJ Culture" },
  { title: "Methodology note", date: "November 2026", summary: "How the network was scoped, how participation was agreed, and how the evidence is handled in confidence.", meta: "The Institute" },
  { title: "Interim activity note", date: "November 2026", summary: "A short public summary of what Phase One has convened and learned by the interim point.", meta: "The Institute" }
];

function Reports() {
  return (
    <div>
      <section className="sec-tight" style={{ borderBottom: "1px solid var(--border-rule)" }}>
        <div className="wrap">
          <PageHeader eyebrow="Reports" title="Everything we publish is open."
            lead="Nothing has published yet. Phase One outputs will appear here as they are finished, each with its sources named." />
        </div>
      </section>
      <section className="sec">
        <div className="wrap">
          <Eyebrow style={{ marginBottom: "var(--space-6)" }}>Forthcoming</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-6)" }}>
            {REPORTS.map(r => <ReportCard key={r.title} status="forthcoming" {...r} />)}
          </div>
          <div style={{ marginTop: "var(--space-8)", maxWidth: "var(--container-narrow)" }}>
            <Notice label="Nothing here yet">
              We would rather show an empty shelf than a stock photograph of one. When the first report publishes, it appears here as a free download, with the data behind it described in the methodology note.
            </Notice>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Reports });