// mocks.jsx — Insurify product UI mockups (realistic + abstracted)

// ─── Realistic full product mockup ────────────────────────────────────────────
function InsurifyMock({ scale = 1, animated = true }) {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    if (!animated) return;
    const id = setInterval(() => setTick((t) => (t + 1) % 4), 1800);
    return () => clearInterval(id);
  }, [animated]);

  // Readiness bar counts up to its target on mount, giving the panel a
  // live-computed feel rather than a static number.
  const READY_TARGET = 72;
  const [readiness, setReadiness] = React.useState(animated ? 0 : READY_TARGET);
  React.useEffect(() => {
    if (!animated) return;
    let raf;
    const start = performance.now();
    const DUR = 1100;
    const step = (now) => {
      const p = Math.min(1, (now - start) / DUR);
      const eased = 1 - Math.pow(1 - p, 3);
      setReadiness(Math.round(eased * READY_TARGET));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [animated]);

  return (
    <div className="mock" style={{ transformOrigin: 'top left' }}>
      {/* Top app bar */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '10px 16px', background: 'var(--paper-2)',
        borderBottom: '1px solid var(--line)', fontSize: 12, color: 'var(--ink-3)'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <span className="mock-dot" style={{ background: '#E4604A' }}></span>
            <span className="mock-dot" style={{ background: '#E8B83A' }}></span>
            <span className="mock-dot" style={{ background: '#7CC07B' }}></span>
          </div>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.04em' }}>
            app.criterionmd.com/insurify
          </span>
        </div>
        <span style={{ fontSize: 12, fontFamily: 'var(--font-mono)' }}>v1.4.2</span>
      </div>

      {/* Patient header */}
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px 20px', borderBottom: '1px solid var(--line)', background: '#fff'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10, background: 'var(--accent-tint)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--accent-ink)', fontWeight: 500, fontSize: 13
          }}>RA</div>
          <div>
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>Doe, Jane</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', display: 'flex', gap: 12, marginTop: 2 }}>
              <span>MRN 00 482 117</span>
              <span>F · 58 yrs</span>
              <span>DOB 04/12/1967</span>
              <span className="mono">Visit: F/U procedure</span>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <span className="pill pill-neutral" style={{ height: 24, fontSize: 12 }}>
            <span className="pill-dot"></span> Note in progress
          </span>
          <span className="pill" style={{ height: 24, fontSize: 12 }}>
            <span className="pill-dot"></span> Insurify active
          </span>
        </div>
      </div>

      {/* Body: split */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.35fr 1fr', minHeight: 280, background: '#fff' }}>
        {/* Note editor */}
        <div style={{ padding: '14px 18px', borderRight: '1px solid var(--line)', fontSize: 13, lineHeight: 1.5, color: 'var(--ink-2)' }}>
          <div className="eyebrow" style={{ marginBottom: 8, fontSize: 12 }}>Clinical note · S O A P</div>

          <div style={{ marginBottom: 8 }}>
            <div style={{ color: 'var(--ink)', fontWeight: 500, fontSize: 12, letterSpacing: '.04em', marginBottom: 4 }}>SUBJECTIVE</div>
            <p style={{ margin: 0 }}>
              58 y/o F, bilateral axial low back pain <mark style={{ background: 'var(--accent-tint)', color: 'var(--accent-ink)', padding: '0 2px', borderRadius: 2 }}>&gt; 6 months</mark>, pain <mark style={{ background: 'var(--accent-tint)', color: 'var(--accent-ink)', padding: '0 2px', borderRadius: 2 }}>7/10</mark> at rest.
            </p>
          </div>

          <div style={{ marginBottom: 8 }}>
            <div style={{ color: 'var(--ink)', fontWeight: 500, fontSize: 12, letterSpacing: '.04em', marginBottom: 4 }}>OBJECTIVE</div>
            <p style={{ margin: 0 }}>
              Tenderness over <mark style={{ background: 'var(--accent-tint)', color: 'var(--accent-ink)', padding: '0 2px', borderRadius: 2 }}>L4-5 and L5-S1 facet joints</mark> bilaterally. PT ×8 weeks, NSAIDs trialed. MRI 1/26: facet arthropathy L4-5, L5-S1.
            </p>
          </div>

          <div>
            <div style={{ color: 'var(--ink)', fontWeight: 500, fontSize: 12, letterSpacing: '.04em', marginBottom: 4 }}>PLAN</div>
            <p style={{ margin: 0 }}>
              Proceed with <mark style={{ background: 'var(--accent-tint)', color: 'var(--accent-ink)', padding: '0 2px', borderRadius: 2 }}>diagnostic lumbar medial branch block</mark>, L4, L5 dorsal rami, bilateral.
              <span style={{ display: 'inline-block', width: 6, height: 14, background: 'var(--accent)', verticalAlign: '-3px', marginLeft: 2, opacity: tick % 2 ? 1 : 0.2 }} />
            </p>
          </div>

          <div style={{
            display: 'flex', gap: 10, marginTop: 12, paddingTop: 10,
            borderTop: '1px dashed var(--line)', fontSize: 12, color: 'var(--ink-3)'
          }}>
            <span className="mono">Auto-saved 11:42</span>
            <span>·</span>
            <span>Co-signed N. Patel, NP</span>
          </div>
        </div>

        {/* Insurify side panel */}
        <div style={{ background: 'var(--paper-2)', display: 'flex', flexDirection: 'column' }}>
          <div style={{
            padding: '10px 16px', display: 'flex', alignItems: 'center',
            justifyContent: 'space-between', borderBottom: '1px solid var(--line)'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 22, height: 22, borderRadius: 6, background: 'var(--accent)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff', fontSize: 12, fontWeight: 600
              }}>I</div>
              <span style={{ fontSize: 13, fontWeight: 500 }}>Insurify</span>
              <span className="mono" style={{ fontSize: 12, color: 'var(--accent-ink)', letterSpacing: '.06em', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                <span className="im-live-dot" style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--accent)', display: 'inline-block' }} />
                LIVE
              </span>
            </div>
            <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>updated 4s ago</span>
          </div>

          {/* Detected */}
          <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--line)' }}>
            <div className="eyebrow" style={{ marginBottom: 4, fontSize: 12 }}>Detected procedure</div>
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)', lineHeight: 1.3 }}>
              Lumbar medial branch block
            </div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>
              L4-5, L5-S1 · bilateral · diagnostic
            </div>
            <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
              <span className="pill pill-neutral" style={{ height: 22, fontSize: 12 }}>
                <span className="mono">64493</span>
              </span>
              <span className="pill pill-neutral" style={{ height: 22, fontSize: 12 }}>
                <span className="mono">64494</span>
              </span>
            </div>
          </div>

          {/* Payer */}
          <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--line)' }}>
            <div className="eyebrow" style={{ marginBottom: 4, fontSize: 12 }}>Payer · CPB 0722</div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>Example Payor PPO</div>
              <span className="pill" style={{ height: 22, fontSize: 12 }}>matched</span>
            </div>
          </div>

          {/* Criteria */}
          <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--line)', flex: 1 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
              <div className="eyebrow" style={{ fontSize: 12 }}>Medical necessity criteria</div>
              <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>5 / 7 met</span>
            </div>
            <CriteriaList tick={tick} />
          </div>

          {/* Readiness */}
          <div style={{ padding: '10px 16px', background: '#fff', borderTop: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div className="eyebrow" style={{ fontSize: 12 }}>Authorization readiness</div>
              <span style={{ fontSize: 13, fontWeight: 500, fontFamily: 'var(--font-mono)' }}>{readiness}%</span>
            </div>
            <div style={{ height: 6, background: 'var(--line-2)', borderRadius: 999, marginTop: 8, overflow: 'hidden' }}>
              <div style={{
                width: readiness + '%', height: '100%', background: 'var(--accent)',
                transition: 'width .1s linear'
              }} />
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
              <button className="btn btn-sm btn-primary" style={{ flex: 1 }}>
                Address 2 gaps <ArrowRight />
              </button>
              <button className="btn btn-sm btn-outline">View policy</button>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

function CriteriaList({ tick }) {
  const items = [
  { state: 'ok', label: 'Pain duration ≥ 3 months', detail: 'Note: "present > 6 months"' },
  { state: 'ok', label: 'Conservative therapy trialed', detail: 'PT ×8 weeks, NSAIDs' },
  { state: 'gap', label: 'Pain scale at recent visits', detail: 'Need ≥ 2 prior scores in 90d' },
  { state: 'gap', label: 'Imaging report on file', detail: 'MRI L-spine not linked' }];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {items.map((c, i) =>
      <div key={i} className="crit-row" style={{
        display: 'flex', gap: 10, alignItems: 'flex-start',
        padding: '8px 10px', background: '#fff', borderRadius: 6,
        border: '1px solid var(--line)',
        animationDelay: (i * 0.1) + 's'
      }}>
          <CritIcon state={c.state} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, color: 'var(--ink)', fontWeight: 450 }}>{c.label}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 1 }}>{c.detail}</div>
          </div>
        </div>
      )}
    </div>);

}

