/* ================================================================
   about.jsx — Capital Economics "About Us" (1 July MVP).
   A trust-verification page for a senior, sales-referred reader.
   Order: Hero → People → Independence → Track record → Independently
   rated → Institution → Careers band → Closing (inverted CTA).
   Shared chrome/components come from shared.jsx via window.
   Copy is verbatim from CE_About_Page_Copy.md.
================================================================ */
const {
  Icon, MAX, NS, SERIF, Eyebrow, SectionHead, SiteHeader, SiteFooter,
} = window;
const { Button } = window.CapitalEconomicsDesignSystem_f2a5b2;

/* ----------------------------------------------------------------
   Section 1 — Hero. Tone-setting, restrained. Eyebrow, H1, subhead,
   one quiet "Talk to our team" link. No "Start free trial" here.
---------------------------------------------------------------- */
function AboutHero() {
  const creds = [
    ["Since 1999", "independent"],
    ["60+", "economists"],
    ["100+", "economies"],
    ["No banking arm", "no book to trade"],
  ];
  return (
    <section style={{ background: "#1d233f", position: "relative", overflow: "hidden" }}>
      <MarketCircles style={{ position: "absolute", right: -30, top: 6, width: "min(58%, 780px)", height: "auto", opacity: 1, pointerEvents: "none", overflow: "visible" }} />
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "84px 32px 0", position: "relative", zIndex: 1, display: "flex", flexDirection: "column", minHeight: 560 }}>
        <div style={{ maxWidth: 640, marginBottom: 64 }}>
          <Eyebrow style={{ marginBottom: 18, color: "var(--ce-blue-light)" }}>Who we are</Eyebrow>
          <h1 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 50, lineHeight: 1.08, letterSpacing: "-0.02em", color: "#fff", margin: 0, maxWidth: 620 }}>
            Challenging consensus. Delivering independent insight.
          </h1>
          <p style={{ fontFamily: NS, fontSize: 19, lineHeight: 1.58, color: "var(--text-on-navy)", margin: "24px 0 30px", maxWidth: 560 }}>
            An independent macroeconomic research firm since 1999. More than 60 economists across 100+ economies,
            no banking arm and no book to trade, so the only thing we are paid to do is be right.
          </p>
          <a href="#talk" className="ce-textlink ce-textlink-light">Talk to our team<Icon name="arrow-right" size={15} /></a>
        </div>

        {/* Credential bar — horizontal, aligned to the bottom of the hero */}
        <div style={{ marginTop: "auto", paddingTop: 28, paddingBottom: 40, borderTop: "1px solid rgba(255,255,255,0.16)", display: "flex", flexWrap: "wrap", gap: "22px 72px" }}>
          {creds.map(([n, l]) => (
            <div key={n}>
              <div style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 26, lineHeight: 1.1, letterSpacing: "-0.01em", color: "#fff", whiteSpace: "nowrap" }}>{n}</div>
              <div style={{ fontFamily: NS, fontSize: 14, color: "rgba(255,255,255,0.6)", marginTop: 4 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 2 — The people. Named, senior, real. An empty leadership
   slot leads the grid; three confirmed economists follow, each with
   a swappable photo placeholder, name, title (navy caps) and bio.
---------------------------------------------------------------- */
function PersonCard({ photo, name, title, bio }) {
  return (
    <div style={{ display: "flex", gap: 26 }}>
      <img src={photo} alt={name} style={{ width: 176, height: 222, flex: "0 0 auto", objectFit: "cover", objectPosition: "50% 18%", borderRadius: 8, display: "block" }} />
      <div style={{ flex: 1 }}>
        <h3 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 24, letterSpacing: "-0.01em", color: "var(--text-primary)", margin: 0 }}>{name}</h3>
        <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 11.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--brand)", margin: "9px 0 15px" }}>{title}</div>
        <p style={{ fontFamily: NS, fontSize: 15, lineHeight: 1.6, color: "var(--text-secondary)", margin: 0 }}>{bio}</p>
      </div>
    </div>
  );
}

