/* ================================================================
   podcast-episode.jsx — free, ungated podcast episode page.
   Sits below Insights > Podcast (The Weekly Briefing).
   Priorities: (1) play instantly, (2) content-anchored trial
   conversion, (3) keep circulating + subscribed.
   British English. No dashes in copy. Reuses SiteHeader/SiteFooter.
================================================================ */
const { MAX, NS, SERIF, SiteHeader, SiteFooter } = window;
const { Button } = window.CapitalEconomicsDesignSystem_f2a5b2;

/* ---- icons (Lucide 24x24 / 2px, plus brand glyphs) ---- */
const PI = {
  play: <path d="M6 3v18l15-9z" fill="currentColor" stroke="none" />,
  pause: <><rect x="6" y="4" width="4" height="16" rx="1" fill="currentColor" stroke="none" /><rect x="14" y="4" width="4" height="16" rx="1" fill="currentColor" stroke="none" /></>,
  back15: <><path d="M11 3 5 8l6 5" /><path d="M5 8h9a6 6 0 0 1 0 12H8" /></>,
  fwd30: <><path d="m13 3 6 5-6 5" /><path d="M19 8H10a6 6 0 0 0 0 12h6" /></>,
  "arrow-right": <><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></>,
  "chevron-right": <path d="m9 18 6-6-6-6" />,
  clock: <><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>,
  headphones: <><path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a1 1 0 0 1-1-1v-6a9 9 0 0 1 18 0v6a1 1 0 0 1-1 1h-2a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3" /></>,
  mic: <><rect width="6" height="13" x="9" y="2" rx="3" /><path d="M5 10a7 7 0 0 0 14 0M12 19v3" /></>,
  check: <path d="M20 6 9 17l-5-5" />,
  grid: <><rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" /></>,
};
const BRAND_GLYPH = {
  spotify: <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.6 14.43a.62.62 0 0 1-.86.2c-2.35-1.43-5.3-1.76-8.79-.96a.62.62 0 1 1-.28-1.2c3.8-.88 7.07-.5 9.7 1.1.3.18.4.57.23.86zm1.23-2.74a.78.78 0 0 1-1.07.26c-2.69-1.65-6.8-2.14-9.98-1.17a.78.78 0 1 1-.45-1.49c3.63-1.1 8.16-.56 11.24 1.33.36.22.48.69.26 1.07zm.1-2.85C14.72 8.95 9.5 8.76 6.42 9.7a.94.94 0 1 1-.54-1.8c3.54-1.07 9.3-.86 12.96 1.31a.94.94 0 0 1-.95 1.62z" fill="currentColor" stroke="none" />,
  apple: <><rect width="20" height="20" x="2" y="2" rx="6" fill="currentColor" stroke="none" /><circle cx="12" cy="8.5" r="2.1" fill="#24213a" /><path d="M9.3 16.8c.4-2 1.1-3 2.7-3s2.3 1 2.7 3c.15.75-.4 1.2-1 .8-.5-.32-1-.5-1.7-.5s-1.2.18-1.7.5c-.6.4-1.15-.05-1-.8z" fill="#24213a" /><path d="M12 12.2a3.5 3.5 0 0 0-3.5 3.5" fill="none" stroke="#24213a" strokeWidth="1.3" strokeLinecap="round" /><path d="M12 12.2a3.5 3.5 0 0 1 3.5 3.5" fill="none" stroke="#24213a" strokeWidth="1.3" strokeLinecap="round" /></>,
};
function PIcon({ name, size = 20, stroke = 2, style }) {
  return <svg style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{PI[name]}</svg>;
}
function GlyphIcon({ name, size = 20, style }) {
  return <svg style={style} width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">{BRAND_GLYPH[name]}</svg>;
}

