// page-home.jsx — Homepage React app (extracted from index.html, 1:1)
const { useState, useEffect, useRef } = React;
const __MCR = (window.MCR_DATA && window.MCR_DATA.home) || {};
const __BASE = (window.MCR_DATA && window.MCR_DATA.siteUrl) || '';

// ——— Trust Strip ———
const TrustStrip = () => (
  <div style={{ background: '#141939', borderBottom: '1px solid rgba(255,255,255,0.06)', padding: '16px 0' }}>
    <div className="container" style={{ display: 'flex', justifyContent: 'center', gap: 56, flexWrap: 'wrap', alignItems: 'center' }}>
      {[['28', 'AR Days'], ['98%', 'Clean-Claim Rate'], ['4–7%', 'Revenue Recovery'], ['2.49%', 'Starting Rate']].map(([val, lbl]) => (
        <div key={lbl} style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, color: '#D49B28', letterSpacing: '-0.02em' }}>{val}</span>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 11, letterSpacing: '1.5px', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)' }}>{lbl}</span>
        </div>
      ))}
    </div>
  </div>
);

// ——— Hero ———
const Hero = () => (
  <section className="section section--dark" style={{ paddingTop: 160, paddingBottom: 120 }} data-screen-label="01 Hero">
    <div className="container" style={{ position: 'relative', zIndex: 1 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <span className="overline overline--dark-bg fade-up fade-up-1">{__MCR.eyebrow || 'Revenue Infrastructure Partner'}</span>
          <AccentRule dark />
          <h1 className="h-hero fade-up fade-up-2" style={{ color: '#fff', marginTop: 6, whiteSpace: 'pre-line' }}>
            {(__MCR.headline || "Revenue cycle\nmanagement,\nengineered.")}
          </h1>
          <p className="lead fade-up fade-up-3" style={{ color: 'rgba(255,255,255,0.6)', marginTop: 28, maxWidth: 480 }}>
            {(__MCR.lead || 'We engineer the revenue infrastructure behind modern healthcare practices — from eligibility through zero-balance reconciliation. Starting at 2.49% of collections.').split(/(2\.49%)/g).map((seg, i) =>
              seg === '2.49%'
                ? <span key={i} style={{ color: '#D49B28', fontWeight: 500 }}>{seg}</span>
                : <span key={i}>{seg}</span>
            )}
          </p>
          <div className="fade-up fade-up-4" style={{ display: 'flex', gap: 16, marginTop: 40, flexWrap: 'wrap' }}>
            <a href={__MCR.ctaPrimaryUrl || (__BASE + 'meeting/')} className="btn btn--primary btn--large">{__MCR.ctaPrimaryLabel || 'Request a Meeting'}</a>
            <a href={__MCR.ctaSecondaryUrl || (__BASE + 'services/')} className="btn btn--ghost btn--large">{__MCR.ctaSecondaryLabel || 'View Services'}</a>
          </div>
          <div className="fade-up fade-up-5" style={{ fontSize: 12, color: 'rgba(255,255,255,0.38)', marginTop: 22, letterSpacing: '0.3px' }}>
            {__MCR.qualifier || 'For practices collecting $3M+ annually.'}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <DashboardMockup />
        </div>
      </div>
    </div>
  </section>
);

// ——— Problem ———
const Problem = () => {
  const items = [
    { title: 'AR that compounds', body: 'Aged receivables past 90 days erode cash position faster than new revenue can close the gap.' },
    { title: 'Silent denials', body: 'Without root-cause tracking, the same preventable denials repeat every billing cycle at scale.' },
    { title: 'Coding drift', body: 'Specialty-specific rules shift quarterly — uncoached coders produce silent downcoding losses.' },
  ];
  return (
    <section className="section section--cream" data-screen-label="02 Problem">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <span className="overline">Why Revenue Leaks</span>
          <AccentRule />
          <h2 className="h-section">Three structural failures,<br />one compounding cost.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 56 }}>
          {items.map((it, i) => (
            <div key={it.title} className={`card card--accent-${['navy','green','teal'][i]}`}>
              <h3 className="h-card" style={{ marginBottom: 12 }}>{it.title}</h3>
              <p style={{ margin: 0, fontSize: 15, color: 'var(--n-600)' }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ——— Services Grid ———
const ServicesGrid = () => (
  <section id="services" className="section section--slate" data-screen-label="03 Services">
    <div className="container">
      <div style={{ maxWidth: 720 }}>
        <span className="overline">Capabilities</span>
        <AccentRule />
        <h2 className="h-section">One partner across the full revenue cycle.</h2>
        <p className="lead" style={{ marginTop: 20 }}>Seven integrated service lines — each measurable, each feeding the next.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 56 }}>
        {SERVICES.map((s, i) => (
          <a key={s.slug} href={__BASE + s.slug.replace('.html','/')} style={{ textDecoration: 'none' }}>
            <div className={`card card--accent-${s.color}`} style={{ height: '100%', cursor: 'pointer' }}>
              <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--navy-50)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                <i data-lucide={s.icon} style={{ color: 'var(--navy-300)', width: 22, height: 22 }}></i>
              </div>
              <h3 className="h-card" style={{ marginBottom: 10 }}>{s.title}</h3>
              <p style={{ fontSize: 14, color: 'var(--n-600)', margin: 0 }}>{s.desc}</p>
              <div style={{ marginTop: 20, fontSize: 13, fontWeight: 600, color: 'var(--teal-600)' }}>Learn more →</div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

// ——— Framework ———
const Framework = () => {
  const phases = [
    { n: '01', title: 'Eligibility', body: 'Verification and pre-auth at patient intake.' },
    { n: '02', title: 'Clean Submission', body: 'Scrubbed claims; 98% first-pass acceptance.' },
    { n: '03', title: 'Denial Recovery', body: 'Root-cause analysis and compounding workflows.' },
    { n: '04', title: 'Reconciliation', body: 'Zero-balance close, variance reporting.' },
  ];
  return (
    <section className="section section--dark" data-screen-label="04 Framework">
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 720 }}>
          <span className="overline overline--dark-bg">The Framework</span>
          <AccentRule dark />
          <h2 className="h-section" style={{ color: '#fff', marginTop: 6 }}>The Revenue Control Framework</h2>
          <p style={{ color: 'rgba(255,255,255,0.55)', fontSize: 17, fontWeight: 300, lineHeight: 1.65, marginTop: 20 }}>
            Four phases, engineered as one system. Each phase has a measurable outcome and a control loop.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginTop: 72, position: 'relative' }}>
          {phases.map((p, i) => (
            <div key={p.n} style={{ position: 'relative' }}>
              <div className="card card--glass" style={{ padding: 28, minHeight: 180 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 32, color: '#D49B28', lineHeight: 1 }}>{p.n}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 10, letterSpacing: '1.8px', textTransform: 'uppercase', color: '#5ac6f1', marginTop: 14 }}>{p.title}</div>
                <div style={{ fontSize: 13, fontWeight: 300, color: 'rgba(255,255,255,0.6)', lineHeight: 1.65, marginTop: 10 }}>{p.body}</div>
              </div>
              {i < phases.length - 1 && (
                <svg viewBox="0 0 24 12" style={{ position: 'absolute', right: -14, top: 84, width: 24, height: 12, overflow: 'visible' }}>
                  <line x1="0" y1="6" x2="20" y2="6" stroke="rgba(255,255,255,0.15)" strokeWidth="1" />
                  <path d="M16,2 L22,6 L16,10" fill="none" stroke="#4BB5B5" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ——— Metrics ———
const MetricsSection = () => {
  const rows = [
    { before: '52d', after: '28d', label: 'AR Days' },
    { before: '82%', after: '98%', label: 'Clean Claim Rate' },
    { before: '—', after: '+4–7%', label: 'Net Revenue Recovery' },
  ];
  return (
    <section className="section section--mist" data-screen-label="05 Metrics">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <span className="overline">Transformation Metrics</span>
          <AccentRule />
          <h2 className="h-section">Before and after, measured.</h2>
          <p className="lead" style={{ marginTop: 20 }}>Composite results across the last twelve engagements. Every number is real.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 64 }}>
          {rows.map(r => (
            <div key={r.label} className="card" style={{ padding: 36 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 42, color: 'var(--navy-300)', lineHeight: 1 }}>{r.before}</div>
                <div style={{ fontSize: 26, color: 'var(--navy-200)' }}>→</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 54, color: 'var(--green-600)', lineHeight: 1 }}>{r.after}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 10, letterSpacing: '1.8px', textTransform: 'uppercase', color: 'var(--n-500)', marginTop: 20 }}>{r.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ——— Qualification ———
const Qualification = () => {
  const not = ['Under $1M in annual collections', 'Seeking the cheapest available vendor', 'Not prepared to share last 12 months of AR data'];
  const ideal = ['$3M+ in annual collections', 'Multi-specialty or high-volume single specialty', 'Executive sponsor in the CFO or COO office'];
  return (
    <section className="section section--linen" data-screen-label="06 Qualification">
      <div className="container">
        <div style={{ maxWidth: 720 }}>
          <span className="overline">Qualification</span>
          <AccentRule />
          <h2 className="h-section">We are not for every practice.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1px 1fr', gap: 48, marginTop: 56, alignItems: 'start' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 11, letterSpacing: '1.8px', textTransform: 'uppercase', color: 'var(--n-400)', marginBottom: 24 }}>Not ideal if</div>
            {not.map(t => (
              <div key={t} style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--navy-200)', marginTop: 8, flexShrink: 0 }} />
                <span style={{ fontSize: 15, color: 'var(--n-600)' }}>{t}</span>
              </div>
            ))}
          </div>
          <div style={{ width: 1, background: 'var(--n-200)', height: '100%' }} />
          <div>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 11, letterSpacing: '1.8px', textTransform: 'uppercase', color: 'var(--navy-700)', marginBottom: 24 }}>Ideal if</div>
            {ideal.map(t => (
              <div key={t} style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green-600)', marginTop: 8, flexShrink: 0 }} />
                <span style={{ fontSize: 15, color: 'var(--n-700)' }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ——— CTA ———
const CTA = () => (
  <section className="section" style={{ background: 'linear-gradient(135deg, #1A204F 0%, #252D6A 100%)', position: 'relative', overflow: 'hidden', textAlign: 'center' }} data-screen-label="07 CTA">
    <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 80% 20%, rgba(90,198,241,0.12) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(212,155,40,0.08) 0%, transparent 50%)' }} />
    <div className="container" style={{ position: 'relative', zIndex: 1 }}>
      <h2 className="h-section" style={{ color: '#fff', maxWidth: 780, margin: '0 auto' }}>Begin with a Revenue Assessment.</h2>
      <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 17, fontWeight: 300, maxWidth: 560, margin: '24px auto 40px', lineHeight: 1.7 }}>
        A private, 45-minute working session with our revenue architects. No decks, no pitch — just a structural read on your cycle.
      </p>
      <a href={__BASE + 'meeting/'} className="btn btn--primary btn--large">Request a Meeting — It's Free</a>
      <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 12, marginTop: 16, letterSpacing: '0.3px' }}>{__MCR.qualifier || 'For practices collecting $3M+ annually.'}</div>
    </div>
  </section>
);

// ——— Specialties Preview ———
const SpecialtiesPreview = () => (
  <section className="section" style={{ background: '#fff' }} data-screen-label="08 Specialties">
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <span className="overline">Specialties</span>
          <AccentRule />
          <h2 className="h-section">Deep expertise across 12 clinical specialties.</h2>
          <p className="lead" style={{ marginTop: 20 }}>
            Every specialty operates under different coding rules, payer logic, and denial patterns. We bring certified, specialty-specific expertise to every engagement.
          </p>
          <a href={__BASE + 'specialties/'} className="btn btn--secondary" style={{ marginTop: 32, textDecoration: 'none', display: 'inline-flex' }}>View All Specialties</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {SPECIALTIES.slice(0, 9).map(sp => (
            <a key={sp.slug} href={`${__BASE}specialties/#${sp.slug}`} style={{ textDecoration: 'none' }}>
              <div style={{
                padding: '16px', borderRadius: 12, background: 'var(--navy-50)',
                textAlign: 'center', transition: 'all 0.25s',
                border: '1px solid transparent',
              }}
                onMouseEnter={e => { e.currentTarget.style.background = '#1A204F'; e.currentTarget.querySelector('span').style.color = '#fff'; e.currentTarget.querySelector('small').style.color = 'rgba(255,255,255,0.6)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'var(--navy-50)'; e.currentTarget.querySelector('span').style.color = 'var(--navy-700)'; e.currentTarget.querySelector('small').style.color = 'var(--n-500)'; }}
              >
                <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--navy-700)', display: 'block', lineHeight: 1.3, transition: 'color 0.2s' }}>{sp.name}</span>
                <small style={{ fontSize: 10, color: 'var(--n-500)', letterSpacing: '0.5px', transition: 'color 0.2s' }}>&nbsp;</small>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  </section>
);

function App() {
  useEffect(() => {
    const t = setTimeout(() => window.lucide && window.lucide.createIcons(), 200);
    return () => clearTimeout(t);
  });

  return (
    <div>
      <SiteNav dark={true} current="home" basePath={__BASE} />
      <Hero />
      <TrustStrip />
      <Problem />
      <ServicesGrid />
      <Framework />
      <MetricsSection />
      <Qualification />
      <SpecialtiesPreview />
      <CTA />
      <SiteFooter basePath={__BASE} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
