// Formal proposal, the four answer sections + engagement + next + signoff

function FeesSection() {
  const lines = [
    {
      name: 'Capital Infrastructure Fee',
      tag: 'Standing channel',
      amount: '$30,000',
      unit: '/ month',
      annual: '$360,000 / year',
      includes: 'Channel operations: investor relations, branded community, qualification funnel, CRM and audience operations, creative direction, market intelligence, and the dedicated EMD-wholesale function described in §02. Media is invoiced separately below as Advertising Spend.',
    },
    {
      name: 'SPV Administration',
      tag: 'Per active vehicle',
      amount: '$12,000',
      unit: '/ year',
      annual: 'Per series',
      includes: 'Subscription processing, K-1 / T5 issuance, KYC/AML maintenance, quarterly investor reporting, and operation of the Transparency Window.',
    },
    {
      name: 'Success Fee',
      tag: 'Paid to Zastre & Co. (dealing under FMI Securities, Registered EMD)',
      amount: '2.5%',
      unit: 'of capital raised',
      annual: 'Earned only on capital actually subscribed',
      includes: 'Regulated dealing relationship, suitability and accreditation review, KYC/AML on every subscriber, and oversight of all distribution activity. Third-party EMD selling commissions on the wholesale channel are additional and paid out of the gross raise on that channel only (see §02).',
    },
    {
      name: 'Advertising Spend',
      tag: 'Meta media budget',
      amount: '$20,000',
      unit: '/ month',
      annual: 'Invoiced monthly',
      includes: 'Paid acquisition on Meta (Facebook and Instagram), running portrait video and static creative against accredited-investor audiences in the Anthem profile. Reflected as a single monthly line on the channel statement.',
    },
  ];

  return (
    <section className="section section-stone" id="fees" data-screen-label="06 Fees">
      <SectionHead
        num="06"
        eyebrow="Fee economics, fully baked"
        title="The schedule. In full, in writing."
        lead="A standing channel replaces what would otherwise be a multi-hundred-thousand-dollar internal commitment, an IR function, an acquisition capability, fund administration, and a registered dealer relationship, before a single dollar is raised. The terms below deliver that stack as a single managed engagement."
      />

      <div className="fee-table">
        <div className="fee-row fee-row-head">
          <div>Line item</div>
          <div>Fee</div>
          <div className="fee-row-includes-head">What it covers</div>
        </div>
        {lines.map(l => (
          <div className="fee-row" key={l.name}>
            <div className="fee-cell-name">
              <div className="fee-name">{l.name}</div>
              <div className="fee-tag">{l.tag}</div>
            </div>
            <div className="fee-cell-amount">
              <div className="fee-amount">
                {l.amount}<span className="fee-unit">{l.unit}</span>
              </div>
              <div className="fee-annual">{l.annual}</div>
            </div>
            <div className="fee-includes">{l.includes}</div>
          </div>
        ))}
      </div>

      <div className="fee-illustrative">
        <div className="fee-illustrative-head">
          <div className="eyebrow">Year one · illustrative</div>
          <div className="fee-illustrative-note">
            Worked against a single active series and a $20M first close. Numbers
            are illustrative; the success fee is earned only on capital actually subscribed.
          </div>
        </div>
        <div className="fee-illustrative-table">
          <div className="fee-illustrative-row">
            <div>Capital Infrastructure Fee</div>
            <div>Monthly retainer</div>
            <div className="num">$30,000 / mo</div>
          </div>
          <div className="fee-illustrative-row">
            <div>SPV Administration</div>
            <div>Per active series</div>
            <div className="num">$12,000 / yr</div>
          </div>
          <div className="fee-illustrative-row fee-illustrative-row-soft">
            <div>Advertising Spend</div>
            <div>Indicative monthly budget</div>
            <div className="num">$20,000 / mo</div>
          </div>
          <div className="fee-illustrative-row fee-illustrative-row-total">
            <div>Success Fee · on a $20M close</div>
            <div></div>
            <div className="num">$500,000</div>
          </div>
        </div>
      </div>

      <div className="fee-terms">
        <div className="fee-term">
          <div className="fee-term-label">Term</div>
          <div className="fee-term-body">
            12-month initial term from execution. Auto-renews on an evergreen basis
            with 60 days' written notice by either party.
          </div>
        </div>
        <div className="fee-term">
          <div className="fee-term-label">Billing</div>
          <div className="fee-term-body">
            Infrastructure Fee invoiced monthly in advance. Success Fee invoiced
            within 10 business days of each subscription close. SPV Administration
            invoiced annually per active series. Ad spend reconciled monthly.
          </div>
        </div>
        <div className="fee-term">
          <div className="fee-term-label">What is not included</div>
          <div className="fee-term-body">
            Fund counsel, audit, and tax filings sit with Anthem's existing
            providers. Out-of-scope creative production (video, photography) is
            quoted separately and approved in writing before commencement.
          </div>
        </div>
        <div className="fee-term">
          <div className="fee-term-label">No range, no surprise</div>
          <div className="fee-term-body">
            These are the numbers. Setup is absorbed into the first three months
            of the Infrastructure Fee. There is no onboarding charge and no
            separate platform licence pass-through.
          </div>
        </div>
      </div>

      <div className="creative-showcase">
        <div className="creative-showcase-head">
          <div className="eyebrow">Creative in market</div>
          <div className="creative-showcase-title">
            What the $30K/month buys, in market.
          </div>
          <div className="creative-showcase-note">
            Three examples of creative running on Meta against accredited-investor
            audiences in the Anthem profile: two portrait statics and one
            portrait video, designed for in-feed and Reels placements. At full
            operating cadence the channel ships 2 to 5 videos and 10+ statics
            per month, refreshed against fatigue and creative-test winners.
          </div>
          <div className="creative-showcase-disclaimer">
            <span className="creative-showcase-disclaimer-tag">Draft · v1</span>
            <span className="creative-showcase-disclaimer-body">
              The video below was produced in roughly two hours as a directional
              render to demonstrate format, hook, and pacing. Production creative
              is built on the same AI stack but with 10 to 20 hours per spot
              dedicated to scripting, model selection, voice direction, edit,
              and finishing. All final creative is reviewed against the
              NI 31-103 marketing rules under FMI Securities' EMD oversight,
              with Zastre &amp; Co. as the dealing arm.
              Treat this as creative direction, not the finished spot.
            </span>
          </div>
        </div>
        <div className="creative-showcase-grid">
          <div className="creative-phone">
            <div className="creative-phone-frame">
              <div className="creative-phone-notch"></div>
              <div className="creative-phone-screen">
                <img
                  className="creative-phone-image"
                  src="assets/ad-static-1.png"
                  alt="Static ad: Invest Like a Developer. Without the Development."
                />
              </div>
            </div>
            <div className="creative-phone-caption">Static · 01</div>
          </div>
          <div className="creative-phone">
            <div className="creative-phone-frame">
              <div className="creative-phone-notch"></div>
              <div className="creative-phone-screen">
                <video
                  className="creative-phone-video"
                  src="assets/ad-draft-v1.mp4"
                  poster="assets/ad-draft-v1-poster.jpg"
                  controls
                  playsInline
                  preload="metadata"
                />
              </div>
            </div>
            <div className="creative-phone-caption">Draft video · 01</div>
          </div>
          <div className="creative-phone">
            <div className="creative-phone-frame">
              <div className="creative-phone-notch"></div>
              <div className="creative-phone-screen">
                <img
                  className="creative-phone-image"
                  src="assets/ad-static-2.png"
                  alt="Static ad: BREAKING NEWS, Vancouver developer Anthem Properties opens $4B portfolio to Canadians"
                />
              </div>
            </div>
            <div className="creative-phone-caption">Static · 02</div>
          </div>
        </div>
      </div>

      <FunnelDiagram />
    </section>
  );
}

