/* global React, Icon, Photo, Eyebrow, CTA */
// Varick Health — Marketing kit: How It Works & Solutions pages
const { useState } = React;

function PageHero({ eyebrow, title, sub }) {
  return (
    <section className="mk-pagehero">
      <div className="mk-pagehero-in">
        <Eyebrow light>{eyebrow}</Eyebrow>
        <h1 className="mk-pagehero-h1">{title}</h1>
        <p className="mk-pagehero-sub">{sub}</p>
      </div>
    </section>
  );
}

const FLOW = [
  { ic: "clipboard-list", t: "Intake & roster audit", d: "We start by mapping every provider, every payer contract, and every gap. Then we rank by revenue impact, so the clinicians who can't bill yet get worked first.",
    bullets: ["Full roster & payer matrix built", "Revenue-at-risk prioritization", "CAQH & PECOS access established"] },
  { ic: "badge-check", t: "Credentialing & primary-source verification", d: "We own the documentation grind: CAQH attestation, license and DEA verification, board status, work history, and malpractice — assembled clean the first time.",
    bullets: ["CAQH build, attest & maintain", "Primary-source verification", "License · DEA · board · NPI checks"] },
  { ic: "file-check-2", t: "Payer enrollment & PAR submissions", d: "Commercial and Medicaid Managed Care enrollment, group linkage, and prescriber-specific paperwork — submitted, tracked, and escalated until approved.",
    bullets: ["Commercial + Medicaid MCO enrollment", "Group & location linkage, PAR submissions", "Prescriber: DEA, collaborative practice, HARP"] },
  { ic: "activity", t: "Continuous monitoring & re-credentialing", d: "Per the NCQA 2025 30-day rule, we monitor every credential continuously and handle expirations and re-creds before they ever interrupt billing.",
    bullets: ["30-day continuous monitoring", "Expiration & re-cred automation", "Live status in your client portal"] },
];