function CritIcon({ state }) {
  if (state === 'ok') {
    return (
      <div style={{
        width: 18, height: 18, borderRadius: 999, marginTop: 1,
        background: 'var(--accent-tint)', color: 'var(--accent-ink)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0
      }}>
        <Check size={11} />
      </div>);

  }
  return (
    <div style={{
      width: 18, height: 18, borderRadius: 999, marginTop: 1,
      background: 'var(--warn-tint)', color: 'var(--warn)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      fontSize: 12, fontWeight: 600
    }}>!</div>);

}

// ─── Abstracted capability tiles (used on homepage) ───────────────────────────
function CapabilityTiles() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
      <CapTile
        n="01"
        title="Detect"
        body="Reads the note as it's written. Identifies the procedure and CPT codes from your own clinical language."
        viz={<DetectViz />} />
      
      <CapTile
        n="02"
        title="Identify payer"
        body="Resolves the patient's active plan and the specific medical policy that governs the procedure."
        viz={<PayerViz />} />
      
      <CapTile
        n="03"
        title="Map criteria"
        body="Compares the documentation, exam findings, imaging, and prior therapy against each policy requirement."
        viz={<MapViz />} />
      
      <CapTile
        n="04"
        title="Surface gaps"
        body="Surfaces what's still missing before the auth is submitted, not after a denial."
        viz={<GapViz />} />
      
    </div>);

}

function CapTile({ n, title, body, viz }) {
  return (
    <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
      <div style={{
        height: 140, background: 'var(--paper-2)', borderBottom: '1px solid var(--line)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        borderTopLeftRadius: 10, borderTopRightRadius: 10, overflow: 'hidden'
      }}>{viz}</div>
      <div style={{ padding: 20 }}>
        <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '.06em' }}>{n}</div>
        <div style={{ fontSize: 17, fontWeight: 500, marginTop: 6, letterSpacing: '-0.015em' }}>{title}</div>
        <p style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 8, marginBottom: 0, lineHeight: 1.5 }}>{body}</p>
      </div>
    </div>);

}

function DetectViz() {
  return (
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.6, padding: '12px 16px', width: '100%' }}>
      <div>… diagnostic <span style={{ background: 'var(--accent-tint)', color: 'var(--accent-ink)', padding: '1px 4px', borderRadius: 3 }}>lumbar MBB</span></div>
      <div>at <span style={{ background: 'var(--accent-tint)', color: 'var(--accent-ink)', padding: '1px 4px', borderRadius: 3 }}>L4–L5, L5–S1</span></div>
      <div>bilateral …</div>
      <div style={{ marginTop: 8, color: 'var(--accent-ink)' }}>→ 64493 + 64494</div>
    </div>);

}

function PayerViz() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, padding: '14px 16px', width: '100%' }}>
      {[
      { name: 'Aetna PPO', sel: true },
      { name: 'BCBS NY', sel: false },
      { name: 'UnitedHealth', sel: false }].
      map((p, i) =>
      <div key={i} style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '6px 10px', borderRadius: 6,
        border: '1px solid ' + (p.sel ? 'var(--accent)' : 'var(--line)'),
        background: p.sel ? 'var(--accent-tint)' : '#fff',
        fontSize: 12, color: p.sel ? 'var(--accent-ink)' : 'var(--ink-3)'
      }}>
          <span>{p.name}</span>
          {p.sel && <Check size={10} />}
        </div>
      )}
    </div>);

}

function MapViz() {
  return (
    <svg viewBox="0 0 220 110" style={{ width: '85%' }}>
      <g fontFamily="var(--font-mono)" fontSize="8" fill="var(--ink-3)">
        <rect x="6" y="10" width="78" height="14" rx="3" fill="#fff" stroke="var(--line)" />
        <text x="12" y="20">note: PT 8wks</text>
        <rect x="6" y="32" width="78" height="14" rx="3" fill="#fff" stroke="var(--line)" />
        <text x="12" y="42">exam: facet+</text>
        <rect x="6" y="54" width="78" height="14" rx="3" fill="#fff" stroke="var(--line)" />
        <text x="12" y="64">VAS 7/10</text>
        <rect x="6" y="76" width="78" height="14" rx="3" fill="#fff" stroke="var(--line)" />
        <text x="12" y="86">MRI: ___</text>

        <rect x="136" y="10" width="78" height="14" rx="3" fill="var(--accent-tint)" stroke="var(--accent-tint-2)" />
        <text x="142" y="20" fill="var(--accent-ink)">conservative tx</text>
        <rect x="136" y="32" width="78" height="14" rx="3" fill="var(--accent-tint)" stroke="var(--accent-tint-2)" />
        <text x="142" y="42" fill="var(--accent-ink)">exam findings</text>
        <rect x="136" y="54" width="78" height="14" rx="3" fill="var(--accent-tint)" stroke="var(--accent-tint-2)" />
        <text x="142" y="64" fill="var(--accent-ink)">pain scale</text>
        <rect x="136" y="76" width="78" height="14" rx="3" fill="var(--warn-tint)" stroke="#F1D9BB" />
        <text x="142" y="86" fill="var(--warn)">imaging req</text>

        <path d="M84 17 L136 17" stroke="var(--accent)" strokeWidth="1" />
        <path d="M84 39 L136 39" stroke="var(--accent)" strokeWidth="1" />
        <path d="M84 61 L136 61" stroke="var(--accent)" strokeWidth="1" />
        <path d="M84 83 L136 83" stroke="var(--warn)" strokeWidth="1" strokeDasharray="2 2" />
      </g>
    </svg>);

}

function GapViz() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, padding: '14px 16px', width: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
        <CritIcon state="ok" /> <span style={{ color: 'var(--ink-2)' }}>Conservative therapy</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
        <CritIcon state="ok" /> <span style={{ color: 'var(--ink-2)' }}>Pain duration</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
        <CritIcon state="gap" /> <span style={{ color: 'var(--warn)' }}>Imaging report</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }}>
        <CritIcon state="gap" /> <span style={{ color: 'var(--warn)' }}>Pain scale history</span>
      </div>
    </div>);

}

// ─── Platform overview mock (hero, portal preview) ───────────────────────────
const PLATFORM_PRODUCTS = [
{
  key: 'insurify', name: 'Insurify™',
  desc: 'Real-time documentation & medical-necessity assistant.',
  audience: 'Physicians & APPs', price: 'Free · NPI-verified',
  status: 'available', icon: 'I'
},
{
  key: 'codequickref', name: 'Code QuickRef™',
  desc: 'Chrome extension that finds the right ICD-10 code from a plain-language description, no need to know the exact verbiage.',
  audience: 'Physicians & APPs', price: 'Free · Beta', status: 'available', icon: 'Q', route: 'solutions'
},
{
  key: 'notes', name: 'ScribeAware™',
  desc: 'Clinical documentation that lives inside the physician\u2019s workflow.',
  audience: 'Physicians & APPs', price: 'In development', status: 'coming', icon: 'S'
},
{
  key: 'authdesk', name: 'Greenlight™',
  desc: 'A practice-wide layer for prior authorization.',
  audience: 'Practice & enterprise', price: 'In development', status: 'coming', icon: 'G'
},
{
  key: 'rcmiq', name: 'Reckon™',
  desc: 'Reimbursement integrity for procedural-specialty practices.',
  audience: 'Practice & enterprise', price: 'In development', status: 'coming', icon: 'K'
},
{
  key: 'denials', name: 'Rebound™',
  desc: 'Turning the denial queue into a structured signal.',
  audience: 'Practice & enterprise', price: 'In development', status: 'coming', icon: 'B'
},
{
  key: 'policy', name: 'Sentinel™',
  desc: 'Awareness of payer-policy change, tied back to your patients.',
  audience: 'Practice & enterprise', price: 'In development', status: 'coming', icon: 'T'
}];


