/* Solution — three interactive product mini-demos (telehealth deployment) */

const PRODUCTS = [
  {
    id: "transparency",
    num: "01",
    name: "Cost Transparency",
    sub: "REAL-TIME ELIGIBILITY + PRICING",
    title: "Every patient's exact cost-share, calculated and guaranteed before the visit.",
    copy: "Superscript checks eligibility, parses benefits, and generates a guaranteed price automatically, before the patient ever joins the call. No manual eligibility checks, no estimates.",
    bullets: [
      "Eligibility + benefits parsed in seconds",
      "Guaranteed out-of-pocket price",
      "Runs ahead of every appointment"
    ]
  },
  {
    id: "texttopay",
    num: "02",
    name: "Text-to-Pay",
    sub: "PAY-AHEAD PAYMENT LINKS",
    title: "A payment link sent ahead of the appointment, with the full cost-share breakdown.",
    copy: "Patients get a text before their visit showing exactly what they owe and why, line by line, with coinsurance, deductible, and copay spelled out. They pay in one tap, in advance.",
    bullets: [
      "Itemized cost-share, plain language",
      "Sent automatically before the visit",
      "One-tap payment, card kept on file"
    ]
  },
  {
    id: "notouch",
    num: "03",
    name: "No-Touch Collection",
    sub: "ZERO-ADMIN COLLECTION FLOW",
    title: "Price, collect, and reconcile run end-to-end with zero front-desk involvement.",
    copy: "From price generation to the 835 reconciliation, the whole collection flow runs on its own. Staff don't chase balances or verify benefits, and the guaranteed price holds.",
    bullets: [
      "No balance chasing, no manual eligibility",
      "Guaranteed price held through adjudication",
      "Zero added admin hours"
    ]
  }
];

function Solution() {
  const [active, setActive] = useState("transparency");
  const product = PRODUCTS.find(p => p.id === active);

  return (
    <Section id="solution" num="[02] / SOLUTION"
             title={<>Three capabilities deployed across knownwell's <em>telehealth department.</em></>}>

      <p className="body" style={{ maxWidth: 720, marginBottom: 40 }}>
        Superscript launched across knownwell's telehealth department in December 2025,
        focused on three things: <strong>patient yield</strong>, <strong>time-to-collect</strong>,
        and <strong>admin effort</strong>.
      </p>

      <div className="demo-tabs">
        {PRODUCTS.map(p => (
          <button key={p.id}
                  className={"demo-tab " + (active === p.id ? "is-active" : "")}
                  onClick={() => setActive(p.id)}>
            <span className="demo-tab__num">[{p.num}]</span>
            <span className="demo-tab__name">{p.name}</span>
            <span className="demo-tab__sub">{p.sub}</span>
          </button>
        ))}
      </div>

      <div className="demo-stage" key={active}>
        <div className="demo-stage__viz">
          {active === "transparency" && <EligibilityDemo />}
          {active === "texttopay" && <TextToPayDemo />}
          {active === "notouch" && <NoTouchDemo />}
        </div>
        <div className="demo-stage__copy">
          <div>
            <div className="label" style={{ color:"var(--ss-blue)", marginBottom: 12 }}>
              [{product.num}] {product.sub}
            </div>
            <h3 style={{
              fontFamily:"var(--font-sans)",
              fontSize: 30, lineHeight: 1.1,
              letterSpacing: "-0.03em", fontWeight: 400,
              marginBottom: 18
            }}>
              {product.title}
            </h3>
            <p className="body muted" style={{ marginBottom: 20 }}>{product.copy}</p>
            <ul style={{ listStyle:"none", padding: 0, margin: 0, display:"flex", flexDirection:"column", gap: 10 }}>
              {product.bullets.map((b, i) => (
                <li key={i} style={{ display:"flex", gap: 10, fontSize: 15, letterSpacing:"-0.01em" }}>
                  <span className="dot-blue" style={{ marginTop: 8, flexShrink:0 }}></span>
                  <span>{b}</span>
                </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" }}>
          <div className="label label--blue">DEPLOYMENT</div>
          <div style={{ fontSize: 22, letterSpacing:"-0.02em", marginTop: 4 }}>
            Live across the telehealth department in <strong>December 2025</strong>.
          </div>
        </div>
        <div style={{ flex: 1, display:"flex", justifyContent:"flex-end", alignItems:"center", gap: 18, flexWrap:"wrap" }}>
          <span className="label">IN-PERSON + VIRTUAL</span>
          <span style={{ color: "var(--ss-grey-4)" }}>·</span>
          <span className="label">MULTI-STATE PRIMARY CARE</span>
        </div>
      </div>

    </Section>
  );
}

window.Solution = Solution;