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

const QUESTIONS = [
  "Is the evidence gap real or communicative? Do organisations need help building evidence, or translating what they already have?",
  "What language moves asset managers?",
  "What engagement models between cultural tenants and institutional landlords have worked, and why?",
  "What does peer practice in comparable cities tell us?",
  "What would a sector facing toolkit need to contain to be genuinely useful?"
];

const PHASES = [
  { n: "01", t: "Set-up", d: "June to July 2026", b: "Research lead engagement confirmed. Network scoping begins across the most deprived boroughs." },
  { n: "02", t: "Convening and governance", d: "August to October 2026", b: "Working group of six and independent steering group of four stood up. Methodology developed and documented." },
  { n: "03", t: "Research delivery", d: "November 2026 to January 2027", b: "Fieldwork across the network. Lease negotiations under way, tenure changes secured, and the support asset managers give cultural tenants." },
  { n: "04", t: "Synthesis and publication", d: "February to March 2027", b: "Report drafted, reviewed with the network, and published openly as a sector resource." }
];

function Research() {
  return (
    <div>
      <section className="sec-tight" style={{ borderBottom: "1px solid var(--border-rule)" }}>
        <div className="wrap">
          <PageHeader eyebrow="Launch project" title="What happens to cultural organisations when the estates around them are asset managed."
            lead="A London network of 15 to 20 cultural organisations working from commercially owned space, building the evidence base that does not yet exist." />
        </div>
      </section>

      <section className="sec">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-10)", alignItems: "start" }}>
          <div>
            <Eyebrow style={{ marginBottom: "var(--space-6)" }}>The five questions</Eyebrow>
            <ol style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column" }}>
              {QUESTIONS.map((q, i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: "var(--space-5)", padding: "var(--space-5) 0", borderTop: "1px solid var(--border-rule)" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--size-caption)", color: "var(--text-source)", paddingTop: "3px" }}>{"0" + (i + 1)}</span>
                  <span style={{ fontSize: "var(--size-small)", lineHeight: 1.6, textWrap: "pretty" }}>{q}</span>
                </li>
              ))}
            </ol>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-8)" }}>
            <UncountedBarChart height={190} caption="Illustrative." source="the ACE project outline, June 2026"
              bars={[
                { label: "Yield per square foot", value: 44 },
                { label: "Dwell time", value: 55 },
                { label: "Planning defensibility", value: 66 },
                { label: "The S in ESG, for cultural tenants", value: 94, uncounted: true, accent: "wonder" }
              ]} />
            <Figure value="£25,000" label="Phase One award from the Arts Council England London Investment Fund." source="ACE offer letter, 10 June 2026" />
          </div>
        </div>
      </section>

      <section className="sec-tight" style={{ background: "var(--surface-sunken)", borderTop: "1px solid var(--border-rule)", borderBottom: "1px solid var(--border-rule)" }}>
        <div className="wrap">
          <Eyebrow style={{ marginBottom: "var(--space-7)" }}>How Phase One runs</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "var(--space-7)" }}>
            {PHASES.map(p => (
              <div key={p.n} style={{ borderTop: "2px solid var(--ink)", paddingTop: "var(--space-5)" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--size-caption)", color: "var(--text-source)" }}>{p.n}</span>
                <h4 style={{ marginTop: "var(--space-3)" }}>{p.t}</h4>
                <p style={{ margin: "var(--space-3) 0 var(--space-4)", fontSize: "var(--size-caption)", color: "var(--text-source)" }}>{p.d}</p>
                <p style={{ margin: 0, fontSize: "var(--size-small)", color: "var(--text-quiet)", textWrap: "pretty" }}>{p.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-8)", maxWidth: "var(--container-narrow)" }}>
          <div>
            <h3>Join the steering group</h3>
            <p style={{ marginTop: "var(--space-4)", fontSize: "var(--size-small)", color: "var(--text-quiet)" }}>Four members independent of the Bureau of Silly Ideas, shaping the methodology and steering the work. A light commitment, and a genuinely influential one.</p>
            <Button size="sm" href="mailto:roger@bureauofsillyideas.com?subject=Steering%20group">Ask about a place</Button>
          </div>
          <div>
            <h3>Take part in the research</h3>
            <p style={{ marginTop: "var(--space-4)", fontSize: "var(--size-small)", color: "var(--text-quiet)" }}>Share your experience and data, in confidence, so your situation is mapped alongside others. This is what makes the evidence credible.</p>
            <Button size="sm" variant="secondary" href="mailto:roger@bureauofsillyideas.com?subject=Taking%20part">Ask how it works</Button>
          </div>
        </div>
        <div className="wrap" style={{ maxWidth: "var(--container-narrow)", marginTop: "var(--space-8)" }}>
          <Notice label="Independence">The research serves the network as a whole. It is not a campaign for any single organisation&rsquo;s situation.</Notice>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Research });