// site/why-it-matters.jsx — Why It Matters page + featured newsletter

function WhyItMattersPage() {
  const nlRef = useReveal();
  return (
    <div data-screen-label="06 Why It Matters">
      <PageHeading
        eyebrow="Perspective"
        title="Why It Matters"
        sub="Reflections on the work — and why it deserves your attention."
      />

      {/* Featured newsletter */}
      <section className="section-navy" data-comment-anchor="why-it-matters-newsletter">
        <div className="container">
          <div ref={nlRef} className="newsletter-feature reveal">
            <span className="nl-eyebrow">Latest Issue &nbsp;·&nbsp; 1 June 2026</span>
            <h2 className="nl-title">The Why It Matters Newsletter</h2>
            <span className="nl-rule" aria-hidden="true"></span>
            <p className="nl-lede">
              Our regular briefing on the markets that move your wealth — a clear,
              jargon-free read on global stocks, rates, currencies and commodities,
              and what they mean for you. View it online or download a copy to keep.
            </p>
            <div className="nl-actions">
              <a
                className="btn-gold-solid"
                href="why-it-matters-newsletter.html"
                target="_blank"
                rel="noopener noreferrer"
              >
                Read The Newsletter
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.WhyItMattersPage = WhyItMattersPage;