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

function Contact() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: "", org: "", email: "", message: "" });
  const set = k => e => setForm({ ...form, [k]: e.target.value });
  return (
    <div>
      <section className="sec-tight" style={{ borderBottom: "1px solid var(--border-rule)" }}>
        <div className="wrap">
          <PageHeader eyebrow="Contact" title="An open door, and a named person behind it."
            lead="Journalists, landlords, councils, funders and cultural organisations are all welcome to write." />
        </div>
      </section>
      <section className="sec">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: "var(--space-10)", alignItems: "start" }}>
          <div>
            {sent ? (
              <div style={{ border: "1px solid var(--ink)", background: "var(--surface-card)", padding: "var(--space-8)" }}>
                <Eyebrow style={{ marginBottom: "var(--space-5)" }}>Thank you</Eyebrow>
                <h3 style={{ maxWidth: "30ch" }}>Your message is with Roger. You will hear back from a person, not a form.</h3>
                <p style={{ marginTop: "var(--space-5)", marginBottom: 0, fontSize: "var(--size-small)", color: "var(--text-quiet)" }}>
                  Prototype only. Nothing was sent. Write to <a href="mailto:roger@bureauofsillyideas.com">roger@bureauofsillyideas.com</a>.
                </p>
              </div>
            ) : (
              <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{ display: "grid", gap: "var(--space-6)", maxWidth: "560px" }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-6)" }}>
                  <Field label="Your name" name="name" required value={form.name} onChange={set("name")} />
                  <Field label="Organisation" name="org" value={form.org} onChange={set("org")} />
                </div>
                <Field label="Email" name="email" type="email" required value={form.email} onChange={set("email")}
                  hint="We reply from roger@bureauofsillyideas.com until the Institute&rsquo;s own domain is live." />
                <Field label="How can we help?" name="message" rows={5} value={form.message} onChange={set("message")}
                  placeholder="A sentence is plenty." />
                <div><Button onClick={() => setSent(true)}>Send</Button></div>
              </form>
            )}
          </div>
          <aside style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
            <div style={{ borderTop: "2px solid var(--ink)", paddingTop: "var(--space-5)" }}>
              <Eyebrow style={{ marginBottom: "var(--space-4)" }}>Or write directly</Eyebrow>
              <p style={{ margin: 0, fontSize: "var(--size-lead)" }}><a href="mailto:roger@bureauofsillyideas.com">roger@bureauofsillyideas.com</a></p>
              <p style={{ margin: "var(--space-4) 0 0", fontSize: "var(--size-caption)", color: "var(--text-source)" }}>Roger Hartley, founder. Brixton, London.</p>
            </div>
            <Notice label="For journalists">Figures on this site carry their source. For anything not published here, write and ask. We will point you to the evidence or tell you it does not exist yet.</Notice>
          </aside>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Contact });