// ─── Code QuickRef mock (Chrome extension popup) ─────────────────────────────
// Symptom description in, ranked ICD-10 suggestions out. Cycles the "typed"
// query through a couple of examples so the popup feels alive.
function CodeQuickRefMock({ animated = true }) {
  const QUERIES = [
  {
    text: 'sharp pain shooting down the leg after standing',
    results: [
    { code: 'M54.42', desc: 'Lumbago with sciatica, left side', match: 96 },
    { code: 'M51.16', desc: 'Intervertebral disc disorder w/ radiculopathy, lumbar region', match: 74 },
    { code: 'G57.32', desc: 'Meralgia paresthetica, left lower limb', match: 41 }]

  },
  {
    text: 'burning sensation in both feet, worse at night',
    results: [
    { code: 'E11.42', desc: 'Type 2 diabetes with diabetic polyneuropathy', match: 92 },
    { code: 'G62.9', desc: 'Polyneuropathy, unspecified', match: 68 },
    { code: 'R20.2', desc: 'Paresthesia of skin', match: 35 }]

  }];

  const [qi, setQi] = React.useState(0);
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    if (!animated) return;
    const t = setInterval(() => setTick((n) => n + 1), 900);
    return () => clearInterval(t);
  }, [animated]);
  React.useEffect(() => {
    if (!animated) return;
    const t = setInterval(() => setQi((i) => (i + 1) % QUERIES.length), 5200);
    return () => clearInterval(t);
  }, [animated]);

  const q = QUERIES[qi];

  return (
    <div className="mock" style={{
      width: 380, borderRadius: 12, overflow: 'hidden', background: '#fff',
      boxShadow: '0 1px 0 rgba(15,20,20,.04), 0 1px 2px rgba(15,20,20,.04), 0 30px 80px -20px rgba(15,20,20,.18), 0 12px 32px -8px rgba(15,20,20,.08)'
    }}>
      {/* Extension chrome */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '12px 14px', borderBottom: '1px solid var(--line)', background: 'var(--paper-2)'
      }}>
        <div style={{
          width: 24, height: 24, borderRadius: 7, background: '#0E7A72',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: 12, fontWeight: 600, flexShrink: 0
        }}>Q</div>
        <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>Code QuickRef</span>
        <span className="pill" style={{ height: 20, fontSize: 11, marginLeft: 'auto' }}>
          <span className="pill-dot"></span> Beta
        </span>
      </div>

      {/* Search input */}
      <div style={{ padding: '14px 14px 10px' }}>
        <div className="eyebrow" style={{ fontSize: 11, marginBottom: 6 }}>Describe the symptom or diagnosis</div>
        <div style={{
          border: '1px solid var(--line)', borderRadius: 8, padding: '9px 11px',
          fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.4, background: 'var(--paper-2)'
        }}>
          {q.text}
          <span style={{
            display: 'inline-block', width: 6, height: 13, background: 'var(--ink-2)',
            verticalAlign: '-2px', marginLeft: 2, opacity: animated && tick % 2 ? 1 : 0.15
          }} />
        </div>
      </div>

      {/* Suggested codes */}
      <div style={{ padding: '2px 14px 14px', display: 'flex', flexDirection: 'column', gap: 6 }}>
        <div className="eyebrow" style={{ fontSize: 11, margin: '6px 0 2px' }}>Suggested ICD-10 codes</div>
        {q.results.map((r, i) =>
        <div key={r.code} style={{
          display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px',
          borderRadius: 8, border: '1px solid ' + (i === 0 ? '#BFE1DC' : 'var(--line)'),
          background: i === 0 ? '#E4F3F1' : '#fff'
        }}>
            <span className="mono" style={{
              fontSize: 12.5, fontWeight: 600,
              color: i === 0 ? '#0A4F49' : 'var(--ink-2)', flexShrink: 0, minWidth: 52
            }}>{r.code}</span>
            <span style={{ fontSize: 12.5, color: 'var(--ink-2)', flex: 1, lineHeight: 1.3 }}>{r.desc}</span>
            <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: i === 0 ? '#0A4F49' : 'var(--ink-3)', flexShrink: 0 }}>
              {r.match}%
            </span>
          </div>
        )}
      </div>
    </div>);

}

