/* eslint-disable */

const SERVICES = [
  {
    num: "01",
    icon: <Ico.doc />,
    title: "End-to-end claims & submission",
    body: "Charge entry, claim scrubbing and electronic submission—usually within 24 hours of encounter. We catch coding errors before payers do.",
    points: ["Daily charge entry", "AI-assisted scrubbing", "ERA / EFT enrollment"]
  },
  {
    num: "02",
    icon: <Ico.refresh />,
    title: "Denial management & appeals",
    body: "Every denial gets a human owner and an SLA. We work the root cause so the same denial doesn't show up again next month.",
    points: ["48-hour denial triage", "Appeal letter authoring", "Root-cause reporting"]
  },
  {
    num: "03",
    icon: <Ico.coins />,
    title: "A/R follow-up & recovery",
    body: "Aged A/R doesn't fix itself. Our team works claims past 30 days line-by-line until they're resolved or formally written off.",
    points: ["Aged A/R cleanup", "Patient statement cycles", "Payer escalation"]
  },
  {
    num: "04",
    icon: <Ico.shield />,
    title: "Credentialing & enrollment",
    body: "New provider, new TIN, new payer? We handle CAQH, PECOS, and commercial enrollment so revenue starts the day clinic does.",
    points: ["CAQH maintenance", "Medicare / Medicaid", "Commercial payer panels"]
  },
  {
    num: "05",
    icon: <Ico.pulse />,
    title: "Coding & documentation review",
    body: "Certified CPC/CCS coders review documentation for accuracy and risk—maximizing capture without inviting an audit.",
    points: ["ICD-10 / CPT / HCPCS", "E&M level guidance", "Specialty modifiers"]
  },
  {
    num: "06",
    icon: <Ico.chart />,
    title: "Reporting & revenue analytics",
    body: "A monthly board-grade scorecard plus a live dashboard. You always know what's coming in, what's stuck, and where to push.",
    points: ["Live KPI dashboard", "Monthly scorecard", "Payer mix analysis"]
  }
];

function Services() {
  return (
    <section className="services" id="services">
      <div className="container">
        <header className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span> What we do</div>
            <h2 className="h-section" style={{marginTop:18}}>
              One partner for the <em>full</em><br/>revenue cycle.
            </h2>
          </div>
          <p className="lede">
            We replace the patchwork of in-house staff, consultants and clearinghouses with a single team accountable for every dollar—from encounter to deposit.
          </p>
        </header>

        <div className="svc-grid">
          {SERVICES.map((s) => (
            <article className="svc-card" key={s.num}>
              <div className="num">{s.num} / 06</div>
              <div className="ico-wrap">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <ul>{s.points.map(p => <li key={p}>{p}</li>)}</ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Specialties marquee ---------------- */

const SPECIALTIES = [
  { name: "Family Medicine", featured: false },
  { name: "Internal Medicine", featured: false },
  { name: "Cardiology", featured: true },
  { name: "Orthopedics", featured: false },
  { name: "Pediatrics", featured: false },
  { name: "Dermatology", featured: false },
  { name: "OB-GYN", featured: true },
  { name: "Behavioral Health", featured: false },
  { name: "Physical Therapy", featured: false },
  { name: "Pain Management", featured: false },
  { name: "Gastroenterology", featured: false },
  { name: "Urology", featured: true },
  { name: "Endocrinology", featured: false },
  { name: "Radiology", featured: false },
  { name: "Anesthesiology", featured: false },
  { name: "Ophthalmology", featured: false },
  { name: "Podiatry", featured: false },
  { name: "Chiropractic", featured: true },
  { name: "Urgent Care", featured: false },
  { name: "ENT", featured: false },
  { name: "Nephrology", featured: false },
  { name: "Oncology", featured: false }
];

function Specialties() {
  const loop = [...SPECIALTIES, ...SPECIALTIES];
  return (
    <section className="specialties" id="specialties">
      <div className="container">
        <header className="section-head">
          <div>
            <div className="eyebrow"><span className="dot"></span> Specialties we serve</div>
            <h2 className="h-section" style={{marginTop:18}}>
              Coding nuance for <em>every</em><br/>specialty we touch.
            </h2>
          </div>
          <p className="lede" style={{color:'rgba(251,248,241,.7)'}}>
            Every specialty has its own modifiers, bundling rules and payer quirks. Our coders are credentialed by specialty—not generalists guessing at fee schedules.
          </p>
        </header>
      </div>

      <div className="spec-marquee">
        <div className="spec-marquee-track">
          {loop.map((s, i) => (
            <span className={"spec-chip " + (s.featured ? "featured" : "")} key={i}>
              <span className="ico"><Ico.spec /></span>
              {s.name}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services, Specialties });