function FunnelDiagram() {
  const stages = [
    {
      num: '01',
      label: 'Top-of-funnel media',
      sub: 'Meta · portrait creative',
      body: 'Paid in-feed and Reels placements served against accredited-investor look-alike audiences in the Anthem profile. Hooks split-tested weekly; creative refreshed on a 14-day cycle.',
    },
    {
      num: '02',
      label: 'Qualified lead captured',
      sub: 'Suitability prescreen · $100 effective CPL',
      body: 'Click-through to a baseline suitability and accreditation prescreen. Self-attested income, net worth, and investor category captured; non-qualifiers dropped before the channel spends another dollar.',
    },
    {
      num: '03',
      label: 'Funnel page',
      sub: 'Anthem Essentially Canadian thesis',
      body: 'Branded landing experience operated under the Anthem identity. Anthem track record, fund profile, transparency framework, and the structural answer to "what is this?" — all in one scroll.',
    },
    {
      num: '04',
      label: 'Calendar booking',
      sub: 'Self-serve, calendared to the IR team',
      body: 'Qualified leads book directly into the IR team\'s calendar. Calendar holds enforce minimum lead time; reschedules tracked; no-shows automatically re-sequenced.',
    },
    {
      num: '05',
      label: 'Setter outreach',
      sub: 'AI setter or human setter · Anthem\'s call',
      body: 'First-touch dial within minutes of booking, conducted either by an AI voice agent or by a human setter, configured to Anthem\'s preference. Confirms intent, re-verifies accreditation category, captures residency for provincial coverage, and briefs the closer with a one-page summary before the call. The two configurations carry different unit economics; both deliver the same handoff to the closer.',
    },
    {
      num: '06',
      label: 'Closer · IR call',
      sub: 'Live conversation with the senior closer',
      body: 'Experienced closer takes the call as a dealing representative of Zastre & Co., licensed through FMI Securities (the registered EMD of record). The closer is the human relationship from this point through subscription; the AI setter does not deal or advise.',
    },
    {
      num: '07',
      label: 'Subscription paperwork',
      sub: 'Conducted through Zastre & Co. dealing reps under FMI Securities · NI 31-103',
      body: 'Subscription agreement issued. Suitability and accreditation documented to the EMD\'s standards under National Instrument 31-103. KYC and AML conducted under FINTRAC requirements; identity verified; source-of-funds attested. Prospectus exemption claimed under National Instrument 45-106 (typically the accredited-investor or eligible-investor prong). All marketing communications referenced in the file have been reviewed against the NI 31-103 communication rules under FMI Securities\' EMD oversight. No subscription is accepted before this step is complete.',
      compliance: true,
    },
    {
      num: '08',
      label: 'Capital received · Series SPV',
      sub: 'Schedule I trust account, in the series name',
      body: 'Funds wire into a segregated trust account at a Canadian Schedule I bank, in the name of the Anthem series, under the control of the third-party SPV administrator. Subscription processed; register entry created within one business day; New-Investor Notification delivered to Anthem under the Transparency Window.',
    },
    {
      num: '09',
      label: 'Drawdown to Anthem',
      sub: 'On Anthem\'s written drawdown notice',
      body: 'Capital flows from the series trust account to the Anthem project on a written drawdown notice from Anthem. Monthly capital-flow statement to Anthem\'s CFO and IR; quarterly investor report and tax pack tracked from this point forward.',
    },
  ];

  return (
    <div className="funnel">
      <div className="funnel-head">
        <div className="eyebrow">The funnel · end to end</div>
        <div className="funnel-title">
          From the first impression to capital in the Anthem series.
        </div>
        <div className="funnel-note">
          Nine stations. Every dollar of subscribed capital walks all of them in
          order. Compliance, custody, and the Transparency Window are not
          separate workstreams; they are stations on the same conveyor.
        </div>
      </div>

      <div className="funnel-track">
        {stages.map((s, i) => (
          <div className={`funnel-stage ${s.compliance ? 'is-compliance' : ''}`} key={s.num}>
            <div className="funnel-stage-num">{s.num}</div>
            <div className="funnel-stage-body">
              <div className="funnel-stage-label">{s.label}</div>
              <div className="funnel-stage-sub">{s.sub}</div>
              <div className="funnel-stage-text">{s.body}</div>
            </div>
            {i < stages.length - 1 && <div className="funnel-connector" aria-hidden="true"></div>}
          </div>
        ))}
      </div>
    </div>
  );
}