// ─── Insurify practice-level UI (homepage hero) ──────────────────────────────
// Auto-playing 4-scene carousel (~2.5s per scene = ~10s loop).
// Chrome stays static; only the breadcrumb + main panel swap. Pauses on hover.
function InsurifyPracticeMock() {
  const SCENES = [
    { id: 'queue',    label: "Today's queue",       crumb: "Today's queue" },
    { id: 'detect',   label: 'Procedure detected',  crumb: 'Alvarez, Rosa · MBB' },
    { id: 'criteria', label: 'Criteria mapped',     crumb: 'Alvarez, Rosa · Aetna CPB 0722' },
    { id: 'ready',    label: 'Authorization ready', crumb: 'Alvarez, Rosa · ready' },
  ];
  const SCENE_MS = 2500;
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % SCENES.length), SCENE_MS);
    return () => clearInterval(t);
  }, [paused]);

  const charts = [
    { p: 'Alvarez, Rosa',   mrn: '482117', proc: 'Lumbar MBB · L4-5, L5-S1', payer: 'Aetna PPO',     physician: 'M. Okafor',  r: 96, gaps: 0, status: 'ready' },
    { p: 'Chen, Wei',       mrn: '391802', proc: 'Cervical RFA · C5-C6',     payer: 'BCBS NY',       physician: 'S. Patel',   r: 91, gaps: 0, status: 'ready' },
    { p: 'Diaz, Andre',     mrn: '410559', proc: 'Lumbar ESI · L4-5',        payer: 'UnitedHealth',  physician: 'I. Brooks',  r: 88, gaps: 0, status: 'ready' },
    { p: 'Fischer, Helena', mrn: '220480', proc: 'SI joint inj. · bilateral',payer: 'Cigna',         physician: 'J. Liu',     r: 64, gaps: 3, status: 'gaps' },
    { p: 'Gomes, Pedro',    mrn: '488213', proc: 'Lumbar RFA · L4, L5',      payer: 'Medicare',      physician: 'M. Okafor',  r: 94, gaps: 0, status: 'ready' },
    { p: 'Habib, Yusuf',    mrn: '510087', proc: 'Stellate ganglion block',  payer: 'Aetna PPO',     physician: 'S. Patel',   r: 78, gaps: 1, status: 'gaps' },
  ];
  const scene = SCENES[idx];
  return (
    <div className="mock" style={{
      background: '#fff', borderRadius: 12, overflow: 'hidden', position: 'relative',
      boxShadow: '0 1px 0 rgba(15,20,20,.04), 0 1px 2px rgba(15,20,20,.04), 0 30px 80px -20px rgba(15,20,20,.18), 0 12px 32px -8px rgba(15,20,20,.08)'
    }}
    onMouseEnter={() => setPaused(true)}
    onMouseLeave={() => setPaused(false)}>
      <style>{`
        .ip { display: grid; grid-template-columns: 196px 1fr; min-height: 540px; }
        .ip-side { background: #FBFBF8; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 12px; font-size: 12.5px; }
        .ip-side-top { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
        .ip-ws { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
        .ip-nav-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.1em; padding: 8px 6px 4px; text-transform: uppercase; }
        .ip-nav-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--ink-2); margin-bottom: 1px; }
        .ip-nav-item.active { background: rgba(31, 92, 61, 0.08); color: var(--accent-ink); font-weight: 500; }
        .ip-nav-item .ip-ico { width: 18px; height: 18px; border-radius: 5px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .ip-nav-item.active .ip-ico { background: var(--accent); color: #fff; border-color: var(--accent); }
        .ip-nav-item.soon { color: var(--ink-3); }
        .ip-nav-item.soon .ip-ico { background: var(--paper-2); color: var(--ink-3); }
        .ip-badge-soon { margin-left: auto; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; }
        .ip-side-bottom { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }
        .ip-av { width: 22px; height: 22px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; }

        .ip-main { display: flex; flex-direction: column; min-width: 0; }
        .ip-bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); }
        .ip-bar b { color: var(--ink); font-weight: 500; }
        .ip-search { margin-left: auto; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 5px; background: var(--paper-2); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
        .ip-bell { width: 22px; height: 22px; border-radius: 5px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; position: relative; }
        .ip-bell::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); border: 1.5px solid #fff; }

        .ip-body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 14px; }
        .ip-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
        .ip-h-title { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
        .ip-h-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

        .ip-pills { display: flex; gap: 6px; }
        .ip-segpill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 11px; color: var(--ink-2); }
        .ip-segpill.active { background: var(--ink); color: #fff; border-color: var(--ink); }

        .ip-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
        .ip-stat { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
        .ip-stat-l { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
        .ip-stat-v { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin-top: 4px; line-height: 1; }
        .ip-stat-d { font-size: 10.5px; color: var(--accent); margin-top: 4px; font-weight: 500; }
        .ip-stat-d.neg { color: var(--danger); }

        .ip-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
        .ip-thead, .ip-row { display: grid; grid-template-columns: 1.5fr 1.6fr 1fr 0.9fr 1fr 0.7fr; align-items: center; padding: 10px 14px; font-size: 11.5px; }
        .ip-thead { background: var(--paper-2); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
        .ip-row + .ip-row { border-top: 1px solid var(--line-2); }
        .ip-row .pname { font-weight: 500; color: var(--ink); }
        .ip-row .pmrn { font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); margin-top: 1px; }
        .ip-meter { display: flex; align-items: center; gap: 6px; }
        .ip-meter-bar { flex: 1; max-width: 64px; height: 4px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
        .ip-meter-bar > div { height: 100%; }

        /* Scene transitions */
        .ip-scene { animation: ipFade .55s cubic-bezier(.2,.7,.2,1); }
        @keyframes ipFade {
          0%   { opacity: 0; transform: translateY(6px); }
          100% { opacity: 1; transform: translateY(0); }
        }

        /* Scene 2 / 3 / 4: chart open */
        .ip-chart { display: grid; grid-template-columns: 1.45fr 1fr; gap: 14px; }
        .ip-panel { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 14px 16px; }
        .ip-panel-h {
          display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px;
        }
        .ip-panel-t { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
        .ip-panel-sub { font-size: 10.5px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.04em; }

        .ip-note { font-size: 12px; line-height: 1.55; color: var(--ink-2); }
        .ip-note .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 3px; }
        .ip-note p { margin: 0 0 10px; }
        .ip-hl-detect {
          background: var(--accent-tint); color: var(--accent-ink);
          padding: 1px 4px; border-radius: 3px;
          animation: ipPulse 1.4s ease 0.2s infinite;
        }
        @keyframes ipPulse {
          0%, 100% { background: var(--accent-tint); }
          50%      { background: #C9DEC9; }
        }
        .ip-caret {
          display: inline-block; width: 1.5px; height: 11px; background: var(--accent);
          vertical-align: -1px; margin-left: 1px; animation: ipBlink 1s steps(2) infinite;
        }
        @keyframes ipBlink { 50% { opacity: 0; } }

        .ip-detect-card {
          background: var(--paper-2); border: 1px solid var(--line);
          border-radius: 7px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
        }
        .ip-detect-card + .ip-detect-card { margin-top: 8px; }
        .ip-cpt { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }

        /* Criteria checklist */
        .ip-crit-row {
          display: flex; gap: 10px; align-items: center;
          padding: 8px 10px; border-radius: 6px; font-size: 11.5px;
          background: #fff; border: 1px solid var(--line-2);
        }
        .ip-crit-row + .ip-crit-row { margin-top: 6px; }
        .ip-crit-row.gap { background: var(--warn-tint); border-color: #F1D9BB; }
        .ip-crit-icon {
          width: 16px; height: 16px; border-radius: 999px; flex-shrink: 0;
          display: flex; align-items: center; justify-content: center;
        }
        .ip-crit-icon.ok { background: var(--accent-tint); color: var(--accent-ink); }
        .ip-crit-icon.gap { background: var(--warn); color: #fff; font-size: 10px; font-weight: 600; }
        .ip-crit-label { flex: 1; color: var(--ink-2); }
        .ip-crit-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; }
        .ip-crit-row.gap .ip-crit-tag { color: var(--warn); }

        /* Ready scene */
        .ip-ready-hero {
          padding: 22px 24px;
          background: linear-gradient(135deg, var(--accent-tint) 0%, #fff 70%);
          border: 1px solid var(--accent-tint-2); border-radius: 10px;
          display: flex; align-items: center; gap: 18px;
        }
        .ip-ready-check {
          width: 56px; height: 56px; border-radius: 999px;
          background: var(--accent); color: #fff;
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0; box-shadow: 0 10px 24px -8px rgba(31,92,61,0.5);
        }
        .ip-meter-big {
          height: 6px; background: var(--line-2); border-radius: 999px; overflow: hidden; margin-top: 10px;
        }
        .ip-meter-big > div {
          height: 100%; background: var(--accent);
          transition: width 1.5s cubic-bezier(.2,.7,.2,1);
        }

        /* Progress / dots */
        .ip-foot {
          display: flex; align-items: center; gap: 14px;
          padding: 10px 18px 12px;
          border-top: 1px solid var(--line);
          background: #FBFBF8;
        }
        .ip-foot-spacer { flex: 1; }
        .ip-dots { display: flex; gap: 6px; }
        .ip-dot {
          width: 6px; height: 6px; border-radius: 999px;
          background: var(--line); border: 0; padding: 0; cursor: pointer;
          transition: background 0.2s ease, width 0.2s ease;
        }
        .ip-dot.active { background: var(--accent); width: 14px; border-radius: 4px; }
        .ip-scenename {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
          color: var(--ink-3); text-transform: uppercase;
        }
        .ip-scenename b { color: var(--ink); font-weight: 500; }
      `}</style>

      <div className="ip">
        <aside className="ip-side">
          <div className="ip-side-top">
            <div className="ip-ws">H</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontWeight: 500, fontSize: 12.5, color: 'var(--ink)' }}>Hudson Pain Group</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>7 physicians</div>
            </div>
          </div>

          <div className="ip-nav-label">Workspace</div>
          <div className="ip-nav-item">
            <span className="ip-ico" style={{ background: 'transparent', border: 'none' }}>
              <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
                <rect x="2" y="2" width="5" height="5" rx="1" fill="currentColor" />
                <rect x="9" y="2" width="5" height="5" rx="1" fill="currentColor" opacity="0.6" />
                <rect x="2" y="9" width="5" height="5" rx="1" fill="currentColor" opacity="0.6" />
                <rect x="9" y="9" width="5" height="5" rx="1" fill="currentColor" opacity="0.4" />
              </svg>
            </span>
            Overview
          </div>

          <div className="ip-nav-label" style={{ marginTop: 6 }}>Products</div>
          <div className="ip-nav-item active">
            <span className="ip-ico">I</span>
            Insurify
          </div>
          <div className="ip-nav-item soon"><span className="ip-ico">S</span>ScribeAware™<span className="ip-badge-soon">soon</span></div>
          <div className="ip-nav-item soon"><span className="ip-ico">G</span>Greenlight™<span className="ip-badge-soon">soon</span></div>
          <div className="ip-nav-item soon"><span className="ip-ico">K</span>Reckon™<span className="ip-badge-soon">soon</span></div>
          <div className="ip-nav-item soon"><span className="ip-ico">B</span>Rebound™<span className="ip-badge-soon">soon</span></div>
          <div className="ip-nav-item soon"><span className="ip-ico">T</span>Sentinel™<span className="ip-badge-soon">soon</span></div>

          <div className="ip-side-bottom">
            <div className="ip-av">MO</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ color: 'var(--ink-2)', fontSize: 12, fontWeight: 500 }}>Dr. M. Okafor</div>
              <div style={{ fontSize: 9.5, color: 'var(--ink-3)' }}>NPI verified</div>
            </div>
          </div>
        </aside>

        <div className="ip-main">
          <div className="ip-bar">
            <b>Insurify™</b>
            <span style={{ color: 'var(--ink-4)' }}>/</span>
            <span key={scene.id} style={{ animation: 'ipFade .35s ease' }}>{scene.crumb}</span>
            <div className="ip-search">
              <svg width="10" height="10" viewBox="0 0 16 16" fill="none">
                <circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.3" />
                <path d="M10.5 10.5l3 3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
              </svg>
              <span>Search</span>
              <span style={{ marginLeft: 4, opacity: 0.6 }}>⌘K</span>
            </div>
            <div className="ip-bell">
              <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
                <path d="M4 10c0-3 1-6 4-6s4 3 4 6c0 .8.5 1.5 1 2H3c.5-.5 1-1.2 1-2z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
                <path d="M7 13.5h2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
              </svg>
            </div>
          </div>

          <div className="ip-body" key={scene.id}>
            {scene.id === 'queue' && (
              <div className="ip-scene">
                <div className="ip-h">
                  <div>
                    <div className="ip-h-title">Today's queue</div>
                    <div className="ip-h-sub">14 charts in progress · 6 ready for submission · 2 with open gaps</div>
                  </div>
                  <div className="ip-pills">
                    <span className="ip-segpill active">All</span>
                    <span className="ip-segpill">Ready</span>
                    <span className="ip-segpill">Gaps</span>
                  </div>
                </div>

                <div className="ip-strip">
                  <div className="ip-stat">
                    <div className="ip-stat-l">First-pass auth</div>
                    <div className="ip-stat-v">91<span style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 400 }}>%</span></div>
                    <div className="ip-stat-d">↑ 9 pts vs Sep</div>
                  </div>
                  <div className="ip-stat">
                    <div className="ip-stat-l">Avg readiness</div>
                    <div className="ip-stat-v">88<span style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 400 }}>%</span></div>
                    <div className="ip-stat-d">↑ 4 pts</div>
                  </div>
                  <div className="ip-stat">
                    <div className="ip-stat-l">Days to procedure</div>
                    <div className="ip-stat-v">6.4<span style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 400 }}>d</span></div>
                    <div className="ip-stat-d">↓ 2.1d</div>
                  </div>
                  <div className="ip-stat">
                    <div className="ip-stat-l">Open gaps</div>
                    <div className="ip-stat-v">2</div>
                    <div className="ip-stat-d neg">2 charts need review</div>
                  </div>
                </div>

                <div className="ip-table">
                  <div className="ip-thead">
                    <span>Patient</span><span>Procedure</span><span>Payer</span><span>Physician</span><span>Readiness</span><span style={{ textAlign: 'right' }}>Status</span>
                  </div>
                  {charts.map((c, i) => (
                    <div className="ip-row" key={i}>
                      <div>
                        <div className="pname">{c.p}</div>
                        <div className="pmrn">MRN {c.mrn}</div>
                      </div>
                      <span style={{ color: 'var(--ink-2)' }}>{c.proc}</span>
                      <span style={{ color: 'var(--ink-2)' }}>{c.payer}</span>
                      <span style={{ color: 'var(--ink-2)' }}>{c.physician}</span>
                      <div className="ip-meter">
                        <div className="ip-meter-bar">
                          <div style={{ width: `${c.r}%`, background: c.r >= 86 ? 'var(--accent)' : 'var(--warn)' }} />
                        </div>
                        <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-2)' }}>{c.r}%</span>
                      </div>
                      <div style={{ textAlign: 'right' }}>
                        <span className={'pill ' + (c.status === 'ready' ? '' : 'pill-warn')} style={{ height: 20, fontSize: 10.5 }}>
                          <span className="pill-dot"></span> {c.status === 'ready' ? 'ready' : `${c.gaps} gap${c.gaps>1?'s':''}`}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {scene.id === 'detect' && <SceneDetect />}
            {scene.id === 'criteria' && <SceneCriteria />}
            {scene.id === 'ready' && <SceneReady />}
          </div>

          <div className="ip-foot">
            <div className="ip-scenename">
              {String(idx + 1).padStart(2, '0')} · <b>{scene.label}</b>
            </div>
            <div className="ip-foot-spacer" />
            <div className="ip-dots">
              {SCENES.map((s, i) => (
                <button key={s.id}
                        aria-label={`Go to ${s.label}`}
                        className={'ip-dot' + (i === idx ? ' active' : '')}
                        onClick={() => { setIdx(i); }} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SceneDetect() {
  return (
    <div className="ip-scene">
      <div className="ip-h">
        <div>
          <div className="ip-h-title">Alvarez, Rosa · MRN 482117</div>
          <div className="ip-h-sub">Visit · F/U procedure · Dr. M. Okafor · 11:42 AM</div>
        </div>
        <div className="ip-pills">
          <span className="ip-segpill">Open in EHR</span>
          <span className="ip-segpill active">Insurify active</span>
        </div>
      </div>

      <div className="ip-chart">
        {/* Note */}
        <div className="ip-panel">
          <div className="ip-panel-h">
            <span className="ip-panel-t">Clinical note · SOAP</span>
            <span className="ip-panel-sub">auto-saved 11:42</span>
          </div>
          <div className="ip-note">
            <div className="lbl">PLAN</div>
            <p>
              Proceed with diagnostic <span className="ip-hl-detect">lumbar medial branch block</span> to
              target the <span className="ip-hl-detect">bilateral L4 to S1 facet joints</span>. Plan for
              second confirmatory block if &gt;80% relief, then RFA<span className="ip-caret"></span>
            </p>
            <div className="lbl">ASSESSMENT</div>
            <p style={{ color: 'var(--ink-3)' }}>Lumbar facet-mediated pain, L4-5 and L5-S1 bilateral. M54.5, M47.816.</p>
            <div className="lbl">OBJECTIVE</div>
            <p style={{ color: 'var(--ink-3)' }}>Tenderness L4-5, L5-S1 facets bilaterally. Positive facet loading bilaterally. Negative SLR. Neuro exam intact.</p>
          </div>
        </div>

        {/* Detect panel */}
        <div className="ip-panel" style={{ background: '#FBFBF8' }}>
          <div className="ip-panel-h">
            <span className="ip-panel-t">Insurify · reading the note</span>
            <span className="pill" style={{ height: 18, fontSize: 9.5 }}><span className="pill-dot"></span>live</span>
          </div>

          <div className="ip-detect-card">
            <div className="ip-panel-sub" style={{ fontSize: 9 }}>DETECTED PROCEDURE</div>
            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>Lumbar medial branch block</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>L4-5, L5-S1 · bilateral · diagnostic</div>
            <div className="ip-cpt">
              <span className="pill pill-neutral" style={{ height: 18, fontSize: 12 }}><span className="mono">64493</span></span>
              <span className="pill pill-neutral" style={{ height: 18, fontSize: 12 }}><span className="mono">64494</span></span>
              <span className="pill pill-neutral" style={{ height: 18, fontSize: 12 }}>×2 levels</span>
            </div>
          </div>

          <div className="ip-detect-card">
            <div className="ip-panel-sub" style={{ fontSize: 9 }}>PAYER &amp; POLICY</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>Aetna PPO</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>CPB 0722 · facet joint injections &amp; MBB</div>
              </div>
              <span className="pill" style={{ height: 18, fontSize: 9.5 }}>matched</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SceneCriteria() {
  const items = [
    { state: 'ok',  label: 'Pain duration ≥ 3 months',          tag: 'met' },
    { state: 'ok',  label: 'Conservative therapy trialed',      tag: 'met' },
    { state: 'ok',  label: 'Pain interferes with function',     tag: 'met' },
    { state: 'ok',  label: 'Facet-loading exam findings',       tag: 'met' },
    { state: 'gap', label: 'Pain scale at recent visits',       tag: 'gap' },
    { state: 'gap', label: 'Imaging report on file',            tag: 'gap' },
    { state: 'ok',  label: 'No prior MBB in last 12 months',    tag: 'met' },
  ];
  return (
    <div className="ip-scene">
      <div className="ip-h">
        <div>
          <div className="ip-h-title">Medical-necessity criteria</div>
          <div className="ip-h-sub">Aetna CPB 0722 · 5 of 7 met · 2 documentation gaps</div>
        </div>
        <div className="ip-pills">
          <span className="ip-segpill">View policy</span>
          <span className="ip-segpill active">Address gaps</span>
        </div>
      </div>

      <div className="ip-chart">
        {/* Criteria list */}
        <div className="ip-panel">
          <div className="ip-panel-h">
            <span className="ip-panel-t">Criteria checklist</span>
            <span className="ip-panel-sub">5 / 7 met</span>
          </div>
          <div>
            {items.map((c, i) => (
              <div key={i} className={'ip-crit-row ' + (c.state === 'gap' ? 'gap' : '')}>
                <div className={'ip-crit-icon ' + c.state}>
                  {c.state === 'ok' ? (
                    <svg width="9" height="9" viewBox="0 0 16 16" fill="none">
                      <path d="M3 8.5l3 3 6-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  ) : '!'}
                </div>
                <span className="ip-crit-label">{c.label}</span>
                <span className="ip-crit-tag">{c.tag}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Gap detail */}
        <div className="ip-panel" style={{ background: '#FBFBF8' }}>
          <div className="ip-panel-h">
            <span className="ip-panel-t">Resolve gap</span>
            <span className="ip-panel-sub">1 / 2</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5 }}>
            <div className="ip-panel-sub" style={{ fontSize: 9, marginBottom: 4 }}>POLICY REQUIRES</div>
            <div style={{
              padding: '8px 10px', background: '#fff', border: '1px solid var(--line)',
              borderRadius: 6, color: 'var(--ink)', fontStyle: 'italic'
            }}>
              "Pain scale documented at this visit and at least two prior visits within the last 90 days."
            </div>
            <div className="ip-panel-sub" style={{ fontSize: 9, marginTop: 12, marginBottom: 4 }}>FOUND IN CHART</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span>Today's visit</span>
                <span className="mono" style={{ color: 'var(--warn)' }}>—</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span>Visit 09/14/26</span>
                <span className="mono" style={{ color: 'var(--accent)' }}>VAS 7/10</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span>Visit 08/02/26</span>
                <span className="mono" style={{ color: 'var(--warn)' }}>—</span>
              </div>
            </div>
            <div style={{
              marginTop: 14, padding: '8px 10px', background: 'var(--accent-tint)',
              border: '1px solid var(--accent-tint-2)', borderRadius: 6,
              fontSize: 12, color: 'var(--accent-ink)'
            }}>
              <strong style={{ fontWeight: 500 }}>Suggested:</strong> Add VAS/NRS to today's note. Insurify can prefill from the patient's intake response.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SceneReady() {
  return (
    <div className="ip-scene">
      <div className="ip-h">
        <div>
          <div className="ip-h-title">Authorization packet ready</div>
          <div className="ip-h-sub">Alvarez, Rosa · Lumbar MBB · Aetna PPO · CPB 0722</div>
        </div>
        <div className="ip-pills">
          <span className="ip-segpill">Edit</span>
          <span className="ip-segpill active">Submit to Aetna</span>
        </div>
      </div>

      <div className="ip-ready-hero">
        <div className="ip-ready-check">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
            <path d="M5 12.5l4.5 4.5L19 7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 17, fontWeight: 500, color: 'var(--accent-ink)', letterSpacing: '-0.015em' }}>
            All criteria met. Ready to submit.
          </div>
          <div style={{ fontSize: 12, color: 'var(--accent-ink)', opacity: 0.85, marginTop: 4 }}>
            7 / 7 medical-necessity criteria documented · supporting bundle attached
          </div>
          <div className="ip-meter-big">
            <div style={{ width: '100%' }} />
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="ip-panel-sub" style={{ fontSize: 9 }}>READINESS</div>
          <div style={{ fontSize: 28, fontWeight: 500, color: 'var(--accent-ink)', letterSpacing: '-0.025em', lineHeight: 1 }}>100%</div>
        </div>
      </div>

      <div className="ip-strip" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="ip-stat">
          <div className="ip-stat-l">Criteria met</div>
          <div className="ip-stat-v">7 <span style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 400 }}>/ 7</span></div>
          <div className="ip-stat-d">all required + supporting</div>
        </div>
        <div className="ip-stat">
          <div className="ip-stat-l">Time to clean</div>
          <div className="ip-stat-v">3 <span style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 400 }}>min</span></div>
          <div className="ip-stat-d">gaps closed inline</div>
        </div>
        <div className="ip-stat">
          <div className="ip-stat-l">Expected turnaround</div>
          <div className="ip-stat-v">4–6 <span style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 400 }}>days</span></div>
          <div className="ip-stat-d">Aetna PPO · routine</div>
        </div>
        <div className="ip-stat">
          <div className="ip-stat-l">Packet</div>
          <div className="ip-stat-v">12 <span style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 400 }}>pages</span></div>
          <div className="ip-stat-d">note · imaging · prior tx</div>
        </div>
      </div>
    </div>
  );
}

function PlatformMock() {
  return (
    <div className="mock" style={{
      background: '#fff',
      borderRadius: 12,
      boxShadow: '0 1px 0 rgba(15,20,20,.04), 0 1px 2px rgba(15,20,20,.04), 0 30px 80px -20px rgba(15,20,20,.18), 0 12px 32px -8px rgba(15,20,20,.08)',
      overflow: 'hidden'
    }}>
      <style>{`
        .pf { display: grid; grid-template-columns: 168px 1fr; }
        .pf-side {
          background: #FBFBF8;
          border-right: 1px solid var(--line);
          display: flex; flex-direction: column; padding: 10px 10px;
          font-size: 12px;
        }
        .pf-side-top {
          display: flex; align-items: center; gap: 8px;
          padding: 4px 6px 12px;
          margin-bottom: 10px;
          border-bottom: 1px solid var(--line);
        }
        .pf-ws {
          width: 22px; height: 22px; border-radius: 6px;
          background: var(--accent); color: #fff;
          display: flex; align-items: center; justify-content: center;
          font-size: 11px; font-weight: 600; letter-spacing: -0.02em;
        }
        .pf-ws-name { font-weight: 500; font-size: 12.5px; color: var(--ink); letter-spacing: -0.01em; }
        .pf-ws-sub { font-size: 10px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: 0.04em; }
        .pf-nav-label {
          font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3);
          letter-spacing: 0.1em; padding: 8px 6px 4px; text-transform: uppercase;
        }
        .pf-nav-item {
          display: flex; align-items: center; gap: 7px;
          padding: 4px 7px; border-radius: 5px;
          color: var(--ink-2); cursor: default;
          margin-bottom: 1px;
        }
        .pf-nav-item.active { background: rgba(31, 92, 61, 0.08); color: var(--accent-ink); font-weight: 500; }
        .pf-nav-item .pf-ico {
          width: 18px; height: 18px; border-radius: 5px;
          background: #fff; border: 1px solid var(--line);
          color: var(--ink-2); font-size: 10px; font-weight: 600;
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
        }
        .pf-nav-item.active .pf-ico { background: var(--accent); color: #fff; border-color: var(--accent); }
        .pf-nav-item.soon { color: var(--ink-3); }
        .pf-nav-item.soon .pf-ico { background: var(--paper-2); color: var(--ink-3); }
        .pf-badge-soon {
          margin-left: auto; font-family: var(--font-mono); font-size: 8.5px;
          letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase;
        }
        .pf-side-bottom {
          margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
          display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3);
        }
        .pf-side-bottom .av {
          width: 22px; height: 22px; border-radius: 999px;
          background: var(--accent-tint); color: var(--accent-ink);
          display: flex; align-items: center; justify-content: center;
          font-size: 10px; font-weight: 500;
        }

        .pf-main { display: flex; flex-direction: column; min-width: 0; }
        .pf-bar {
          display: flex; align-items: center; gap: 10px;
          height: 32px; padding: 0 12px;
          border-bottom: 1px solid var(--line);
          font-size: 11px; color: var(--ink-3);
        }
        .pf-crumb { color: var(--ink-3); }
        .pf-crumb b { color: var(--ink); font-weight: 500; }
        .pf-search {
          margin-left: auto; display: flex; align-items: center; gap: 6px;
          height: 24px; padding: 0 8px; border-radius: 5px;
          background: var(--paper-2); border: 1px solid var(--line);
          font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
          letter-spacing: 0.02em;
        }
        .pf-bell {
          width: 22px; height: 22px; border-radius: 5px;
          background: #fff; border: 1px solid var(--line);
          display: flex; align-items: center; justify-content: center;
          position: relative;
        }
        .pf-bell::after {
          content: ""; position: absolute; top: 3px; right: 3px;
          width: 6px; height: 6px; border-radius: 999px;
          background: var(--accent); border: 1.5px solid #fff;
        }

        .pf-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
        .pf-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
        .pf-h-title { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
        .pf-h-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
        .pf-period {
          display: inline-flex; align-items: center; gap: 6px;
          font-family: var(--font-mono); font-size: 10px;
          color: var(--ink-3); letter-spacing: 0.04em;
          padding: 4px 8px; border-radius: 5px;
          background: var(--paper-2); border: 1px solid var(--line);
        }

        .pf-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .pf-kpi {
          padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
          background: #fff;
        }
        .pf-kpi-l {
          font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3);
          letter-spacing: 0.08em; text-transform: uppercase;
        }
        .pf-kpi-v { font-size: 18px; font-weight: 500; letter-spacing: -0.025em; color: var(--ink); margin-top: 2px; line-height: 1; }
        .pf-kpi-d { font-size: 10px; color: var(--accent); margin-top: 3px; font-weight: 500; }
        .pf-kpi-d.neg { color: var(--danger); }

        .pf-chart-card {
          border: 1px solid var(--line); border-radius: 7px;
          padding: 10px 12px; background: #fff;
        }
        .pf-chart-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
        .pf-chart-t { font-size: 12px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
        .pf-legend { display: flex; gap: 10px; font-size: 9.5px; color: var(--ink-3); font-family: var(--font-mono); }
        .pf-legend .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

        .pf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .pf-payer-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 4px 0; }
        .pf-payer-row + .pf-payer-row { border-top: 1px dashed var(--line-2); }
        .pf-payer-bar { width: 70px; height: 4px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
        .pf-payer-bar > div { height: 100%; background: var(--accent); }

        .pf-feed-card {
          border: 1px solid var(--line); border-radius: 7px;
          background: #fff; padding: 10px 12px;
        }
        .pf-feed-row {
          display: flex; gap: 9px; align-items: flex-start;
          padding: 5px 0;
        }
        .pf-feed-row + .pf-feed-row { border-top: 1px dashed var(--line-2); }
        .pf-feed-dot {
          width: 7px; height: 7px; border-radius: 999px;
          margin-top: 5px; flex-shrink: 0;
        }
        .pf-feed-dot.ok { background: var(--accent); }
        .pf-feed-dot.wait { background: var(--warn); }
        .pf-feed-dot.info { background: var(--ink-3); }
        .pf-feed-text { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; flex: 1; min-width: 0; }
        .pf-feed-text b { color: var(--ink); font-weight: 500; }
        .pf-feed-when { font-size: 9.5px; color: var(--ink-4); font-family: var(--font-mono); flex-shrink: 0; }
      `}</style>

      <div className="pf">
        {/* Sidebar */}
        <aside className="pf-side">
          <div className="pf-side-top">
            <div className="pf-ws">H</div>
            <div style={{ minWidth: 0 }}>
              <div className="pf-ws-name">Hudson Pain Group</div>
              <div className="pf-ws-sub">workspace</div>
            </div>
          </div>

          <div className="pf-nav-label">Workspace</div>
          <div className="pf-nav-item active">
            <span className="pf-ico" style={{ background: 'transparent', border: 'none', color: 'var(--accent-ink)' }}>
              <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
                <rect x="2" y="2" width="5" height="5" rx="1" fill="currentColor" />
                <rect x="9" y="2" width="5" height="5" rx="1" fill="currentColor" opacity="0.6" />
                <rect x="2" y="9" width="5" height="5" rx="1" fill="currentColor" opacity="0.6" />
                <rect x="9" y="9" width="5" height="5" rx="1" fill="currentColor" opacity="0.4" />
              </svg>
            </span>
            Overview
          </div>

          <div className="pf-nav-label" style={{ marginTop: 6 }}>Products</div>
          <div className="pf-nav-item">
            <span className="pf-ico" style={{ background: 'var(--accent)', color: '#fff', borderColor: 'var(--accent)' }}>I</span>
            Insurify
          </div>
          <div className="pf-nav-item soon">
            <span className="pf-ico">S</span>
            ScribeAware
            <span className="pf-badge-soon">soon</span>
          </div>
          <div className="pf-nav-item soon">
            <span className="pf-ico">G</span>
            Greenlight
            <span className="pf-badge-soon">soon</span>
          </div>
          <div className="pf-nav-item soon">
            <span className="pf-ico">K</span>
            Reckon
            <span className="pf-badge-soon">soon</span>
          </div>
          <div className="pf-nav-item soon">
            <span className="pf-ico">B</span>
            Rebound
            <span className="pf-badge-soon">soon</span>
          </div>
          <div className="pf-nav-item soon">
            <span className="pf-ico">T</span>
            Sentinel
            <span className="pf-badge-soon">soon</span>
          </div>

          <div className="pf-nav-label" style={{ marginTop: 6 }}>Manage</div>
          <div className="pf-nav-item">
            <span className="pf-ico" style={{ background: 'transparent', border: 'none' }}>
              <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="6" r="2.5" stroke="currentColor" strokeWidth="1.3" /><path d="M3 13c.8-2.5 2.7-4 5-4s4.2 1.5 5 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" /></svg>
            </span>
            Team
          </div>
          <div className="pf-nav-item">
            <span className="pf-ico" style={{ background: 'transparent', border: 'none' }}>
              <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.3" /><path d="M2 7h12" stroke="currentColor" strokeWidth="1.3" /></svg>
            </span>
            Billing
          </div>

          <div className="pf-side-bottom">
            <div className="av">MO</div>
            <div style={{ minWidth: 0 }}>
              <div style={{ color: 'var(--ink-2)', fontSize: 12, fontWeight: 500, letterSpacing: '-0.005em' }}>Dr. M. Okafor</div>
              <div style={{ fontSize: 9.5, color: 'var(--ink-3)' }}>NPI verified</div>
            </div>
          </div>
        </aside>

        {/* Main */}
        <div className="pf-main">
          <div className="pf-bar">
            <span className="pf-crumb"><b>Overview</b></span>
            <span style={{ color: 'var(--ink-4)' }}>·</span>
            <span className="pf-crumb">October 2026</span>
            <div className="pf-search">
              <svg width="10" height="10" viewBox="0 0 16 16" fill="none">
                <circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.3" />
                <path d="M10.5 10.5l3 3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
              </svg>
              <span>Search</span>
              <span style={{ marginLeft: 4, opacity: 0.6 }}>⌘K</span>
            </div>
            <div className="pf-bell">
              <svg width="11" height="11" viewBox="0 0 16 16" fill="none">
                <path d="M4 10c0-3 1-6 4-6s4 3 4 6c0 .8.5 1.5 1 2H3c.5-.5 1-1.2 1-2z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
                <path d="M7 13.5h2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
              </svg>
            </div>
          </div>

          <div className="pf-body">
            <div className="pf-h">
              <div>
                <div className="pf-h-title">Good morning, Marin.</div>
                <div className="pf-h-sub">412 notes assisted by Insurify this month · 91% first-pass auth rate</div>
              </div>
              <span className="pf-period">OCT 2026</span>
            </div>

            <div className="pf-kpis">
              <div className="pf-kpi">
                <div className="pf-kpi-l">First-pass auth</div>
                <div className="pf-kpi-v">91<span style={{ fontSize: 13, color: 'var(--ink-3)', fontWeight: 400 }}>%</span></div>
                <div className="pf-kpi-d">↑ 9 pts vs Sep</div>
              </div>
              <div className="pf-kpi">
                <div className="pf-kpi-l">Avg readiness</div>
                <div className="pf-kpi-v">88<span style={{ fontSize: 13, color: 'var(--ink-3)', fontWeight: 400 }}>%</span></div>
                <div className="pf-kpi-d">↑ 4 pts</div>
              </div>
              <div className="pf-kpi">
                <div className="pf-kpi-l">Days to procedure</div>
                <div className="pf-kpi-v">6.4<span style={{ fontSize: 13, color: 'var(--ink-3)', fontWeight: 400 }}>d</span></div>
                <div className="pf-kpi-d">↓ 2.1d</div>
              </div>
            </div>

            <div className="pf-chart-card">
              <div className="pf-chart-h">
                <div>
                  <div className="pf-chart-t">Authorization readiness · last 12 weeks</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>cohort vs. payer threshold</div>
                </div>
                <div className="pf-legend">
                  <span><span className="sw" style={{ background: 'var(--accent)' }}></span>Cohort</span>
                  <span><span className="sw" style={{ background: 'var(--ink-3)', height: 2 }}></span>Threshold</span>
                </div>
              </div>
              <ReadinessSparkline />
            </div>

            <div className="pf-grid-2">
              <div className="pf-chart-card">
                <div className="pf-chart-t" style={{ marginBottom: 6 }}>Payer mix</div>
                <div className="pf-payer-row"><span>Aetna PPO</span><div className="pf-payer-bar"><div style={{ width: '92%' }} /></div><span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>92%</span></div>
                <div className="pf-payer-row"><span>BCBS NY</span><div className="pf-payer-bar"><div style={{ width: '89%' }} /></div><span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>89%</span></div>
                <div className="pf-payer-row"><span>UnitedHealth</span><div className="pf-payer-bar"><div style={{ width: '84%', background: 'var(--warn)' }} /></div><span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>84%</span></div>
                <div className="pf-payer-row"><span>Medicare</span><div className="pf-payer-bar"><div style={{ width: '96%' }} /></div><span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>96%</span></div>
              </div>
              <div className="pf-feed-card">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 2 }}>
                  <div className="pf-chart-t">Live activity</div>
                  <span style={{ fontSize: 9.5, color: 'var(--accent)', fontFamily: 'var(--font-mono)', letterSpacing: '.08em' }}>
                    <span style={{ display: 'inline-block', width: 5, height: 5, borderRadius: 999, background: 'var(--accent)', marginRight: 4, verticalAlign: '1px' }} /> LIVE
                  </span>
                </div>
                <div className="pf-feed-row">
                  <span className="pf-feed-dot ok"></span>
                  <span className="pf-feed-text"><b>Gaps closed</b> · #482117 · Aetna MBB</span>
                  <span className="pf-feed-when">14m</span>
                </div>
                <div className="pf-feed-row">
                  <span className="pf-feed-dot ok"></span>
                  <span className="pf-feed-text"><b>Auth submitted</b> · BCBS NY · 64635</span>
                  <span className="pf-feed-when">38m</span>
                </div>
                <div className="pf-feed-row">
                  <span className="pf-feed-dot wait"></span>
                  <span className="pf-feed-text"><b>Policy update</b> · UHC · 3 patients affected</span>
                  <span className="pf-feed-when">2h</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ReadinessSparkline() {
  const data = [76, 79, 78, 82, 85, 84, 87, 89, 88, 91, 90, 93];
  const max = 100, min = 60;
  const w = 360, h = 52, pad = 5;
  const pts = data.map((v, i) => {
    const x = pad + (i * (w - pad * 2)) / (data.length - 1);
    const y = pad + ((max - v) / (max - min)) * (h - pad * 2);
    return [x, y];
  });
  const pathD = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
  const areaD = pathD + ` L ${pts[pts.length - 1][0].toFixed(1)} ${h - pad} L ${pts[0][0].toFixed(1)} ${h - pad} Z`;
  const thresholdY = pad + ((max - 86) / (max - min)) * (h - pad * 2);

  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: h, display: 'block' }} preserveAspectRatio="none">
      <defs>
        <linearGradient id="readGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.20" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      {[0.25, 0.5, 0.75].map((g, i) => (
        <line key={i} x1={pad} x2={w - pad} y1={pad + g * (h - pad * 2)} y2={pad + g * (h - pad * 2)}
              stroke="var(--line-2)" strokeWidth="1" />
      ))}
      <line x1={pad} x2={w - pad} y1={thresholdY} y2={thresholdY} stroke="var(--ink-3)" strokeWidth="1" strokeDasharray="3 3" opacity="0.6" />
      <path d={areaD} fill="url(#readGrad)" />
      <path d={pathD} fill="none" stroke="var(--accent)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      {pts.map((p, i) => i === pts.length - 1 && (
        <g key={i}>
          <circle cx={p[0]} cy={p[1]} r="4" fill="#fff" stroke="var(--accent)" strokeWidth="1.6" />
          <circle cx={p[0]} cy={p[1]} r="2" fill="var(--accent)" />
        </g>
      ))}
    </svg>
  );
}