/* ---- episode record ---- */
const EP = {
  series: "The Weekly Briefing",
  number: 142,
  title: "The Fed blinks, and what it means for the dollar",
  date: "12 August 2026",
  durationLabel: "26 min",
  durationSecs: 26 * 60,
  guests: [
    { name: "Neil Shearing", role: "Group Chief Economist" },
    { name: "David Wilder", role: "Host" },
  ],
  topics: [
    "US inflation and the Fed outlook",
    "The long end of the Treasury curve",
    "China reform and the lessons of Zhu Rongji",
    "The UK Budget: what the tax changes mean",
  ],
  chapters: [
    { t: 70, label: "US inflation and the Fed's next move" },
    { t: 525, label: "Why the long end of the Treasury curve matters" },
    { t: 920, label: "China reform and the lessons of Zhu Rongji" },
    { t: 1265, label: "The UK Budget and the tax changes that land" },
  ],
};

/* ---- related content (real items) ---- */
const RELATED = [
  { kind: "Insight", topic: "Monetary policy", title: "The Fed's December cut still looks likely despite sticky services inflation", date: "12 Aug 2026", chart: "line", seed: 1 },
  { kind: "Insight", topic: "Fiscal policy", title: "The US deficit is the market's real tail risk for 2027", date: "5 Aug 2026", chart: "bars", seed: 4 },
  { kind: "Publication", topic: "Property", title: "UK Housing Outlook: the correction has further to run", date: "6 Aug 2026", chart: "bars", seed: 7 },
];

/* ---- small chart thumbnail ---- */
function Thumb({ kind, seed }) {
  const W = 320, H = 150;
  const rand = (i) => { const x = Math.sin(seed * 9301 + i * 49297) * 233280; return x - Math.floor(x); };
  if (kind === "bars") {
    const n = 9, bw = 22, gap = (W - 44 - n * bw) / (n - 1);
    return (
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%" preserveAspectRatio="none" aria-hidden="true">
        {Array.from({ length: n }).map((_, i) => { const h = 24 + rand(i) * 96; return <rect key={i} x={22 + i * (bw + gap)} y={H - 16 - h} width={bw} height={h} rx="2" fill="#164194" fillOpacity={0.3 + (i / (n - 1)) * 0.55} />; })}
      </svg>
    );
  }
  const n = 9, pts = Array.from({ length: n }).map((_, i) => [22 + i * ((W - 44) / (n - 1)), H - 18 - rand(i) * 100]);
  const line = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(0) + " " + p[1].toFixed(0)).join(" ");
  const area = line + ` L ${W - 22} ${H - 16} L 22 ${H - 16} Z`;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%" preserveAspectRatio="none" aria-hidden="true">
      <defs><linearGradient id={"pmg" + seed} x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#164194" stopOpacity="0.16" /><stop offset="100%" stopColor="#164194" stopOpacity="0" /></linearGradient></defs>
      <path d={area} fill={`url(#pmg${seed})`} />
      <path d={line} fill="none" stroke="#164194" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function fmtTime(s) {
  s = Math.max(0, Math.round(s));
  const m = Math.floor(s / 60), sec = s % 60;
  return m + ":" + String(sec).padStart(2, "0");
}

