// Capital Stacks chrome for the newsletter report: pictogram tile, sheet header, hero.
// The report sections themselves come from broadsheet-sections-1.jsx / -2.jsx unchanged.

const CS_SPONSOR_URL = "https://fatchillimedia.com/2881/newsletter-course/?utm_source=report_page_peter_e&utm_medium=cta_button&utm_campaign=newsletter_course";

// Pictogram tile — same markup and colour pairings as the design system's <Pictogram>
// (shapes come from ds/capital-stacks/tokens/pictograms.css).
const CS_PICTO = {
  envelope: { bg: 'var(--cs-peri)',  parts: [['env', 'var(--cs-cream)'], ['flap', 'var(--cs-peach)']] },
  star:     { bg: 'var(--cs-ochre)', parts: [['star', 'var(--cs-cream)']] },
  target:   { bg: 'var(--cs-peri)',  parts: [['ring', 'var(--cs-cream)'], ['ring2', 'var(--cs-ochre)'], ['core', 'var(--cs-peri)']] },
};

function CSPicto({ kind, size = 44 }) {
  const k = CS_PICTO[kind] || CS_PICTO.envelope;
  return (
    <span className="cs-tile" aria-hidden="true" style={{ background: k.bg, width: size }}>
      {k.parts.map(([cls, color], i) => <span key={i} className={cls} style={{ background: color }}></span>)}
    </span>
  );
}

function CSTopbar() {
  const sections = ['Findings', 'Sample', 'Discoverability', 'Access', 'Cadence', 'Topics', 'Signup', 'Explorer'];
  const [active, setActive] = React.useState('Findings');
  const [progress, setProgress] = React.useState(0);
  const [docked, setDocked] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      setProgress(h.scrollTop / (h.scrollHeight - h.clientHeight) * 100);
      const strip = document.getElementById('sponsor');
      if (strip) {
        // Dock the sponsor into the nav once the inline strip has scrolled past it
        setDocked(strip.getBoundingClientRect().bottom < 48);
      }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className="cs-header">
      <div className="cs-header-title">
        <a href="#top" className="cs-header-mark" aria-label="Center for Sustainable Media">
          <img src={window.__resources && window.__resources.csmLogo || "assets/csm-logo.png"} alt="" />
        </a>
        <a href="#top" className="cs-header-name">
          <span>2026 European Enterprise Publisher Newsletter Report</span>
        </a>
        <div className="cs-header-credit">
          <span>By the Center for Sustainable Media</span>
          <span className="cs-header-issue">Report №01 · 2026</span>
        </div>
      </div>
      <nav className={`cs-nav${docked ? ' is-docked' : ''}`} aria-label="Sections">
        {sections.map((s) =>
        <a key={s} href={`#${s.toLowerCase()}`}
        className={`cs-tab${active === s ? ' is-active' : ''}`}
        aria-current={active === s ? 'true' : undefined}
        onClick={() => setActive(s)}>{s}</a>
        )}
        <a className="cs-nav-sponsor" href={CS_SPONSOR_URL} target="_blank" rel="noopener" aria-label="Sponsor: FatChilli newsletter course">
          <span className="cs-nav-sponsor-label">Sponsor</span>
          <img src="assets/fatchilli-logo.png" alt="FatChilli for publishers" />
        </a>
      </nav>
      <div className="scroll-progress" style={{ width: `${progress}%` }} />
    </header>);

}

function CSHero() {
  return (
    <section className="hero" id="top">
      <div className="shell">
        <div>
          <div className="eyebrow">A field audit by CSM</div>
          <h1>Europe's enterprise publishers are <em>underusing</em> the inbox.</h1>
          <p className="hero-deck">
            Newsletters give publishers their most controlled channel and connect with the
            readers most likely to pay. Across 32 enterprise publishers in 10 markets, we
            found newsletter products that are hard to find, harder to evaluate, and asked
            too much of readers before they ever saw a single edition.
          </p>
          <div className="hero-meta">
            <span>Published<b>May 2026</b></span>
            <span>Reading time<b>14 minutes</b></span>
            <span>Sample size<b>n = 859</b></span>
          </div>
        </div>
        <div className="hero-stats">
          <div className="hero-stat cs-hover">
            <CSPicto kind="envelope" />
            <div className="num">859</div>
            <div className="label">Newsletters reviewed</div>
          </div>
          <div className="hero-stat cs-hover">
            <CSPicto kind="star" />
            <div className="num">32</div>
            <div className="label">Enterprise publishers</div>
          </div>
          <div className="hero-stat cs-hover">
            <CSPicto kind="target" />
            <div className="num">10</div>
            <div className="label">European markets</div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { CSPicto, CSTopbar, CSHero });