{/* ---- main column ---- */}

{state === "success" ? (

Thanks. Your enquiry is on its way.

This has gone to our {team}. We'll reply within [response window to be confirmed].

In the meantime, you can start a free trial and look around the platform.

) : (

{Object.keys(errors).length > 0 && (

Please fix {Object.keys(errors).length} {Object.keys(errors).length === 1 ? "field" : "fields"} before sending.

{ e.preventDefault(); focusField(k); }}>{FIELD_LABEL[k]}: {errors[k]}

)}

{errors.message && <div style={{ fontFamily: NS, fontSize: 13, color: "var(--negative)", marginTop: 6 }}>{errors.message}</div>}
                  </div>

<Checkbox checked={v.consent} onChange={set("consent")}
                    label={<span style={{ fontSize: 14.5 }}>Send me occasional research highlights and product updates. You can unsubscribe at any time. See our <a href="#privacy">privacy policy</a>.</span>} />

<div style={{ marginTop: 4 }}>
                    <Button type="submit" variant="primary" size="lg" iconEnd={<CIcon name="send" size={17} />}>Send enquiry</Button>
                  </div>
                </div>
              </form>
            )}

{/* Persistent data-protection line — deliberately outside the dropdown */}
            <div style={{ display: "flex", gap: 11, marginTop: 22, paddingTop: 20, borderTop: "1px solid var(--border-subtle)" }}>
              <span style={{ color: "var(--text-muted)", flex: "0 0 auto", marginTop: 1 }}><CIcon name="shield" size={18} /></span>
              <p style={{ fontFamily: NS, fontSize: 13.5, lineHeight: 1.55, color: "var(--text-secondary)", margin: 0 }}>
                Data protection requests, including subject access and right to be forgotten, must be sent to <a href={emailHref("data.protection@capitaleconomics.com")} className="ce-plain-mail" style={{ fontSize: 13.5 }}>data.protection@capitaleconomics.com</a>.
              </p>
            </div>
          </div>

{/* ---- supporting side panel ---- */}
          <aside className="ce-form-side">
            <div className="ce-side-card">
              <div className="ce-eyebrow" style={{ marginBottom: 14 }}>Prefer email?</div>
              <SideRow icon="credit-card" label="Subscriptions" mail="sales@capitaleconomics.com" />
              <SideRow icon="users" label="Consultancy" mail="consultancy@capitaleconomics.com" />
              <SideRow icon="headset" label="Client support" mail="support@capitaleconomics.com" last />
            </div>
            <div className="ce-side-card" style={{ background: "var(--brand-subtle)", border: "1px solid #cdd8f0" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                <span style={{ color: "var(--brand)" }}><CIcon name="clock" size={18} /></span>
                <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 15, color: "var(--text-primary)" }}>What to expect</div>
              </div>
              <p style={{ fontFamily: NS, fontSize: 14, lineHeight: 1.55, color: "var(--text-secondary)", margin: 0 }}>
                Your enquiry is routed straight to the named team. A specialist replies within <strong style={{ color: "var(--text-primary)" }}>[response window to be confirmed]</strong> — no call centre in between.
              </p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function SideRow({ icon, label, mail, last }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 0", borderBottom: last ? "none" : "1px solid var(--border-subtle)" }}>
      <span style={{ width: 30, height: 30, borderRadius: 7, background: "#fff", border: "1px solid var(--border-subtle)", color: "var(--brand)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" }}><CIcon name={icon} size={16} /></span>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: NS, fontSize: 12, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-muted)" }}>{label}</div>
        <a href={emailHref(mail)} className="ce-plain-mail" style={{ fontSize: 14 }}>{mail}</a>
      </div>
    </div>
  );
}