function PlatformTile({ p, highlight, compact, onOpen, full }) {
  const isAvail = p.status === 'available';
  return (
    <div style={{
      padding: full ? 22 : compact ? 14 : 18,
      border: '1px solid ' + (highlight ? 'var(--accent-tint-2)' : 'var(--line)'),
      borderRadius: 10,
      background: highlight ? 'var(--accent-tint)' : '#fff',
      display: 'flex', flexDirection: 'column', gap: compact ? 6 : 10,
      minHeight: compact ? 84 : 0
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: compact ? 22 : 28, height: compact ? 22 : 28, borderRadius: compact ? 6 : 8,
            background: isAvail ? 'var(--accent)' : 'var(--paper-2)',
            color: isAvail ? '#fff' : 'var(--ink-3)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: compact ? 11 : 13, fontWeight: 600,
            border: isAvail ? 0 : '1px solid var(--line)'
          }}>{p.icon}</div>
          <div style={{ fontSize: compact ? 13 : 15, fontWeight: 500, letterSpacing: '-0.01em' }}>
            {p.name}
          </div>
        </div>
        <span className={'pill ' + (isAvail ? '' : 'pill-neutral')} style={{ height: 20, fontSize: 12 }}>
          <span className="pill-dot"></span> {isAvail ? 'available' : 'soon'}
        </span>
      </div>
      {!compact &&
      <p style={{ fontSize: 13, color: 'var(--ink-3)', margin: 0, lineHeight: 1.5 }}>{p.desc}</p>
      }
      {compact &&
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--ink-3)', marginTop: 'auto' }}>
          <span>{p.audience}</span>
          <span className="mono" style={{ letterSpacing: '.04em' }}>{p.price}</span>
        </div>
      }
      {full &&
      <>
          <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
            <span className="pill pill-neutral" style={{ height: 22, fontSize: 12 }}>{p.audience}</span>
            <span className="pill pill-neutral" style={{ height: 22, fontSize: 12 }}>{p.price}</span>
          </div>
        </>
      }
    </div>);

}

Object.assign(window, { InsurifyMock, InsurifyPracticeMock, CodeQuickRefMock, CapabilityTiles, CritIcon, CriteriaList, PlatformMock, PlatformTile, PLATFORM_PRODUCTS });