// Section content — composed from Chrome + Interactive primitives

function AtAGlance() {
  return (
    <section className="section" id="at-a-glance">
      <SectionHead
        num="00"
        eyebrow="Overview"
        title="An infrastructure proposal, not a campaign."
        lead="What follows is the operating system Savvy would deploy behind Essentially Canadian. The database, the acquisition stack, and the always-on cadence, described in enough detail to evaluate before the formal proposal lands."
      />
      <div className="pillar-row">
        <div className="pillar">
          <div className="pillar-num">01 · Database</div>
          <div className="pillar-figure">2.3<sup>M+</sup></div>
          <div className="pillar-label">Investors in the database</div>
          <div className="pillar-body">Across institutional, family-office, HNW and accredited-retail tiers. The subset most relevant to <em>Essentially Canadian</em> — Canadian, accredited, real-estate and income inclined — is segmentable in one query.</div>
        </div>
        <div className="pillar">
          <div className="pillar-num">02 · Acquisition</div>
          <div className="pillar-figure">6</div>
          <div className="pillar-label">Funnel stages, every campaign</div>
          <div className="pillar-body">Targeted impression → lead form → cheque-size confirm → accreditation check → diligence call → subscription. Compliance is the funnel, not a bolt-on.</div>
        </div>
        <div className="pillar">
          <div className="pillar-num">03 · Cadence</div>
          <div className="pillar-figure">0<sup>d</sup></div>
          <div className="pillar-label">Ramp on the next call</div>
          <div className="pillar-body">Between capital calls the engine continues to qualify and nurture. When Anthem activates, the audience is already warm, accredited, and educated.</div>
        </div>
      </div>
    </section>
  );
}