function DistributionChannelsSection() {
  return (
    <section className="section" id="distribution" data-screen-label="02 Distribution">
      <SectionHead
        num="02"
        eyebrow="Distribution architecture"
        title={<span>Two channels to capital. <em>Built in parallel.</em></span>}
        lead="A standing channel is only as durable as the routes it travels. The Anthem series are distributed along two channels run in parallel: a direct retail funnel that opens fast and runs continuously, and an EMD wholesale shelf that takes longer to build but compounds with every selling-dealer agreement. The first channel funds the first close. The second channel underwrites scale."
      />

      <div className="dc-grid">
        <div className="dc-channel dc-channel-direct">
          <div className="dc-channel-head">
            <div className="dc-channel-tag">Channel 01</div>
            <div className="dc-channel-name">Direct retail</div>
            <div className="dc-channel-sub">Operated by Savvy · dealt by Zastre &amp; Co. under FMI Securities</div>
          </div>
          <div className="dc-channel-body">
            Paid acquisition on Meta against accredited and eligible investor audiences in the Anthem profile.
            Qualified leads route into the IR calendar; dealing representatives close under FMI Securities'
            EMD registration. The full nine-station funnel is diagrammed in §06.
          </div>
          <div className="dc-channel-stats">
            <div className="dc-stat">
              <div className="dc-stat-num">~3–4 months</div>
              <div className="dc-stat-label">From execution to first close, counsel-paced</div>
            </div>
            <div className="dc-stat">
              <div className="dc-stat-num">Continuous</div>
              <div className="dc-stat-label">Runs between drawdowns; investor base scales every month</div>
            </div>
            <div className="dc-stat">
              <div className="dc-stat-num">2.5%</div>
              <div className="dc-stat-label">Success fee on capital raised, single line</div>
            </div>
          </div>
        </div>

        <div className="dc-channel dc-channel-wholesale">
          <div className="dc-channel-head">
            <div className="dc-channel-tag">Channel 02</div>
            <div className="dc-channel-name">EMD wholesale shelf</div>
            <div className="dc-channel-sub">Dedicated wholesaler · Zastre &amp; Co. dealing reps · placed on third-party EMD shelves</div>
          </div>
          <div className="dc-channel-body">
            A dedicated wholesaler is hired in Phase 1 with a singular mandate: place the Anthem series on the shelves
            of Canadian exempt-market dealers whose books match the thesis (accredited and eligible retail with appetite
            for institutional-quality real estate). The longer road, taken deliberately. It adds a source of capital
            that does not depend on paid social, builds dealer relationships that compound across future Anthem series,
            and meaningfully expands the addressable raise per series.
          </div>
          <div className="dc-channel-stats">
            <div className="dc-stat">
              <div className="dc-stat-num">Month 1</div>
              <div className="dc-stat-label">Dedicated wholesaler hired and onboarded</div>
            </div>
            <div className="dc-stat">
              <div className="dc-stat-num">Months 4–6</div>
              <div className="dc-stat-label">First selling-dealer agreement signed (DD cycle runs 3 to 6 months per EMD)</div>
            </div>
            <div className="dc-stat">
              <div className="dc-stat-num">Months 6–9</div>
              <div className="dc-stat-label">First wholesale-channel subscriptions cleared</div>
            </div>
            <div className="dc-stat">
              <div className="dc-stat-num">Month 12+</div>
              <div className="dc-stat-label">Meaningful run rate; second and third selling dealers added</div>
            </div>
          </div>
          <div className="dc-channel-econ">
            <div className="dc-channel-econ-label">Fee economics, transparent</div>
            <div className="dc-channel-econ-body">
              Selling EMDs typically take a 3% to 7% upfront commission plus a 0.5% to 1% trailer on capital sourced
              through their channel. This is paid out of the gross raise on the wholesale channel only; the direct-channel
              fee schedule is unaffected. The trade is deliberate: the wholesale channel is more expensive per dollar,
              and more durable per relationship.
            </div>
          </div>
        </div>
      </div>

      <div className="dc-timeline">
        <div className="dc-timeline-head">
          <div className="eyebrow">Time to capital · the two roads</div>
          <div className="dc-timeline-title">When each channel starts contributing.</div>
        </div>
        <div className="dc-timeline-axis">
          <span>Week 0</span>
          <span>Month 3</span>
          <span>Month 6</span>
          <span>Month 9</span>
          <span>Month 12</span>
          <span>Year 2+</span>
        </div>
        <div className="dc-timeline-row">
          <div className="dc-timeline-label">Direct retail</div>
          <div className="dc-timeline-track">
            <div className="dc-timeline-bar dc-timeline-bar-direct" style={{ left: '0%', width: '100%' }}></div>
            <div className="dc-timeline-marker" style={{ left: '12%' }}>First close · ~3–4 months</div>
          </div>
        </div>
        <div className="dc-timeline-row">
          <div className="dc-timeline-label">EMD wholesale</div>
          <div className="dc-timeline-track">
            <div className="dc-timeline-bar dc-timeline-bar-wholesale" style={{ left: '35%', width: '65%' }}></div>
            <div className="dc-timeline-marker" style={{ left: '38%' }}>First selling agreement</div>
            <div className="dc-timeline-marker" style={{ left: '60%' }}>First subscriptions</div>
            <div className="dc-timeline-marker" style={{ left: '85%' }}>Steady-state contribution</div>
          </div>
        </div>
        <div className="dc-timeline-foot">
          Both channels run in parallel from day one. The direct channel funds the first close and the next several.
          The wholesale channel layers in over the back half of Year 1 and compounds from there.
        </div>
      </div>

      <div className="dc-case">
        <div className="dc-case-head">
          <div className="eyebrow">Why both, not one</div>
          <div className="dc-case-title">The case for taking the longer road.</div>
        </div>
        <ul className="dc-case-list">
          <li><strong>Single-channel concentration is fragile.</strong> A direct funnel can be throttled by ad-platform policy, audience fatigue, or a single macro headline. A wholesale shelf cannot be turned off by Meta.</li>
          <li><strong>The wholesale channel reaches capital the direct channel cannot.</strong> Investors with long-standing EMD relationships rarely subscribe through paid social. Reaching them requires being on their dealer's shelf.</li>
          <li><strong>Selling-dealer relationships compound across Anthem series.</strong> The first agreement is the hardest. Subsequent series ride the existing dealer relationships at a fraction of the effort.</li>
          <li><strong>Anthem's institutional credibility opens the door.</strong> A $4B sponsor with a 30-year track record clears EMD due diligence in a way most sponsors cannot. The asset profile is the door-opener; the wholesaler turns the handle.</li>
        </ul>
      </div>
    </section>
  );
}

