// ============================================================
// DEMIURGE — ENGAGEMENT MODEL (single source of truth)
//
// INTERIM PRICING, in force until the Demiurge Console ships.
// Replaces the four fixed tiers (Starter/Growth/Autonomous/
// Enterprise) that were duplicated across packages.jsx,
// landing-conversion.jsx, signup.jsx and api/fulfill.js.
//
// The model: a Setup & Integration engagement priced to what the
// client actually wants built (no flat fee — scope drives it), then
// a fork — Managed Operations (retainer, quoted at setup) or
// Self-Run (no monthly fee to Demiurge).
//
// ── CHANGE THE PUBLISHED NUMBERS HERE, NOWHERE ELSE ──────────
// Both /packages and /full render from this file.
// ============================================================

const DGX_PRICING = {
  // Setup & Integration is scoped to what the client actually wants built —
  // which modules, how many channels, what has to be integrated. There is
  // deliberately NO published flat figure: a single-channel phone build and a
  // multi-site regulated stack are not the same job, and quoting one number
  // for both misprices every engagement in one direction or the other.
  // Keep this null. Anything that needs a setup cost must say "quoted".
  setupFrom: null,
  // Front Desk — the entry tier. Fixed and published. The 150-call allowance is
  // a margin decision, not a placeholder: ~70% at 150 calls, ~48% at 300, ~18%
  // at 500 and negative on a bad month. Do NOT raise the allowance at £250.
  frontDeskSetup: '£600',
  frontDeskMonthly: '£250',
  // The onboarding & setup fee is COMPUTED from the modules a client picks —
  // see DGX_MODULES[].setup. The starter pack (phone + booking) sums to £600,
  // which is why the Front Desk card can still publish a fixed figure.
  // Per-module setup fees are deliberately NEVER shown on their own: a client
  // sees only the total for the bundle they chose. Do not render a breakdown.
  starterPack: ['AI Phone Agent', 'Booking Agent'],
  // Published floor for the managed retainer. Ceiling is never published.
  managedFrom: '£1,500',
  // Managed Operations slots genuinely available. Scarcity is real —
  // don't inflate it, and drop the badge to null rather than lie.
  slots: '3 slots open',
  // Where every CTA lands. Nothing on this site is self-serve purchasable
  // while pricing is quote-led.
  bookHref: (source) =>
    `/contact?intent=strategy-call&source=${encodeURIComponent(source || 'pricing')}`
};

const Tick = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
    <path d="M5 12l5 5L20 7"/>
  </svg>
);

const Arrow = () => (
  <svg className="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <path d="M5 12h14M13 6l6 6-6 6"/>
  </svg>
);

const SETUP_INCLUDES = [
  'Discovery consultation & stack design',
  'Agent fleet built and configured for your business',
  'Workflows and integrations wired — CRM, calendars, voice, channels',
  'Handover training: your team shown how it all fits together'
];

const MANAGED_FEATS = [
  ['Monitoring, tuning and fixes', 'ongoing'],
  ['Campaign runs and new workflow requests', null],
  ['A named operations lead', null],
  ['Demiurge Console — early access at rollout', null],
  ['Your rate held for 12 months after Console launch', null]
];

const SELFRUN_FEATS = [
  ['Full handover — stack, workflows, documentation', null],
  ['Platform subscriptions in your name', 'voice · CRM · model usage'],
  ['Re-engage any time for changes or new agents', null],
  ['Move to Managed Operations whenever you want', null]
];

const FRONTDESK_FEATS = [
  ['150 connected calls included, then £0.95 each', null],
  ['Bookings and missed-call text-backs — never metered', null],
  ['Your own dashboard login and Monday summary', null],
  ['Monitored and kept working; email support', null]
];

