/* ================================================================
   credit-article.jsx — the credit paywall in situ, now sharing the
   Content Detail page design: breadcrumb, compressed navy hero
   (eyebrow, headline, standfirst, author photo + Free badge), then
   the signed-in trialist credit block (State A, live) as the gated
   body. Spend a credit → unlocks the article in place.
================================================================ */
const { SiteHeader, SiteFooter, CreditPaywall, injectCpCSS, injectCdCSS, AccessBadge } = window;

const TRIAL_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", "12 min read", "4 charts"],
};

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

function ArticlePage() {
  injectCpCSS(); injectCdCSS(); injectTrialCSS();
  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">{TRIAL_META.eyebrow}</span>
            </nav>
          </div>
          <header className="cd-hero">
            <div className="cd-hero-in">
              <p className="cd-eyebrow">{TRIAL_META.eyebrow}</p>
              <h1 className="cd-h1">{TRIAL_META.h1}</h1>
              <p className="cd-standfirst">{TRIAL_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>
                {TRIAL_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="trial-body">
            <CreditPaywall variant="A" live />
          </div>
        </div>
      </main>
      <SiteFooter />
    </div>
  );
}

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