function RegulatorySection() {
  const provinces = [
    { code: 'BC', name: 'British Columbia', regulator: 'BCSC', status: 'FMI Securities · Registered EMD', live: true, note: 'Initial province of operation.' },
    { code: 'AB', name: 'Alberta', regulator: 'ASC', status: 'FMI Securities · Registered EMD', live: true, note: 'Initial province of operation.' },
    { code: 'ON', name: 'Ontario', regulator: 'OSC', status: 'FMI Securities · Registered EMD', live: true, note: 'Available for Phase 2 expansion.' },
    { code: 'QC', name: 'Québec', regulator: 'AMF', status: 'FMI Securities · Registered EMD', live: true, note: 'Available for Phase 2 expansion.' },
    { code: 'SK · MB', name: 'Prairies', regulator: 'FCAA · MSC', status: 'Available on request', live: false, note: 'Activated as deal pipeline requires.' },
    { code: 'NS · NB · PEI · NL', name: 'Atlantic', regulator: 'NSSC · FCNB · OSC PEI · DSS NL', status: 'Available on request', live: false, note: 'Activated as deal pipeline requires.' },
  ];

  const activities = [
    {
      label: 'Distributions of exempt securities',
      body: 'Sales of LP units in each Anthem series to accredited investors and other eligible categories under National Instrument 45-106, conducted by Zastre & Co. dealing representatives operating under FMI Securities\' EMD registration.',
    },
    {
      label: 'Suitability and accreditation review',
      body: 'Every subscriber is screened against the prospectus exemption claimed, with suitability documented to the EMD\'s standards. No subscription is accepted before this step is complete.',
    },
    {
      label: 'KYC / AML and identity verification',
      body: 'Conducted on every subscriber under FINTRAC requirements. Files maintained for the regulatory retention period and made available to Anthem on request.',
    },
    {
      label: 'Marketing oversight',
      body: 'All public-facing marketing collateral that mentions the offering is reviewed against NI 31-103 communication rules and the marketing restrictions of NI 45-106 under FMI Securities\' EMD oversight, prior to distribution.',
    },
  ];

  return (
    <section className="section" id="regulatory" data-screen-label="03 Regulatory">
      <SectionHead
        num="03"
        eyebrow="Regulatory standing"
        title={<span>The dealer is <em>registered.</em> The activities are within scope.</span>}
        lead="FMI Securities is the registered Exempt Market Dealer under National Instrument 31-103. Zastre & Co. is the investment bank running the engagement; its dealing representatives are licensed through FMI's NI 31-103 registration, and all distribution activity for the Anthem series SPV is conducted through that arrangement. Savvy provides technology, acquisition, and operations; Savvy does not conduct dealing activity."
      />

      <div className="reg-shell">
        <div className="reg-provinces">
          <div className="reg-provinces-head">
            <div className="reg-provinces-eyebrow">FMI Securities · EMD coverage</div>
            <div className="reg-provinces-title">Provinces of operation, by phase.</div>
          </div>
          <div className="reg-province-table">
            <div className="reg-province-row reg-province-row-head">
              <div>Province</div>
              <div>Regulator</div>
              <div>Status</div>
              <div></div>
            </div>
            {provinces.map(p => (
              <div className={`reg-province-row ${p.live ? 'is-live' : 'is-future'}`} key={p.code}>
                <div className="reg-province-name">
                  <span className="reg-province-code">{p.code}</span>
                  <span className="reg-province-fullname">{p.name}</span>
                </div>
                <div className="reg-province-reg">{p.regulator}</div>
                <div className="reg-province-status">
                  <span className={`reg-dot ${p.live ? 'is-live' : 'is-future'}`}></span>
                  {p.status}
                </div>
                <div className="reg-province-note">{p.note}</div>
              </div>
            ))}
          </div>
          <div className="reg-province-foot">
            Phase 1 operates in British Columbia and Alberta from execution.
            Ontario and Québec are available for activation on 30 days' notice
            as the deal pipeline calls for them. Registration particulars are
            verifiable on the CSA National Registration Search.
          </div>
        </div>

        <div className="reg-activities">
          <div className="reg-activities-head">
            <div className="eyebrow">Activities covered under the EMD</div>
            <div className="reg-activities-title">
              What sits inside the registered relationship.
            </div>
          </div>
          <div className="reg-activities-list">
            {activities.map(a => (
              <div className="reg-activity" key={a.label}>
                <div className="reg-activity-label">{a.label}</div>
                <div className="reg-activity-body">{a.body}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="reg-division">
        <div className="reg-division-head">
          <div className="eyebrow">Division of responsibility</div>
          <div className="reg-division-title">Who does what, under whose registration.</div>
        </div>
        <div className="reg-division-grid reg-division-grid-four">
          <div className="reg-division-cell reg-division-cell-fmi">
            <div className="reg-division-cell-head">FMI Securities</div>
            <div className="reg-division-cell-sub">Registered EMD · NI 31-103</div>
            <ul>
              <li>Holds the NI 31-103 registration and the dealer-of-record relationship with every subscriber.</li>
              <li>Sponsors the dealing representatives operating under Zastre &amp; Co.</li>
              <li>Oversees suitability, accreditation, KYC/AML, and marketing review on every file.</li>
              <li>Carries regulatory accountability for all distribution activity.</li>
            </ul>
          </div>
          <div className="reg-division-cell reg-division-cell-zastre">
            <div className="reg-division-cell-head">Zastre &amp; Co.</div>
            <div className="reg-division-cell-sub">Investment bank · dealing reps under FMI</div>
            <ul>
              <li>Investment bank running the engagement; staffs the closer and IR functions.</li>
              <li>Dealing representatives licensed through FMI Securities' NI 31-103 registration.</li>
              <li>Executes suitability and accreditation conversations on the dealing-rep side.</li>
              <li>Receives the success fee on capital actually raised, paid under the FMI umbrella.</li>
            </ul>
          </div>
          <div className="reg-division-cell reg-division-cell-savvy">
            <div className="reg-division-cell-head">Savvy Capital</div>
            <div className="reg-division-cell-sub">Technology &amp; operations</div>
            <ul>
              <li>Operates the acquisition engine, community, CRM, and the EMD-wholesale function.</li>
              <li>Generates leads; hands accreditation gate to the Zastre / FMI dealing arm.</li>
              <li>Does not conduct dealing activity, give investment advice, or provide suitability.</li>
              <li>Receives the Capital Infrastructure Fee and SPV admin fee.</li>
            </ul>
          </div>
          <div className="reg-division-cell reg-division-cell-anthem">
            <div className="reg-division-cell-head">Anthem Properties Group</div>
            <div className="reg-division-cell-sub">Issuer · sponsor</div>
            <ul>
              <li>Defines the offering terms, governance, and project pipeline.</li>
              <li>Engages a single channel; FMI, Zastre, and Savvy answer behind it.</li>
              <li>Retains its existing fund counsel and audit relationships.</li>
              <li>Receives the Transparency Window into every series.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function DataExitSection() {
  const retained = [
    { k: 'Subscribed investors', v: 'Every limited partner in every Anthem series, by name, commitment, subscription date, and KYC status, without redaction.' },
    { k: 'Series SPV vehicles', v: 'Each Anthem-branded series LP, intact, including the investor register, subscription documents, and historical capital-flow record.' },
    { k: 'Investor-relations contact', v: 'Direct relationship with every subscribed investor, subject to the privacy and consent terms each investor accepted at subscription.' },
    { k: 'Brand & community', v: 'The Anthem Essentially Canadian brand, content library, and any community surfaces operated under the Anthem identity.' },
    { k: 'Reporting history', v: 'All Transparency Window reports, monthly capital flows, quarterly investor reports, and KYC/AML files for the duration of regulatory retention.' },
  ];

  return (
    <section className="section section-stone" id="data" data-screen-label="05 Data ownership">
      <SectionHead
        num="05"
        eyebrow="Data ownership"
        title="What Anthem keeps."
        lead="Every investor brought into an Anthem series belongs to Anthem. The list below is what that means in practice."
      />

      <div className="exit-ownership exit-ownership-single">
        <div className="exit-ownership-col">
          <div className="exit-ownership-tag">Anthem keeps</div>
          <div className="exit-ownership-list">
            {retained.map(r => (
              <div className="exit-ownership-row" key={r.k}>
                <div className="exit-ownership-k">{r.k}</div>
                <div className="exit-ownership-v">{r.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SPVGovernanceSection() {
  const window_ = [
    {
      cadence: 'On subscription',
      label: 'New-investor notification',
      body: 'Every accepted subscription generates a register entry within one business day: investor name, commitment amount, subscription date, KYC/AML status, accreditation exemption claimed, and source channel.',
      audience: 'Anthem · designated team',
    },
    {
      cadence: 'Monthly',
      label: 'Capital-flow summary',
      body: 'A single statement, by series: subscriptions in, redemptions out (where permitted), distributions paid, and current LP balance. Reconciled to the SPV bank account and signed by the administrator.',
      audience: 'Anthem · CFO + IR',
    },
    {
      cadence: 'Quarterly',
      label: 'Full investor report',
      body: 'Complete LP-level register with running balances. KYC/AML status on every subscriber. Concentration analysis by tier, geography, and cheque size. Outstanding commitment schedule.',
      audience: 'Anthem · CFO + IR + counsel',
    },
    {
      cadence: 'Annual',
      label: 'Tax and audit pack',
      body: 'K-1 / T5 issuance for every LP. Auditor-ready file: subscription documents, AML files, transfer-agent records, distribution ledger. Delivered to Anthem\'s fund counsel and tax preparer on request.',
      audience: 'Anthem · counsel + auditor',
    },
    {
      cadence: 'On request',
      label: 'Ad-hoc visibility',
      body: 'Anthem may request the file on any subscribed investor at any time, including KYC documentation, source of funds attestations, and communication history maintained under the EMD relationship.',
      audience: 'Anthem · executive',
    },
  ];

  const visibility = [
    { area: 'Investor names', visible: true, note: 'Full register, not aggregated.' },
    { area: 'Commitment amounts', visible: true, note: 'Per-LP, with current balance.' },
    { area: 'Subscription dates', visible: true, note: 'Date of acceptance and capital received.' },
    { area: 'KYC / AML status', visible: true, note: 'Pass / fail flag and supporting file on request.' },
    { area: 'Accreditation exemption', visible: true, note: 'Specific NI 45-106 prong claimed.' },
    { area: 'Source channel', visible: true, note: 'Which acquisition path each subscriber came through.' },
    { area: 'Geographic & tier mix', visible: true, note: 'Per-series and across the platform.' },
    { area: 'Distribution history', visible: true, note: 'Every distribution paid by series and by LP.' },
    { area: 'Unsubscribed audience', visible: false, note: 'Aggregate totals only. Identities belong to Savvy.' },
    { area: 'Investor communications log', visible: true, note: 'Maintained under the EMD relationship; available on request.' },
  ];

  return (
    <section className="section section-deep" id="spv" data-screen-label="04 SPV">
      <SectionHead
        num="04"
        eyebrow="SPV governance"
        title={<span>The Transparency Window, in <em>practice.</em></span>}
        lead="A consolidated SPV simplifies Anthem's cap table; it must not reduce Anthem's visibility into the investors behind it. The Window is the contractual answer. It defines, at every cadence, what Anthem sees, who delivers it, and on what timeline. The default posture is full visibility; the only items aggregated are those that do not belong to Anthem."
      />

      <div className="spv-structure">
        <div className="spv-structure-head">
          <div className="eyebrow">Custody &amp; structure</div>
          <div className="spv-structure-title">How the vehicle is built.</div>
        </div>
        <div className="spv-structure-grid">
          <div className="spv-structure-cell">
            <div className="spv-structure-num">Vehicle</div>
            <div className="spv-structure-body">
              Anthem-branded master limited partnership formed in a Canadian
              jurisdiction agreed with Anthem's fund counsel. Each capital call is
              a discrete series of the master LP, with its own LPA series schedule,
              register, and bank account.
            </div>
          </div>
          <div className="spv-structure-cell">
            <div className="spv-structure-num">Custody &amp; flows</div>
            <div className="spv-structure-body">
              Subscriptions are received into a segregated trust account at a
              Canadian Schedule&nbsp;I bank, in the name of the series, under the
              control of the SPV administrator and reconciled monthly. Capital
              flows on to the Anthem project on a written drawdown notice from Anthem.
            </div>
          </div>
          <div className="spv-structure-cell">
            <div className="spv-structure-num">Administrator</div>
            <div className="spv-structure-body">
              A third-party fund administrator, mutually selected with Anthem,
              maintains the register, processes subscriptions, issues capital
              calls and distributions, and prepares the periodic statements that
              feed the Transparency Window.
            </div>
          </div>
          <div className="spv-structure-cell">
            <div className="spv-structure-num">Communications</div>
            <div className="spv-structure-body">
              Investor communications run through the Anthem Essentially Canadian
              brand, jointly approved with the Anthem team. Regulated communications
              (subscription confirmations, statements, tax forms) are issued under
              FMI Securities' registered name, executed by Zastre &amp; Co. dealing
              reps, and reviewed before release.
            </div>
          </div>
        </div>
      </div>

      <div className="spv-window">
        <div className="spv-window-head">
          <div className="eyebrow">Reporting cadence</div>
          <div className="spv-window-title">What Anthem receives, and when.</div>
        </div>
        <div className="spv-window-table">
          <div className="spv-window-row spv-window-row-head">
            <div>Cadence</div>
            <div>What it contains</div>
            <div>Routed to</div>
          </div>
          {window_.map(w => (
            <div className="spv-window-row" key={w.label}>
              <div className="spv-window-cadence">
                <div className="spv-window-cadence-tag">{w.cadence}</div>
                <div className="spv-window-cadence-label">{w.label}</div>
              </div>
              <div className="spv-window-body">{w.body}</div>
              <div className="spv-window-audience">{w.audience}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="spv-visibility">
        <div className="spv-visibility-head">
          <div className="eyebrow">Visibility matrix</div>
          <div className="spv-visibility-title">Item by item, what is shared and what is not.</div>
        </div>
        <div className="spv-visibility-table">
          {visibility.map(v => (
            <div className={`spv-visibility-row ${v.visible ? 'is-visible' : 'is-aggregate'}`} key={v.area}>
              <div className="spv-visibility-area">{v.area}</div>
              <div className="spv-visibility-mark">
                {v.visible ? (
                  <span className="spv-mark spv-mark-visible">Full visibility</span>
                ) : (
                  <span className="spv-mark spv-mark-aggregate">Aggregate only</span>
                )}
              </div>
              <div className="spv-visibility-note">{v.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProjectionSection() {
  const scenarios = [
    {
      tag: 'Conservative',
      sub: '12% call-to-subscription · $75K avg ticket',
      steady: '$7.2M',
      monthly: '~8 subscriptions / month',
      yearOne: '$5.4M',
      lps: '~70 LPs',
    },
    {
      tag: 'Base case',
      sub: '15% call-to-subscription · $100K avg ticket',
      steady: '$12M',
      monthly: '~10 subscriptions / month',
      yearOne: '$9M',
      lps: '~90 LPs',
      emphasis: true,
    },
    {
      tag: 'Strong',
      sub: '20% call-to-subscription · $125K avg ticket',
      steady: '$20M',
      monthly: '~13 subscriptions / month',
      yearOne: '$15M',
      lps: '~115 LPs',
    },
  ];

  return (
    <section className="section" id="projection" data-screen-label="07 Projection">
      <SectionHead
        num="07"
        eyebrow="Projected capital · what Year 1 looks like for Anthem"
        title={<span>From <em>media spend</em> to Anthem's register.</span>}
        lead="What every dollar of disciplined media spend buys is, eventually, an accredited Canadian LP subscribed into an Anthem series and a register that compounds with every subsequent draw. The walk below shows how that translation happens stage by stage, anchored to unit economics from comparable channels Savvy operates today. Illustrative, not promised; actuals are reported every month through the Transparency Window."
      />

      <div className="proj-disclaimer">
        <div className="proj-disclaimer-tag">Directional model · not a forecast</div>
        <div className="proj-disclaimer-body">
          The numbers in this section are a directional model, not a representation
          of what the channel will produce in practice. They are anchored to unit
          economics drawn from comparable channels Savvy operates today, and shown
          across a range to make the sensitivities visible. Actual outcomes will
          move with offering terms, market conditions, creative performance,
          IR responsiveness, and a half-dozen variables we don't yet control jointly.
          Treat this as the shape of the opportunity, not a commitment, projection,
          or guarantee.
        </div>
      </div>

      <div className="proj-anchors">
        <div className="proj-anchor">
          <div className="eyebrow">Anchor · top of funnel</div>
          <div className="proj-anchor-num">$100</div>
          <div className="proj-anchor-unit">per qualified lead</div>
          <div className="proj-anchor-body">
            An accredited investor in profile, captured into the channel, having
            cleared the baseline suitability screen. Costed against paid media
            blended with organic referral.
          </div>
        </div>
        <div className="proj-anchor">
          <div className="eyebrow">Anchor · sales-ready</div>
          <div className="proj-anchor-num">$300</div>
          <div className="proj-anchor-unit">per qualified booked call</div>
          <div className="proj-anchor-body">
            A qualified lead converted to a calendared call with the IR team -
            accredited, suitable, on-thesis for the Anthem series. Effective
            lead-to-call rate of roughly one in three.
          </div>
        </div>
      </div>

      <div className="proj-funnel">
        <div className="proj-funnel-head">
          <div className="eyebrow">Monthly funnel · $20K ad spend</div>
          <div className="proj-funnel-title">From dollar one to subscription.</div>
          <div className="proj-funnel-note">
            Walked at the indicative Year-1 ad budget of $20,000 per month. The
            same unit economics scale roughly linearly to ~$40K/mo per series
            before efficiency tapers.
          </div>
        </div>
        <div className="proj-funnel-table">
          <div className="proj-funnel-row proj-funnel-row-head">
            <div>Stage</div>
            <div>Conversion</div>
            <div className="proj-funnel-vol">Monthly volume</div>
            <div className="num">Cost basis</div>
          </div>
          <div className="proj-funnel-row">
            <div className="proj-funnel-stage">Advertising spend</div>
            <div>Indicative monthly budget</div>
            <div className="proj-funnel-vol">·</div>
            <div className="num">$20,000</div>
          </div>
          <div className="proj-funnel-row">
            <div className="proj-funnel-stage">Qualified leads</div>
            <div>$100 each</div>
            <div className="proj-funnel-vol">200</div>
            <div className="num">$20,000</div>
          </div>
          <div className="proj-funnel-row">
            <div className="proj-funnel-stage">Qualified booked calls</div>
            <div>~33% of leads · $300 each</div>
            <div className="proj-funnel-vol">~67</div>
            <div className="num">$20,000</div>
          </div>
          <div className="proj-funnel-row proj-funnel-row-emph">
            <div className="proj-funnel-stage">Subscribed investors</div>
            <div>15% of calls · base case</div>
            <div className="proj-funnel-vol">~10</div>
            <div className="num">$2,000 / sub · CAC</div>
          </div>
          <div className="proj-funnel-row proj-funnel-row-total">
            <div className="proj-funnel-stage">New capital subscribed</div>
            <div>$100K average ticket</div>
            <div className="proj-funnel-vol">$1.0M / mo</div>
            <div className="num">2% effective CAC</div>
          </div>
        </div>
      </div>

      <div className="proj-scenarios">
        <div className="proj-scenarios-head">
          <div className="eyebrow">Annual projection · same engine, three scenarios</div>
          <div className="proj-scenarios-title">
            Holding ad spend at $20K/mo. The variables that move are final-stage
            conversion and the average ticket on subscription.
          </div>
        </div>
        <div className="proj-scenarios-grid">
          {scenarios.map(s => (
            <div className={`proj-scenario ${s.emphasis ? 'is-emphasis' : ''}`} key={s.tag}>
              <div className="proj-scenario-tag">{s.tag}</div>
              <div className="proj-scenario-num">{s.steady}</div>
              <div className="proj-scenario-unit">steady-state annual raise</div>
              <div className="proj-scenario-sub">{s.sub}</div>
              <div className="proj-scenario-line">
                <span>Run-rate</span>
                <span>{s.monthly}</span>
              </div>
              <div className="proj-scenario-line">
                <span>Year 1 raise · 9 productive months</span>
                <span className="proj-scenario-bold">{s.yearOne}</span>
              </div>
              <div className="proj-scenario-line proj-scenario-line-final">
                <span>New LPs on Anthem's register · Year 1</span>
                <span className="proj-scenario-bold">{s.lps}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="proj-notes">
        <div className="proj-note">
          <div className="proj-note-label">Year 1 ramp</div>
          <div className="proj-note-body">
            Year 1 carries a Phase 1 build of roughly three months before the
            first close opens. Figures above quote both steady-state (12
            productive months) and Year 1 (9 productive months) to keep the
            comparison honest.
          </div>
        </div>
        <div className="proj-note">
          <div className="proj-note-label">Scaling ad spend</div>
          <div className="proj-note-body">
            Unit economics hold to roughly $40K/month per series before
            efficiency tapers. Doubling the budget, the base case scales to
            roughly $24M steady-state. Beyond that, the next series launches
            in parallel rather than oversaturate a single audience.
          </div>
        </div>
        <div className="proj-note">
          <div className="proj-note-label">The largest lever</div>
          <div className="proj-note-body">
            Final-stage conversion is the single largest variable. It is set
            by offering terms, creative quality, speed-to-call from the IR
            team, and the strength of the Anthem brand once the channel is
            operating in market.
          </div>
        </div>
        <div className="proj-note">
          <div className="proj-note-label">Anchored to comparables</div>
          <div className="proj-note-body">
            The $100 / $300 unit economics reflect what Savvy currently
            operates for accredited-investor acquisition in adjacent Canadian
            private real estate offerings. Anthem-specific actuals are reported
            monthly through the Transparency Window and re-baselined quarterly.
          </div>
        </div>
      </div>
    </section>
  );
}

function FormalEngagementSection() {
  const phases = [
    {
      tag: 'Phase 01',
      label: 'Foundation',
      window: 'Months 1–3',
      title: 'Build the channel and the vehicle.',
      bullets: [
        'SPV master and Series 1 structured alongside Anthem\'s fund counsel; LPA finalised.',
        'Anthem Essentially Canadian brand and editorial system stood up jointly.',
        'Direct-channel acquisition stack live; first audiences in qualification.',
        'Dedicated EMD wholesaler hired and onboarded; target dealer list profiled; first DD packages assembled.',
        'Offering materials counsel-reviewed; Transparency Window operational.',
      ],
    },
    {
      tag: 'Phase 02',
      label: 'Capital Activation',
      window: 'Months 3–12',
      title: 'First capital call deploys against a qualifying Anthem project.',
      bullets: [
        'First close opens within the first 90 days of Phase 2, sourced through the direct channel.',
        'Direct channel runs continuously; investor base scales between draws.',
        'EMD wholesale outreach in market; first selling-dealer agreement targeted by month 4 to 6, first wholesale subscriptions by month 6 to 9.',
        'Quarterly investor reports begin; KYC/AML files maintained.',
        'Series 2 readiness assessed against the next project in the pipeline.',
      ],
    },
    {
      tag: 'Phase 03',
      label: 'Compounding',
      window: 'Year 2+',
      title: 'The channel becomes the standing infrastructure.',
      bullets: [
        'Subsequent capital calls deploy against successive projects.',
        'Onboarding friction approaches zero; warm base carries forward.',
        'Wholesale shelf carries multiple selling dealers; second and third agreements compound on the first.',
        'Channel economics improve materially each cycle.',
        'Optional extension to additional provinces on 30 days\' notice.',
      ],
    },
  ];

  return (
    <section className="section" id="engagement" data-screen-label="08 Engagement">
      <SectionHead
        num="08"
        eyebrow="Engagement phasing"
        title="Build, activate, compound."
        lead="The engagement moves through three phases, each with a defined output. Phase 1 builds the channel and the vehicle. Phase 2 puts capital to work. Phase 3 is the standing posture, every subsequent call deploys against an infrastructure that already exists."
      />
      <div className="phase-grid">
        {phases.map(p => (
          <div className="phase" key={p.tag}>
            <div className="phase-tag">{p.tag}</div>
            <div className="phase-window">{p.window}</div>
            <div className="phase-label">{p.label}</div>
            <div className="phase-title">{p.title}</div>
            <ul className="phase-list">
              {p.bullets.map(b => <li key={b}>{b}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

function FormalNextSection() {
  const items = [
    { week: 'Week 0', title: 'Counsel alignment', body: 'Walk Anthem\'s fund counsel through structure, custody, and the engagement-letter terms. Confirm the qualifying first project.' },
    { week: 'Week 1', title: 'Engagement letter', body: 'Execute the master engagement letter and the Series 1 sub-engagement. Anthem retains right of approval over creative, voice, and investor communications.' },
    { week: 'Weeks 1–6', title: 'Foundation build', body: 'SPV structured and registered. Brand and editorial system live. Direct-channel acquisition stack stood up under FMI Securities\' marketing review (executed by Zastre & Co.). EMD wholesaler hired; target dealer list and DD package in motion.' },
    { week: 'Weeks 6–14', title: 'First close opens', body: 'Investor conversations live; first wires received into the Series 1 trust account. Capital flows to the Anthem project on Anthem\'s written drawdown. Exact timing is paced by counsel and offering-doc finalisation.' },
  ];
  return (
    <section className="section section-stone" id="next" data-screen-label="09 Next">
      <SectionHead
        num="09"
        eyebrow="Next steps"
        title="From this document to first close."
        lead="The proposal is fully baked. The remaining work is counsel alignment, the engagement letter, and the Phase 1 build. A first close lands inside roughly three to four months of execution, paced by counsel and the compliance cadence at each step."
      />
      <div className="next-grid">
        {items.map((it, i) => (
          <div className="next-card" key={i}>
            <div className="next-week">{it.week}</div>
            <div className="next-title">{it.title}</div>
            <div className="next-body">{it.body}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FormalSignoff() {
  return (
    <section className="signoff">
      <div className="signoff-inner">
        <div>
          <div className="signoff-mark">
            Four answers.<br/>
            One <em>channel.</em>
          </div>
          <p className="signoff-body">
            The terms above are written to be signed. Fees are baked. Registration sits
            with FMI Securities as the Exempt Market Dealer of record, with Zastre &amp; Co.
            dealing reps operating under it. Data ownership on exit is bounded and the
            Transparency Window is contractual. The next step is a half-hour with
            Anthem's fund counsel and an engagement letter.
          </p>
        </div>
        <aside className="signoff-contact">
          <div className="signoff-contact-row">
            <div className="signoff-contact-label">Lead advisor</div>
            <div className="signoff-contact-val">Savvy Capital</div>
            <div className="signoff-contact-sub">savvycapital.io</div>
          </div>
          <div className="signoff-contact-row">
            <div className="signoff-contact-label">Investment bank</div>
            <div className="signoff-contact-val">Zastre &amp; Co.</div>
            <div className="signoff-contact-sub">zastre.com · dealing reps under FMI</div>
          </div>
          <div className="signoff-contact-row">
            <div className="signoff-contact-label">Registered EMD</div>
            <div className="signoff-contact-val">FMI Securities</div>
            <div className="signoff-contact-sub">NI 31-103 · dealer of record</div>
          </div>
          <div className="signoff-contact-row">
            <div className="signoff-contact-label">Document control</div>
            <div className="signoff-contact-val">May 2026</div>
            <div className="signoff-contact-sub">Confidential · Anthem Properties Group</div>
          </div>
        </aside>
      </div>
      <div className="signoff-foot">
        <span>Confidential · Prepared for Anthem Properties Group</span>
        <span>Savvy Capital · Zastre &amp; Co. · FMI Securities (Registered Exempt Market Dealer, NI 31-103)</span>
      </div>
    </section>
  );
}

Object.assign(window, {
  FeesSection, DistributionChannelsSection, RegulatorySection, DataExitSection, SPVGovernanceSection,
  ProjectionSection, FormalEngagementSection, FormalNextSection, FormalSignoff,
});