/* ================================================================
   paywall-article.jsx — the signed-out publication paywall in situ,
   sharing the Content Detail page design: breadcrumb, compressed
   navy hero (eyebrow, headline, standfirst, author photo + Free
   badge), then the paywall block (teaser → gate card → sign-in) as
   the gated body.
================================================================ */
const { SiteHeader, SiteFooter, PaywallBlock, injectPwCSS, injectCdCSS, AccessBadge } = window;

const GATE_META = {
  eyebrow: "The Chief Economist's Note",
  h1: "The hiking cycle is over, but cuts will come slowly",
  standfirst: "Markets have run ahead of the data. We expect one further cut this year and a slower path thereafter, because the last leg of disinflation is proving stickier than the headline numbers suggest.",
  metaBits: ["12 August 2026", "6 min read", "3 charts"],
};

let gateCSS = false;
function injectGateCSS() {
  if (gateCSS) return; gateCSS = true;
  const el = document.createElement("style");
  el.textContent = `
  .gate-body { max-width: 720px; margin: 0 auto; padding: 44px 24px 80px; }
  /* Hero already carries the standfirst, so the teaser keeps only the
     opening paragraph fading behind the gate. */
  .gate-body .pw-standfirst { display: none; }
  `;
  document.head.appendChild(el);
}

function ArticlePage() {
  injectPwCSS(); injectCdCSS(); injectGateCSS();
  return (
    <div style={{ minHeight: "100%", display: "flex", flexDirection: "column", background: "var(--surface-page)" }}>
      <SiteHeader />
      <main style={{ flex: 1 }}>
        <div className="cd-root">
          <div className="cd-wrap">
            <nav className="cd-crumb" aria-label="Breadcrumb">
              <a href="#">Insights</a>
              <span className="cd-cr-sep" aria-hidden="true">/</span>
              <span className="cd-cr-here">{GATE_META.eyebrow}</span>
            </nav>
          </div>
          <header className="cd-hero">
            <div className="cd-hero-in">
              <p className="cd-eyebrow">{GATE_META.eyebrow}</p>
              <h1 className="cd-h1">{GATE_META.h1}</h1>
              <p className="cd-standfirst">{GATE_META.standfirst}</p>
              <div className="cd-metarow">
                <span className="cd-avatar"><img src="assets/people/Neil-Shearing.jpeg" alt="Neil Shearing" style={{ width: "38px", height: "38px", borderRadius: "50%", objectFit: "cover", display: "block" }} /></span>
                <span className="cd-byline">Neil Shearing, Group Chief Economist</span>
                {GATE_META.metaBits.map((b) => (
                  <React.Fragment key={b}><span className="cd-meta-sep" aria-hidden="true" />{" "}<span>{b}</span></React.Fragment>
                ))}
                <span className="cd-meta-sep" aria-hidden="true" />
                <AccessBadge level="Free" onNavy />
              </div>
            </div>
          </header>
          <div className="gate-body">
            <PaywallBlock state="default" live showContext={false} fullForm />
          </div>
        </div>
      </main>
      <SiteFooter />
    </div>
  );
}

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