function PeopleSection() {
  const people = [
    { photo: "assets/people/Grant-Colquhoun.png", name: "Grant Colquhoun", title: "Chief Economist",
      bio: "Grant joined CE in 2018 and leads its economic research. He has run due-diligence, scenario-planning and advisory work across a wide range of economies, with particular depth on China and on forecasting individual sectors internationally. Before CE he was Group Economist at a leading mining and metals consultancy, ran Oxford Economics' sectoral forecasting service, and held economist posts at HM Treasury and British Steel." },
    { photo: "assets/people/Paul-Dales.png", name: "Paul Dales", title: "Chief UK Economist",
      bio: "Paul leads CE's analysis and forecasts for the UK economy and UK housing. He joined soon after the firm was founded in 1999, and has previously been Chief Australia and New Zealand Economist and Senior US Economist. In 2022 he led the team named UK Economics Forecaster of the Year by the Sunday Times. He writes regularly for the Evening Standard and appears frequently on TV and radio." },
    { photo: "assets/people/Paul-Ashworth.png", name: "Paul Ashworth", title: "Chief Data and Modelling Economist",
      bio: "Paul has overall responsibility for the Data and Modelling team. He joined CE in 2001 and has led the Toronto office since 2007. Before CE he was at the National Institute of Economic and Social Research, working on its large-scale model of the global economy with responsibility for several countries including Canada and Germany." },
    { photo: "assets/people/Ruth-Gregory.png", name: "Ruth Gregory", title: "Deputy Chief UK Economist",
      bio: "Ruth has more than 15 years' experience analysing the UK economy. Before joining CE in 2015 she was a UK economist at the Office for Budget Responsibility, the CBI and HM Treasury. In 2026 she was a finalist in the \u201cAnalyst of the Year\u201d category at the City AM Awards, and in 2022 was part of the team named UK Economics Forecaster of the Year by the Sunday Times." },
  ];
  return (
    <section style={{ background: "var(--surface-page)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "64px 32px" }}>
        <SectionHead
          eyebrow="The people"
          title="The economists behind the research."
          intro="Every view CE publishes carries an economist's name. These are career macro economists, accountable for what they forecast, not anonymous analysts behind a house line. A few of the senior people whose work you would be relying on:"
          maxTitle={640}
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "48px 56px" }}>
          {people.map((p) => <PersonCard key={p.name} {...p} />)}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 3 — Independence, made structural. Intro + six flat points.
---------------------------------------------------------------- */
function IndependenceSection() {
  const points = [
    ["No sell-side conflict.", "CE runs no investment bank, underwrites nothing and has no brokerage to feed."],
    ["No book to talk.", "CE does not trade for its own account, so there is no position behind the view and no trade the narrative is built to suit."],
    ["Subscription-funded.", "The only thing CE is paid to do is be useful and be right. The commercial incentive and the intellectual one point the same way."],
    ["Built in-house, peer-reviewed.", "Baseline forecasts are produced internally and put through ongoing senior peer review, not bought in or syndicated. The structural model of the economy is built and maintained in-house."],
    ["Benchmarked to the central banks.", "CE's approach to forward-looking scenario distributions is aligned with the methods used by the Bank of England and the European Central Bank, the institutions this work is held to, not improvised in isolation."],
    ["Named and accountable.", "Every published view has an economist's name on it."],
  ];
  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="Independence"
          title="Independent by structure, not by claim."
          intro="Everyone in research says they are independent. The question worth asking is what makes it true. For CE, it is structural:"
          maxTitle={640}
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "0 56px" }}>
          {points.map(([lead, rest], i) => (
            <div key={lead} style={{ padding: "30px 0", borderTop: "1px solid var(--border-subtle)", display: "flex", gap: 26, alignItems: "flex-start" }}>
              <span style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 50, lineHeight: 0.9, letterSpacing: "-0.03em", color: "var(--brand)", fontVariantNumeric: "tabular-nums", flex: "0 0 auto", width: 56 }}>{String(i + 1).padStart(2, "0")}</span>
              <p style={{ fontFamily: NS, fontSize: 16, lineHeight: 1.6, color: "var(--text-secondary)", margin: 0, paddingTop: 3 }}>
                <strong style={{ color: "var(--text-primary)", fontWeight: 700 }}>{lead}</strong> {rest}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 4 — The track record. Six dated, vindicated calls
   foregrounded; the corporate-milestone context line quieter beneath.
   Static and scannable — never a slider.
---------------------------------------------------------------- */
function TrackRecordSection() {
  const entries = [
    { y: "1999", t: "Founded in London", b: "Founded in London to provide independent insight into UK macro and markets to global institutional investors." },
    { y: "2002", t: "The China Activity Proxy", b: "The widely followed China Activity Proxy was launched to give clients a clearer, unbiased measure of Chinese economic activity, independent of official sources." },
    { y: "2005", t: "The US housing bubble", b: "Among the first to identify the US housing market bubble that ended in the Global Financial Crisis and warned of a US economic downturn, even as the consensus continued to expect strong growth." },
    { y: "2009", t: "Coverage expanded", b: "Coverage expanded to give clients a fuller picture of global macroeconomic developments." },
    { y: "2010", t: "Rates on hold", b: "The Wall Street Journal names Capital Economics US Forecaster of the Year and showcases our non-consensus call that interest rates would stay put for years. In the end, rates weren\u2019t raised until 2015.", award: true },
    { y: "2011", t: "The Wolfson Prize", b: "Won the inaugural Wolfson Economics Prize for explaining how a country could leave the euro-zone.", award: true },
    { y: "2012", t: "CE Consultancy launches", b: "CE Consultancy is launched to provide customised macroeconomic and market insight." },
    { y: "2013", t: "The end of the EM \u201cgolden age\u201d", b: "Correctly warned of the end of the \u2018golden age\u2019 of emerging market growth." },
    { y: "2014", t: "The data service launches", b: "Our data service is launched to give clients direct access to the numbers that power our analysis." },
    { y: "2021", t: "No commodity \u201csupercycle\u201d", b: "We correctly argued against the popular idea that another \u2018supercycle\u2019 was emerging in commodity markets." },
    { y: "2023", t: "AI and equities", b: "Named Sunday Times UK Forecaster of the Year for a third year. New analysis on AI\u2019s global impact fuelled non-consensus equities views which swept LSEG forecast accuracy awards for 2023.", award: true },
    { y: "2025", t: "Top of the field again", b: "Dominated FocusEconomics\u2019 annual analyst awards again with most wins for overall coverage of DMs, EMs and commodities.", award: true },
  ];

  function entryBlock(e, align) {
    return (
      <div style={{ display: "inline-block", maxWidth: 410, textAlign: align }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, justifyContent: align === "right" ? "flex-end" : "flex-start" }}>
          <span style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 31, letterSpacing: "-0.01em", color: "var(--brand)", lineHeight: 1, fontVariantNumeric: "tabular-nums" }}>{e.y}</span>
          {e.award && <span style={{ fontFamily: NS, fontWeight: 700, fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "#0C978B", background: "rgba(12,151,139,0.12)", padding: "3px 9px", borderRadius: 999 }}>Award</span>}
        </div>
        <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 17.5, color: "var(--text-primary)", margin: "13px 0 9px" }}>{e.t}</div>
        <div style={{ fontFamily: NS, fontSize: 14.5, lineHeight: 1.6, color: "var(--text-secondary)" }}>{e.b}</div>
      </div>
    );
  }

  return (
    <section style={{ background: "var(--surface-page)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "64px 32px" }}>
        <SectionHead
          eyebrow="The track record"
          title="A track record of being right when it was unpopular."
          intro="More than 20 years of forecasting, and the calls worth judging us on are the ones we made against the consensus and got right."
          maxTitle={760}
          center
        />
        <div style={{ position: "relative", maxWidth: 1020, margin: "12px auto 0" }}>
          {/* Central spine */}
          <div aria-hidden="true" style={{ position: "absolute", left: "50%", transform: "translateX(-50%)", top: 8, bottom: 8, width: 2, background: "var(--border-default)" }}></div>
          {entries.map((e, i) => {
            const left = i % 2 === 0;
            return (
              <div key={e.y} style={{ display: "grid", gridTemplateColumns: "1fr 56px 1fr", alignItems: "start" }}>
                <div style={{ gridColumn: 1, paddingRight: 12, paddingBottom: 44 }}>
                  {left ? entryBlock(e, "right") : null}
                </div>
                <div style={{ gridColumn: 2, position: "relative", display: "flex", justifyContent: "center" }}>
                  <span aria-hidden="true" style={{ position: "absolute", top: 15, height: 2, width: 22, background: "var(--border-default)", ...(left ? { right: "50%" } : { left: "50%" }) }}></span>
                  {e.award ? (
                    <span style={{ width: 15, height: 15, borderRadius: "50%", background: "#0C978B", marginTop: 8, zIndex: 1, boxShadow: "0 0 0 4px var(--surface-page)" }}></span>
                  ) : (
                    <span style={{ width: 14, height: 14, borderRadius: "50%", background: "var(--surface-page)", border: "2px solid var(--brand)", boxSizing: "border-box", marginTop: 8, zIndex: 1 }}></span>
                  )}
                </div>
                <div style={{ gridColumn: 3, paddingLeft: 12, paddingBottom: 44 }}>
                  {!left ? entryBlock(e, "left") : null}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 5 — Independently rated (awards + press).
---------------------------------------------------------------- */
function RatedSection() {
  const awards = [
    ["Three-time top forecaster of major economies", "Refinitiv, 2024 to 2025"],
    ["Most first-place wins for overall forecasting accuracy", "FocusEconomics analyst awards"],
    ["UK Economics Forecaster of the Year", "The Sunday Times"],
    ["Forecast-accuracy awards", "LSEG and the Wall Street Journal"],
  ];
  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="Validation"
          title="Independently rated for accuracy."
          intro="We do not mark our own homework. The record is rated by third parties, on the only metric that matters: accuracy. CE economists are quoted on the macro events that move markets in the Financial Times, The Times and City AM, among others."
          maxTitle={640}
        />
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 56, alignItems: "start" }}>
          <div>
            {awards.map(([award, body], i) => (
              <div key={award} style={{ display: "flex", gap: 16, padding: "20px 0", borderTop: "1px solid var(--border-subtle)", borderBottom: i === awards.length - 1 ? "1px solid var(--border-subtle)" : "none" }}>
                <Icon name="award" size={20} style={{ color: "var(--brand)", flex: "0 0 auto", marginTop: 2 }} />
                <div>
                  <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 16, color: "var(--text-primary)" }}>{award}</div>
                  <div style={{ fontFamily: NS, fontSize: 14.5, color: "var(--text-secondary)", marginTop: 3 }}>{body}</div>
                </div>
              </div>
            ))}
          </div>
          {/* In the press — shown as a wireframe phone news feed */}
          <div>
            <div style={{ position: "relative", maxWidth: 364, margin: "0 auto", height: 452, overflow: "hidden" }}>
              <div style={{ position: "relative", borderRadius: 46, border: "2px solid var(--border-default)", background: "var(--surface-card)", padding: 11, boxShadow: "0 24px 60px rgba(20,30,60,0.14)" }}>
                <div style={{ position: "relative", borderRadius: 35, overflow: "hidden", background: "#fff", border: "1px solid var(--border-subtle)", height: 600 }}>
                  {/* notch */}
                  <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: 128, height: 23, background: "var(--surface-card)", borderBottomLeftRadius: 13, borderBottomRightRadius: 13, zIndex: 4 }}></div>
                  {/* status bar */}
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "9px 24px 0", fontFamily: NS, fontSize: 11.5, fontWeight: 700, color: "var(--text-primary)" }}>
                    <span>9:41</span>
                    <span style={{ display: "inline-flex", alignItems: "center", gap: 5, color: "var(--text-muted)" }}>
                      <span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: "0.04em" }}>5G</span>
                      <span style={{ width: 18, height: 9, border: "1.4px solid currentColor", borderRadius: 2, display: "inline-block", position: "relative" }}>
                        <span style={{ position: "absolute", inset: 1.5, right: 6, background: "currentColor", borderRadius: 1 }}></span>
                      </span>
                    </span>
                  </div>
                  {/* app header */}
                  <div style={{ padding: "16px 20px 13px", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <div>
                      <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 10, letterSpacing: "0.13em", textTransform: "uppercase", color: "var(--text-muted)" }}>Newsfeed</div>
                      <div style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 20, letterSpacing: "-0.01em", color: "var(--text-primary)", marginTop: 2, whiteSpace: "nowrap" }}>In the press</div>
                    </div>
                    <span style={{ width: 34, height: 34, borderRadius: "50%", border: "1.4px solid var(--border-default)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--text-secondary)" }}>
                      <Icon name="bell" size={16} />
                    </span>
                  </div>
                  {/* feed */}
                  <div>
                    {[
                      ["assets/press/financial-times.png", 10, "2h", "Capital Economics warns the Bank of England will cut rates later than markets expect"],
                      ["assets/press/the-times.webp", 10, "6h", "Higher for longer: CE says the cost of capital has reset for the decade"],
                      ["assets/press/city-am.png", 12, "1d", "Capital Economics: UK growth set to outpace consensus in 2026"],
                      ["assets/press/financial-times.png", 10, "2d", "CE economists flag China property drag on the global outlook"],
                      ["assets/press/the-times.webp", 10, "3d", "CE: the Fed's December cut still looks likely despite sticky inflation"],
                    ].map(([src, h, time, headline], i) => (
                      <div key={i} style={{ display: "flex", gap: 14, padding: "15px 20px", borderBottom: "1px solid var(--border-subtle)" }}>
                        <div style={{ flex: 1 }}>
                          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                            <img src={src} alt="" style={{ height: h, width: "auto", maxWidth: 92, objectFit: "contain", mixBlendMode: "multiply" }} />
                            <span style={{ width: 3, height: 3, borderRadius: "50%", background: "var(--text-muted)", display: "inline-block" }}></span>
                            <span style={{ fontFamily: NS, fontSize: 10.5, color: "var(--text-muted)" }}>{time}</span>
                          </div>
                          <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 13.5, lineHeight: 1.32, color: "var(--text-primary)" }}>{headline}</div>
                        </div>
                        <div style={{ width: 56, height: 56, flex: "0 0 auto", borderRadius: 8, background: "var(--surface-sunken)", border: "1px solid var(--border-subtle)" }}></div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
              {/* crop fade at the bottom of the (shortened) phone */}
              <div aria-hidden="true" style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 90, background: "linear-gradient(rgba(255,255,255,0), var(--surface-card))", zIndex: 5 }}></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 6 — The institution. Plain facts band, no logos.
