// Formal proposal, chrome
const { useState: useStateFC, useEffect: useEffectFC } = React;

function FormalHeader({ inverse }) {
  const [scrolled, setScrolled] = useStateFC(false);
  useEffectFC(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const nav = [
    ['Regulatory', 'regulatory'],
    ['SPV', 'spv'],
    ['Data', 'data'],
    ['Fees', 'fees'],
  ];
  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">formal proposal · anthem properties group</span>
      </div>
      <nav className="doc-header-nav">
        {nav.map(([label, id]) => (
          <a key={id} onClick={() => {
            const el = document.getElementById(id);
            if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
          }}>{label}</a>
        ))}
      </nav>
      <div className="doc-header-meta">
        <span>Confidential</span>
        <span>May 2026</span>
      </div>
    </header>
  );
}

function FormalCover() {
  return (
    <section className="cover formal-cover" data-screen-label="00 Cover">
      <div className="cover-body">
        <div className="cover-top">
          <div className="cover-eyebrow">
            Capital Infrastructure Proposal · Savvy Capital with Zastre &amp; Co. · FMI Securities, Registered EMD · Prepared for Anthem Properties Group
          </div>
          <h1 className="cover-title">
            A standing retail capital<br/>
            channel for <em>Essentially Canadian.</em>
          </h1>
          <p className="cover-sub">
            Formal terms in answer to your four asks: fee economics in full, regulatory
            standing under NI 31-103, data ownership on exit, and the governance and
            transparency model for the series&nbsp;SPV.
          </p>
        </div>
        <dl className="cover-foot">
          <div>
            <dt>From</dt>
            <dd>Savvy Capital · Zastre &amp; Co.<small>savvycapital.io · zastre.com</small></dd>
          </div>
          <div>
            <dt>To</dt>
            <dd>Anthem Properties Group<small>Vancouver, British Columbia</small></dd>
          </div>
          <div>
            <dt>Document</dt>
            <dd>Formal Proposal<small>May 2026</small></dd>
          </div>
          <div>
            <dt>Mandate</dt>
            <dd>Standing channel<small>Essentially Canadian platform</small></dd>
          </div>
        </dl>
      </div>
    </section>
  );
}

function FormalNote() {
  return (
    <section className="note-band">
      <div className="note">
        <div className="note-mark">"</div>
        <div>
          <div className="note-body">
            Four items, four answers. This document closes them. The infrastructure
            memo you have describes <em>what</em> sits behind the channel; what
            follows is <em>how it serves Anthem, on what terms, and under whose
            regulated umbrella.</em>
          </div>
          <div className="note-attribution">Cover note · Savvy Capital with Zastre &amp; Co.</div>
        </div>
      </div>
    </section>
  );
}

// Four asks summary band, sits right after the cover
function AsksBand() {
  const asks = [
    { num: '01', label: 'Regulatory standing', body: 'FMI Securities (Registered EMD, NI 31-103) with Zastre & Co. dealing reps, by province and by activity.', anchor: 'regulatory' },
    { num: '02', label: 'SPV governance', body: 'Custody, reporting, communications, and the Transparency Window in practice.', anchor: 'spv' },
    { num: '03', label: 'Data ownership', body: 'Every investor brought into an Anthem series belongs to Anthem, in writing.', anchor: 'data' },
    { num: '04', label: 'Fee economics in full', body: 'A baked schedule, no ranges. Retainer, success fee, SPV admin, ad spend.', anchor: 'fees' },
  ];
  return (
    <section className="section asks-band" data-screen-label="00 Four asks">
      <div className="asks-band-head">
        <div className="eyebrow">In answer to your four asks</div>
        <h2 className="h-section" style={{ marginTop: 18 }}>
          Each section that follows answers one. In order.
        </h2>
      </div>
      <div className="asks-grid">
        {asks.map(a => (
          <a className="ask-card" key={a.num} onClick={() => {
            const el = document.getElementById(a.anchor);
            if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
          }}>
            <div className="ask-num">{a.num}</div>
            <div className="ask-label">{a.label}</div>
            <div className="ask-body">{a.body}</div>
            <div className="ask-link">Read the answer <span>→</span></div>
          </a>
        ))}
      </div>
    </section>
  );
}

function MandateSection() {
  return (
    <section className="section" id="mandate" data-screen-label="01 Mandate">
      <SectionHead
        num="01"
        eyebrow="The mandate"
        title={<span>Not a raise. A <em>channel</em>.</span>}
        lead="The engagement is the design and operation of a standing retail capital channel for Anthem Properties Group: an always-on infrastructure that keeps qualified Canadian retail capital warm and deployable against Anthem's capital calls, and that compounds with each cycle rather than rebuilding from zero."
      />
      <div className="mandate-grid">
        <div className="mandate-cell">
          <div className="mandate-num">Single channel</div>
          <div className="mandate-body">
            Anthem engages one channel. Savvy builds and operates the infrastructure;
            Zastre &amp; Co. is the investment bank, and its dealing representatives
            are licensed through FMI Securities, the registered Exempt Market Dealer
            of record. Regulatory and operational responsibility sits where it belongs
            behind a single point of contact.
          </div>
        </div>
        <div className="mandate-cell">
          <div className="mandate-num">Series architecture</div>
          <div className="mandate-body">
            Each capital call is raised into a discrete series of an Anthem-branded
            master SPV. The first series carries the setup; every series thereafter
            is faster and cheaper to launch. The vehicle is the asset Anthem's brand
            is attached to, not a one-time wrapper.
          </div>
        </div>
        <div className="mandate-cell">
          <div className="mandate-num">Calibrated to the fund</div>
          <div className="mandate-body">
            Acquisition and qualification are calibrated to the stated profile of
            Essentially Canadian: 10–12% IRR, 4% cash yield, 60% LTV, 10–20% GP
            co-investment. Investors arrive matched to the economics, not recruited
            against them.
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FormalHeader, FormalCover, FormalNote, AsksBand, MandateSection });