/* ================================================================
   Offices — static three-column block. Two versions:
     • perOffice — each office lists its own contact emails
     • global    — phone is the only per-office detail; support@ once
================================================================ */
const OFFICES = [
  { key: "london", city: "London", phone: "+44 (0)20 7823 5000",
    entity: "Capital Economics Ltd", lines: ["5th Floor, 100 Victoria Street", "Cardinal Place, London", "SW1E 5JL, United Kingdom"],
    emails: ["sales@capitaleconomics.com", "business@capitaleconomics.com", "support@capitaleconomics.com"],
    map: "Capital Economics, 100 Victoria Street, Cardinal Place, London SW1E 5JL" },
  { key: "toronto", city: "Toronto", phone: "+1 416 413 0428",
    entity: "Capital Economics (N.A.) Ltd", lines: ["Suite 600, 77 Bloor Street West", "Toronto, ON", "M5S 1M2, Canada"],
    emails: ["support@capitaleconomics.com"],
    map: "Capital Economics, 77 Bloor Street West, Toronto ON M5S 1M2" },
  { key: "singapore", city: "Singapore", phone: "+65 6595 5190",
    entity: "Capital Economics (Asia) Pte. Ltd", lines: ["05-01/02, CapitaGreen", "138 Market Street", "Singapore 048946"],
    emails: ["support@capitaleconomics.com"],
    map: "Capital Economics, CapitaGreen, 138 Market Street, Singapore 048946" },
];

function OfficesBlock({ variant }) {
  const global = variant === "global";
  return (
    <section style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "64px 32px" }}>
        <SectionHead eyebrow="Our offices" title="Three offices, one team."
          intro="Call the office closest to you. Postal addresses are for correspondence — enquiries are fastest through the routes above." />

