// Engage.jsx — engagement models + onboarding process
function MsoEngage() {
  const tiers = [
    {
      tier: "À LA CARTE",
      title: "Targeted services",
      body: "For laboratories that already have most of the back-office solved and need help in one or two specific areas.",
      bullets: [
        "Single-discipline engagement",
        "Month-to-month or annual",
        "Service-level agreements",
        "No equity component",
      ],
      feature: false,
    },
    {
      tier: "FULL STACK",
      title: "Comprehensive MSO",
      body: "The standard engagement for AltaPath portfolio laboratories. All nine disciplines, run as one platform, with a single point of accountability.",
      bullets: [
        "All services, single contract",
        "Dedicated operations partner",
        "Quarterly business reviews",
        "Pooled procurement & contracts",
      ],
      feature: true,
    },
    {
      tier: "INTEGRATION",
      title: "Acquisition partnership",
      body: "For owners considering succession or full integration into the AltaPath platform. The MSO is the operational landing pad on day one.",
      bullets: [
        "Pre-close diligence support",
        "Day-one operational handoff",
        "100-day integration plan",
        "Equity rollover available",
      ],
      feature: false,
    },
  ];

  const steps = [
    { n: "01", title: "Confidential intake", body: "A two-call discovery: one with operations, one with finance. We sign mutual NDAs before either side shares numbers.", week: "WEEK 1" },
    { n: "02", title: "Operational diagnostic", body: "A structured review of billing, IT, compliance, and staffing — delivered as a written diagnostic with a service-by-service plan.", week: "WEEKS 2–4" },
    { n: "03", title: "Engagement design", body: "We propose the right tier and scope. Laboratories often start narrow and broaden as they see results; the contract follows.", week: "WEEK 5" },
    { n: "04", title: "Transition & go-live", body: "Service-by-service cutover with a 100-day operating plan. The laboratory keeps its name, leadership, and clinical standards throughout.", week: "WEEKS 6–18" },
  ];

  return (
    <section id="engage" className="section">
      <div className="container">
        <div className="section__head">
          <div>
            <span className="eyebrow">How we engage</span>
            <h2 style={{ marginTop: 14 }}>Three ways in. One operational standard.</h2>
          </div>
          <p className="lede">
            We meet laboratories where they are. Most platform laboratories
            run on the full stack; some begin with a single discipline and
            grow from there. Every engagement starts the same way &mdash;
            quietly, with a written diagnostic.
          </p>
        </div>

        <div className="engagement">
          {tiers.map((t) => (
            <div className={`engagement__col${t.feature ? " engagement__col--feature" : ""}`} key={t.tier}>
              <span className="engagement__tier">{t.tier}</span>
              <h3>{t.title}</h3>
              <p>{t.body}</p>
              <ul>
                {t.bullets.map((b) => (<li key={b}>{b}</li>))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 80 }}>
          <div className="section__head" style={{ marginBottom: 36 }}>
            <div>
              <span className="eyebrow">Onboarding</span>
              <h2 style={{ marginTop: 14, fontSize: "clamp(24px, 2.6vw, 34px)" }}>
                A measured cadence from first call to go-live.
              </h2>
            </div>
            <p className="lede" style={{ fontSize: 16 }}>
              No surprises, no all-or-nothing pressure. The diagnostic is
              ours to deliver whether or not we ever sign a contract.
            </p>
          </div>

          <div className="process">
            {steps.map((s) => (
              <div className="process__step" key={s.n}>
                <div className="process__step__num">{s.n}</div>
                <h4>{s.title}</h4>
                <p>{s.body}</p>
                <div className="process__step__week">{s.week}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MsoEngage });