function HowItWorksPage({ go }) {
  return (
    <main>
      <PageHero eyebrow="How It Works"
        title="One team for the whole credentialing lifecycle."
        sub="Varick runs as an extension of your operations team — a managed service backed by a live portal, so you always know exactly where every provider stands." />
      <section className="mk-section">
        <div className="mk-section-in mk-flow">
          {FLOW.map((s, i) => (
            <div className={"mk-flow-row" + (i % 2 ? " is-rev" : "")} key={s.t}>
              <div className="mk-flow-copy">
                <div className="mk-flow-num"><span className="mk-flow-ic"><Icon name={s.ic} size={22} color="var(--vh-indigo)" /></span>Step 0{i + 1}</div>
                <h2 className="mk-h3">{s.t}</h2>
                <p className="mk-flow-d">{s.d}</p>
                <ul className="mk-flow-list">
                  {s.bullets.map((b) => <li key={b}><Icon name="check" size={16} color="var(--vh-ok)" />{b}</li>)}
                </ul>
              </div>
              <div className="mk-flow-art"><Photo label="Process / clinical photo" ratio="4 / 3" /></div>
            </div>
          ))}
        </div>
      </section>
      <section className="mk-section mk-section--wash">
        <div className="mk-section-in">
          <div className="mk-section-head"><Eyebrow>What you get</Eyebrow><h2 className="mk-h2">A managed service, not a software login you babysit.</h2></div>
          <div className="mk-deliv">
            {[
              { ic: "user-round-cog", t: "A dedicated credentialing team", d: "Named specialists who know your roster — not a ticket queue." },
              { ic: "layout-dashboard", t: "Live client portal", d: "Real-time status for every provider and payer, always current." },
              { ic: "bell-ring", t: "Proactive alerts", d: "Expirations, missing info, and denials surfaced before they cost you." },
              { ic: "line-chart", t: "Outcome reporting", d: "Time-to-bill, first-pass rate, and revenue recovered, reported monthly." },
            ].map((d) => (
              <div className="mk-deliv-card vh-card" key={d.t}>
                <div className="mk-deliv-ic"><Icon name={d.ic} size={22} color="var(--vh-indigo)" /></div>
                <h3 className="mk-deliv-t">{d.t}</h3>
                <p className="mk-deliv-d">{d.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CTA />
    </main>
  );
}

const SOL = [
  { tag: "ICP A", ic: "users-round", t: "Outpatient therapy groups",
    sub: "Multi-disciplinary practices that grew through hiring and hit a credentialing wall around 20–25 providers.",
    pains: ["New clinicians can't bill for months after start", "Claim denials from NPI / CAQH mismatches", "No one owns credentialing as it scales"],
    does: ["Clear the enrollment backlog blocking revenue", "Standardize CAQH & re-cred across the group", "Cut time-to-bill for every new hire"],
    payers: "LCSW · LMHC · LMFT · Psychologists" },
  { tag: "ICP B", ic: "stethoscope", t: "Psychiatry & psych-NP practices",
    sub: "Medication-management practices where every blocked prescriber is $15K–$30K of revenue a month sitting idle.",
    pains: ["Long prescriber enrollment timelines", "DEA & collaborative-practice paperwork burden", "HARP / Medicaid Managed Care complexity"],
    does: ["Prescriber-specific enrollment, end to end", "DEA, collaborative practice & schedules handled", "Empire BCBS, Optum NY IPA, Healthfirst prioritized"],
    payers: "MD · DO · PMHNP · DEA · Collaborative practice" },
  { tag: "ICP D", ic: "building-2", t: "OMH Article 31 / 32 clinics",
    sub: "Nonprofit and community clinics with heavy Medicaid managed-care payer mix and understaffed internal teams.",
    pains: ["Gap between Article 31/32 license & MCO contracts", "eMedNY and Medicaid MCO landscape", "NCQA 2025 continuous-monitoring burden"],
    does: ["Bridge license-to-contract for new programs & sites", "Manage PAR submissions for new locations", "Run 30-day monitoring so the team doesn't have to"],
    payers: "Medicaid MCO · eMedNY · PAR · Continuous monitoring" },
];

function SolutionsPage({ go }) {
  const [active, setActive] = useState(0);
  const s = SOL[active];
  return (
    <main>
      <PageHero eyebrow="Solutions"
        title="Specialized by the way you're licensed and paid."
        sub="Credentialing isn't one problem — it's a different problem for a therapy group, a psychiatry practice, and an Article 31 clinic. We're built for each." />
      <section className="mk-section">
        <div className="mk-section-in">
          <div className="mk-soltabs">
            {SOL.map((x, i) => (
              <button key={x.t} className={"mk-soltab" + (i === active ? " is-active" : "")} onClick={() => setActive(i)}>
                <Icon name={x.ic} size={18} />{x.t}
              </button>
            ))}
          </div>
          <div className="mk-sol vh-card">
            <div className="mk-sol-head">
              <div>
                <span className="mk-sol-tag">{s.tag}</span>
                <h2 className="mk-h3">{s.t}</h2>
                <p className="mk-sol-sub">{s.sub}</p>
                <div className="mk-sol-payers"><Icon name="tag" size={15} color="var(--vh-text-faint)" />{s.payers}</div>
              </div>
              <Photo label="Clinical / office photo" ratio="4 / 3" style={{ width: 280, flex: "none" }} />
            </div>
            <div className="mk-sol-grid">
              <div className="mk-sol-col">
                <h4 className="mk-sol-colh"><Icon name="circle-alert" size={16} color="var(--vh-warn)" />The pain we hear</h4>
                {s.pains.map((p) => <div className="mk-sol-item" key={p}>{p}</div>)}
              </div>
              <div className="mk-sol-col">
                <h4 className="mk-sol-colh"><Icon name="circle-check" size={16} color="var(--vh-ok)" />What Varick does</h4>
                {s.does.map((p) => <div className="mk-sol-item" key={p}>{p}</div>)}
              </div>
            </div>
          </div>
        </div>
      </section>
      <CTA />
    </main>
  );
}

Object.assign(window, { HowItWorksPage, SolutionsPage });