// ── Module volume bands ─────────────────────────────────────
// What actually moves the Managed Operations retainer off its floor.
// These are NOT self-serve products and must never be presented as
// standalone prices: the retainer starts at DGX_PRICING.managedFrom
// with the first band of ONE module inside it, and volume or extra
// modules move it up from there. Every figure is indicative and
// confirmed at setup — same quote-led rule as the rest of this file.
//
// `adds` is the monthly addition to the retainer. On the first band it
// reads "Included" with `addsExtra` giving the price when that module
// is added alongside another. `beyond` is the rate once the band's
// allowance is spent, set at roughly 1.25x the band's effective rate so
// an unusually heavy month is not punished but a consistently heavy one
// makes the next band cheaper.
const DGX_MODULES = [
  {
    name: 'AI Phone Agent',
    setup: 600,
    operator: 'Livia',
    unit: 'call',
    meter: 'One connected call, inbound or outbound. Calls under 20 seconds and calls reaching voicemail are not counted. Bands assume a 3-minute average.',
    bands: [
      { name: 'Front desk',     volume: '150 calls / month',   adds: '£250 / month', beyond: '£0.95 per call' },
      { name: 'Reception',      volume: '500 calls / month',   adds: '£1,500 / month', addsExtra: 'or +£550 as an added module', beyond: '£1.05 per call' },
      { name: 'Switchboard',    volume: '1,500 calls / month', adds: '+£1,400 / month', beyond: '£0.85 per call' },
      { name: 'Contact Centre', volume: '5,000 calls / month', adds: '+£3,900 / month', beyond: '£0.68 per call' }
    ]
  },
  {
    name: 'Booking Agent',
    setup: 0,
    operator: 'Livia',
    unit: 'booking',
    meter: 'A booking taken on a call you already paid for is never counted again — you are not charged twice for the same customer. Booking bands apply to bookings arriving from other channels: web chat, WhatsApp, forms and campaigns. Reschedules are free; a cancellation within 24 hours of being made is not counted.',
    bands: [
      { name: 'Front desk', volume: 'Bookings taken on your own calls', adds: 'Never metered', beyond: '—' },
      { name: 'Diary',      volume: '400 bookings / month',   adds: 'Included in managed', addsExtra: '+£350 as an added module', beyond: '£1.00 per booking' },
      { name: 'Practice',   volume: '1,200 bookings / month', adds: '+£850 / month',   beyond: '£0.75 per booking' },
      { name: 'Estate',     volume: '3,000 bookings / month', adds: '+£1,800 / month', beyond: '£0.60 per booking' }
    ]
  },
  {
    name: 'Lead Generation',
    setup: 250,
    operator: 'Atlas',
    unit: 'lead',
    meter: 'One contactable record matching your ICP, deliverability-verified and enriched. Bounced or unverifiable records are credited back.',
    bands: [
      { name: 'Territory', volume: '1,500 leads / month',  adds: 'Included', addsExtra: '+£800 as an added module', beyond: '£0.62 per lead' },
      { name: 'Region',    volume: '5,000 leads / month',  adds: '+£2,100 / month', beyond: '£0.44 per lead' },
      { name: 'National',  volume: '15,000 leads / month', adds: '+£5,200 / month', beyond: '£0.34 per lead' }
    ]
  },
  {
    name: 'Lead Qualification',
    setup: 150,
    operator: 'Vesta',
    unit: 'lead scored',
    meter: 'One inbound lead read, scored and routed. Re-scoring an existing lead as new information arrives is free.',
    bands: [
      { name: 'Screen', volume: '5,000 scored / month',  adds: 'Included', addsExtra: '+£300 as an added module', beyond: '£0.06 per lead' },
      { name: 'Filter', volume: '20,000 scored / month', adds: '+£700 / month',   beyond: '£0.035 per lead' },
      { name: 'Gate',   volume: '75,000 scored / month', adds: '+£2,000 / month', beyond: '£0.022 per lead' }
    ]
  },
  {
    name: 'Website & Funnel',
    setup: 300,
    operator: null,
    unit: 'site',
    meter: 'A site is one published domain or subdomain. Your first site is built inside the setup engagement. Traffic is never metered.',
    bands: [
      { name: 'Presence',  volume: '1 site · 5 pages',      adds: 'Built into setup', beyond: '£45 per extra page' },
      { name: 'Funnel',    volume: '3 sites · 25 pages',    adds: '+£400 / month', beyond: '£180 per extra site / month' },
      { name: 'Portfolio', volume: '10 sites · 100 pages',  adds: '+£950 / month', beyond: '£180 per extra site / month' }
    ]
  },
  {
    name: 'Content Engine',
    setup: 200,
    operator: 'Calliope',
    unit: 'asset',
    meter: 'One asset published to one channel. The same asset reformatted for a second channel is not counted again, and drafts are free.',
    bands: [
      { name: 'Voice',     volume: '150 assets · 8 channels',    adds: 'Included', addsExtra: '+£600 as an added module', beyond: '£3.60 per asset' },
      { name: 'Broadcast', volume: '500 assets · 11 channels',   adds: '+£1,500 / month', beyond: '£2.40 per asset' },
      { name: 'Studio',    volume: '1,500 assets · all channels', adds: '+£3,600 / month', beyond: '£1.90 per asset' }
    ]
  }
];


