// pages-app.jsx — Login, Portal dashboard, in-app Insurify view, billing, team

// ─── LOGIN ───────────────────────────────────────────────────────────────────
function LoginPage({ go }) {
  return (
    <div style={{
      minHeight: 'calc(100vh - 64px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '48px 32px', textAlign: 'center'
    }} data-screen-label="07 Login">
      <div style={{ maxWidth: 440 }}>
        <Wordmark size={38} onClick={() => go('home')} />
        <div className="eyebrow" style={{ marginTop: 32, justifyContent: 'center', display: 'flex' }}>Provider log-in</div>
        <h1 style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.025em', marginTop: 12, marginBottom: 12 }}>
          Coming soon.
        </h1>
        <p style={{ fontSize: 15, color: 'var(--ink-3)', margin: 0, lineHeight: 1.6 }}>
          The provider portal login isn't live yet. Insurify is free to use today, no
          account required, for NPI-verified physicians and APPs.
        </p>
        <div style={{ marginTop: 32, display: 'flex', gap: 10, justifyContent: 'center' }}>
          <button className="btn btn-lg btn-primary btn-arrow" onClick={() => go('access')}>
            Get Insurify free <ArrowRight />
          </button>
          <button className="btn btn-lg btn-outline" onClick={() => go('home')}>
            Back to home
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── PORTAL DASHBOARD ────────────────────────────────────────────────────────
function PortalPage({ go }) {
  return (
    <div data-screen-label="08 Portal — Dashboard">
      <section style={{ padding: '40px 0 24px' }}>
        <div className="cmd-container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, flexWrap: 'wrap' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>CriterionMD platform · Hudson Pain Group workspace</div>
              <h1 className="h-1" style={{ fontSize: 36 }}>Good morning, Marin.</h1>
              <div style={{ display: 'flex', gap: 10, marginTop: 10, alignItems: 'center', fontSize: 12, color: 'var(--ink-3)' }}>
                <span className="pill" style={{ height: 22, fontSize: 12 }}>
                  <span className="pill-dot"></span> NPI verified · MD
                </span>
                <span>·</span>
                <span className="mono">NPI 1487359201</span>
                <span>·</span>
                <span>Anesthesiology, Pain Medicine</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <span style={{ fontSize: 13, color: 'var(--ink-3)' }}>Today · Thu Oct 15</span>
              <button className="btn btn-sm btn-outline">Switch workspace</button>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="cmd-container">
          {/* Subscribed products */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
            <div className="eyebrow">Your CriterionMD products</div>
            <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 13, color: 'var(--accent)' }}>
              Browse the platform →
            </a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
            <PortalProductCard
              name="Insurify™"
              k="insurify"
              status="available"
              tagline="Real-time documentation & medical-necessity assistant."
              audience="Physician"
              priceLabel="Free · NPI verified"
              onOpen={() => go('insurify-app')}
            />
            <PortalProductCard
              name="ScribeAware™"
              k="notes"
              status="coming"
              tagline="Notes in your own style, with payer logic built in."
              audience="Physician product"
              priceLabel="Coming soon"
              cta="Join the waitlist"
            />
            <PortalProductCard
              name="Greenlight™"
              k="authdesk"
              status="coming"
              tagline="End-to-end auth submission and peer-to-peer scheduling."
              audience="Practice product"
              priceLabel="Coming soon"
              cta="Join the waitlist"
            />
            <PortalProductCard
              name="Reckon™"
              k="rcmiq"
              status="coming"
              tagline="Charge capture, coding accuracy, and reimbursement variance."
              audience="Practice product"
              priceLabel="Coming soon"
              cta="Express interest"
            />
            <PortalProductCard
              name="Rebound™"
              k="denials"
              status="coming"
              tagline="Root-cause analytics and payer-pattern denial prevention."
              audience="Practice product"
              priceLabel="Coming soon"
              cta="Express interest"
            />
            <PortalProductCard
              name="Sentinel™"
              k="policy"
              status="coming"
              tagline="Real-time payer-policy changes and impact analysis."
              audience="Practice product"
              priceLabel="Coming soon"
              cta="Join the waitlist"
            />
          </div>

          {/* Stats + activity row */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24, marginTop: 40 }}>
            {/* Insurify summary */}
            <div className="card">
              <div style={{ padding: '18px 24px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 8, background: 'var(--accent)',
                    color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontWeight: 600
                  }}>I</div>
                  <div style={{ fontSize: 16, fontWeight: 500 }}>Insurify · this month</div>
                </div>
                <select className="select" style={{ width: 'auto', height: 32, fontSize: 12, padding: '0 28px 0 10px' }}>
                  <option>October 2026</option>
                  <option>September 2026</option>
                </select>
              </div>
              <div style={{ padding: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
                <PortalStat label="Notes assisted" value="412" delta="+18%" />
                <PortalStat label="Auths submitted" value="186" delta="+12%" />
                <PortalStat label="First-pass rate" value="91%" delta="+9 pts" />
                <PortalStat label="Avg readiness" value="88%" delta="+4 pts" />
              </div>
              <div style={{ padding: '0 24px 20px' }}>
                <ReadinessChart />
              </div>
            </div>

            {/* Recent activity */}
            <div className="card">
              <div style={{ padding: '18px 24px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 16, fontWeight: 500 }}>Recent activity</div>
                <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 12, color: 'var(--accent)' }}>View all →</a>
              </div>
              <div>
                {[
                  { t: '2 gaps closed on chart #00 482 117', s: 'Insurify · Rosa Alvarez · Lumbar MBB · Aetna', when: '14 min ago' },
                  { t: 'Authorization submitted', s: 'Insurify · Chart #00 391 802 · BCBS NY · 64635-64636', when: '38 min ago' },
                  { t: 'Payer policy update detected', s: 'UnitedHealth · MPM 2026T0590S · effective Nov 1 · 3 of your patients affected', when: '2 hr ago' },
                  { t: 'Authorization Desk waitlist confirmed', s: 'You\'ll be in the Q3 pilot cohort', when: 'Yesterday' },
                  { t: 'Dr. Patel signed 4 notes', s: 'Insurify · all cleared readiness threshold', when: 'Yesterday' },
                  { t: 'Welcome to CriterionMD', s: 'Account created · NPI verified', when: '6 days ago' },
                ].map((a, i) => (
                  <div key={i} style={{
                    padding: '14px 24px', borderBottom: i < 5 ? '1px solid var(--line)' : 0,
                    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12
                  }}>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, color: 'var(--ink)', fontWeight: 450 }}>{a.t}</div>
                      <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{a.s}</div>
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--ink-4)', flexShrink: 0, fontFamily: 'var(--font-mono)' }}>{a.when}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Seats + onboarding */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, marginTop: 24 }}>
            <SeatUsage />
            <PayerMix />
            <PilotTracker />
          </div>
        </div>
      </section>
      <div style={{ height: 96 }}></div>
    </div>
  );
}

// Per-product brand colors (mirrors PRODUCT_COLORS in pages-marketing.jsx)
const PRODUCT_COLORS_PORTAL = {
  insurify: { tile: '#1F5C3D' },
  notes:    { tile: '#3F3A89' },
  authdesk: { tile: '#1E8A55' },
  rcmiq:    { tile: '#8A5A1B' },
  denials:  { tile: '#A33A2E' },
  policy:   { tile: '#28557A' },
};

function PortalProductCard({ name, k, status, tagline, audience, priceLabel, onOpen, cta }) {
  const isAvail = status === 'available';
  return (
    <div className="card" style={{
      display: 'flex', flexDirection: 'column',
      borderColor: isAvail ? 'var(--accent-tint-2)' : 'var(--line)',
      background: isAvail ? 'var(--accent-tint)' : 'var(--paper)'
    }}>
      <div style={{ padding: 18, flex: 1 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 9,
            background: PRODUCT_COLORS_PORTAL[k]?.tile || 'var(--paper-2)',
            color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 6px 16px -6px ${PRODUCT_COLORS_PORTAL[k]?.tile || '#ccc'}55, inset 0 1px 0 rgba(255,255,255,0.12)`
          }}>
            <ProductMark k={k} size={20} />
          </div>
          <span className={'pill ' + (isAvail ? '' : 'pill-neutral')}
                style={{ height: 22, fontSize: 12, background: isAvail ? '#fff' : 'var(--paper-2)' }}>
            <span className="pill-dot"></span> {isAvail ? 'available' : 'coming soon'}
          </span>
        </div>
        <div style={{ fontSize: 16, fontWeight: 500, letterSpacing: '-0.015em' }}>{name}</div>
        <p style={{ fontSize: 12.5, color: isAvail ? 'var(--accent-ink)' : 'var(--ink-3)', marginTop: 6, marginBottom: 0, lineHeight: 1.5, opacity: isAvail ? 0.85 : 1 }}>{tagline}</p>
        <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid ' + (isAvail ? 'var(--accent-tint-2)' : 'var(--line)'), display: 'flex', flexDirection: 'column', gap: 4 }}>
          <div style={{ fontSize: 12, color: isAvail ? 'var(--accent-ink)' : 'var(--ink-3)', opacity: 0.7 }}>{audience}</div>
          <div style={{ fontSize: 12, fontWeight: 500, color: isAvail ? 'var(--accent-ink)' : 'var(--ink-2)' }} className="mono">{priceLabel}</div>
        </div>
      </div>
      <div style={{ padding: '0 18px 18px' }}>
        {isAvail ? (
          <button className="btn btn-sm btn-primary btn-arrow" style={{ width: '100%' }} onClick={onOpen}>
            Open {name} <ArrowRight />
          </button>
        ) : (
          <button className="btn btn-sm btn-outline" style={{ width: '100%', background: '#fff' }}>
            {cta || 'Notify me'}
          </button>
        )}
      </div>
    </div>
  );
}

function ProductCard({ name, tag, tagKind, tagline, meta, onOpen, cta, disabled }) {
  return (
    <div className="card" style={{
      display: 'flex', flexDirection: 'column',
      opacity: disabled ? 0.7 : 1
    }}>
      <div style={{ padding: 20, borderBottom: '1px solid var(--line)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: disabled ? 'var(--paper-2)' : 'var(--accent)',
            color: disabled ? 'var(--ink-3)' : '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 600, fontSize: 15
          }}>{name[0]}</div>
          <span className={'pill ' + (tagKind === 'muted' ? 'pill-neutral' : '')}>
            <span className="pill-dot"></span> {tag}
          </span>
        </div>
        <div style={{ fontSize: 19, fontWeight: 500, letterSpacing: '-0.02em' }}>{name}</div>
        <p style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 6, marginBottom: 0, lineHeight: 1.5 }}>{tagline}</p>
      </div>
      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {meta.map((m, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
            <span style={{ color: 'var(--ink-3)' }}>{m.l}</span>
            <span style={{ color: 'var(--ink-2)' }}>{m.v}</span>
          </div>
        ))}
      </div>
      <div style={{ padding: '0 20px 20px', marginTop: 'auto' }}>
        {disabled ? (
          <button className="btn btn-outline" style={{ width: '100%' }}>{cta || 'Notify me'}</button>
        ) : (
          <button className="btn btn-primary btn-arrow" style={{ width: '100%' }} onClick={onOpen}>
            Open {name} <ArrowRight />
          </button>
        )}
      </div>
    </div>
  );
}

function PortalStat({ label, value, delta }) {
  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 6 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.025em' }}>{value}</span>
        <span style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 500 }}>{delta}</span>
      </div>
    </div>
  );
}

function ReadinessChart() {
  // Simple SVG bar chart of average readiness per week
  const data = [78, 82, 79, 84, 86, 88, 90, 88, 91, 89, 92, 93];
  const max = 100;
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12, marginTop: 8 }}>
        <div className="eyebrow">Average authorization readiness · 12 weeks</div>
        <div style={{ display: 'flex', gap: 16, fontSize: 12 }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 8, height: 8, background: 'var(--accent)', borderRadius: 2 }}></span>
            Hudson Pain
          </span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--ink-3)' }}>
            <span style={{ width: 8, height: 1, background: 'var(--ink-3)' }}></span>
            Threshold 86%
          </span>
        </div>
      </div>
      <svg viewBox="0 0 480 120" style={{ width: '100%', height: 120 }}>
        <line x1="0" y1={120 - (86 / max * 120)} x2="480" y2={120 - (86 / max * 120)}
              stroke="var(--ink-3)" strokeWidth="1" strokeDasharray="3 3" opacity="0.5" />
        {data.map((v, i) => {
          const w = 28, gap = 12;
          const x = i * (w + gap);
          const h = (v / max) * 110;
          return (
            <g key={i}>
              <rect x={x} y={120 - h} width={w} height={h} rx="3"
                    fill={i === data.length - 1 ? 'var(--accent)' : 'var(--accent-tint-2)'} />
              <text x={x + w / 2} y="118" fontSize="9" fontFamily="var(--font-mono)" textAnchor="middle" fill="var(--ink-4)">
                W{i + 1}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
}

function SeatUsage() {
  const seats = [
    { name: 'Marin Okafor, MD', role: 'Physician · Owner', active: true, you: true },
    { name: 'Soren Patel, MD', role: 'Physician', active: true },
    { name: 'Imani Brooks, MD', role: 'Physician', active: true },
    { name: 'Devon Castro, NP', role: 'Mid-level', active: true },
    { name: 'Dana Whitfield', role: 'Practice administrator', active: true },
    { name: 'Kayla Mendes', role: 'MA · invited', active: false },
    { name: 'James Liu, MD', role: 'Physician', active: true },
  ];
  return (
    <div className="card">
      <div style={{ padding: '18px 20px', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 15, fontWeight: 500 }}>Seats</div>
          <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>7 of 10 used · pilot group plan</div>
        </div>
        <button className="btn btn-sm btn-outline">Invite</button>
      </div>
      <div style={{ padding: '8px 0 16px' }}>
        {seats.map((s, i) => (
          <div key={i} style={{
            padding: '10px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12
          }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', minWidth: 0 }}>
              <div style={{
                width: 28, height: 28, borderRadius: 999,
                background: s.active ? 'var(--accent-tint)' : 'var(--paper-2)',
                color: s.active ? 'var(--accent-ink)' : 'var(--ink-3)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 500, flexShrink: 0
              }}>{s.name.split(' ').map(p => p[0]).join('').slice(0, 2)}</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 450, color: 'var(--ink)' }}>
                  {s.name} {s.you && <span className="mono" style={{ fontSize: 12, color: 'var(--accent)', marginLeft: 4 }}>YOU</span>}
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{s.role}</div>
              </div>
            </div>
            <span className={'pill ' + (s.active ? '' : 'pill-neutral')} style={{ height: 20, fontSize: 12 }}>
              <span className="pill-dot"></span> {s.active ? 'active' : 'pending'}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function PayerMix() {
  const payers = [
    { n: 'Aetna PPO', v: 32, r: 92 },
    { n: 'BCBS NY', v: 24, r: 89 },
    { n: 'UnitedHealth', v: 18, r: 84 },
    { n: 'Cigna', v: 12, r: 91 },
    { n: 'Medicare', v: 10, r: 96 },
    { n: 'Other', v: 4, r: 80 },
  ];
  return (
    <div className="card">
      <div style={{ padding: '18px 20px', borderBottom: '1px solid var(--line)' }}>
        <div style={{ fontSize: 15, fontWeight: 500 }}>Payer mix</div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>This month · first-pass auth rate by payer</div>
      </div>
      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {payers.map((p, i) => (
          <div key={i}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 6 }}>
              <span style={{ color: 'var(--ink-2)', fontWeight: 450 }}>{p.n}</span>
              <span className="mono" style={{ color: 'var(--ink-3)' }}>{p.v}% · {p.r}% pass</span>
            </div>
            <div style={{ height: 6, background: 'var(--line-2)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{ width: `${p.r}%`, height: '100%', background: p.r >= 90 ? 'var(--accent)' : p.r >= 85 ? '#8AAE93' : 'var(--warn)' }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function PilotTracker() {
  const steps = [
    { t: 'Kickoff & EHR connection', d: 'Sep 4', done: true },
    { t: 'Two physicians onboarded', d: 'Sep 12', done: true },
    { t: 'Whole group onboarded', d: 'Sep 28', done: true },
    { t: 'Mid-pilot review', d: 'Oct 18', current: true },
    { t: 'Success-metric readout', d: 'Nov 4', done: false },
    { t: 'Production decision', d: 'Nov 11', done: false },
  ];
  return (
    <div className="card">
      <div style={{ padding: '18px 20px', borderBottom: '1px solid var(--line)' }}>
        <div style={{ fontSize: 15, fontWeight: 500 }}>Pilot tracker</div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>Week 6 of 10 · on track</div>
      </div>
      <div style={{ padding: 20, position: 'relative' }}>
        <div style={{
          position: 'absolute', left: 28, top: 28, bottom: 20, width: 1,
          background: 'var(--line)'
        }} />
        {steps.map((s, i) => (
          <div key={i} style={{ display: 'flex', gap: 14, paddingBottom: i < steps.length - 1 ? 16 : 0, position: 'relative' }}>
            <div style={{
              width: 18, height: 18, borderRadius: 999, marginTop: 2, flexShrink: 0, zIndex: 1,
              background: s.done ? 'var(--accent)' : s.current ? 'var(--paper)' : 'var(--paper)',
              border: '2px solid ' + (s.done ? 'var(--accent)' : s.current ? 'var(--accent)' : 'var(--line)'),
              display: 'flex', alignItems: 'center', justifyContent: 'center'
            }}>
              {s.done && <Check size={9} color="#fff" />}
              {s.current && <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }} />}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 13, color: s.done ? 'var(--ink-3)' : 'var(--ink)', fontWeight: s.current ? 500 : 450 }}>{s.t}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>{s.d}</div>
              </div>
              {s.current && <div style={{ fontSize: 12, color: 'var(--accent)', marginTop: 4 }}>Scheduled · review call on Oct 18</div>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── INSURIFY IN-APP VIEW ────────────────────────────────────────────────────
function InsurifyAppPage({ go }) {
  return (
    <div data-screen-label="09 Insurify — In app">
      <section style={{ padding: '32px 0 16px' }}>
        <div className="cmd-container">
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--ink-3)', marginBottom: 16 }}>
            <a href="#" onClick={(e) => { e.preventDefault(); go('portal'); }} style={{ color: 'var(--accent)' }}>
              Workspace
            </a>
            <span>/</span>
            <span>Insurify</span>
            <span>/</span>
            <span style={{ color: 'var(--ink) ' }}>Today's queue</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 16, flexWrap: 'wrap' }}>
            <div>
              <h1 style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.025em' }}>Today's queue</h1>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 6 }}>
                14 charts in progress · 6 ready for submission · 2 with open gaps
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn btn-sm btn-outline">Filter by physician</button>
              <button className="btn btn-sm btn-outline">Filter by payer</button>
              <button className="btn btn-sm btn-primary">+ New chart</button>
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 32 }}>
        <div className="cmd-container">
          <ChartQueue go={go} />
        </div>
      </section>

      <section style={{ paddingBottom: 32 }}>
        <div className="cmd-container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 6 }}>Currently open</div>
              <h2 style={{ fontSize: 20, fontWeight: 500 }}>Alvarez, Rosa · Lumbar MBB</h2>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn btn-sm btn-outline">Open in Epic</button>
              <button className="btn btn-sm btn-primary">Submit authorization <ArrowRight /></button>
            </div>
          </div>
          <InsurifyMock />
        </div>
      </section>
      <div style={{ height: 96 }}></div>
    </div>
  );
}

function ChartQueue({ go }) {
  const charts = [
    { p: 'Alvarez, Rosa', mrn: '00 482 117', proc: 'Lumbar MBB · L4-5, L5-S1', payer: 'Aetna PPO', physician: 'M. Okafor', r: 72, gaps: 2, status: 'open' },
    { p: 'Chen, Wei', mrn: '00 391 802', proc: 'Cervical RFA · C5-C6', payer: 'BCBS NY', physician: 'S. Patel', r: 96, gaps: 0, status: 'ready' },
    { p: 'Diaz, Andre', mrn: '00 410 559', proc: 'Lumbar ESI · L4-5', payer: 'UnitedHealth', physician: 'I. Brooks', r: 88, gaps: 0, status: 'ready' },
    { p: 'Fischer, Helena', mrn: '00 220 480', proc: 'SI joint injection · bilateral', payer: 'Cigna', physician: 'J. Liu', r: 64, gaps: 3, status: 'open' },
    { p: 'Gomes, Pedro', mrn: '00 488 213', proc: 'Lumbar RFA · L4, L5', payer: 'Medicare', physician: 'M. Okafor', r: 92, gaps: 0, status: 'ready' },
    { p: 'Habib, Yusuf', mrn: '00 510 087', proc: 'Stellate ganglion block', payer: 'Aetna PPO', physician: 'S. Patel', r: 81, gaps: 1, status: 'open' },
  ];
  return (
    <div className="card" style={{ overflow: 'hidden' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1.6fr 1.4fr 1fr 0.9fr 1fr 0.9fr 0.8fr',
        padding: '12px 24px', borderBottom: '1px solid var(--line)',
        fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)',
        textTransform: 'uppercase', letterSpacing: '.06em', background: 'var(--paper-2)'
      }}>
        <span>Patient</span><span>Procedure</span><span>Payer</span><span>Physician</span><span>Readiness</span><span>Gaps</span><span style={{ textAlign: 'right' }}>Status</span>
      </div>
      {charts.map((c, i) => (
        <div key={i} onClick={() => go('insurify-app')}
             style={{
               display: 'grid', gridTemplateColumns: '1.6fr 1.4fr 1fr 0.9fr 1fr 0.9fr 0.8fr',
               padding: '14px 24px', borderBottom: i < charts.length - 1 ? '1px solid var(--line)' : 0,
               alignItems: 'center', fontSize: 13, cursor: 'pointer'
             }}>
          <div>
            <div style={{ fontWeight: 450, color: 'var(--ink)' }}>{c.p}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>MRN {c.mrn}</div>
          </div>
          <div style={{ color: 'var(--ink-2)' }}>{c.proc}</div>
          <div style={{ color: 'var(--ink-2)' }}>{c.payer}</div>
          <div style={{ color: 'var(--ink-2)' }}>{c.physician}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ flex: 1, maxWidth: 80, height: 5, background: 'var(--line-2)', borderRadius: 999, overflow: 'hidden' }}>
              <div style={{
                width: `${c.r}%`, height: '100%',
                background: c.r >= 86 ? 'var(--accent)' : 'var(--warn)'
              }} />
            </div>
            <span className="mono" style={{ fontSize: 12, color: 'var(--ink-2)' }}>{c.r}%</span>
          </div>
          <div style={{ fontSize: 12 }}>
            {c.gaps === 0
              ? <span style={{ color: 'var(--ink-3)' }}>—</span>
              : <span style={{ color: 'var(--warn)' }}>{c.gaps} open</span>}
          </div>
          <div style={{ textAlign: 'right' }}>
            <span className={'pill ' + (c.status === 'ready' ? '' : 'pill-warn')} style={{ height: 22, fontSize: 12 }}>
              <span className="pill-dot"></span> {c.status === 'ready' ? 'ready' : 'gaps'}
            </span>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── BILLING (simple placeholder) ────────────────────────────────────────────
function BillingPage({ go }) {
  return (
    <div data-screen-label="10 Portal — Billing">
      <section style={{ padding: '28px 0' }}>
        <div className="cmd-container">
          <h1 style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.025em' }}>Billing & plan</h1>
          <p style={{ fontSize: 14, color: 'var(--ink-3)', marginTop: 6 }}>
            Pilot agreement · Hudson Pain Group · 7 active seats
          </p>
          <div className="grid-2" style={{ marginTop: 24 }}>
            <div className="card card-pad">
              <div className="eyebrow" style={{ marginBottom: 10 }}>Current plan</div>
              <div style={{ fontSize: 22, fontWeight: 500 }}>Pilot · Group</div>
              <p style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 6 }}>
                Pricing scoped at end of pilot. No invoices issued during the pilot period.
              </p>
              <hr className="divider" style={{ margin: '20px 0' }} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <Row l="Plan start" v="Sep 4, 2026" />
                <Row l="Pilot length" v="10 weeks" />
                <Row l="Success review" v="Nov 11, 2026" />
                <Row l="Seats included" v="10" />
                <Row l="Seats used" v="7" />
              </div>
            </div>
            <div className="card card-pad" style={{ background: 'var(--accent-tint)', borderColor: 'var(--accent-tint-2)' }}>
              <div className="eyebrow" style={{ marginBottom: 10, color: 'var(--accent-ink)' }}>What happens next</div>
              <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--accent-ink)' }}>
                After Nov 11 success review, we'll send a tailored proposal.
              </div>
              <p style={{ fontSize: 13, color: 'var(--accent-ink)', opacity: 0.85, marginTop: 8, marginBottom: 0 }}>
                Pricing is scoped to your physician count, payer mix, and the success metrics we set together at kickoff.
                We don't sneak in surprises.
              </p>
              <div style={{ marginTop: 20, display: 'flex', gap: 8 }}>
                <button className="btn btn-sm" style={{ background: 'var(--accent)', color: '#fff' }}>
                  Talk to your account team
                </button>
                <button className="btn btn-sm btn-outline">View pilot agreement</button>
              </div>
            </div>
          </div>
          <div style={{ marginTop: 24 }}>
            <div className="card">
              <div style={{ padding: '14px 24px', borderBottom: '1px solid var(--line)', fontSize: 15, fontWeight: 500 }}>
                Documents
              </div>
              {[
                { n: 'Pilot Services Agreement', d: 'Signed Sep 2, 2026', },
                { n: 'Business Associate Agreement (draft)', d: 'In review · expected Oct 22', },
                { n: 'Security & data handling overview', d: 'Updated Oct 1, 2026', },
              ].map((d, i) => (
                <div key={i} style={{
                  padding: '14px 24px', display: 'flex', justifyContent: 'space-between',
                  borderBottom: i < 2 ? '1px solid var(--line)' : 0, fontSize: 13
                }}>
                  <div>
                    <div style={{ color: 'var(--ink) ', fontWeight: 450 }}>{d.n}</div>
                    <div style={{ color: 'var(--ink-3)', fontSize: 12, marginTop: 2 }}>{d.d}</div>
                  </div>
                  <button className="btn btn-sm btn-outline">View</button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <div style={{ height: 64 }}></div>
    </div>
  );
}

function Row({ l, v }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
      <span style={{ color: 'var(--ink-3)' }}>{l}</span>
      <span style={{ color: 'var(--ink-2)' }}>{v}</span>
    </div>
  );
}

// ─── TEAM (lightweight) ──────────────────────────────────────────────────────
function TeamPage({ go }) {
  return (
    <div data-screen-label="11 Portal — Team">
      <section style={{ padding: '28px 0' }}>
        <div className="cmd-container">
          <h1 style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.025em' }}>Team & access</h1>
          <p style={{ fontSize: 14, color: 'var(--ink-3)', marginTop: 6 }}>
            Manage seats, roles, and product access for Hudson Pain Group.
          </p>
          <div style={{ marginTop: 24 }}>
            <SeatUsage />
          </div>
        </div>
      </section>
      <div style={{ height: 96 }}></div>
    </div>
  );
}

Object.assign(window, { LoginPage, PortalPage, InsurifyAppPage, BillingPage, TeamPage });
