const { PageHeader, Figure, Notice, Eyebrow, Quote, Button } = window.InstituteCanTBeCountedDesignSystem_69f83b;

function Row({ term, children }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: "var(--space-7)", padding: "var(--space-5) 0", borderTop: "1px solid var(--border-rule)" }}>
      <Eyebrow>{term}</Eyebrow>
      <div style={{ fontSize: "var(--size-small)", color: "var(--text-body)", textWrap: "pretty" }}>{children}</div>
    </div>
  );
}

function About() {
  return (
    <div>
      <section className="sec-tight" style={{ borderBottom: "1px solid var(--border-rule)" }}>
        <div className="wrap">
          <PageHeader eyebrow="About" title="A research body, founded in 2026."
            lead="The Institute for the Measurement of Things That Can&rsquo;t Be Counted builds evidence about the value of cultural and community spaces that no balance sheet captures." />
        </div>
      </section>

      <section className="sec">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: "var(--space-10)", alignItems: "start" }}>
          <div style={{ maxWidth: "var(--measure-prose)" }}>
            <p>Our launch project, with research partner <a href="https://tjculture.co.uk/">TJ Culture</a>, looks across London at what happens to cultural organisations when the estates around them are professionally asset managed. It covers every deprivation decile, weighted towards the three most deprived, so the effect can be compared rather than asserted.</p>
            <p>The Institute measures. It does not accuse. Where we publish a figure, we name its source beside it. Where something has not been counted yet, we say so.</p>
            <p style={{ marginBottom: 0 }}>We were founded by the <a href="https://bureauofsillyideas.com/">Bureau of Silly Ideas</a>, an arts organisation working since 2002 from the Brixton railway arches, where its founder had been making work since 1992.</p>
            <div style={{ marginTop: "var(--space-8)" }}>
              <Row term="Founded by">The Bureau of Silly Ideas, a not-for-profit company limited by guarantee, company number 04556803.</Row>
              <Row term="Seed funding">Arts Council England, London Investment Fund. Grant reference INVF-00869841. Phase One runs June 2026 to March 2027.</Row>
              <Row term="Research partner">TJ Culture. Research Lead: Tim Jones FRSA, engaged independently, with methodological authority set out in agreed terms of reference.</Row>
              <Row term="Governance">A steering group of four members independent of the Bureau of Silly Ideas, and a working group of six. Pro bono support is engaged.</Row>
              <Row term="Contact">Roger Hartley, <a href="mailto:roger@bureauofsillyideas.com">roger@bureauofsillyideas.com</a></Row>
            </div>
          </div>
          <aside style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
            <Notice label="Awaiting confirmation">Arts Council England logo and funding wording to be placed here once ACE confirms use.</Notice>
            <div style={{ border: "1px solid var(--border-rule)", background: "var(--surface-card)", padding: "var(--space-6)" }}>
              <Eyebrow style={{ marginBottom: "var(--space-5)" }}>Phase One milestones</Eyebrow>
              <ul style={{ margin: 0, paddingLeft: "1.1em", fontSize: "var(--size-small)", color: "var(--text-body)", lineHeight: 1.7 }}>
                <li>Network scoping, from June 2026</li>
                <li>Governance bundle, 20 November 2026</li>
                <li>Fieldwork, November 2026 to January 2027</li>
                <li>Open research report, 28 March 2027</li>
              </ul>
            </div>
            <Figure uncounted accent="wonder" value="The spores that do not return" label="From the artisan cheese analogy in the funded proposal: what a cleared and rebuilt site cannot reassemble." />
          </aside>
        </div>
      </section>

      <section className="sec-tight" style={{ background: "var(--surface-ink)" }}>
        <div className="wrap" style={{ display: "flex", gap: "var(--space-10)", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between" }}>
          <Quote onInk attribution="Roger Hartley" style={{ maxWidth: "58ch" }}>
            It is about being able to measure the thing in a way that is of use. The thing that everybody knows in their gut is good, and how it creates cohesion and joy and well&nbsp;being.
          </Quote>
          <Button variant="onInk" href="mailto:roger@bureauofsillyideas.com">Email the Institute</Button>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { About });