// Deliverables — what the agency owner builds and hands over. Mirrors the
// "## Deliverables" section of the SOP (v3). This is the definition of done;
// there is no separate one.

const DLV_SNAPSHOTS = [
  {
    name: 'Agency-side snapshot',
    sub: 'One snapshot. The selling machine.',
    icon: 'fa-store',
    items: [
      'One funnel: a lead magnet page and a sales page (may be one combined page if it makes sense for the offer).',
      'A sales calendar.',
      'Appointment confirmation and reminder automations.',
      'Checkout-complete automations.',
      'Abandoned-checkout automations.',
    ],
  },
  {
    name: 'Client-side snapshot',
    sub: 'One snapshot. The offer itself.',
    icon: 'fa-cubes',
    items: [
      "Every deliverable that is part of your offer, built to run in the customer's account.",
    ],
  },
];

const DLV_ASSETS = [
  'Images used in the agency-side and client-side snapshots',
  'Videos used in the agency-side and client-side snapshots',
  'PDFs or other resources used in the snapshots',
];

const DLV_BUILD = [
  {
    label: 'Telemetry',
    icon: 'fa-wave-square',
    points: [
      'On checkout, the agency-side snapshot fires a prepared webhook endpoint controlled by a custom value.',
      'The client-side snapshot names the primary success metrics and sets up custom values so webhooks process them (e.g. a webhook fires on every new lead, every call).',
      'Those metrics increment a running health score: a custom math value where 0 is not healthy and 100 is complete health.',
    ],
  },
  {
    label: 'Email and SMS templates',
    icon: 'fa-envelope',
    points: [
      'Email and SMS go through templates the workflow references. Never paste copy directly into the workflow.',
    ],
  },
  {
    label: 'Workflow discipline',
    icon: 'fa-diagram-project',
    points: [
      'No more than one workflow fires on a single event. Do not overlap firing triggers.',
    ],
  },
  {
    label: 'Walkthrough videos',
    icon: 'fa-circle-play',
    points: [
      'One video for the entire client-side snapshot configuration, and one for the entire agency-side snapshot configuration. Use a medium that produces a transcript.',
    ],
  },
  {
    label: 'Success visualization',
    icon: 'fa-chart-line',
    points: [
      'The customer of your client-side snapshot has a way to see success: dashboard mechanics or pipeline mechanics.',
    ],
  },
];

function Deliverables() {
  return (
    <section className="dlv-section">
      <div className="container-narrow">
        <div className="numchip" style={{marginBottom:14}}>
          <span className="dot" style={{background:'var(--ext-grad-secondary)'}}><i className="fas fa-box-open" style={{fontSize:10}}></i></span>
          <span>What you build and hand over</span>
        </div>
        <h2 className="page-h2" style={{marginBottom:10}}>Deliverables.</h2>
        <p className="page-lead" style={{marginBottom:24}}>
          Every offer ships as a defined set of artifacts: two HighLevel snapshots, the assets they use, and a set of build requirements. This is the definition of done, there is no separate one.
        </p>

        <div className="dlv-snaps">
          {DLV_SNAPSHOTS.map((s) => (
            <article key={s.name} className="dlv-card">
              <div className="dlv-card-head">
                <span className="dlv-ico"><i className={`fas ${s.icon}`}></i></span>
                <div style={{minWidth:0}}>
                  <div className="dlv-card-name">{s.name}</div>
                  <div className="dlv-card-sub">{s.sub}</div>
                </div>
              </div>
              <ul className="dlv-list">
                {s.items.map((it, i) => (
                  <li key={i}><i className="fas fa-check"></i><span>{it}</span></li>
                ))}
              </ul>
            </article>
          ))}
        </div>

        <div className="dlv-block">
          <div className="dlv-block-hd">Visual assets</div>
          <ul className="dlv-list dlv-list-cols">
            {DLV_ASSETS.map((a, i) => (
              <li key={i}><i className="fas fa-check"></i><span>{a}</span></li>
            ))}
          </ul>
        </div>

        <div className="dlv-block">
          <div className="dlv-block-hd">Build requirements</div>
          <div className="dlv-reqs">
            {DLV_BUILD.map((b) => (
              <div key={b.label} className="dlv-req">
                <span className="dlv-req-ico"><i className={`fas ${b.icon}`}></i></span>
                <div style={{minWidth:0}}>
                  <div className="dlv-req-lbl">{b.label}</div>
                  {b.points.map((p, i) => <div key={i} className="dlv-req-txt">{p}</div>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Deliverables = Deliverables;