function DatabaseSection() {
  const tiers = [
    {
      name: 'Institutional',
      sub: 'Tier I',
      desc: 'Family offices, foundations, and qualified institutional allocators with established mandates in real estate and alternative income. Direct-relationship channel: every conversation runs through a senior Savvy professional.',
      chips: ['Family offices', 'Foundations', 'Endowments', 'OCIO platforms', 'Allocator consultants'],
    },
    {
      name: 'High-net-worth individuals',
      sub: 'Tier II',
      desc: 'Verified accredited investors with established subscription history across alternative assets. A high-conversion segment for fund-specific calls of the Essentially Canadian profile.',
      chips: ['Prior subscribers', 'Accredited verified', 'Multi-deal LPs', '$250K+ capacity'],
    },
    {
      name: 'Accredited retail',
      sub: 'Tier III',
      desc: 'Verified accredited and eligible investors across multiple provinces, segmented for fit at the cheque-size and thesis level. The expandable layer of the database.',
      chips: ['BC', 'AB', 'ON', 'QC', 'NI 45-106 verified', '$50K–$250K'],
    },
    {
      name: 'Always-on retail engine',
      sub: 'Continuous expansion',
      desc: 'A continuously running acquisition layer that grows the retail tier between calls, calibrated to each engagement so audiences are pre-qualified for the next deployment rather than recruited under pressure.',
      chips: ['Meta · Facebook · Instagram', 'Nurture sequences', 'Webinar audiences', 'Lookalike modelling'],
    },
  ];
  return (
    <section className="section section-stone" id="database">
      <SectionHead
        num="01"
        eyebrow="The investor database"
        title="Four tiers, one segmentation grammar."
        lead="The database spans the full Canadian capital spectrum, and crucially it speaks a single segmentation language across all four tiers, so any future call can be routed by thesis, geography, accreditation, cheque-size, and engagement signal in one query."
      />
      <div className="tiers">
        {tiers.map((t, i) => (
          <div className="tier" key={t.name}>
            <div className="tier-num">{String(i + 1).padStart(2, '0')} / 04</div>
            <div className="tier-name">
              {t.name}
              <small>{t.sub}</small>
            </div>
            <div className="tier-desc">{t.desc}</div>
            <div className="tier-chips">
              {t.chips.map(c => <span className="tier-chip" key={c}>{c}</span>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 96 }}>
        <div className="eyebrow" style={{ marginBottom: 18 }}>Try the segmentation</div>
        <h3 className="h-sub" style={{ maxWidth: 720 }}>
          Five segmentation axes. Any combination is a query,
          and the query is what reaches an inbox.
        </h3>
        <SegmentationExplorer />
      </div>
    </section>
  );
}

function AcquisitionSection() {
  return (
    <section className="section" id="acquisition">
      <SectionHead
        num="02"
        eyebrow="Paid advertising infrastructure"
        title={<span>The funnel <em>is</em> the compliance layer.</span>}
        lead="Every Meta campaign feeds a structured six-stage capture and qualification process. Accredited status is verified before any prospect enters the active outreach pool, which protects compliance and concentrates spend on real, deployable capital."
      />
      <Funnel />
    </section>
  );
}

function AlwaysOnSection() {
  return (
    <section className="section section-deep" id="always-on">
      <SectionHead
        num="03"
        eyebrow="The always-on engine"
        title="Eliminate the 60–90 day ramp."
        lead="Between active capital calls the system keeps running at lower spend: generating qualified leads, nurturing prospects through structured automated communication, and maintaining the relationships you already have. The result is that when a call goes live, day-zero is day-zero."
      />
      <TimelineCompare />
      <div style={{
        marginTop: 96, paddingTop: 40,
        borderTop: '1px solid rgba(255,255,255,0.18)',
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 32,
        fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.5,
        color: 'rgba(255,255,255,0.78)',
      }}>
        {[
          ['Lead generation', 'Continuous, at meaningfully lower CPL than active-call burn.'],
          ['Nurture', 'Structured automated communication, segmented by thesis fit.'],
          ['Audience build', 'Segments are pre-staged and ready for next-deal activation.'],
          ['Investor relations', 'Cadence with existing investors maintained through reporting and outreach.'],
        ].map(([k, v]) => (
          <div key={k}>
            <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--c-gold)', marginBottom: 12 }}>{k}</div>
            <div>{v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function AnthemSection() {
  const cells = [
    {
      title: 'A branded retail community',
      body: 'Pre-qualified Canadian investors are pulled into an Anthem-branded community. Identity, voice, and editorial managed jointly with the Anthem team. The audience belongs to Anthem; the infrastructure is provided by Savvy.',
      meta: 'Anthem voice · Anthem brand',
    },
    {
      title: 'Pre-qualified for the return profile',
      body: 'Acquisition creative and qualifying questions are calibrated to investors whose return expectations match the 10–12% IRR and 4% cash-yield profile of Essentially Canadian, so the pool arrives self-selected.',
      meta: 'IRR · yield matched',
    },
    {
      title: 'Continuity between capital calls',
      body: 'Each subsequent deployment accelerates rather than restarts. The same audience, warmed and grown, is available for the next call. Every Anthem fund cycle compounds on the last.',
      meta: 'Compounds per cycle',
    },
  ];
  return (
    <section className="section section-stone" id="for-anthem">
      <SectionHead
        num="04"
        eyebrow="Configured for Anthem"
        title={<span>For <em>Essentially Canadian</em>, specifically.</span>}
        lead="The infrastructure described above is generic. Below is how it would be deployed against the specific shape of Anthem's next Canadian fund: a 10–12% IRR strategy with a 4% cash yield, oriented to Canadian retail capital."
      />
      <div className="deploy-grid">
        {cells.map((c, i) => (
          <div className="deploy-cell" key={i}>
            <div className="deploy-num">0{i + 1} · Deployment</div>
            <div className="deploy-title">{c.title}</div>
            <div className="deploy-body">{c.body}</div>
            <div className="deploy-meta">{c.meta}</div>
          </div>
        ))}
      </div>
      <div className="fund-card">
        <div className="fund-card-left">
          <div className="fund-card-eyebrow">Fund Profile · As proposed</div>
          <div className="fund-card-title">Essentially <em>Canadian</em></div>
          <p style={{ marginTop: 24, fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)' }}>
            A Canadian retail-tier investor base, recruited and qualified to the fund's
            economics. Built once, deployable per call, retained between calls.
          </p>
        </div>
        <div className="fund-stats">
          <div>
            <div className="fund-stat-num">10–12<span style={{ fontSize: 22 }}>%</span></div>
            <div className="fund-stat-label">Target IRR</div>
            <div className="fund-stat-body">Net to retail investors over the strategy term.</div>
          </div>
          <div>
            <div className="fund-stat-num">4<span style={{ fontSize: 22 }}>%</span></div>
            <div className="fund-stat-label">Cash yield</div>
            <div className="fund-stat-body">Running yield, distributed on the fund cadence.</div>
          </div>
          <div>
            <div className="fund-stat-num">$50<span style={{ fontSize: 22 }}>K</span></div>
            <div className="fund-stat-label">Minimum cheque</div>
            <div className="fund-stat-body">Confirmed at lead-form stage; verified at close.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function EngagementSection() {
  return (
    <section className="section" id="engagement">
      <SectionHead
        num="05"
        eyebrow="Engagement model"
        title="Two routes. One stays clear of IR."
        lead="Anthem elects the engagement shape. The recommended route routes investor capital through a Savvy-managed SPV that subscribes to the Anthem vehicle as a single LP, keeping the Anthem cap table clean and removing individual investor relations from the Anthem team."
      />
      <Routes />
    </section>
  );
}

function NextSection() {
  const items = [
    { week: 'Following week', title: 'Full proposal', body: 'Structure, engagement model, fee economics, illustrative deployment plan, and counsel-reviewed compliance posture in a single document.' },
    { week: 'On signature', title: 'Brand & compliance', body: 'Anthem voice and visual system applied to the acquisition stack. Counsel reviews lead-form language, accreditation gates, and disclosure copy before any spend is live.' },
    { week: '+ 4 weeks', title: 'Investor conversations begin', body: 'Funnel is live; audience is being qualified and accredited. First diligence calls are booked. Soft commits start to accumulate in the pipeline.' },
    { week: '+ 8–12 weeks', title: 'First close', body: 'Verbal commits convert to executed subscriptions and wires. Capital lands in the SPV (or directly into the Anthem vehicle, at your election) and the first close prints.' },
  ];
  return (
    <section className="section" id="next">
      <SectionHead
        num="06"
        eyebrow="What's next"
        title="Path from kickoff to first close."
        lead="The detailed proposal arrives next week. From signature, investor conversations realistically open inside a four-week window. First capital close follows six to twelve weeks beyond, on a cadence calibrated to compliance and conviction-driven outreach."
      />
      <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 Signoff() {
  return (
    <div>
      <section className="signoff">
        <div className="signoff-inner">
          <div>
            <div className="signoff-mark">
              The pool is already <em>there.</em><br/>
              The work is in routing it.
            </div>
            <p className="signoff-body">
              The infrastructure to address a national retail audience exists. What
              moves the needle is how cleanly it is configured to a sponsor's specific
              return profile, brand voice, and engagement preferences. That's the
              proposal that arrives next week.
            </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 style={{fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14, color: 'rgba(255,255,255,0.6)', marginTop: 4}}>savvycapital.io</div>
            </div>
            <div className="signoff-contact-row">
              <div className="signoff-contact-label">Capital advisory</div>
              <div className="signoff-contact-val">Zastre &amp; Co.</div>
              <div style={{fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14, color: 'rgba(255,255,255,0.6)', marginTop: 4}}>zastre.com</div>
            </div>
          </aside>
        </div>
        <div className="signoff-foot">
          <span>Confidential · Prepared for Anthem Development</span>
          <span>Savvy Capital with Zastre &amp; Co. · v0.1 · May 2026</span>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  AtAGlance, DatabaseSection, AcquisitionSection,
  AlwaysOnSection, AnthemSection, EngagementSection,
  NextSection, Signoff,
});