/* global React, KitChrome, RX */
const { useState: phUseState } = React;
const { Eyebrow: phEy } = KitChrome;

// =========================================================
// Rx DETAIL — drill-in
// =========================================================
function RxDetail({ rx, onClose }) {
  const [tab, setTab] = phUseState("Overview");
  const TABS = ["Overview", "Adherence", "Refills", "Interactions", "Provenance"];

  // 30-day adherence grid
  const days = Array.from({ length: 30 }, (_, i) => {
    const taken = Math.random() > 0.06;
    const onTime = taken && Math.random() > 0.15;
    return { d: i + 1, taken, onTime };
  });

  return (
    <div className="ph-detail">
      <div className="ph-breadcrumb">
        <a href="#" onClick={(e) => { e.preventDefault(); onClose(); }}>My Meds</a>
        <span>›</span>
        <span>{rx.drug}</span>
      </div>

      <div className="ph-detail-head">
        <div style={{ display: "flex", gap: 18, alignItems: "center" }}>
          <div style={{ width: 64, height: 64, borderRadius: 14, background: "linear-gradient(135deg, #E5484D, #A8262A)", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, color: "#fff" }}>Rx</div>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 500, letterSpacing: "-0.01em", color: "var(--fg-1)" }}>{rx.drug}</div>
            <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 6, display: "flex", gap: 14 }}>
              <span>Generic for {rx.brand || "—"}</span>
              <span>·</span>
              <span>NDC 0093-1029-01</span>
              <span>·</span>
              <span>{rx.supply} supply</span>
              <span>·</span>
              <span>{rx.refills} refills remaining</span>
            </div>
            <div style={{ marginTop: 8, display: "flex", gap: 8, alignItems: "center" }}>
              <span className={"k-pill " + (rx.status === "Active" ? "green" : rx.status === "New" ? "amber" : rx.status === "Refill" ? "amber" : "red")}>{rx.status}</span>
              {rx.adherence !== null && (
                <span style={{ fontSize: 12, fontFamily: "var(--font-mono)", color: rx.adherence >= 90 ? "var(--accent-guardian)" : rx.adherence >= 80 ? "var(--accent-halo)" : "var(--accent-vital)" }}>
                  ● {rx.adherence}% adherence (90d)
                </span>
              )}
            </div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="k-btn k-btn-ghost">Talk to pharmacist</button>
          <button className="k-btn k-btn-ghost">Transfer out</button>
          <button className="k-btn k-btn-primary">Refill now →</button>
        </div>
      </div>

      <div className="ph-tabbar">
        {TABS.map(t => (
          <button key={t} className={tab === t ? "active" : ""} onClick={() => setTab(t)}>{t}</button>
        ))}
      </div>

      {tab === "Overview" && (
        <div className="ph-grid">
          <div className="ph-panel">
            <div className="ph-panel-h">Sig (instructions)</div>
            <div className="ph-panel-body">
              <div className="ph-sig">{rx.sig}</div>
              <div style={{ fontSize: 13, color: "var(--fg-2)", marginTop: 12, lineHeight: 1.6 }}>
                Take {rx.sig.includes("BID") ? "twice daily" : "once daily"} with or without food. {rx.drug.startsWith("Atorvastatin") || rx.drug.startsWith("Sertraline") ? "Best at bedtime." : "Best with breakfast."} Skip if dose missed by &gt;6 hours and continue as scheduled.
              </div>
            </div>
          </div>
          <div className="ph-panel">
            <div className="ph-panel-h">Why you're taking it</div>
            <div className="ph-panel-body">
              <div style={{ fontSize: 14, color: "var(--fg-1)", fontWeight: 500 }}>
                {rx.drug.startsWith("Lisinopril") ? "Hypertension management" :
                 rx.drug.startsWith("Hydroch") ? "Hypertension — diuretic" :
                 rx.drug.startsWith("Atorva") ? "Hyperlipidemia (LDL ↓)" :
                 rx.drug.startsWith("Metformin") ? "Type 2 diabetes — first line" :
                 "Major depressive disorder — SSRI"}
              </div>
              <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 6 }}>
                Prescribed by Dr. M. Rodriguez · CH Healthcare · 2025-09-12
              </div>
              <div style={{ marginTop: 14, padding: 12, background: "var(--bg-steel)", borderLeft: "2px solid var(--accent-guardian)" }}>
                <div style={{ fontSize: 11, color: "var(--fg-3)", fontFamily: "var(--font-mono)", letterSpacing: "0.04em", marginBottom: 4, textTransform: "uppercase" }}>Why it matters · TA axis</div>
                <div style={{ fontSize: 13, color: "var(--fg-1)" }}>Each on-time dose mints 0.4 HCR. Missing 3+ doses/week decays your TA score by 0.02/week.</div>
              </div>
            </div>
          </div>
          <div className="ph-panel">
            <div className="ph-panel-h">Side effects to watch</div>
            <div className="ph-panel-body">
              <ul className="ph-list">
                <li><b>Common:</b> dizziness on standing, dry cough, mild headache</li>
                <li><b>Call us:</b> swelling of face/lips, persistent cough &gt;2 weeks, K+ &gt;5.5</li>
                <li><b>Emergency:</b> severe angioedema, difficulty breathing</li>
              </ul>
              <button className="k-btn k-btn-ghost" style={{ marginTop: 14 }}>Report side effect →</button>
            </div>
          </div>
          <div className="ph-panel">
            <div className="ph-panel-h">Cost &amp; insurance</div>
            <div className="ph-panel-body">
              <div className="ph-price-row"><span>Cash price (90d)</span><span className="v">$84.20</span></div>
              <div className="ph-price-row"><span>Cigna PPO copay</span><span className="v" style={{ color: "var(--accent-guardian)" }}>$10.00</span></div>
              <div className="ph-price-row"><span>340B (you don't qualify)</span><span className="v" style={{ color: "var(--fg-3)" }}>—</span></div>
              <div className="ph-price-row total"><span>Your cost</span><span className="v">$10.00 / 90d</span></div>
            </div>
          </div>
        </div>
      )}

      {tab === "Adherence" && (
        <div className="ph-panel">
          <div className="ph-panel-h" style={{ display: "flex", justifyContent: "space-between" }}>
            <span>Last 30 days</span>
            <span style={{ color: rx.adherence >= 90 ? "var(--accent-guardian)" : "var(--accent-halo)", fontFamily: "var(--font-mono)", fontSize: 11 }}>● {rx.adherence}% on-time · {Math.round(((rx.adherence||90) / 100) * 30)} of 30 doses</span>
          </div>
          <div className="ph-panel-body">
            <div className="ph-adh-grid">
              {days.map(d => (
                <div key={d.d} className={"ph-adh-cell " + (d.taken ? (d.onTime ? "on" : "late") : "miss")} title={`Day ${d.d}: ${d.taken ? (d.onTime ? "on time" : "late") : "missed"}`}>
                  {d.d}
                </div>
              ))}
            </div>
            <div className="ph-adh-legend">
              <span><span className="dot on"></span>On time</span>
              <span><span className="dot late"></span>Late (&gt;2h)</span>
              <span><span className="dot miss"></span>Missed</span>
            </div>

            <div className="ph-adh-impact">
              <div className="impact-l">
                <div className="num">+12.4 HCR</div>
                <div className="lbl">earned this month</div>
              </div>
              <div className="impact-l">
                <div className="num">−0.6 HCR</div>
                <div className="lbl">forfeited (3 missed)</div>
              </div>
              <div className="impact-l">
                <div className="num">+0.04</div>
                <div className="lbl">TA axis lift YoY</div>
              </div>
              <div className="impact-l">
                <div className="num">23 days</div>
                <div className="lbl">current streak</div>
              </div>
            </div>

            <div style={{ marginTop: 22 }}>
              <div className="ph-panel-h" style={{ borderTop: "1px solid var(--border-1-dark)", marginTop: 22, padding: "14px 0 12px", background: "transparent" }}>Reminders</div>
              <div className="ph-rem">
                <div className="ph-rem-row"><b>SMS to (•••) •••-2842</b><span>Daily 7:30am · 30min before dose</span><label className="hcx-toggle"><input type="checkbox" defaultChecked/><span></span></label></div>
                <div className="ph-rem-row"><b>Push to iPhone 15 Pro</b><span>Daily 7:50am · 10min before dose</span><label className="hcx-toggle"><input type="checkbox" defaultChecked/><span></span></label></div>
                <div className="ph-rem-row"><b>Apple Watch haptic</b><span>Daily 8:00am</span><label className="hcx-toggle"><input type="checkbox" defaultChecked/><span></span></label></div>
                <div className="ph-rem-row"><b>Pillbox sensor (Hero)</b><span>Confirms dose taken</span><label className="hcx-toggle"><input type="checkbox" /><span></span></label></div>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === "Refills" && (
        <div className="ph-panel">
          <div className="ph-panel-h">Refill history &amp; next due</div>
          <div className="ph-panel-body">
            <div className="ph-next-fill">
              <div className="next-l">
                <div className="lbl">Next refill ready</div>
                <div className="num">May 18, 2026</div>
                <div className="sub">in 16 days · 3 refills remaining on this script</div>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <button className="k-btn k-btn-primary">Order now (early OK)</button>
                <button className="k-btn k-btn-ghost">Schedule auto-refill</button>
              </div>
            </div>

            <table className="k-table" style={{ marginTop: 22 }}>
              <thead><tr><th>#</th><th>Filled</th><th>Days supply</th><th>Pharmacy</th><th>Method</th><th>Cost</th><th></th></tr></thead>
              <tbody>
                <tr><td>5 of 5</td><td style={{ fontFamily:"var(--font-mono)", fontSize: 12 }}>2026-02-18</td><td>90</td><td>Mail order</td><td>Free 2-day</td><td>$10.00</td><td><button className="k-btn k-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Receipt</button></td></tr>
                <tr><td>4 of 5</td><td style={{ fontFamily:"var(--font-mono)", fontSize: 12 }}>2025-11-19</td><td>90</td><td>Mail order</td><td>Free 2-day</td><td>$10.00</td><td><button className="k-btn k-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Receipt</button></td></tr>
                <tr><td>3 of 5</td><td style={{ fontFamily:"var(--font-mono)", fontSize: 12 }}>2025-08-20</td><td>90</td><td>Pickup · CH Tallahassee</td><td>In-store</td><td>$10.00</td><td><button className="k-btn k-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Receipt</button></td></tr>
                <tr><td>2 of 5</td><td style={{ fontFamily:"var(--font-mono)", fontSize: 12 }}>2025-05-21</td><td>90</td><td>Pickup · CH Tallahassee</td><td>In-store</td><td>$10.00</td><td><button className="k-btn k-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Receipt</button></td></tr>
                <tr><td>1 of 5 (initial)</td><td style={{ fontFamily:"var(--font-mono)", fontSize: 12 }}>2025-02-21</td><td>30</td><td>Pickup · CH Tallahassee</td><td>In-store</td><td>$8.50</td><td><button className="k-btn k-btn-ghost" style={{ padding: "3px 9px", fontSize: 11 }}>Receipt</button></td></tr>
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab === "Interactions" && (
        <div className="ph-panel">
          <div className="ph-panel-h">Interaction screening · against your full med list</div>
          <div className="ph-panel-body">
            <div className="ph-int-row major">
              <div className="ph-int-tag">Major</div>
              <div className="ph-int-body">
                <div className="ttl">{rx.drug.split(" ")[0]} + Spironolactone</div>
                <div className="dsc">Risk of hyperkalemia. Not currently in your active meds — flagging because your mom has a history.</div>
              </div>
              <button className="k-btn k-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>Details</button>
            </div>
            <div className="ph-int-row mod">
              <div className="ph-int-tag">Moderate</div>
              <div className="ph-int-body">
                <div className="ttl">{rx.drug.split(" ")[0]} + Ibuprofen (frequent OTC use)</div>
                <div className="dsc">NSAIDs may reduce antihypertensive effect. Limit to occasional dosing or switch to acetaminophen.</div>
              </div>
              <button className="k-btn k-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>Details</button>
            </div>
            <div className="ph-int-row mod">
              <div className="ph-int-tag">Moderate</div>
              <div className="ph-int-body">
                <div className="ttl">{rx.drug.split(" ")[0]} + Grapefruit juice</div>
                <div className="dsc">Mild CYP3A4 inhibition. Limit to &lt; 8 oz/day if taken with this medication.</div>
              </div>
              <button className="k-btn k-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>Details</button>
            </div>
            <div className="ph-int-row clear">
              <div className="ph-int-tag clr">No issue</div>
              <div className="ph-int-body">
                <div className="ttl">Reviewed against 4 active meds + 2 supplements + 1 OTC</div>
                <div className="dsc">Last screened by PharmD M. Okonkwo · 2026-04-12. Re-runs automatically on every fill.</div>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === "Provenance" && (
        <div className="ph-panel">
          <div className="ph-panel-h">Chain of custody · pharmacist verifications</div>
          <div className="ph-panel-body" style={{ padding: 0 }}>
            {[
              { t: "2025-09-12 14:08", who: "Dr. M. Rodriguez", evt: "e-Prescribed via e-prescribing network", h: "0xa8...91d", q: "✓" },
              { t: "2025-09-12 14:09", who: "CH Pharmacy ingest", evt: "Received · clinical review queued", h: "0xa8...91d", q: "✓" },
              { t: "2025-09-12 14:31", who: "PharmD M. Okonkwo", evt: "Verified · interaction screen passed", h: "0xa8...91d", q: "✓" },
              { t: "2025-09-12 16:14", who: "PharmTech J. Liu",  evt: "Counted · 2 × 45 tabs lot LIS-9281", h: "0xa8...91d", q: "✓" },
              { t: "2025-09-12 16:32", who: "PharmD M. Okonkwo", evt: "Final verification · sealed", h: "0xa8...91d", q: "✓" },
              { t: "2025-09-12 17:50", who: "Patient (you)",      evt: "Picked up · ID verified", h: "0xa8...91d", q: "✓" },
              { t: "2025-09-13 07:32", who: "Pillbox sensor",     evt: "First dose confirmed · TA axis +0.4 HCR", h: "0xa8...91d", q: "✓" },
            ].map((row, i) => (
              <div key={i} className="ph-prov-row">
                <div className="dot">●</div>
                <div className="t">{row.t}</div>
                <div className="b"><div className="who">{row.who}</div><div className="evt">{row.evt}</div></div>
                <div className="h">{row.h}</div>
                <div className="q">{row.q}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// =========================================================
// REFILLS VIEW — all-script refill queue
// =========================================================
function RefillsView() {
  const [selected, setSelected] = phUseState({});
  const queue = [];

  const total = Object.entries(selected).filter(([_, v]) => v).reduce((sum, [k]) => sum + (queue[+k]?.cost === "$10.00" ? 10 : 0), 0);
  const count = Object.values(selected).filter(Boolean).length;

  return (
    <div className="ph-refills">
      <section className="k-hero" style={{ borderBottom: "1px solid var(--border-1-dark)" }}>
        <div>
          <phEy axis="RX">Refill Queue</phEy>
          <h1>Three are ready.<br/><em>Two need a call.</em></h1>
          <p>Bundle up to 5 prescriptions into one ship. Free 2-day on every order. Your pharmacist screens for interactions before anything counts down.</p>
        </div>
        <div style={{ alignSelf: "end", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <div className="dv-mini-stat"><div className="l">Ready to ship</div><div className="v">3</div><div className="s">no action needed</div></div>
          <div className="dv-mini-stat"><div className="l">Due in 30 days</div><div className="v">3</div><div className="s">auto-fills enabled</div></div>
          <div className="dv-mini-stat"><div className="l">Awaiting Rx from MD</div><div className="v">1</div><div className="s">we faxed for renewal</div></div>
          <div className="dv-mini-stat"><div className="l">Expired · need new Rx</div><div className="v">1</div><div className="s">schedule appt to renew</div></div>
        </div>
      </section>

      <div className="k-section-head">
        <div><phEy axis="RX">All scripts</phEy><h2>Pick what to ship together.</h2></div>
        <div className="k-tabs">
          <button className="active">All</button><button>Ready</button><button>Due</button><button>Issues</button>
        </div>
      </div>

      <table className="k-table">
        <thead><tr>
          <th style={{ width: 32 }}></th><th>Medication</th><th>Ready</th><th className="num">Refills left</th><th>Method</th><th>Cost</th><th>Status</th><th></th>
        </tr></thead>
        <tbody>
          {queue.map((q, i) => (
            <tr key={i} style={{ opacity: q.status === "expired" || q.status === "wait" ? 0.6 : 1 }}>
              <td><input type="checkbox" disabled={q.status !== "ready" && q.status !== "due"} checked={!!selected[i]} onChange={(e) => setSelected({ ...selected, [i]: e.target.checked })} /></td>
              <td><div style={{ color: "var(--fg-1)", fontWeight: 500 }}>{q.drug}</div></td>
              <td style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: q.status === "due" ? "var(--accent-halo)" : "var(--fg-2)" }}>{q.ready}{q.days !== null && q.days > 0 ? ` · ${q.days}d` : ""}</td>
              <td className="num">{q.refills}</td>
              <td style={{ fontSize: 12, color: "var(--fg-3)" }}>{q.method}</td>
              <td style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>{q.cost}</td>
              <td>
                <span className={"k-pill " + (q.status === "ready" ? "green" : q.status === "due" ? "amber" : q.status === "wait" ? "amber" : "red")}>
                  {q.status === "ready" ? "● Ready" : q.status === "due" ? "● Due now" : q.status === "wait" ? "⏳ Awaiting Rx" : "✕ Expired"}
                </span>
              </td>
              <td className="num">
                {q.status === "expired" ? <button className="k-btn k-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>Renew →</button>
                  : q.status === "wait" ? <button className="k-btn k-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>Status</button>
                  : <button className="k-btn k-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>Refill solo</button>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <div className="ph-bundle-bar">
        <div className="bundle-l">
          <div className="num">{count}</div>
          <div className="lbl">selected · ${total}.00 total</div>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <span style={{ fontSize: 12, color: "var(--fg-3)" }}>Ship to: 1842 Live Oak Ln, Tallahassee FL 32303</span>
          <button className="k-btn k-btn-ghost">Change address</button>
          <button className="k-btn k-btn-primary" disabled={count === 0}>Bundle &amp; ship · 2-day free →</button>
        </div>
      </div>
    </div>
  );
}

// =========================================================
// MAIL ORDER VIEW — orders & shipments
// =========================================================
function MailOrderView() {
  const orders = [];

  return (
    <div className="ph-orders">
      <section className="k-hero" style={{ borderBottom: "1px solid var(--border-1-dark)" }}>
        <div>
          <phEy axis="RX">Mail Order</phEy>
          <h1>Free 2-day on every fill.<br/><em>Cold-chain when it matters.</em></h1>
          <p>Insulin, biologics, and refrigerated meds ship with sealed cold-chain packaging and live temperature logging. Everything else ships in tamper-evident envelopes.</p>
        </div>
        <div className="ph-shipping-card">
          <div className="lbl">Default ship-to</div>
          <div className="adr">Sarah J. Chen<br/>1842 Live Oak Ln<br/>Tallahassee, FL 32303</div>
          <button className="k-btn k-btn-ghost" style={{ marginTop: 14 }}>Manage addresses (3)</button>
        </div>
      </section>

      <div className="k-section-head">
        <div><phEy axis="RX">Active Shipments</phEy><h2>Track every dose to the door.</h2></div>
      </div>

      <div className="ph-orders-list">
        {orders.map((o, i) => (
          <div key={i} className={"ph-order " + o.status}>
            <div className="ph-order-l">
              <div className="id">{o.id}</div>
              <div className="items">{o.items}</div>
              <div className="meta">Placed {o.placed} · {o.carrier}</div>
              {o.status === "shipped" && (
                <div className="ph-track">
                  <div className="ph-track-bar">
                    <div className="step done">Filled</div>
                    <div className="step done">Shipped</div>
                    <div className="step active">In transit</div>
                    <div className="step">Delivered</div>
                  </div>
                  <div className="ph-track-meta">
                    <span>{o.track}</span>
                    <span>·</span>
                    <span style={{ color: "var(--accent-guardian)" }}>● 38°F constant · seal intact</span>
                  </div>
                </div>
              )}
            </div>
            <div className="ph-order-r">
              <div className="eta">{o.eta}</div>
              <span className={"k-pill " + (o.status === "shipped" ? "amber" : "green")}>
                {o.status === "shipped" ? "● In transit" : "● Delivered"}
              </span>
              <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
                <button className="k-btn k-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>Track</button>
                <button className="k-btn k-btn-ghost" style={{ padding: "5px 11px", fontSize: 12 }}>Receipt</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// =========================================================
// TRANSFER VIEW — bring scripts in from another pharmacy
// =========================================================
function TransferView() {
  return (
    <div className="ph-transfer">
      <section className="k-hero" style={{ borderBottom: "1px solid var(--border-1-dark)" }}>
        <div>
          <phEy axis="RX">Transfer Rx In</phEy>
          <h1>Tell us where your scripts<br/><em>live now.</em></h1>
          <p>We'll pull them over within one business day. Your refill counts and adherence streaks travel with you. No paperwork, no calls.</p>
        </div>
      </section>

      <div className="ph-transfer-grid">
        <div className="ph-panel">
          <div className="ph-panel-h">1 · Where are they?</div>
          <div className="ph-panel-body">
            <label className="ph-fld">
              <span>Current pharmacy</span>
              <input className="hcx-input" defaultValue="CVS — 2401 N Monroe St, Tallahassee FL" />
            </label>
            <label className="ph-fld">
              <span>Pharmacy phone</span>
              <input className="hcx-input" defaultValue="(850) 385-•••• " />
            </label>
            <div className="ph-pharmacy-suggest">
              <div className="sug-h">Recently transferred from</div>
              <div className="sug-list">
                <button>Walgreens · 1924 Apalachee Pkwy</button>
                <button>Publix Pharmacy · Bradfordville</button>
                <button>Walmart · 3535 Apalachee Pkwy</button>
              </div>
            </div>
          </div>
        </div>

        <div className="ph-panel">
          <div className="ph-panel-h">2 · Which scripts?</div>
          <div className="ph-panel-body">
            <div className="ph-tx-list">
              {["Lisinopril 20 mg", "Atorvastatin 40 mg", "Metformin 500 mg", "Sertraline 50 mg", "Albuterol HFA 90 mcg"].map((d, i) => (
                <label key={i} className="ph-tx-item">
                  <input type="checkbox" defaultChecked={i < 4} />
                  <span>{d}</span>
                  <span className="ph-tx-hint">we'll pull all refills</span>
                </label>
              ))}
              <button className="ph-tx-all">+ Just transfer everything they have</button>
            </div>
          </div>
        </div>

        <div className="ph-panel">
          <div className="ph-panel-h">3 · How should we ship?</div>
          <div className="ph-panel-body">
            <label className="ph-radio"><input type="radio" name="ship" defaultChecked /><span><b>Mail · free 2-day</b><div className="hint">Default · cold-chain when needed</div></span></label>
            <label className="ph-radio"><input type="radio" name="ship" /><span><b>Pickup · CH Tallahassee</b><div className="hint">Ready in 4 business hours</div></span></label>
            <label className="ph-radio"><input type="radio" name="ship" /><span><b>Same-day courier</b><div className="hint">$8 · within 25 mi · 2-hour window</div></span></label>
          </div>
        </div>

        <div className="ph-tx-summary">
          <div className="ph-tx-h">Ready to transfer</div>
          <div className="ph-tx-row"><span>Scripts</span><span>4 of 5</span></div>
          <div className="ph-tx-row"><span>From</span><span>CVS — 2401 N Monroe</span></div>
          <div className="ph-tx-row"><span>To</span><span>CH Pharmacy · Mail</span></div>
          <div className="ph-tx-row"><span>Estimated complete</span><span style={{ color: "var(--accent-guardian)" }}>1 business day</span></div>
          <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
            <button className="k-btn k-btn-ghost">Save draft</button>
            <button className="k-btn k-btn-primary" style={{ flex: 1 }}>Start transfer →</button>
          </div>
          <div className="ph-tx-foot">
            We'll text you when the new pharmacy receives them, when interactions are screened, and when the first ship is on the way.
          </div>
        </div>
      </div>
    </div>
  );
}

// =========================================================
// ADHERENCE VIEW — across-script TA axis story
// =========================================================
function AdherenceView() {
  return (
    <div className="ph-adherence-view">
      <section className="k-hero" style={{ borderBottom: "1px solid var(--border-1-dark)" }}>
        <div>
          <phEy axis="TA">Adherence · TA Axis</phEy>
          <h1>The plan keeps working <em>only if you do.</em></h1>
          <p>Every prescription you fill is also a contract: take it on time, mint HCR. Skip 3+ doses in a week and the orb decays. Here's how you're doing across all scripts.</p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, alignSelf: "end" }}>
          <div className="dv-mini-stat"><div className="l">Composite adherence</div><div className="v" style={{ color: "var(--accent-guardian)" }}>89%</div><div className="s">↑ 4 pts vs. 90 days ago</div></div>
          <div className="dv-mini-stat"><div className="l">TA axis (last 90d)</div><div className="v">+0.06</div><div className="s">on-track for streak</div></div>
          <div className="dv-mini-stat"><div className="l">HCR earned · 90d</div><div className="v">+34.8</div><div className="s">~$31.20 redeem value</div></div>
          <div className="dv-mini-stat"><div className="l">HCR forfeited</div><div className="v" style={{ color: "var(--accent-halo)" }}>−2.4</div><div className="s">7 missed doses across 5 scripts</div></div>
        </div>
      </section>

      <div className="k-section-head">
        <div><phEy axis="TA">Per-script breakdown</phEy><h2>Which scripts you're winning at.</h2></div>
      </div>

      <div className="ph-adh-cards">
        {[
          { drug: "Lisinopril 20 mg",     pct: 96, mood: "great",  miss: 1, streak: 23 },
          { drug: "Atorvastatin 40 mg",   pct: 88, mood: "ok",     miss: 4, streak: 6 },
          { drug: "Metformin 500 mg",     pct: 72, mood: "warn",   miss: 8, streak: 2 },
          { drug: "Sertraline 50 mg",     pct: 84, mood: "ok",     miss: 5, streak: 11 },
        ].map((m, i) => (
          <div key={i} className="ph-adh-card">
            <div className="ph-adh-card-h">
              <div style={{ width: 36, height: 36, borderRadius: 8, background: "linear-gradient(135deg, #E5484D, #A8262A)", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 600, color: "#fff" }}>Rx</div>
              <div className="ttl">{m.drug}</div>
              <div className={"pct " + m.mood}>{m.pct}%</div>
            </div>
            <div className="ph-adh-card-bar"><div style={{ width: m.pct + "%", background: m.mood === "great" ? "var(--accent-guardian)" : m.mood === "ok" ? "var(--accent-halo)" : "var(--accent-vital)" }}></div></div>
            <div className="ph-adh-card-meta">
              <span><b>{m.miss}</b> missed (90d)</span>
              <span><b>{m.streak}d</b> current streak</span>
              <span><b>+{(m.pct/10).toFixed(1)}</b> HCR/30d</span>
            </div>
          </div>
        ))}
      </div>

      <div className="k-section-head" style={{ marginTop: 32 }}>
        <div><phEy axis="TA">Why you're missing doses</phEy><h2>Patterns the pharmacist sees.</h2></div>
      </div>

      <div className="ph-pattern-grid">
        <div className="ph-pattern">
          <div className="hd">Friday &amp; Saturday evenings</div>
          <div className="bd">Metformin 8pm dose missed 6 of last 12 weekends. Travel? Going out? Try moving to 10am with breakfast.</div>
          <button className="k-btn k-btn-ghost">Talk to pharmacist</button>
        </div>
        <div className="ph-pattern">
          <div className="hd">After 14+ days on same dose</div>
          <div className="bd">Atorvastatin adherence drops 9% in week 3 of every supply. Pillbox refill reminder set.</div>
          <button className="k-btn k-btn-ghost">View pillbox</button>
        </div>
        <div className="ph-pattern">
          <div className="hd">Travel weeks</div>
          <div className="bd">Adherence drops 14% during travel. We can ship a 7-day travel kit before your next trip.</div>
          <button className="k-btn k-btn-ghost">Set travel mode</button>
        </div>
      </div>
    </div>
  );
}

// Expose
Object.assign(window, { RxDetail, RefillsView, MailOrderView, TransferView, AdherenceView });