/* Interactive product demos for Solution section.
   Storefront — shows the real desktop SVG mockup.
   Kiosk      — auto-advancing self check-in flow.
   Skylight   — EHR widget where line items appear as if added during encounter. */

function StorefrontDemo() {
  return (
    <img src="assets/storefront-desktop.png"
         alt="Foothills Neurology × Superscript storefront"
         style={{ width: "100%", height: "auto", display: "block" }} />
  );
}

/* ---------- KIOSK ---------- */
const KIOSK_FRAMES = [
  "assets/kiosk-1.png",   // Welcome
  "assets/kiosk-8.png",   // Insurance verification
  "assets/kiosk-16.png",  // Price reveal
  "assets/kiosk-97.png"   // Payment
];

function KioskDemo() {
  const [step, setStep] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setStep(s => (s + 1) % KIOSK_FRAMES.length), 2800);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="kiosk-real">
      {KIOSK_FRAMES.map((src, i) => (
        <img key={i} src={src} alt=""
             className={"kiosk-real__frame " + (i === step ? "is-on" : "")} />
      ))}
      <div className="kiosk-real__dots">
        {KIOSK_FRAMES.map((_, i) => (
          <span key={i} className={"kiosk-real__dot " + (i === step ? "is-on" : "")} />
        ))}
      </div>
    </div>
  );
}

/* ---------- SKYLIGHT EHR WIDGET — mirrors /Latest-Prototype/47 ---------- */
const SKY_TREATMENTS = [
  {
    name: "Office visit · level 4",
    price: 35.00,
    explainer: <>Priced using <span className="sky__tag">20% coinsurance</span> off of a <span className="sky__tag">$175 PNR</span></>
  },
  {
    name: "EMG / nerve conduction study",
    price: 109.80,
    explainer: <>Priced using <span className="sky__tag">20% coinsurance</span> off of a <span className="sky__tag">$549 PNR</span></>
  },
  {
    name: "Follow up",
    price: 0.00,
    explainer: <>Fully covered under <span className="sky__tag">global billing period</span></>
  }
];

function SkylightDemo() {
  const [visible, setVisible] = useState(0);
  const [ref, inView] = useInView();
  useEffect(() => {
    if (!inView) return;
    setVisible(0);
    let i = 0;
    const interval = setInterval(() => {
      i++;
      setVisible(i);
      if (i >= SKY_TREATMENTS.length) clearInterval(interval);
    }, 800);
    return () => clearInterval(interval);
  }, [inView]);

  const total = SKY_TREATMENTS.slice(0, visible).reduce((s, it) => s + it.price, 0);
  const totalAnim = useCountUp(total, { duration: 500, active: inView });

  return (
    <div ref={ref} className="sky">
      <div className="sky__head">
        <button className="sky__chip">← Back</button>
        <div className="sky__title">Nick's appointment on 11-13-25</div>
        <button className="sky__chip sky__chip--ghost">✕</button>
      </div>

      <div className="sky__card">
        <div className="sky__card-head">Dr. Brent @ 11:15am – 11:30am</div>
        {SKY_TREATMENTS.map((t, i) => (
          <div key={i} className={"sky__row " + (i < visible ? "is-in" : "")}>
            <div className="sky__row-top">
              <div className="sky__row-name">
                <span className="sky__minus">⊖</span>
                {t.name}
              </div>
              <div className="sky__row-price">${t.price.toFixed(2)}</div>
            </div>
            <div className="sky__row-explain">{t.explainer}</div>
          </div>
        ))}
      </div>

      <div className="sky__actions">
        <button className="sky__btn">+ / – Treatments</button>
        <button className="sky__btn">Hide explanations</button>
      </div>

      <div className="sky__total">
        <span className="sky__total-label">Total paid:</span>
        <span className="sky__total-val">${totalAnim.toFixed(2)}</span>
      </div>

      <div className="sky__pay">
        <span className="sky__pay-method">Payment method: <strong>Visa ••• 5687</strong></span>
        <button className="sky__btn sky__btn--outline">↓ Receipt</button>
      </div>
    </div>
  );
}

window.StorefrontDemo = StorefrontDemo;
window.KioskDemo = KioskDemo;
window.SkylightDemo = SkylightDemo;