// Document chrome — header, cover, watermark, plates
const { useState, useEffect, useRef, useMemo, Fragment } = React;

function DocHeader({ inverse }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const nav = ['Database', 'Acquisition', 'Always-On', 'For Anthem', 'Engagement', 'Next'];
  const ids = ['database', 'acquisition', 'always-on', 'for-anthem', 'engagement', 'next'];
  return (
    <header className={`doc-header ${inverse && !scrolled ? 'is-inverse' : ''}`}>
      <div className="doc-header-brand">
        Savvy <span className="x">×</span> Zastre &amp; Co. <span className="x">prepared for anthem development</span>
      </div>
      <nav className="doc-header-nav">
        {nav.map((label, i) => (
          <a key={label} onClick={() => {
            const el = document.getElementById(ids[i]);
            if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
          }}>{label}</a>
        ))}
      </nav>
      <div className="doc-header-meta">
        <span>Confidential</span>
        <span>Draft · v0.1</span>
      </div>
    </header>
  );
}

function Cover() {
  return (
    <section className="cover" data-screen-label="00 Cover">
      <div className="cover-body">
        <div className="cover-top">
          <div className="cover-eyebrow">Operational Capability Overview · Savvy Capital with Zastre &amp; Co. · Prepared for Anthem Development</div>
          <h1 className="cover-title">
            Capital infrastructure<br/>
            for <em>Essentially Canadian.</em>
          </h1>
          <p className="cover-sub">
            A closer look at the Savvy retail-capital platform: the investor database,
            the always-on acquisition engine, and the engagement model proposed for
            Anthem's next Canadian fund.
          </p>
        </div>
        <dl className="cover-foot">
          <div>
            <dt>From</dt>
            <dd>Savvy <span style={{opacity: 0.55}}>×</span> Zastre &amp; Co.<small>savvycapital.io · zastre.com</small></dd>
          </div>
          <div>
            <dt>To</dt>
            <dd>Anthem Development<small>Vancouver, British Columbia</small></dd>
          </div>
          <div>
            <dt>Fund</dt>
            <dd>Essentially Canadian<small>10–12% IRR · 4% cash yield</small></dd>
          </div>
          <div>
            <dt>Status</dt>
            <dd>Operational Memo<small>Full proposal · following week</small></dd>
          </div>
        </dl>
      </div>
    </section>
  );
}

function Watermark() {
  return (
    <div className="watermark-band">
      <img src="assets/logos/zastre-monogram-tan.svg" alt="" />
    </div>
  );
}

function NoteBand() {
  return (
    <section className="note-band">
      <div className="note">
        <div className="note-mark">"</div>
        <div>
          <div className="note-body">
            Per your note, here's the closer look on the operational side.
            The full proposal, structure, engagement model, and economics
            will follow next week. If there's anything specific you want
            us to dig into, say the word.
          </div>
          <div className="note-attribution">Savvy Capital · with Zastre &amp; Co. · Cover note</div>
        </div>
      </div>
    </section>
  );
}

function PlateBridge({ children, variant = 'bridge' }) {
  return (
    <section className={`plate plate--${variant}`}>
      <div className="plate-inner">
        <h2 className="plate-title">{children}</h2>
      </div>
    </section>
  );
}

function SectionHead({ num, eyebrow, title, lead }) {
  return (
    <div className="section-head">
      <div className="section-head-meta">
        <div className="section-num">{num}</div>
        <div className="eyebrow">{eyebrow}</div>
      </div>
      <div className="section-head-title">
        <h2 className="h-section">{title}</h2>
        {lead && <p className="lead">{lead}</p>}
      </div>
    </div>
  );
}

Object.assign(window, { DocHeader, Cover, Watermark, NoteBand, PlateBridge, SectionHead });