/* ================================================================
   CSS
================================================================ */
let cssDone = false;
function injectCSS() {
  if (cssDone || typeof document === "undefined") return;
  cssDone = true;
  const css = `
  .pod-crumb { display: flex; align-items: center; gap: 8px; font-family: ${NS}; font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 18px; flex-wrap: wrap; }
  .pod-crumb a { color: rgba(255,255,255,0.72); text-decoration: none; }
  .pod-crumb a:hover { color: #fff; text-decoration: underline; }
  .pod-crumb-sep { color: rgba(255,255,255,0.3); }
  .pod-eyebrow { font-family: ${NS}; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ce-blue-light); display: inline-flex; align-items: center; gap: 9px; }
  .pod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: ${NS}; font-size: 14px; color: rgba(255,255,255,0.78); font-variant-numeric: tabular-nums; }
  .pod-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.4); }
  .pod-free { font-family: ${NS}; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; color: #fff; border: 1px solid rgba(255,255,255,0.34); border-radius: 999px; padding: 3px 10px; }

  /* layout */
  .pod-body { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; }
  .pod-aside { position: sticky; top: 108px; }

  /* summary card */
  .pod-sumcard { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 24px 26px; box-shadow: var(--shadow-sm); }
  .pod-sumcard h2 { font-family: ${NS}; font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 16px; }
  .pod-sum-label { font-family: ${NS}; font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
  .pod-guest { display: flex; align-items: baseline; gap: 7px; }
  .pod-guest + .pod-guest { margin-top: 7px; }
  .pod-guest-name { font-family: ${NS}; font-weight: 700; font-size: 14.5px; color: var(--text-primary); }
  .pod-guest-role { font-family: ${NS}; font-size: 13px; color: var(--text-muted); }
  .pod-sum-div { border: 0; border-top: 1px solid var(--border-subtle); margin: 18px 0; }
  .pod-toplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .pod-toplist li { display: flex; gap: 10px; font-family: ${NS}; font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); }
  .pod-toplist svg { color: var(--brand); flex: 0 0 auto; margin-top: 2px; }
  .pod-sum-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: ${NS}; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

  /* player */
  .pod-player { background: #24213a; border-radius: var(--radius-lg); padding: 30px 32px; color: #fff; box-shadow: 0 18px 44px rgba(36,33,58,0.22); }
  .pod-player-top { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
  .pod-player-badge { width: 40px; height: 40px; border-radius: 10px; background: rgba(165,181,222,0.16); color: var(--ce-blue-light); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .pod-player-series { font-family: ${NS}; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ce-blue-light); }
  .pod-player-now { font-family: ${NS}; font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 1px; }
  .pod-transport { display: flex; align-items: center; gap: 18px; }
  .pod-play { width: 66px; height: 66px; border-radius: 999px; border: 0; background: var(--ce-blue-light); color: #24213a; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; transition: background 140ms cubic-bezier(0.2,0,0,1), transform 140ms cubic-bezier(0.2,0,0,1); }
  .pod-play:hover { background: #fff; }
  .pod-play:active { transform: translateY(1px); }
  .pod-skip { appearance: none; border: 0; background: transparent; color: rgba(255,255,255,0.85); cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-family: ${NS}; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; padding: 4px; }
  .pod-skip:hover { color: #fff; }
  .pod-scrubwrap { flex: 1 1 auto; }
  .pod-times { display: flex; justify-content: space-between; font-family: ${NS}; font-size: 12.5px; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; margin-bottom: 7px; }
  .pod-scrub { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.18); outline: none; cursor: pointer; }
  .pod-scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--ce-blue-light); cursor: pointer; }
  .pod-scrub::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--ce-blue-light); cursor: pointer; }
  .pod-speed { appearance: none; border: 1px solid rgba(255,255,255,0.28); background: transparent; color: #fff; font-family: ${NS}; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 8px; cursor: pointer; flex: 0 0 auto; min-width: 52px; font-variant-numeric: tabular-nums; }
  .pod-speed:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); }

  .pod-subs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); }
  .pod-subs-lead { font-family: ${NS}; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); margin-right: 2px; }
  .pod-sub-btn { display: inline-flex; align-items: center; gap: 9px; font-family: ${NS}; font-weight: 700; font-size: 14px; color: #fff; text-decoration: none; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 9px 15px; transition: background 140ms cubic-bezier(0.2,0,0,1), border-color 140ms cubic-bezier(0.2,0,0,1); }
  .pod-sub-btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); color: #fff; }

  /* prose + sections */
  .pod-sec { margin-top: 48px; }
  .pod-sec-h { font-family: ${SERIF}; font-weight: 600; font-size: 26px; letter-spacing: -0.015em; color: var(--text-primary); margin: 0 0 18px; }
  .pod-prose p { font-family: ${SERIF}; font-size: 18px; line-height: 1.62; color: var(--text-primary); margin: 0 0 18px; max-width: 64ch; }
  .pod-prose p:last-child { margin-bottom: 0; }
  .pod-guestline { font-family: ${NS}; font-size: 15px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 20px; }
  .pod-guestline strong { color: var(--text-primary); font-weight: 700; }
  .pod-chapters { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-default); }
  .pod-chapter { display: flex; align-items: baseline; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--border-subtle); }
  .pod-chapter-t { font-family: ${NS}; font-weight: 700; font-size: 13.5px; color: var(--brand); font-variant-numeric: tabular-nums; flex: 0 0 auto; width: 46px; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; }
  .pod-chapter-t:hover { text-decoration: underline; }
  .pod-chapter-l { font-family: ${NS}; font-size: 15.5px; line-height: 1.45; color: var(--text-primary); }

  /* trial prompt */
  .pod-trial { margin-top: 48px; background: var(--brand-subtle); border: 1px solid #cdd8f0; border-radius: var(--radius-lg); padding: 30px 32px; display: flex; gap: 22px; align-items: flex-start; }
  .pod-trial-ico { width: 46px; height: 46px; border-radius: 11px; background: #fff; border: 1px solid #cdd8f0; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .pod-trial-h { font-family: ${SERIF}; font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 8px; }
  .pod-trial-p { font-family: ${NS}; font-size: 15.5px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 20px; max-width: 60ch; }
  .pod-trial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

  /* related */
  .pod-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .pod-rel-card { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; transition: border-color 150ms cubic-bezier(0.2,0,0,1), box-shadow 150ms cubic-bezier(0.2,0,0,1); }
  .pod-rel-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  .pod-rel-thumb { aspect-ratio: 320 / 150; background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); }
  .pod-rel-in { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
  .pod-rel-cat { font-family: ${NS}; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin: 0 0 9px; }
  .pod-rel-title { font-family: ${SERIF}; font-weight: 600; font-size: 17.5px; line-height: 1.28; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 auto; }
  .pod-rel-date { font-family: ${NS}; font-size: 13px; color: var(--text-muted); margin: 16px 0 0; font-variant-numeric: tabular-nums; }

  /* keep listening */
  .pod-keep { background: #24213a; color: #fff; }
  .pod-keep-in { max-width: ${MAX}px; margin: 0 auto; padding: 34px 32px; display: flex; align-items: center; justify-content: space-between; gap: 22px 30px; flex-wrap: wrap; }
  .pod-keep-h { font-family: ${SERIF}; font-weight: 600; font-size: 23px; letter-spacing: -0.01em; color: #fff; margin: 0; }
  .pod-keep-sub { font-family: ${NS}; font-size: 14.5px; color: rgba(255,255,255,0.7); margin: 6px 0 0; }
  .pod-keep-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .pod-viewall { display: inline-flex; align-items: center; gap: 7px; font-family: ${NS}; font-weight: 700; font-size: 14.5px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; padding: 10px 16px; }
  .pod-viewall:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); color: #fff; }

  @media (max-width: 900px) {
    .pod-body { grid-template-columns: 1fr; gap: 28px; }
    .pod-aside { position: static; }
    .pod-rel-grid { grid-template-columns: 1fr; }
    .pod-player { padding: 24px 20px; }
    .pod-transport { gap: 12px; }
    .pod-play { width: 58px; height: 58px; }
    .pod-trial { flex-direction: column; gap: 16px; padding: 24px 22px; }
    .pod-keep-in { flex-direction: column; align-items: flex-start; }
  }
  `;
  const el = document.createElement("style");
  el.setAttribute("data-ce", "podcast-episode");
  el.textContent = css;
  document.head.appendChild(el);
}
injectCSS();