<div className="ce-office-grid">
          {OFFICES.map((o) => (
            <div key={o.key} className="ce-office">
              <h3 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 24, letterSpacing: "-0.01em", color: "var(--text-primary)", margin: "0 0 14px" }}>{o.city}</h3>

{/* Phone — most useful item, given the most weight */}
              <a href={telHref(o.phone)} className="ce-tel" style={{ display: "inline-flex", alignItems: "center", gap: 9, fontWeight: 700, fontSize: 20, letterSpacing: "-0.01em" }}>
                <span style={{ color: "var(--brand)" }}><CIcon name="phone" size={18} /></span>{o.phone}
              </a>

{/* Address */}
              <address style={{ fontStyle: "normal", fontFamily: NS, fontSize: 14.5, lineHeight: 1.6, color: "var(--text-secondary)", margin: "16px 0 0" }}>
                <div style={{ fontWeight: 600, color: "var(--text-primary)" }}>{o.entity}</div>
                {o.lines.map((l) => <div key={l}>{l}</div>)}
              </address>
              <a href={mapHref(o.map)} target="_blank" rel="noopener" className="ce-textlink" style={{ marginTop: 12, fontSize: 14 }}>
                <CIcon name="map-pin" size={15} />View on map
              </a>

{/* Per-office contacts (perOffice version only) */}
              {!global && (
                <div className="ce-office-contact">
                  <div style={{ fontFamily: NS, fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 9 }}>Contact</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                    {o.emails.map((m) => <a key={m} href={emailHref(m)} className="ce-plain-mail" style={{ fontSize: 14.5, fontWeight: 600 }}>{m}</a>)}
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>

{/* Global support line (global version only) */}
        {global && (
          <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", marginTop: 32, paddingTop: 26, borderTop: "1px solid var(--border-subtle)" }}>
            <span style={{ color: "var(--brand)" }}><CIcon name="headset" size={18} /></span>
            <span style={{ fontFamily: NS, fontSize: 15, color: "var(--text-secondary)" }}>Client support is a single global inbox:</span>
            <a href={emailHref("support@capitaleconomics.com")} className="ce-plain-mail" style={{ fontSize: 15.5 }}>support@capitaleconomics.com</a>
          </div>
        )}
      </div>
    </section>
  );
}

/* ================================================================
   Response expectation strip — closing, above the footer.
================================================================ */
function ResponseStrip() {
  const items = [
    { icon: "send", h: "After you send", b: "Your enquiry is routed automatically to the team named on the form. Nothing sits in a shared inbox." },
    { icon: "clock", h: "Typical response", b: "A specialist replies within [response window to be confirmed], during office hours across our three regions." },
    { icon: "users", h: "Who replies", b: "The relevant team — subscriptions, consultancy, partnerships, press or client support — not a general agent." },
  ];
  return (
    <section style={{ background: "var(--surface-sunken)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "48px 32px" }}>
        <div className="ce-resp-grid">
          {items.map((it) => (
            <div key={it.h} style={{ display: "flex", gap: 14 }}>
              <span style={{ width: 40, height: 40, borderRadius: 9, background: "var(--surface-card)", border: "1px solid var(--border-subtle)", color: "var(--brand)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" }}><CIcon name={it.icon} size={19} /></span>
              <div>
                <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 15.5, color: "var(--text-primary)", marginBottom: 5 }}>{it.h}</div>
                <p style={{ fontFamily: NS, fontSize: 14.5, lineHeight: 1.55, color: "var(--text-secondary)", margin: 0 }}>{it.b}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   The page.
================================================================ */
function PageContent({ grid, offices, demoForm, onPick, seedReason, formRef }) {
  return (
    <div>
      <SiteHeader />
      <ContactHero />
      <EnquiryForm seedReason={seedReason} demoState={demoForm} formRef={formRef} />
      <TrialBand />
      <RoutingGrid variant={grid} onPick={onPick} />
      <OfficesBlock variant={offices} />
      <ResponseStrip />
      <SiteFooter />
    </div>
  );
}

/* ---- floating harness ---- */
function Seg({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{ border: 0, cursor: "pointer", fontFamily: NS, fontSize: 12.5, fontWeight: 700, padding: "6px 11px", borderRadius: 7, background: active ? "var(--brand)" : "transparent", color: active ? "#fff" : "var(--text-secondary)", whiteSpace: "nowrap" }}>{children}</button>
  );
}
function SegGroup({ label, children }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <span style={{ fontFamily: NS, fontSize: 10.5, fontWeight: 700, letterSpacing: "0.09em", textTransform: "uppercase", color: "var(--text-muted)" }}>{label}</span>
      <div style={{ display: "flex", gap: 2, background: "var(--surface-sunken)", borderRadius: 9, padding: 3 }}>{children}</div>
    </div>
  );
}
function Harness({ grid, setGrid, offices, setOffices, form, setForm, view, setView }) {
  return (
    <div style={{ position: "fixed", bottom: 16, left: "50%", transform: "translateX(-50%)", zIndex: 100, display: "flex", alignItems: "center", gap: 16, background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: 12, boxShadow: "0 10px 34px rgba(36,33,58,0.2)", padding: "9px 14px", maxWidth: "calc(100vw - 24px)", flexWrap: "wrap", justifyContent: "center" }}>
      <SegGroup label="Grid"><Seg active={grid === "cards"} onClick={() => setGrid("cards")}>Cards</Seg><Seg active={grid === "list"} onClick={() => setGrid("list")}>List</Seg></SegGroup>
      <div style={{ width: 1, height: 22, background: "var(--border-default)" }} />
      <SegGroup label="Offices"><Seg active={offices === "perOffice"} onClick={() => setOffices("perOffice")}>Per office</Seg><Seg active={offices === "global"} onClick={() => setOffices("global")}>Global</Seg></SegGroup>
      <div style={{ width: 1, height: 22, background: "var(--border-default)" }} />
      <SegGroup label="Form"><Seg active={form === "empty"} onClick={() => setForm("empty")}>Empty</Seg><Seg active={form === "error"} onClick={() => setForm("error")}>Error</Seg><Seg active={form === "success"} onClick={() => setForm("success")}>Success</Seg></SegGroup>
      <div style={{ width: 1, height: 22, background: "var(--border-default)" }} />
      <SegGroup label="View"><Seg active={view === "desktop"} onClick={() => setView("desktop")}>Desktop</Seg><Seg active={view === "mobile"} onClick={() => setView("mobile")}>Mobile</Seg></SegGroup>
    </div>
  );
}

function App() {
  const [seedReason, setSeedReason] = React.useState("");
  const formRef = React.useRef();

return (
    <div style={{ minHeight: "100vh", background: "var(--surface-page)" }}>
      <PageContent grid="list" offices="global" demoForm="empty" onPick={onPick} seedReason={cleanReason} formRef={formRef} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Get in touch

{t.title}

{t.title}

Thanks. Your enquiry is on its way.