const BUNDLE_S = {
  wrap: {
    display: 'grid', gridTemplateColumns: 'minmax(0,1.15fr) minmax(260px,.85fr)',
    gap: 20, alignItems: 'start', marginTop: 4,
  },
  picks: { display: 'flex', flexWrap: 'wrap', gap: 10, alignContent: 'flex-start' },
  chip: {
    display: 'inline-flex', alignItems: 'center', gap: 9,
    padding: '12px 15px', borderRadius: 4, cursor: 'pointer', textAlign: 'left',
    background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005)), rgba(7,9,26,0.6)',
    borderWidth: 1, borderStyle: 'solid', borderColor: 'rgba(255,255,255,0.08)',
    color: 'var(--text-dim)', font: 'inherit', fontSize: 14.5, lineHeight: 1.2,
    transition: 'border-color .14s ease, color .14s ease',
  },
  chipOn: { borderColor: 'var(--brass)', color: '#f5f1e6' },
  tick: {
    width: 15, height: 15, flex: '0 0 15px', borderRadius: 3,
    borderWidth: 1, borderStyle: 'solid', borderColor: 'rgba(255,255,255,0.18)', color: 'transparent',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  },
  tickOn: { borderColor: 'var(--brass)', color: 'var(--brass-bright)' },
  total: {
    background: 'linear-gradient(180deg, rgba(201,166,116,0.07), rgba(255,255,255,0.005)), rgba(7,9,26,0.6)',
    border: '1px solid rgba(201,166,116,0.34)', borderRadius: 4,
    padding: '24px 24px 22px', display: 'flex', flexDirection: 'column', gap: 12,
  },
  note: { fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-dim)', margin: 0 },
};

/**
 * Onboarding & setup — bundle picker.
 *
 * The client chooses modules; the onboarding & setup fee is the SUM of those
 * modules' own setup fees, computed live. Per-module fees are NEVER displayed
 * individually and there is deliberately no breakdown row — a client sees one
 * total for the bundle they chose. This exists so a small business can start
 * with a cheap bundle rather than face one large flat build fee.
 */