/* ================================================================
   Compact navy hero
================================================================ */
function EpisodeHero() {
  const guestMeta = EP.guests.map((g) => g.name + ", " + g.role).join("; ");
  return (
    <section style={{ background: "#24213a" }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "30px 32px 38px" }}>
        <nav className="pod-crumb" aria-label="Breadcrumb">
          <a href="Insights.html">Insights</a>
          <span className="pod-crumb-sep" aria-hidden="true">/</span>
          <a href="Insights.html">Podcast</a>
          <span className="pod-crumb-sep" aria-hidden="true">/</span>
          <span style={{ color: "rgba(255,255,255,0.9)" }}>{EP.series}</span>
        </nav>
        <div className="pod-eyebrow" style={{ marginBottom: 12 }}>
          <PIcon name="headphones" size={15} stroke={2.2} />{EP.series} · Episode {EP.number}
        </div>
        <h1 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 40, lineHeight: 1.1, letterSpacing: "-0.02em", color: "#fff", margin: "0 0 18px", maxWidth: 900 }}>
          {EP.title}
        </h1>
        <div className="pod-meta">
          <span>{EP.date}</span>
          <span className="pod-meta-sep" aria-hidden="true" />
          <span>{EP.durationLabel}</span>
          <span className="pod-meta-sep" aria-hidden="true" />
          <span>{guestMeta}</span>
          <span className="pod-meta-sep" aria-hidden="true" />
          <span className="pod-free">Free to listen</span>
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   Player (simulated timeline: play/pause, seek, skip, speed)
================================================================ */
const SPEEDS = [1, 1.25, 1.5, 2];
function Player() {
  const [t, setT] = React.useState(0);
  const [playing, setPlaying] = React.useState(false);
  const [rate, setRate] = React.useState(1);
  const D = EP.durationSecs;

  React.useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => {
      setT((prev) => {
        const next = prev + 0.2 * rate;
        if (next >= D) { setPlaying(false); return D; }
        return next;
      });
    }, 200);
    return () => clearInterval(id);
  }, [playing, rate, D]);

  const seek = (s) => setT(Math.min(Math.max(0, s), D));
  const cycleSpeed = () => setRate((r) => SPEEDS[(SPEEDS.indexOf(r) + 1) % SPEEDS.length]);

  return (
    <div className="pod-player">
      <div className="pod-player-top">
        <span className="pod-player-badge"><PIcon name="mic" size={20} /></span>
        <div>
          <div className="pod-player-series">{EP.series} · Ep {EP.number}</div>
          <div className="pod-player-now">{playing ? "Now playing" : "Ready to play"} · {EP.durationLabel}</div>
        </div>
      </div>

      <div className="pod-transport">
        <button className="pod-skip" onClick={() => seek(t - 15)} aria-label="Back 15 seconds">
          <PIcon name="back15" size={22} />15
        </button>
        <button className="pod-play" onClick={() => setPlaying((p) => !p)} aria-label={playing ? "Pause" : "Play episode"}>
          <PIcon name={playing ? "pause" : "play"} size={30} />
        </button>
        <button className="pod-skip" onClick={() => seek(t + 30)} aria-label="Forward 30 seconds">
          <PIcon name="fwd30" size={22} />30
        </button>
        <div className="pod-scrubwrap">
          <div className="pod-times"><span>{fmtTime(t)}</span><span>{fmtTime(D)}</span></div>
          <input className="pod-scrub" type="range" min={0} max={D} step={1} value={Math.round(t)}
            onChange={(e) => seek(Number(e.target.value))} aria-label="Seek" />
        </div>
        <button className="pod-speed" onClick={cycleSpeed} aria-label="Playback speed">{rate}x</button>
      </div>

      <div className="pod-subs">
        <span className="pod-subs-lead">Subscribe</span>
        <a href="#" className="pod-sub-btn"><GlyphIcon name="spotify" size={18} style={{ color: "#1ed760" }} />Spotify</a>
        <a href="#" className="pod-sub-btn"><GlyphIcon name="apple" size={18} style={{ color: "#a5b5de" }} />Apple Podcasts</a>
        <a href="#" className="pod-sub-btn"><PIcon name="grid" size={17} />Other platforms</a>
      </div>
    </div>
  );
}

