/* Solution — three interactive product mini-demos */

const PRODUCTS = [
  {
    id: "skylight",
    num: "01",
    name: "Skylight",
    sub: "EMBEDDED EHR WIDGET",
    title: "One-click cost-share collection at check-in, and for anything added mid-encounter.",
    copy: "Drop-in widget inside Medrite's existing EHR. Staff see the patient's exact responsibility for every test, treatment, or service ordered, and collect the balance with a single click.",
    bullets: [
      "Live pricing for items added in-room",
      "Saves 2.5 minutes per encounter",
      "Works inside any modern EHR"
    ]
  },
  {
    id: "kiosk",
    num: "02",
    name: "The Kiosk",
    sub: "PATIENT SELF CHECK-IN",
    title: "Walk-ins complete intake without front-desk support, verify benefits, and pay before being seen.",
    copy: "An iPad at the door handles intake end-to-end: identification, insurance capture, benefits verification, and full cost-share collection, with zero front-desk involvement.",
    bullets: [
      "Front desk team trained in under 3 hours",
      "No paper, no clipboards, no queue",
      "Card-on-file captured for every patient"
    ]
  },
  {
    id: "storefront",
    num: "03",
    name: "The Storefront",
    sub: "PATIENT-FACING BOOKING",
    title: "Patients connect insurance, see their real out-of-pocket price, and arrive prepaid.",
    copy: "Insurance verification, benefits determination, and out-of-pocket pricing happen before the patient ever walks in. They book, prepay, and arrive pre-registered.",
    bullets: [
      "Eligibility + benefits checked in seconds",
      "Guaranteed out-of-pocket price",
      "Patient pays upfront on 100% of visits"
    ]
  }
];

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

  return (
    <Section id="solution" num="[02] / SOLUTION"
             title={<>Three products, piloted at three of Medrite's <em>highest-volume sites.</em></>}>

      <p className="body" style={{ maxWidth: 720, marginBottom: 40 }}>
        Superscript piloted across three high-volume Medrite sites, tracking
        <strong> patient yield</strong> and <strong>front-desk throughput</strong> against
        the same window the prior year.
      </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 === "storefront" ? "is-storefront" : "")}>
          {active === "storefront" && <StorefrontDemo />}
          {active === "kiosk" && <KioskDemo />}
          {active === "skylight" && <SkylightDemo />}
        </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 }}>
            Entire front-desk team trained in <strong>under 3 hours</strong>.
          </div>
        </div>
        <div style={{ flex: 1, display:"flex", justifyContent:"flex-end", alignItems:"center", gap: 18, flexWrap:"wrap" }}>
          <span className="label">3 SITES</span>
          <span style={{ color: "var(--ss-grey-4)" }}>·</span>
          <span className="label">600+ DAILY VISITS</span>
          <span style={{ color: "var(--ss-grey-4)" }}>·</span>
          <span className="label">2-WEEK PILOT</span>
          <span style={{ color: "var(--ss-grey-4)" }}>·</span>
          <span className="label label--blue">→ NETWORK ROLLOUT</span>
        </div>
      </div>

    </Section>
  );
}

window.Solution = Solution;