---------------------------------------------------------------- */
function InstitutionSection() {
  const facts = [
    ["1999", "Independent since"],
    ["60+", "Economists"],
    ["100+", "Economies covered"],
    ["3", "Offices: London, Toronto, Singapore"],
  ];
  return (
    <section style={{ background: "#1d233f" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "64px 32px" }}>
        <Eyebrow style={{ marginBottom: 16, color: "var(--ce-blue-light)" }}>The institution</Eyebrow>
        <h2 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 36, lineHeight: 1.13, letterSpacing: "-0.015em", color: "#fff", margin: "0 0 44px", maxWidth: 640 }}>
          A serious institution, by the numbers.
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "0.78fr 1.22fr", gap: 48, alignItems: "center" }}>
          {/* Figures + legend — the globe substantiates these, doesn't replace them */}
          <div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", borderTop: "1px solid rgba(255,255,255,0.16)" }}>
              {facts.map(([n, l], i) => (
                <div key={l} style={{ padding: "20px 16px 22px", borderBottom: "1px solid rgba(255,255,255,0.16)", borderRight: i % 2 === 0 ? "1px solid rgba(255,255,255,0.16)" : "none" }}>
                  <div style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 42, lineHeight: 1, letterSpacing: "-0.02em", color: "#fff", fontVariantNumeric: "tabular-nums" }}>{n}</div>
                  <div style={{ fontFamily: NS, fontSize: 14, lineHeight: 1.45, color: "rgba(255,255,255,0.66)", marginTop: 12 }}>{l}</div>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "12px 28px", marginTop: 26 }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 9, fontFamily: NS, fontSize: 13.5, color: "rgba(255,255,255,0.82)" }}>
                <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#2f66e0", boxShadow: "0 0 8px rgba(47,102,224,0.8)", display: "inline-block" }}></span>
                Our offices
              </span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 9, fontFamily: NS, fontSize: 13.5, color: "rgba(255,255,255,0.82)" }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#12b3a6", display: "inline-block" }}></span>
                Our coverage
              </span>
            </div>
          </div>

          {/* Stylised world map */}
          <div style={{ width: "100%", touchAction: "none", marginTop: -44 }}>
            <WorldMap />
          </div>
        </div>

        <p style={{ fontFamily: NS, fontSize: 17, lineHeight: 1.55, color: "var(--text-on-navy)", margin: "36px 0 0", maxWidth: 640 }}>
          Relied on by global banks, asset managers, corporates and policymakers.
        </p>

        {/* Office addresses */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40, marginTop: 56, paddingTop: 44, borderTop: "1px solid rgba(255,255,255,0.16)" }}>
          {[
            { city: "London Office",
              address: "Capital Economics Ltd, 5th Floor, 100 Victoria Street, Cardinal Place, London \u2022 SW1E 5JL",
              contact: ["+44 (0)20 7823 5000", "sales@capitaleconomics.com", "business@capitaleconomics.com", "support@capitaleconomics.com"] },
            { city: "Toronto Office",
              address: "Capital Economics (N.A.) Ltd, Suite 600, 77 Bloor Street West, Toronto, ON \u2022 M5S 1M2",
              contact: ["+1 416 413 0428", "support@capitaleconomics.com"] },
            { city: "Singapore Office",
              address: "Capital Economics (Asia) Pte. Ltd, 05-01/02, CapitaGreen, 138 Market Street, Singapore \u2022 048946",
              contact: ["+65 6595 5190", "support@capitaleconomics.com"] },
          ].map((o) => (
            <div key={o.city}>
              <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 12.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ce-blue-light)", paddingBottom: 16, borderBottom: "1px solid rgba(255,255,255,0.16)", marginBottom: 22 }}>{o.city}</div>
              <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 13.5, color: "#fff", marginBottom: 8 }}>Address</div>
              <p style={{ fontFamily: NS, fontSize: 14.5, lineHeight: 1.6, color: "rgba(255,255,255,0.7)", margin: "0 0 22px" }}>{o.address}</p>
              <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 13.5, color: "#fff", marginBottom: 8 }}>Contact</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                {o.contact.map((line) => (
                  <span key={line} style={{ fontFamily: NS, fontSize: 14.5, lineHeight: 1.5, color: "rgba(255,255,255,0.7)" }}>{line}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 8 — Closing. INVERTED for this page only:
   "Talk to our team" PRIMARY, "Start free trial" SECONDARY.
---------------------------------------------------------------- */
function ClosingTalk() {
  return (
    <section id="talk" style={{ background: "linear-gradient(180deg, #F4F6FC 0%, #E2E8F5 100%)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: 860, margin: "0 auto", padding: "76px 32px", textAlign: "center" }}>
        <Eyebrow style={{ marginBottom: 16 }}>Talk to us</Eyebrow>
        <h2 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 36, lineHeight: 1.13, letterSpacing: "-0.015em", color: "var(--text-primary)", margin: 0 }}>
          Want to talk to us directly?
        </h2>
        <p style={{ fontFamily: NS, fontSize: 18, lineHeight: 1.55, color: "var(--text-secondary)", margin: "16px auto 30px", maxWidth: 600 }}>
          If you are weighing CE up, the quickest way to settle it is a conversation with the team. Or start a
          free trial and read the research yourself.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 14, justifyContent: "center" }}>
          <Button variant="primary" size="lg" iconEnd={<Icon name="arrow-right" size={18} />}>Talk to our team</Button>
          <Button variant="secondary" size="lg">Start free trial</Button>
        </div>

        {/* Quiet hiring footnote, subordinate to the CTAs above */}
        <p style={{ fontFamily: NS, fontSize: 15, lineHeight: 1.6, color: "var(--text-muted)", margin: "34px 0 0" }}>
          We're also hiring across research and commercial roles. <a href="/careers" className="ce-textlink" style={{ display: "inline-flex" }}>See current opportunities<Icon name="arrow-right" size={14} /></a>
        </p>
      </div>
    </section>
  );
}

function App() {
  return (
    <div>
      <SiteHeader />
      <AboutHero />
      <PeopleSection />
      <IndependenceSection />
      <TrackRecordSection />
      <RatedSection />
      <InstitutionSection />
      <ClosingTalk />
      <SiteFooter />
    </div>
  );
}

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