/* ================================================================
   homepage.jsx — Capital Economics homepage (1 July MVP).
   Audience: the senior decision-maker (CIO, head of desk) who signs
   off a firm-wide subscription. Won by credibility, conviction and
   proof — not speed. Shared chrome/components come from shared.jsx.
   Order: Hero → Capability → Proof → Who we help → House view →
          Insights → Case studies → Closing.
================================================================ */
const {
  Icon, MAX, NS, SERIF, TrialCTA, Eyebrow, SectionHead,
  SiteHeader, CAPABILITY_BLOCKS, ClosingSection, SiteFooter,
} = window;
const { Button, Avatar } = window.CapitalEconomicsDesignSystem_f2a5b2;

/* ----------------------------------------------------------------
   Section 1 — Hero (COMPRESSED). Headline + both CTAs above the fold.
   Right: a credible forecast chart. Below: a marquee trust strip so
   credibility registers before the scroll.
---------------------------------------------------------------- */
function HomeHero() {
  const marquee = ["BlackRock", "UBS", "Fidelity", "Legal-And-General", "BNY"];
  // Background hero video is self-hosted (assets/hero.mp4) so it never expires.
  // Previously this streamed a signed Vimeo HLS URL whose token expired; the footage
  // was captured and bundled locally instead. To refresh it, see README.md.
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const v = videoRef.current;
    if (v) v.play().catch(() => {});
  }, []);
  return (
    <section style={{ background: "#1d233f", position: "relative", overflow: "hidden" }}>
      {/* Background video + readability scrim */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
        <video ref={videoRef} src="assets/hero.mp4" autoPlay muted loop playsInline preload="auto"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.85 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(29,35,63,0.86) 0%, rgba(29,35,63,0.62) 44%, rgba(29,35,63,0.22) 100%)" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(0deg, rgba(29,35,63,0.4) 0%, rgba(29,35,63,0) 38%)" }} />
      </div>

      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "76px 32px 0", position: "relative", zIndex: 1 }}>
        {/* Message + CTAs */}
        <div style={{ maxWidth: 640 }}>
          <Eyebrow style={{ marginBottom: 18, color: "var(--ce-blue-light)" }}>Independent macro research</Eyebrow>
          <h1 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 58, lineHeight: 1.06, letterSpacing: "-0.02em", color: "#fff", margin: 0, maxWidth: 620 }}>
            The macro picture, clear enough to act on.
          </h1>
          <p style={{ fontFamily: NS, fontSize: 20, lineHeight: 1.55, color: "var(--text-on-navy)", margin: "24px 0 36px", maxWidth: 540 }}>
            Independent analysis, data and forecasts, and direct economist access across 100+ economies,
            on one platform. Start a free trial in under a minute.
          </p>
          <TrialCTA inverse />
        </div>

        {/* Marquee trust strip */}
        <div style={{ marginTop: 52, paddingTop: 24, paddingBottom: 24, borderTop: "1px solid rgba(255,255,255,0.16)", display: "flex", alignItems: "center", flexWrap: "wrap", gap: "18px 44px" }}>
          <span style={{ fontFamily: NS, fontWeight: 700, fontSize: 11.5, letterSpacing: "0.14em", color: "rgba(255,255,255,0.55)" }}>TRUSTED BY</span>
          <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: "16px 40px" }}>
            {marquee.map((f) => (
              <img key={f} src={"assets/logos/" + f + ".svg"} alt={f.replace(/-/g, " ")}
                style={{ height: 24, width: "auto", maxWidth: 130, objectFit: "contain", filter: "brightness(0) invert(1)", opacity: 0.72, display: "block" }} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 2 — What you get. A live-forecast band leads (proof through
   real CE house numbers), then three weighty capability pillars
   (identical copy to the products page).
---------------------------------------------------------------- */
/* Minimal sparkline for the forecast cards. */
function Sparkline({ points, color }) {
  const W = 88, H = 26;
  const min = Math.min(...points), max = Math.max(...points);
  const d = points.map((p, i) => {
    const x = (i / (points.length - 1)) * W;
    const y = max === min ? H / 2 : H - ((p - min) / (max - min)) * (H - 4) - 2;
    return (i ? "L" : "M") + x.toFixed(1) + " " + y.toFixed(1);
  }).join(" ");
  return (
    <svg width={W} height={H} style={{ display: "block" }} aria-hidden="true">
      <path d={d} fill="none" stroke={color || "var(--ce-blue-light)"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function CapabilitySection() {
  /* Live CE house forecasts — replaces the old round-number stat band.
     NOTE: the figures, sparklines and deltas below are plausible CE
     house numbers used for layout only. They MUST be wired to the live
     CE forecast feed before go-live; do not ship hard-coded values. */
  const forecasts = [
    { country: "United States", flag: "https://flagcdn.com/w80/us.png", metric: "GDP growth · 2026", value: "1.8%", spark: [2.1, 2.4, 2.2, 1.9, 1.8, 1.8], arrow: "↓", delta: "0.3 vs consensus", tone: "neg" },
    { country: "United Kingdom", flag: "https://flagcdn.com/w80/gb.png", metric: "Bank Rate · year-end", value: "3.25%", spark: [4.5, 4.25, 4.0, 3.75, 3.5, 3.25], arrow: "↓", delta: "50bp vs market", tone: "neg" },
    { country: "Eurozone", flag: "https://flagcdn.com/w80/eu.png", metric: "HICP inflation · 2026", value: "1.9%", spark: [2.4, 2.2, 2.0, 1.9, 1.9, 1.9], arrow: "↑", delta: "in-line", tone: "pos" },
    { country: "China", flag: "https://flagcdn.com/w80/cn.png", metric: "GDP growth · 2026", value: "4.3%", spark: [5.2, 5.0, 4.7, 4.5, 4.4, 4.3], arrow: "↓", delta: "0.7 vs IMF", tone: "neg" },
  ];
  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="What you get"
          title="One platform. Everything CE produces."
          intro="No tiers, no locked-off levels. One subscription, scoped to what you cover — backed by the full weight of the firm."
        />

        {/* Live-forecast band — substantiates "everything CE produces"
            through real house calls rather than round numbers. */}
        <div style={{ background: "#1d233f", borderRadius: "var(--radius-lg)", padding: "44px 44px 40px", margin: "0 0 52px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 24 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ce-blue-light)", display: "inline-block" }}></span>
            <span style={{ fontFamily: NS, fontWeight: 700, fontSize: 12, letterSpacing: "0.14em", color: "var(--ce-blue-light)" }}>LIVE FORECASTS · INDEPENDENT OF CONSENSUS</span>
          </div>
          <div style={{ display: "flex", gap: 48, alignItems: "flex-end", flexWrap: "wrap", justifyContent: "space-between" }}>
            <h3 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 37, lineHeight: 1.12, letterSpacing: "-0.02em", color: "#fff", margin: 0, maxWidth: 540 }}>
              Our numbers. Our model. Not the <em style={{ fontStyle: "italic", color: "var(--ce-blue-light)" }}>consensus.</em>
            </h3>
            <p style={{ fontFamily: NS, fontSize: 15.5, lineHeight: 1.6, color: "rgba(255,255,255,0.66)", margin: 0, maxWidth: 430 }}>
              Proprietary forecasts for 100+ economies, updated continuously by our regional teams and
              benchmarked against 40+ external houses. This is where the non-consensus calls are made.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", marginTop: 40, border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
            {forecasts.map((f, i) => (
              <div key={f.country} style={{ padding: "26px 26px 24px", borderLeft: i === 0 ? "none" : "1px solid rgba(255,255,255,0.12)" }}>
                <img src={f.flag} alt="" style={{ width: 30, height: 20, objectFit: "cover", borderRadius: 2, display: "block", marginBottom: 18 }} />
                <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ce-blue-light)" }}>{f.country}</div>
                <div style={{ fontFamily: NS, fontSize: 13.5, color: "rgba(255,255,255,0.6)", marginTop: 9 }}>{f.metric}</div>
                <div style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 42, lineHeight: 1, letterSpacing: "-0.02em", color: "#fff", margin: "10px 0 0", fontVariantNumeric: "tabular-nums" }}>{f.value}</div>
                <div style={{ margin: "18px 0 16px" }}><Sparkline points={f.spark} /></div>
                <div style={{ display: "inline-flex", alignItems: "baseline", gap: 8, whiteSpace: "nowrap", color: f.tone === "pos" ? "#6BC489" : "#F58A83" }}>
                  <span style={{ fontSize: 22, lineHeight: 1, fontWeight: 700 }}>{f.arrow}</span>
                  <span style={{ fontFamily: NS, fontWeight: 700, fontSize: 18.5, letterSpacing: "-0.01em", fontVariantNumeric: "tabular-nums" }}>{f.delta}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Pillars */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 26 }}>
          {CAPABILITY_BLOCKS.map((bl) => (
            <div key={bl.h} style={{
              display: "flex", flexDirection: "column", background: "var(--surface-card)",
              border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", padding: "38px 34px",
            }}>
              <div style={{ width: 54, height: 54, borderRadius: "var(--radius-md)", background: "var(--brand-subtle)", color: "var(--brand)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 26 }}>
                <Icon name={bl.icon} size={28} />
              </div>
              <h3 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 25, letterSpacing: "-0.01em", color: "var(--text-primary)", margin: "0 0 14px" }}>{bl.h}</h3>
              <p style={{ fontFamily: NS, fontSize: 16.5, lineHeight: 1.62, color: "var(--text-secondary)", margin: 0 }}>{bl.b}</p>
              <a href={bl.href} className="ce-textlink" style={{ marginTop: 24 }}>{bl.link}<Icon name="arrow-right" size={15} /></a>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 52 }}>
          <TrialCTA />
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 3 — Proof (the SPINE). For this buyer the peer evidence is
   the core argument. Prominent, tinted, confident: a large pull-quote
   and an authoritative logo wall.
---------------------------------------------------------------- */
function ProofSpine() {
  const logos = [
    "Legal-And-General", "Fidelity", "UBS", "BNY", "BNP-Paribas",
    "BlackRock", "Allianz", "The-Carlyle-Group", "Amazon", "European-Parliament",
  ];
  return (
    <section style={{ background: "#EDF1FB", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", padding: "72px 32px" }}>
        <div style={{ textAlign: "center", marginBottom: 8 }}>
          <Eyebrow style={{ marginBottom: 18 }}>Proof</Eyebrow>
        </div>
        <figure style={{ maxWidth: 900, margin: "0 auto", textAlign: "center" }}>
          <blockquote style={{ fontFamily: SERIF, fontWeight: 500, fontSize: 34, lineHeight: 1.34, letterSpacing: "-0.015em", color: "var(--text-primary)", margin: 0 }}>
            “Capital Economics has proven to be a highly valuable source of analytical content. Its independent
            and systematic economic views help maintain a competitive edge.”
          </blockquote>
          <figcaption style={{ fontFamily: NS, fontSize: 15.5, fontWeight: 600, color: "var(--text-secondary)", marginTop: 26 }}>
            Strategy &amp; Market Analyst, Saudi Aramco
          </figcaption>
        </figure>

        <div style={{ height: 1, background: "var(--border-default)", maxWidth: 720, margin: "56px auto 48px" }} />

        <div style={{ textAlign: "center", marginBottom: 36 }}>
          <span style={{ fontFamily: NS, fontWeight: 700, fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-muted)" }}>
            Trusted by the teams that move on macro
          </span>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center", gap: "38px 60px", maxWidth: 1000, margin: "0 auto" }}>
          {logos.map((f) => (
            <img key={f} src={"assets/logos/" + f + ".svg"} alt={f.replace(/-/g, " ")}
              style={{ height: 36, width: "auto", maxWidth: 165, objectFit: "contain", opacity: 0.82, display: "block" }} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 4 — Who we help (compact role routing)
---------------------------------------------------------------- */
function WhoWeHelp() {
  const roles = [
    ["Portfolio Manager", "/who-we-help/portfolio-manager"],
    ["Analyst", "/who-we-help/analyst"],
    ["Economist", "/who-we-help/economist"],
    ["Risk & Compliance", "/who-we-help/risk-compliance"],
    ["Trader", "/who-we-help/trader"],
    ["Treasury", "/who-we-help/treasury"],
    ["C-Suite", "/who-we-help/c-suite"],
    ["Policy Maker", "/who-we-help/policy-maker"],
  ];
  return (
    <section style={{ background: "var(--surface-page)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "64px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: 56, alignItems: "center" }}>
          {/* Left — heading, role links (three across), CTA */}
          <div>
            <SectionHead
              eyebrow="Who we help"
              title="Built for the people who act on the macro."
              intro="Whatever seat you sit in, the question is the same: what does this mean for my next decision? See how CE answers it for your role."
            />
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
              {roles.map(([name, href]) => (
                <a key={name} href={href} className="ce-rolelink">
                  <span>{name}</span>
                  <Icon name="arrow-up-right" size={18} stroke={2} />
                </a>
              ))}
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 24, marginTop: 40 }}>
              <Button variant="primary" size="lg" iconEnd={<Icon name="arrow-right" size={18} />}>Start free trial</Button>
              <a href="/who-we-help" className="ce-textlink">See how we help your role<Icon name="arrow-right" size={15} /></a>
            </div>
          </div>

          {/* Right — imagery */}
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {["people1.jpg", "people2.jpg"].map((f) => (
              <img key={f} src={"assets/" + f} alt=""
                style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "var(--radius-lg)", display: "block" }} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 5 — The house view (POINT OF VIEW + change of pace).
   Navy, asymmetric, no eyebrow/headline/button rhythm. CE says
   something only CE would say.
---------------------------------------------------------------- */
function HouseView() {
  return (
    <section style={{ background: "#1d233f", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", padding: "72px 32px", display: "flex", gap: 36 }}>
        <div style={{ flex: "0 0 auto", width: 4, background: "var(--ce-blue-light)", borderRadius: 2 }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 12.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ce-blue-light)", marginBottom: 28 }}>The house view</div>
          <p style={{ fontFamily: SERIF, fontWeight: 500, fontSize: 33, lineHeight: 1.32, letterSpacing: "-0.015em", color: "#fff", margin: 0, maxWidth: 880 }}>
            Everyone is waiting for rates to fall back to where they were. They won't. The cost of capital has
            reset higher for the rest of the decade — and the institutions still planning around a near-zero
            world are the ones most exposed.
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 36 }}>
            <Avatar name="Neil Shearing" size="lg" />
            <div>
              <div style={{ fontFamily: NS, fontWeight: 700, fontSize: 16, color: "#fff" }}>Neil Shearing</div>
              <div style={{ fontFamily: NS, fontSize: 14.5, color: "rgba(255,255,255,0.6)" }}>Group Chief Economist, Capital Economics</div>
            </div>
          </div>
          <a href="/insights/house-view" className="ce-textlink ce-textlink-light" style={{ marginTop: 32 }}>
            Read the full house view<Icon name="arrow-right" size={15} />
          </a>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 6 — Insights (EDITORIAL, magazine-style).
   One feature piece + three supporting cards in an asymmetric layout.
   Named-economist bylines, confident specific calls with real numbers.
   No filter chips, no hub density — those live on the insights hub.
   Re-skinned to CE navy/blue (not the experiment's cream/rust).
---------------------------------------------------------------- */
function Byline({ name, title }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
      <Avatar name={name} size="sm" />
      <span style={{ fontFamily: NS, fontSize: 14, color: "var(--text-secondary)" }}>
        <strong style={{ color: "var(--text-primary)", fontWeight: 700 }}>{name}</strong> · {title}
      </span>
    </div>
  );
}

function CatBadge({ children, feature }) {
  return (
    <span style={{
      fontFamily: NS, fontWeight: 700, fontSize: 11, letterSpacing: "0.11em", textTransform: "uppercase",
      color: "#fff", background: feature ? "var(--brand)" : "#1d233f", padding: "5px 10px", borderRadius: 4, whiteSpace: "nowrap",
    }}>{children}</span>
  );
}

function MetaRow({ badge, time, feature }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
      <CatBadge feature={feature}>{badge}</CatBadge>
      <span style={{ fontFamily: NS, fontWeight: 700, fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }}>{time}</span>
    </div>
  );
}

/* CE-blue article chart thumbnail for the feature piece */
function ArticleChart() {
  const W = 620, H = 286, x0 = 0, x1 = W, y0 = 270, y1 = 30;
  const data = [2.0, 2.4, 2.3, 2.9, 3.0, 3.5, 3.7, 3.95, 4.1];
  const yMin = 1.5, yMax = 4.5;
  const sx = (i) => x0 + i / (data.length - 1) * (x1 - x0);
  const sy = (v) => y0 - (v - yMin) / (yMax - yMin) * (y0 - y1);
  const line = data.map((v, i) => (i ? "L" : "M") + sx(i).toFixed(1) + " " + sy(v).toFixed(1)).join(" ");
  const area = line + ` L ${x1} ${y0} L ${x0} ${y0} Z`;
  return (
    <div className="ce-art-chart" style={{ position: "relative", background: "#EDF1FB", borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: "16 / 9" }}>
      <div style={{ position: "absolute", top: 18, left: 22, fontFamily: NS, fontWeight: 700, fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--brand)", zIndex: 1 }}>US core services inflation, % y/y</div>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%" preserveAspectRatio="none" style={{ display: "block" }} aria-hidden="true">
        <defs>
          <linearGradient id="ceArea" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#164194" stopOpacity="0.20" />
            <stop offset="100%" stopColor="#164194" stopOpacity="0" />
          </linearGradient>
        </defs>
        {[2, 3, 4].map((v) => (
          <line key={v} x1={x0} x2={x1} y1={sy(v)} y2={sy(v)} stroke="#164194" strokeOpacity="0.10" strokeWidth="1" />
        ))}
        <path d={area} fill="url(#ceArea)" />
        <path d={line} fill="none" stroke="#164194" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

function InsightsSection() {
  const supporting = [
    { badge: "UK Economics", time: "2h ago", title: "BoE holds at 4.0%, but Bailey's tone turned dovish. We've pulled our next cut forward to August.", body: "Two MPC members voted for an immediate cut. We're moving our next-cut call from November to August.", name: "Paul Dales", title2: "Chief UK Economist", href: "/insights/boe-august-cut" },
    { badge: "Commodities", time: "Yesterday", title: "Brent at $82 is mostly risk premium — our oil model puts fair value near $68.", body: "If Middle East tensions ease, we see oil back at $68. If they escalate, $95 is a realistic near-term ceiling.", name: "David Oxley", title2: "Senior Commodities Economist", href: "/insights/brent-risk-premium" },
    { badge: "China", time: "2 days ago", title: "China's 5.2% Q1 GDP flatters reality. The detail paints a weaker picture.", body: "Property investment fell 9.8% and consumer spending is decelerating. We've cut our 2026 growth forecast to 4.3%.", name: "Julian Evans-Pritchard", title2: "Head of China Economics", href: "/insights/china-q1-gdp" },
  ];
  return (
    <section style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "64px 32px" }}>
        {/* Editorial masthead */}
        <div style={{ marginBottom: 14 }}>
          <Eyebrow style={{ marginBottom: 18 }}>The insight desk · Updated hourly</Eyebrow>
          <h2 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 40, lineHeight: 1.08, letterSpacing: "-0.02em", color: "var(--text-primary)", margin: 0, maxWidth: 720 }}>
            What our economists are watching now.
          </h2>
        </div>
        <div style={{ height: 2, background: "var(--text-primary)", margin: "26px 0 0" }} />

        {/* Asymmetric grid: feature + supporting column */}
        <div style={{ display: "grid", gridTemplateColumns: "1.12fr 0.88fr", gap: 52, marginTop: 48, alignItems: "start" }}>
          {/* Feature */}
          <a href="/insights/fed-december-cut" className="ce-article">
            <ArticleChart />
            <div style={{ marginTop: 24 }}>
              <MetaRow badge="US Economics" time="8 min read" feature />
            </div>
            <h3 className="ce-art-title" style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 33, lineHeight: 1.14, letterSpacing: "-0.018em", color: "var(--text-primary)", margin: "18px 0 0" }}>
              The Fed's dilemma: why the December cut still looks likely despite sticky services inflation.
            </h3>
            <p style={{ fontFamily: NS, fontSize: 17, lineHeight: 1.6, color: "var(--text-secondary)", margin: "16px 0 0", maxWidth: 600 }}>
              Core services inflation printed at 4.1% in March, above consensus but in line with our forecast.
              We still expect two further 25bp cuts before year-end — here's the case, and the three scenarios
              that would change it.
            </p>
            <div style={{ borderTop: "1px solid var(--border-subtle)", margin: "24px 0 0", paddingTop: 22 }}>
              <Byline name="Paul Ashworth" title="Chief North America Economist" />
            </div>
          </a>

          {/* Supporting column */}
          <div style={{ display: "flex", flexDirection: "column" }}>
            {supporting.map((s, i) => (
              <a key={s.title} href={s.href} className="ce-article" style={{
                paddingTop: i === 0 ? 0 : 30, marginTop: i === 0 ? 0 : 30,
                borderTop: i === 0 ? "none" : "1px solid var(--border-subtle)",
              }}>
                <MetaRow badge={s.badge} time={s.time} />
                <h3 className="ce-art-title" style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 22, lineHeight: 1.22, letterSpacing: "-0.01em", color: "var(--text-primary)", margin: "16px 0 0" }}>
                  {s.title}
                </h3>
                <p style={{ fontFamily: NS, fontSize: 15.5, lineHeight: 1.55, color: "var(--text-secondary)", margin: "12px 0 18px" }}>
                  {s.body}
                </p>
                <Byline name={s.name} title={s.title2} />
              </a>
            ))}
          </div>
        </div>

        {/* Footer: single browse link + standard trial CTA */}
        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 24, marginTop: 56, paddingTop: 32, borderTop: "1px solid var(--border-subtle)" }}>
          <Button variant="primary" size="lg" iconEnd={<Icon name="arrow-right" size={18} />}>Start free trial</Button>
          <a href="/insights" className="ce-textlink" style={{ whiteSpace: "nowrap" }}>Browse all insights<Icon name="arrow-right" size={15} /></a>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------------------------------------------
   Section 7 — Case studies. Named institutional proof of vision in
   action, for the senior buyer. Compact, confident.
---------------------------------------------------------------- */
function CaseStudies() {
  const items = [
    { tag: "Asset management", client: "Global asset manager", outcome: "Anchored its house macro view on CE forecasts across 40+ markets, retiring three external feeds.", href: "/case-studies/global-asset-manager" },
    { tag: "Corporate", client: "PepsiCo", outcome: "Stress-tests demand and currency assumptions against CE country forecasts in annual planning.", href: "/case-studies/pepsico" },
    { tag: "Insurance", client: "Multinational insurer", outcome: "Underpins capital and reserving scenarios with independent macro it can defend to regulators.", href: "/case-studies/multinational-insurer" },
  ];
  return (
    <section style={{ background: "linear-gradient(180deg, #F4F6FC 0%, #E2E8F5 100%)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "64px 32px" }}>
        <SectionHead
          eyebrow="Case studies"
          title="What CE looks like inside the institution."
          intro="Independent macro, doing real work in the firms that depend on it — from the trading desk to the board."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {items.map((it) => (
            <a key={it.client} href={it.href} className="ce-card-int" style={{
              display: "flex", flexDirection: "column", textDecoration: "none",
              border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)",
              padding: "30px 28px 26px", background: "var(--surface-card)", minHeight: 252,
            }}>
              <span className="ce-eyebrow" style={{ margin: 0 }}>{it.tag}</span>
              <h3 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 24, letterSpacing: "-0.01em", color: "var(--text-primary)", margin: "16px 0 14px" }}>{it.client}</h3>
              <p style={{ fontFamily: NS, fontSize: 16, lineHeight: 1.6, color: "var(--text-secondary)", margin: 0 }}>{it.outcome}</p>
              <span className="ce-textlink" style={{ marginTop: "auto", paddingTop: 24 }}>Read the case study<Icon name="arrow-right" size={15} /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <div>
      <SiteHeader />
      <HomeHero />
      <CapabilitySection />
      <ProofSpine />
      <WhoWeHelp />
      <HouseView />
      <InsightsSection />
      <CaseStudies />
      <ClosingSection />
      <SiteFooter />
    </div>
  );
}

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