// cs/coming-soon-b.jsx — final deployable page (Option B · product preview)
// Responsive full-viewport coming-soon page. Self-contained: includes its own
// PreviewCard so it doesn't depend on the exploration canvas.

function ComingSoonB() {
  const padX = 'clamp(20px, 5vw, 56px)';
  return <div style={{
    position: 'relative', zoom: 0.86, minHeight: 'calc(100vh / 0.86)', display: 'flex', flexDirection: 'column',
    background: 'var(--paper)', fontFamily: 'var(--font-sans)', color: 'var(--ink)', overflow: 'hidden',
  }}>
    {/* faint wash */}
    <div aria-hidden style={{ position: 'absolute', top: -160, right: -180, width: 720, height: 720, background: 'radial-gradient(closest-side, rgba(31,166,214,0.10), transparent 70%)', pointerEvents: 'none', zIndex: 0 }} />

    {/* header */}
    <header style={{ position: 'relative', zIndex: 2, padding: `clamp(24px,4vw,38px) ${padX}` }}>
      <div style={{ maxWidth: 1240, marginLeft: 'auto', marginRight: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <Brand height={56} />
        <LaunchEyebrow />
      </div>
    </header>

    {/* body */}
    <main style={{ position: 'relative', zIndex: 1, flex: 1, display: 'flex', alignItems: 'center', padding: `clamp(16px,3vw,28px) ${padX} clamp(40px,5vw,56px)` }}>
      <div className="csb-grid" style={{ width: '100%', maxWidth: 1240, marginLeft: 'auto', marginRight: 'auto' }}>
        <div>
          <h1 className="h-h1" style={{ margin: 0, marginBottom: 20 }}>
            Something <span className="serif-em" style={{ color: 'var(--accent)' }}>intelligent</span> is coming to revenue operations.
          </h1>
          <p className="body-lg" style={{ margin: 0, marginBottom: 30, maxWidth: 520 }}>
            MedHelix is an AI-native, HIPAA-compliant revenue cycle intelligence platform built for physician
            groups and multi-site healthcare organizations. It automates coding, denial prevention, appeals,
            and AR intelligence across fragmented multi-EHR environments — helping recover revenue leakage,
            accelerate cash flow, and maximize collections.
          </p>
          <div style={{ marginBottom: 26 }}><SignupForm cta="Keep me posted" /></div>
          <TrustChips />
          <div style={{ marginTop: 30, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
            <ContactRow />
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <PreviewCardB />
        </div>
      </div>
    </main>

    {/* slim footer */}
    <footer style={{ position: 'relative', zIndex: 2, padding: `20px ${padX}`, borderTop: '1px solid var(--line)', background: 'rgba(255,255,255,0.5)' }}>
      <div style={{ maxWidth: 1240, marginLeft: 'auto', marginRight: 'auto' }}>
        <span className="body-xs" style={{ color: 'var(--muted)' }}>© 2026 MedHelix, Inc. · HIPAA-compliant · SOC 2 Type II Controls</span>
      </div>
    </footer>
  </div>;
}

// Static teaser of the MedHelix dashboard — same visual language as the live app.
function PreviewCardB() {
  const bars = [0.54, 0.68, 0.62, 0.79, 0.71, 0.9];
  const feed = [
    ['sky', 'Payment posted', 'BCBS · $1,240', 'var(--sage)'],
    ['teal', 'Appeal won', '+$880 recovered', 'var(--sage)'],
    ['violet', 'Eligibility verified', 'Aetna · active', 'var(--accent)'],
  ];
  return <div style={{ position: 'relative' }}>
    <div className="card" style={{ background: 'var(--surface)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px', borderBottom: '1px solid var(--line)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--accent-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--accent-soft)' }}>
            <Mark size={18} />
          </div>
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>MedHelix Dashboard</div>
            <div className="body-xs" style={{ color: 'var(--muted)' }}>Northshore Medical · all sites</div>
          </div>
        </div>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--sage)' }} />
          <span className="body-xs" style={{ color: 'var(--muted)' }}>Live preview</span>
        </span>
      </div>
      {/* hero metric + chart */}
      <div style={{ padding: '20px 20px 16px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 16, alignItems: 'center', borderBottom: '1px solid var(--line)', background: 'var(--paper-soft)' }}>
        <div>
          <div className="body-xs mono" style={{ color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Collected this month</div>
          <div className="mono" style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.025em', color: 'var(--ink)', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>$1,186,400</div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 8, fontSize: 12, fontWeight: 600, color: 'var(--sage)', background: 'var(--sage-tint)', padding: '3px 9px', borderRadius: 999 }}>
            <svg width="11" height="11" viewBox="0 0 11 11" fill="none"><path d="M2.5 8 L 8 2.5 M 4 2.5 H 8 V 6.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" /></svg>
            +12.4% vs last month
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 64 }}>
          {bars.map((h, i) => <div key={i} style={{ flex: 1, height: '100%', display: 'flex', alignItems: 'flex-end' }}>
            <div style={{ width: '100%', height: `${h * 100}%`, borderRadius: 4, background: i === bars.length - 1 ? 'var(--accent)' : 'var(--accent-soft)' }} />
          </div>)}
        </div>
      </div>
      {/* KPI row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <KpiB n="98.7%" l="Clean claim rate" />
        <KpiB n="4.2%" l="Denial rate" />
        <KpiB n="27 days" l="In A/R" last />
      </div>
      {/* feed */}
      <div style={{ padding: '14px 16px 16px', borderTop: '1px solid var(--line)' }}>
        <div className="body-xs mono" style={{ color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>Live activity</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
          {feed.map((r, i) => <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '8px 10px', background: 'var(--paper-soft)', border: '1px solid var(--line)', borderRadius: 9 }}>
            <div style={{ width: 28, height: 28, borderRadius: 7, background: `var(--c-${r[0]}-bg)`, flexShrink: 0 }} />
            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)', flex: 1 }}>{r[1]}</span>
            <span className="mono body-xs" style={{ color: r[3], fontWeight: 600 }}>{r[2]}</span>
          </div>)}
        </div>
      </div>
    </div>
    {/* floating coming-soon badge */}
    <div style={{
      position: 'absolute', bottom: -18, left: 8,
      display: 'inline-flex', alignItems: 'center', gap: 10, padding: '9px 16px',
      background: 'var(--ink)', color: 'var(--paper)', borderRadius: 999, boxShadow: 'var(--shadow-md)',
    }}>
      <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--accent)', animation: 'pulse-dot 1.6s infinite' }} />
      <span className="mono body-xs" style={{ color: 'rgba(250,250,247,0.78)' }}>A first look — launching soon</span>
    </div>
  </div>;
}

function KpiB({ n, l, last }) {
  return <div style={{ padding: '14px 16px', borderRight: last ? 'none' : '1px solid var(--line)' }}>
    <span className="mono" style={{ fontSize: 18, fontWeight: 700, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{n}</span>
    <div className="body-xs" style={{ color: 'var(--muted)', marginTop: 3 }}>{l}</div>
  </div>;
}

Object.assign(window, { ComingSoonB });