/* ================================================================
   Left summary card
================================================================ */
function SummaryCard() {
  return (
    <aside className="pod-aside">
      <div className="pod-sumcard">
        <h2>Episode at a glance</h2>
        <p className="pod-sum-label">Guests</p>
        {EP.guests.map((g) => (
          <div className="pod-guest" key={g.name}>
            <span className="pod-guest-name">{g.name}</span>
            <span className="pod-guest-role">{g.role}</span>
          </div>
        ))}
        <hr className="pod-sum-div" />
        <p className="pod-sum-label">Key topics</p>
        <ul className="pod-toplist">
          {EP.topics.map((tp) => (
            <li key={tp}><PIcon name="check" size={16} stroke={2.4} />{tp}</li>
          ))}
        </ul>
        <hr className="pod-sum-div" />
        <div className="pod-sum-facts">
          <span>Episode {EP.number}</span><span>·</span><span>{EP.durationLabel}</span><span>·</span><span>{EP.date}</span>
        </div>
      </div>
    </aside>
  );
}

/* ================================================================
   Main content column
================================================================ */
function MainColumn() {
  const guestNames = EP.guests.map((g) => g.name).join(" and ");
  return (
    <div>
      <Player />

      <section className="pod-sec">
        <h2 className="pod-sec-h">About this episode</h2>
        <div className="pod-prose">
          <p>
            Policy rates across the G10 have peaked, but the descent is proving slower than markets had priced.
            Neil Shearing joins the programme to explain why sticky services inflation keeps the Fed cautious,
            and what a shallower easing path means for the dollar into year end.
          </p>
          <p>
            From the long end of the Treasury curve to the reform lessons of Zhu Rongji's China and the tax
            measures in the UK Budget, this week's briefing works through the calls that matter most for
            portfolios, and the evidence behind them.
          </p>
        </div>
      </section>

      <section className="pod-sec">
        <h2 className="pod-sec-h">In this episode</h2>
        <p className="pod-guestline">
          <strong>{EP.guests[0].name}</strong>, {EP.guests[0].role}, joins host <strong>{EP.guests[1].name}</strong>.
        </p>
        <ul className="pod-chapters">
          {EP.chapters.map((c) => (
            <li className="pod-chapter" key={c.t}>
              <span className="pod-chapter-t">{fmtTime(c.t)}</span>
              <span className="pod-chapter-l">{c.label}</span>
            </li>
          ))}
        </ul>
      </section>

      {/* content-anchored trial prompt */}
      <section className="pod-trial" aria-labelledby="pod-trial-h">
        <span className="pod-trial-ico"><PIcon name="arrow-right" size={22} /></span>
        <div>
          <h2 className="pod-trial-h" id="pod-trial-h">Go deeper on what you just heard</h2>
          <p className="pod-trial-p">
            This episode drew on our latest US inflation and UK fiscal analysis. Read the full reports, with the
            forecasts and data behind them, on a free trial.
          </p>
          <div className="pod-trial-actions">
            <Button variant="primary" size="lg" iconEnd={<PIcon name="arrow-right" size={18} />}>Start free trial</Button>
            <Button variant="secondary" size="lg">Talk to our team</Button>
          </div>
        </div>
      </section>

      <section className="pod-sec">
        <h2 className="pod-sec-h">Related content</h2>
        <div className="pod-rel-grid">
          {RELATED.map((r) => (
            <a href="#" className="pod-rel-card" key={r.title}>
              <div className="pod-rel-thumb"><Thumb kind={r.chart} seed={r.seed} /></div>
              <div className="pod-rel-in">
                <p className="pod-rel-cat">{r.kind} · {r.topic}</p>
                <h3 className="pod-rel-title">{r.title}</h3>
                <p className="pod-rel-date">{r.date}</p>
              </div>
            </a>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ================================================================
   Keep-listening / subscribe footer prompt
================================================================ */
function KeepListening() {
  return (
    <section className="pod-keep">
      <div className="pod-keep-in">
        <div>
          <h2 className="pod-keep-h">Keep listening to The Weekly Briefing</h2>
          <p className="pod-keep-sub">A new episode every Friday. Free to everyone, no account needed.</p>
        </div>
        <div className="pod-keep-right">
          <a href="Insights.html" className="pod-viewall">View all episodes<PIcon name="chevron-right" size={16} /></a>
          <a href="#" className="pod-sub-btn"><GlyphIcon name="spotify" size={18} style={{ color: "#1ed760" }} />Spotify</a>
          <a href="#" className="pod-sub-btn"><GlyphIcon name="apple" size={18} style={{ color: "#a5b5de" }} />Apple Podcasts</a>
          <a href="#" className="pod-sub-btn"><PIcon name="grid" size={17} />Other platforms</a>
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   Page
================================================================ */
function App() {
  return (
    <div style={{ minHeight: "100vh", background: "var(--surface-page)" }}>
      <SiteHeader />
      <EpisodeHero />
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "44px 32px 60px" }}>
        <div className="pod-body">
          <SummaryCard />
          <MainColumn />
        </div>
      </div>
      <KeepListening />
      <SiteFooter />
    </div>
  );
}

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