const BundlePicker = ({ source = 'pricing' }) => {
  const [picked, setPicked] = React.useState(DGX_PRICING.starterPack);

  const toggle = (name) =>
    setPicked((cur) =>
      cur.includes(name) ? cur.filter((n) => n !== name) : cur.concat(name),
    );

  const chosen = DGX_MODULES.filter((m) => picked.includes(m.name));
  const total = chosen.reduce((sum, m) => sum + (m.setup || 0), 0);

  // Publish the computed onboarding total for landing-calculator.jsx, which
  // reads window.DGX_SETUP_TOTAL and listens for this event. Deliberately a
  // one-way broadcast of the TOTAL only — never the per-module figures, which
  // are not to be displayed anywhere. With no picker on the page the calculator
  // falls back to the starter pack on its own, so this creates no load-order
  // dependency in either direction.
  React.useEffect(() => {
    window.DGX_SETUP_TOTAL = total;
    window.dispatchEvent(new CustomEvent('dgx:setup-total'));
  }, [total]);
  const isStarter =
    picked.length === DGX_PRICING.starterPack.length &&
    DGX_PRICING.starterPack.every((n) => picked.includes(n));

  return (
    <div className="lp-mod-wrap">
      <div className="lp-engage-fork">
        <div className="rule"></div>
        <span>build your own bundle</span>
        <div className="rule r"></div>
      </div>

      <div className="lp-mod-intro">
        <p>
          Onboarding &amp; setup is priced to the modules you actually take, not to
          one flat build fee. Pick what you want and the number below is where your
          onboarding starts — the size of your setup moves it, and we confirm the
          figure on the call. Start with the front desk alone and add the rest when
          the work pays for it.
        </p>
      </div>

      <div style={BUNDLE_S.wrap}>
        <div style={BUNDLE_S.picks} role="group" aria-label="Choose your modules">
          {DGX_MODULES.map((m) => {
            const on = picked.includes(m.name);
            return (
              <button
                type="button"
                key={m.name}
                aria-pressed={on}
                onClick={() => toggle(m.name)}
                style={{...BUNDLE_S.chip, ...(on ? BUNDLE_S.chipOn : null)}}
              >
                <span style={{...BUNDLE_S.tick, ...(on ? BUNDLE_S.tickOn : null)}} aria-hidden="true">
                  <Tick/>
                </span>
                <span>{m.name}</span>
              </button>
            );
          })}
        </div>

        <div style={BUNDLE_S.total}>
          <div className="lp-price-setup">
            {picked.length === 0
              ? 'Choose at least one module'
              : `Onboarding & setup · ${picked.length} module${picked.length > 1 ? 's' : ''}`}
          </div>
          <div className="lp-price-amount">
            <span className="cur">£</span>{total.toLocaleString('en-GB')}
            <span className="per">from · one-off</span>
          </div>
          <p style={BUNDLE_S.note}>
            {isStarter
              ? 'The front desk starter pack — one agent on your main number, with booking built in. A starting figure: the size of your setup moves it, and we confirm it on the call.'
              : 'A starting figure for this bundle. The size of your setup moves it — we scope it on the call and confirm it in writing. Monthly is separate and moves with volume, on the bands above.'}
          </p>
          <a
            href={`${DGX_PRICING.bookHref(source)}&package=bundle`}
            className="lp-btn primary"
            style={{justifyContent: 'center', width: '100%'}}
          >
            Price this bundle
            <Arrow/>
          </a>
        </div>
      </div>
    </div>
  );
};

const ModuleBands = ({ source = 'pricing' }) => (
  <div className="lp-mod-wrap">
    <div className="lp-engage-fork">
      <div className="rule"></div>
      <span>what moves the price</span>
      <div className="rule r"></div>
    </div>

    <div className="lp-mod-intro">
      <p>
        Front desk starts at <strong>{DGX_PRICING.frontDeskMonthly} a month</strong> with 150 calls
        inside it. Past that you move up a band rather than paying overage forever — and above the
        reception band you're into managed operations, which starts at{' '}
        <strong>{DGX_PRICING.managedFrom}</strong> with the first band of one operator included.
        Nothing here is bought off the page — we size it against your real numbers
        on the call, and the figures are confirmed in writing at setup.
      </p>
    </div>

    <div className="lp-mod-grid">
      {DGX_MODULES.map((m) => (
        <div className="lp-mod-card" key={m.name}>
          <div className="lp-mod-head">
            <div className="lp-mod-name">{m.name}</div>
            <div className="lp-mod-op">
              {m.operator ? `${m.operator} · ` : ''}per {m.unit}
            </div>
          </div>

          <table className="lp-mod-table">
            <thead>
              <tr>
                <th scope="col">Band</th>
                <th scope="col">Volume</th>
                <th scope="col">Price</th>
                <th scope="col">Beyond it</th>
              </tr>
            </thead>
            <tbody>
              {m.bands.map((b) => (
                <tr key={b.name}>
                  <th scope="row">{b.name}</th>
                  <td>{b.volume}</td>
                  <td className="adds">
                    {b.adds}
                    {b.addsExtra ? <span className="alt">{b.addsExtra}</span> : null}
                  </td>
                  <td className="beyond">{b.beyond}</td>
                </tr>
              ))}
            </tbody>
          </table>

          <p className="lp-mod-meter">
            <span>What counts as one {m.unit}</span>
            {m.meter}
          </p>
        </div>
      ))}
    </div>

    <div className="lp-mod-foot">
      <a href={`${DGX_PRICING.bookHref(source)}&package=managed`} className="lp-btn primary">
        Size it on a call
        <Arrow/>
      </a>
      <span>
        Two consecutive months past a band and we move you up — by then the next band costs
        you less than the overage did.
      </span>
    </div>
  </div>
);

