/* Solution — single Skylight demo + compiled Foothills capability copy */

function Solution() {
  return (
    <Section id="solution" num="[02] / SOLUTION"
             title={<>Superscript transformed their patient collections, without changing their workflows.</>}>

      <div className="demo-stage">
        <div className="demo-stage__viz">
          <SkylightDemo />
        </div>
        <div className="demo-stage__copy">
          <div>
            <div className="label" style={{ color:"var(--ss-blue)", marginBottom: 14 }}>
              [01] WHAT SUPERSCRIPT PROVIDED
            </div>
            <p className="body" style={{ fontSize: 14, lineHeight: 1.5, marginTop: 0, marginBottom: 20 }}>
              The pilot focused on three metrics: patient yield, time to collect, and administrative effort. Superscript outperformed on all three axes by embedding directly into their existing EHR workflows.
            </p>

            <ul style={{ listStyle:"none", padding: 0, margin: 0, display:"flex", flexDirection:"column", gap: 22 }}>
              <li>
                <div style={{ fontWeight: 600, fontSize: 16, letterSpacing:"-0.01em", marginBottom: 4 }}>
                  Real-time pricing before the visit
                </div>
                <div className="body muted" style={{ fontSize: 14, lineHeight: 1.4 }}>
                  Accurate automated eligibility plus cost-share calculation. Front desk
                  sees a guaranteed price for every encounter, no calls to payers, no surprises.
                </div>
              </li>
              <li>
                <div style={{ fontWeight: 600, fontSize: 16, letterSpacing:"-0.01em", marginBottom: 4 }}>
                  Automated text-to-pay
                </div>
                <div className="body muted" style={{ fontSize: 14, lineHeight: 1.4 }}>
                  Payment links sent before visits with full cost-share transparency.
                  Patients pay before the appointment ever happens.
                </div>
              </li>
              <li>
                <div style={{ fontWeight: 600, fontSize: 16, letterSpacing:"-0.01em", marginBottom: 4 }}>
                  Asynchronous outstanding balance recovery
                </div>
                <div className="body muted" style={{ fontSize: 14, lineHeight: 1.4 }}>
                  SMS and email campaigns work the pre-Superscript backlog without a single
                  phone call from the front desk.
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 48, display:"flex", gap: 32, padding: 24,
                    border: "1px solid var(--ss-grey-5)", background: "var(--ss-white)"}}>
        <div style={{ flex: "0 0 auto", maxWidth: 520 }}>
          <div className="label label--blue">DEPLOYMENT</div>
          <div style={{ fontSize: 22, letterSpacing:"-0.02em", marginTop: 4 }}>
            In under 3 hours, the full admin team was trained and operational. Superscript quickly became an invaluable part of their workflow.
          </div>
        </div>
        <div style={{ flex: 1, display:"flex", justifyContent:"flex-end", alignItems:"center", gap: 18, flexWrap:"wrap" }}>
          <span className="label">2 PILOT SITES</span>
          <span style={{ color: "var(--ss-grey-4)" }}>·</span>
          <span className="label">ONE-MONTH PILOT</span>
          <span style={{ color: "var(--ss-grey-4)" }}>·</span>
          <span className="label label--blue">→ NETWORK ROLLOUT</span>
        </div>
      </div>

    </Section>
  );
}

window.Solution = Solution;