/* eslint-disable */

const STEPS = [
  {
    n: "01",
    title: "Discovery & audit",
    body: "We pull 90 days of claims data, flag denial patterns and benchmark your A/R against your specialty. Free, no commitment."
  },
  {
    n: "02",
    title: "Onboarding in 14 days",
    body: "Clearinghouse, PMS access, payer enrollment, fee schedules—we handle the migration in parallel so cashflow never dips."
  },
  {
    n: "03",
    title: "Daily operations",
    body: "Charges entered, claims submitted, denials worked, patients billed. You see every action in a shared dashboard."
  },
  {
    n: "04",
    title: "Monthly partnership",
    body: "Scorecard, payer mix analysis, and a working session with your account lead. We tune what isn't working—every cycle."
  }
];

function Process() {
  return (
    <section className="process" id="process">
      <div className="container">
        <header className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span> How we work</div>
            <h2 className="h-section" style={{marginTop:18}}>
              From <em>audit</em> to optimized<br/>in four steps.
            </h2>
          </div>
          <p className="lede">
            No long contracts, no offshore handoffs you didn't agree to. A dedicated U.S.-based account lead from week one.
          </p>
        </header>

        <div className="steps">
          {STEPS.map(s => (
            <div className="step" key={s.n}>
              <div className="step-num">{s.n}</div>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Results ---------------- */

const METRICS = [
  { num: "98.6", unit: "%", label: "First-pass clean-claim rate across the AlbertMed book of business.", icon: <Ico.check />, featured: true },
  { num: "+27", unit: "%", label: "Average lift in net collections in the first 90 days of partnership.", icon: <Ico.chart /> },
  { num: "22", unit: "days", label: "Average days in A/R. Industry average sits between 38 and 45.", icon: <Ico.refresh /> },
  { num: "<4", unit: "%", label: "Net denial rate. We work every denial to root cause, not just resubmit.", icon: <Ico.shield /> }
];

function Results() {
  return (
    <section className="results" id="results">
      <div className="container">
        <div className="results-grid">
          <div>
            <div className="eyebrow"><span className="dot"></span> The numbers that matter</div>
            <h2 className="h-section" style={{marginTop:18, marginBottom: 20}}>
              Outcomes our clients<br/>can <em>actually</em> measure.
            </h2>
            <p className="lede" style={{marginBottom: 28}}>
              We publish our performance, by the quarter, against the industry baseline. Numbers are pooled across our active book of business—you'll see your own version in your scorecard.
            </p>
            <a href="#contact" className="btn btn-primary">
              See your own audit <span className="arrow"><Ico.arrow /></span>
            </a>
          </div>

          <div className="metric-stack">
            {METRICS.map((m, i) => (
              <div className={"metric-row " + (m.featured ? "featured" : "")} key={i}>
                <div className="metric-num">{m.num}<span className="unit">{m.unit}</span></div>
                <div className="metric-label">{m.label}</div>
                <div className="metric-bar">{m.icon}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process, Results });