// `headingLevel` keeps /full (embedded, h2) and /packages (standalone, h1)
// both valid — see docs/accessibility-audit.md.
const EngagementSection = ({ headingLevel = 'h2', source = 'pricing' }) => {
  const H = headingLevel;
  return (
    <section className="lp-section" id="pricing">
      <div className="lp">
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 48, flexWrap: 'wrap', maxWidth: 1100}}>
          <div style={{maxWidth: 720}}>
            <div className="lp-eyebrow">/ Engagement model</div>
            <H className="lp-h2" style={{marginTop: 18}}>
              We build it.<br/>
              <em className="lp-brass">You decide who runs it.</em>
            </H>
          </div>
          <p className="lp-lede" style={{maxWidth: 380, fontSize: 15.5}}>
            One scoped setup engagement — we design, build, integrate and hand over your
            agent stack, with your team trained on it. After that, keep us on to operate
            it, or take the keys.
          </p>
        </div>

        <div className="lp-price-card lp-engage-found">
          <div className="lp-engage-lead">
            <div className="lp-engage-step">Step 01 · Every client starts here</div>
            <div className="lp-price-name" style={{marginTop: 10}}>Onboarding &amp; setup</div>
            <div className="lp-price-amount" style={{marginTop: 14}}>
              <span className="cur">£</span>600
              <span className="per">from · one-off · starter pack</span>
            </div>
            <div className="lp-price-setup" style={{marginTop: 10, marginBottom: 0}}>
              Larger builds scoped and quoted on the call
            </div>
            <p className="lp-price-blurb" style={{marginTop: 16, minHeight: 0}}>
              One agent, one number, your calendar and your CRM — audited, built, tested and
              handed over with your team trained on it, from £600. What it actually comes to
              depends on the size of your setup — how many operators you want, how many channels
              they cover and what has to be integrated — so we scope it on the call and quote it
              itemised. Whatever the number, it is fixed in writing before anything starts.
            </p>
            <a href={DGX_PRICING.bookHref(source)} className="lp-btn primary" style={{marginTop: 22}}>
              Book a strategy call
              <Arrow/>
            </a>
          </div>
          <div className="lp-engage-list">
            {SETUP_INCLUDES.map((f, i) => (
              <div className="ln" key={i}><Tick/><span>{f}</span></div>
            ))}
          </div>
        </div>

        <div className="lp-engage-fork">
          <div className="rule"></div>
          <span>then choose how it runs</span>
          <div className="rule r"></div>
        </div>

        <div className="lp-pricing-grid" style={{marginTop: 24}}>
          <div className="lp-price-card">
            <div className="lp-price-badge">Start here</div>
            <div>
              <div className="lp-price-name">Front Desk</div>
              <div className="lp-price-tag">One agent</div>
            </div>
            <div className="lp-price-blurb">
              One agent on your main number, watched by us. It answers, it books, it texts
              back what it missed. Built for a business that would otherwise be sending
              calls to voicemail.
            </div>
            <div>
              <div className="lp-price-setup">Setup from {DGX_PRICING.frontDeskSetup} · one-off</div>
              <div className="lp-price-amount">
                <span className="cur">£</span>250
                <span className="per">/ month</span>
              </div>
            </div>
            <div className="lp-price-feat">
              {FRONTDESK_FEATS.map(([f, sub], i) => (
                <div className="ln" key={i}>
                  <Tick/>
                  <span style={{flex: 1}}>
                    <div>{f}</div>
                    {sub ? <div style={{fontFamily: 'Geist Mono', fontSize: 10.5, color: 'var(--text-dim)', letterSpacing: 0.4, marginTop: 2, textTransform: 'uppercase'}}>{sub}</div> : null}
                  </span>
                </div>
              ))}
            </div>
            <a href={`${DGX_PRICING.bookHref(source)}&package=front-desk`} className="lp-btn primary" style={{justifyContent: 'center', width: '100%'}}>
              Start with a front desk
              <Arrow/>
            </a>
            <div className="lp-price-meta">
              <span className="occ">3-month term, then rolling</span>
              <span>150 calls included</span>
            </div>
          </div>

          <div className="lp-price-card featured">
            {DGX_PRICING.slots ? <div className="lp-price-badge">{DGX_PRICING.slots}</div> : null}
            <div>
              <div className="lp-price-name">Managed Operations</div>
              <div className="lp-price-tag">Hands-off</div>
            </div>
            <div className="lp-price-blurb">
              We operate the stack for you — monitoring, tuning, campaign runs, fixes and
              new workflow requests. You see the results. We handle the machinery.
            </div>
            <div>
              <div className="lp-price-setup">Quoted at setup</div>
              <div className="lp-price-amount">
                <span className="cur">£</span>1,500
                <span className="per">from / month</span>
              </div>
            </div>
            <div className="lp-price-feat">
              {MANAGED_FEATS.map(([f, sub], i) => (
                <div className="ln" key={i}>
                  <Tick/>
                  <span style={{flex: 1}}>
                    <div>{f}</div>
                    {sub ? <div style={{fontFamily: 'Geist Mono', fontSize: 10.5, color: 'var(--text-dim)', letterSpacing: 0.4, marginTop: 2, textTransform: 'uppercase'}}>{sub}</div> : null}
                  </span>
                </div>
              ))}
            </div>
            <a href={`${DGX_PRICING.bookHref(source)}&package=managed`} className="lp-btn primary" style={{justifyContent: 'center', width: '100%'}}>
              Ask about a managed slot
              <Arrow/>
            </a>
            <div className="lp-price-meta">
              <span className="occ warn">{DGX_PRICING.slots}</span>
              <span>Retainer · quoted at setup</span>
            </div>
          </div>

          <div className="lp-price-card">
            <div>
              <div className="lp-price-name">Self-Run</div>
              <div className="lp-price-tag">Hands-on</div>
            </div>
            <div className="lp-price-blurb">
              You take the keys. Your team runs the stack we built and trained you on —
              your only ongoing costs are your own platform subscriptions, held in your
              name, under your control.
            </div>
            <div>
              <div className="lp-price-setup">No monthly fee to Demiurge</div>
              <div className="lp-price-amount">
                <span className="cur">£</span>0
                <span className="per">/ month</span>
              </div>
            </div>
            <div className="lp-price-feat">
              {SELFRUN_FEATS.map(([f, sub], i) => (
                <div className="ln" key={i}>
                  <Tick/>
                  <span style={{flex: 1}}>
                    <div>{f}</div>
                    {sub ? <div style={{fontFamily: 'Geist Mono', fontSize: 10.5, color: 'var(--text-dim)', letterSpacing: 0.4, marginTop: 2, textTransform: 'uppercase'}}>{sub}</div> : null}
                  </span>
                </div>
              ))}
              <div className="ln mute">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18"/></svg>
                <span>Console early access — Managed clients first</span>
              </div>
            </div>
            <a href={`${DGX_PRICING.bookHref(source)}&package=self-run`} className="lp-btn" style={{justifyContent: 'center', width: '100%'}}>
              Talk it through
              <Arrow/>
            </a>
            <div className="lp-price-meta">
              <span className="occ">Always available</span>
              <span>No retainer</span>
            </div>
          </div>
        </div>

        <ModuleBands source={source}/>

        <BundlePicker source={source}/>

        <div className="lp-engage-console">
          <span className="pulse" aria-hidden="true"></span>
          <p>
            <strong>Demiurge Console — in development.</strong> Our client command surface
            for watching and steering your agents is being built now. Managed Operations
            clients get early access first, and hold their retainer rate for 12 months
            once Console pricing lands.
          </p>
        </div>

        <div className="lp-pricing-note">
          <span className="dot"></span>
          <span>
            A front desk build starts at £600. What it comes to depends on the size of the
            system — which operators you want, how many channels they cover and what has to be
            integrated — so it is scoped and quoted after a discovery call. A single-channel build and a multi-site regulated stack
            are not the same job and are not priced as though they were. Security controls are documented on our
            {' '}<a href="/legal/security">Security page</a>.
          </span>
        </div>
      </div>
    </section>
  );
};

window.DGX_PRICING = DGX_PRICING;
window.DGX_MODULES = DGX_MODULES;
window.BundlePicker = BundlePicker;
window.EngagementSection = EngagementSection;