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

function Home({ go }) {
  return (
    <div>
      <section style={{ background: "var(--graph-paper)", borderBottom: "1px solid var(--border-rule)" }} className="sec">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "0.85fr 1fr", gap: "var(--space-10)", alignItems: "center" }}>
          <div>
            <PageHeader
              eyebrow="Phase One &middot; June 2026 to March 2027"
              title="We measure what the spreadsheet misses."
              lead="We build evidence about the value of cultural and community spaces that no balance sheet captures." />
            <div style={{ display: "flex", gap: "var(--space-5)", marginTop: "var(--space-8)", flexWrap: "wrap" }}>
              <Button onClick={() => go("research")}>Read what we are doing</Button>
              <Button variant="secondary" onClick={() => go("contact")}>Get in touch</Button>
            </div>
          </div>
          <IntangibleChart
            width={640} height={330}
            caption="Illustrative. One season in one building, counted four ways it cannot be. The solid part is what got measured."
            source="the ACE project outline, June 2026"
            series={[
              { intangible: "counted", label: "Tickets sold", value: 1840, display: "1,840" },
              { intangible: "joy", label: "Joy", value: 1620 },
              { intangible: "belonging", label: "Belonging", value: 1490 },
              { intangible: "wonder", label: "Wonder", value: 2100 },
              { intangible: "laugh", label: "A laugh", value: 1950 }
            ]} />
        </div>
      </section>

      <section className="sec">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: "var(--space-10)", alignItems: "start" }}>
          <div>
            <Eyebrow style={{ marginBottom: "var(--space-5)" }}>The problem, in one shape</Eyebrow>
            <p style={{ fontSize: "var(--size-lead)", lineHeight: "var(--lh-lead)", color: "var(--text-quiet)", maxWidth: "var(--measure-lead)" }}>
              We can count seats sold and money spent. We cannot count the fourteen year old who found a way in, or the street that started to feel like it belonged to somebody. Those things are real. They just don&rsquo;t have a column. So we built somewhere to put them.
            </p>
            <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap", marginTop: "var(--space-6)" }}>
              <IntangibleTag name="joy" />
              <IntangibleTag name="laugh" />
              <IntangibleTag name="wonder" />
              <IntangibleTag name="belonging" />
            </div>
          </div>
          <UncountedBarChart
            height={220}
            caption="Illustrative."
            source="the ACE project outline, June 2026"
            bars={[
              { label: "Rent", value: 38 },
              { label: "Seats sold", value: 50 },
              { label: "Footfall", value: 62 },
              { label: "What the place is worth to the people in it", value: 96, uncounted: true, accent: "joy" }
            ]} />
        </div>
      </section>

      <section className="sec-tight" style={{ background: "var(--surface-ink)" }}>
        <div className="wrap">
          <Quote size="lg" onInk attribution="Roger Hartley" role="founder, Bureau of Silly Ideas">
            Landlords, planners and investors make their decisions in a language of value, cost and risk. We tend to answer in a language of art and community, and the two don&rsquo;t meet.
          </Quote>
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <Eyebrow style={{ marginBottom: "var(--space-7)" }}>What Phase One covers</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "var(--space-8)" }}>
            <Figure value="15 to 20" label="Cultural organisations convened across London, all working from commercially owned space." source="ACE London Investment Fund project outline, 2026" />
            <Figure value="Deciles 1 to 3" label="Index of Multiple Deprivation bands the network is weighted towards." source="ACE London Investment Fund project outline, 2026" />
            <Figure value="4.4%" label="Annual outperformance of the London residential market by property beside active creative clusters, over ten years." source="Creative Land Trust / Hawkins&rsquo;Brown / Dataloft, 2021" />
          </div>
          <div style={{ marginTop: "var(--space-8)", maxWidth: "var(--container-narrow)" }}>
            <Notice label="Method note">
              The launch project asks whether the evidence gap is real or communicative, what language moves asset managers, and which models of engagement between cultural tenants and institutional landlords have lasted. Findings are published openly.
            </Notice>
          </div>
        </div>
      </section>

      <section className="sec-tight" style={{ borderTop: "1px solid var(--border-rule)" }}>
        <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "var(--space-8)", flexWrap: "wrap" }}>
          <div>
            <h2 style={{ maxWidth: "26ch", textWrap: "pretty" }}>If you work from commercially owned space, we would like to hear from you.</h2>
            <p style={{ marginTop: "var(--space-5)", marginBottom: 0, color: "var(--text-quiet)", maxWidth: "46ch" }}>Steering group places and research participation are both open.</p>
          </div>
          <Button onClick={() => go("contact")}>Get in touch</Button>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Home });