/* global React, Icon, Logo, Photo, Eyebrow */
// Varick Health — Marketing kit: Home page

function HeroRosterPreview() {
  const rows = [
    { n: "Dana Okafor, LCSW", s: "ok", l: "Enrolled" },
    { n: "M. Alvarez, PMHNP", s: "warn", l: "Expiring 14d" },
    { n: "J. Reyes, LMHC", s: "progress", l: "Submitted" },
    { n: "S. Patel, Psy.D", s: "ok", l: "Enrolled" },
  ];
  return (
    <div className="mk-hero-art">
      <div className="mk-hero-block" />
      <div className="mk-roster vh-card">
        <div className="mk-roster-head">
          <span className="mk-roster-title">Active roster</span>
          <span className="mk-roster-meta">24 providers · 6 payers</span>
        </div>
        {rows.map((r) => (
          <div className="mk-roster-row" key={r.n}>
            <span className="mk-roster-name">{r.n}</span>
            <span className={"vh-status vh-status--" + r.s}>{r.l}</span>
          </div>
        ))}
        <div className="mk-roster-foot">
          <span><b>98%</b> first-pass</span>
          <span><b>21d</b> avg time-to-bill</span>
        </div>
      </div>
    </div>
  );
}

function Hero({ go }) {
  return (
    <section className="mk-hero">
      <div className="mk-hero-in">
        <div className="mk-hero-copy">
          <Eyebrow>Behavioral Health Credentialing &amp; Enrollment</Eyebrow>
          <h1 className="mk-hero-h1">Your clinicians should be billing, not waiting.</h1>
          <p className="mk-hero-sub">Varick Health manages the full credentialing and payer-enrollment lifecycle for behavioral-health groups — so a new hire goes from start date to first billable session in weeks, not quarters.</p>
          <div className="mk-hero-actions">
            <a className="vh-btn vh-btn--primary">Book a Discovery Call</a>
            <button className="vh-btn vh-btn--secondary" onClick={() => go("how")}>See How It Works</button>
          </div>
          <div className="mk-hero-trust"><Icon name="shield-check" size={16} color="var(--vh-ok)" />Continuous 30-day monitoring keeps every provider compliant between cycles.</div>
        </div>
        <HeroRosterPreview />
      </div>
    </section>
  );
}

const TRUST = ["NCQA", "eMedNY", "CAQH", "PECOS", "OMH Article 31/32", "HARP", "Empire BCBS", "Optum NY IPA", "Healthfirst", "DEA / Collaborative Practice"];
function TrustStrip() {
  return (
    <section className="mk-trust">
      <div className="mk-trust-in">
        <span className="mk-trust-label">Fluent in the systems New York behavioral health runs on</span>
        <div className="mk-trust-chips">
          {TRUST.map((t) => <span key={t} className="mk-chip">{t}</span>)}
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  { ic: "clipboard-list", t: "Intake & audit", d: "We map your roster, payers, and gaps — then prioritize the providers blocking revenue first." },
  { ic: "badge-check", t: "Credential & verify", d: "CAQH, primary-source verification, and license checks, managed end to end with clean documentation." },
  { ic: "file-check-2", t: "Payer enrollment", d: "Commercial and Medicaid MCO enrollment, PAR submissions, and prescriber-specific paperwork." },
  { ic: "activity", t: "Continuous monitoring", d: "30-day monitoring per the NCQA 2025 rule — expirations and re-creds handled before they bite." },
];
function Lifecycle({ go }) {
  return (
    <section className="mk-section">
      <div className="mk-section-in">
        <div className="mk-section-head">
          <Eyebrow>The Varick lifecycle</Eyebrow>
          <h2 className="mk-h2">One team for the whole credentialing lifecycle.</h2>
        </div>
        <div className="mk-steps">
          {STEPS.map((s, i) => (
            <div className="mk-step" key={s.t}>
              <div className="mk-step-ic"><Icon name={s.ic} size={24} color="var(--vh-indigo)" /></div>
              <span className="mk-step-n">0{i + 1}</span>
              <h3 className="mk-step-t">{s.t}</h3>
              <p className="mk-step-d">{s.d}</p>
            </div>
          ))}
        </div>
        <button className="vh-btn vh-btn--ghost" onClick={() => go("how")}>See the full process →</button>
      </div>
    </section>
  );
}

const ICPS = [
  { ic: "users-round", t: "Outpatient therapy groups", pain: "Hit a credentialing bottleneck around 20–25 providers? That's our specialty.", meta: "LCSW · LMHC · LMFT · Psychologists" },
  { ic: "stethoscope", t: "Psychiatry & psych-NP", pain: "Psych-NP enrollment delays can cost $15K–$30K per provider, per month. We close the gap.", meta: "DEA · Collaborative practice · HARP" },
  { ic: "building-2", t: "OMH Article 31/32 clinics", pain: "Article 31/32, eMedNY, and the NCQA 2025 monitoring rule — handled.", meta: "Medicaid MCO · PAR · Continuous monitoring" },
];
function Solutions({ go }) {
  return (
    <section className="mk-section mk-section--wash">
      <div className="mk-section-in">
        <div className="mk-section-head">
          <Eyebrow>Who we serve</Eyebrow>
          <h2 className="mk-h2">Built for the way New York behavioral health actually works.</h2>
        </div>
        <div className="mk-icps">
          {ICPS.map((c) => (
            <button className="mk-icp vh-card" key={c.t} onClick={() => go("solutions")}>
              <Photo label="Clinical / office photo" ratio="16 / 10" radius={0} />
              <div className="mk-icp-body">
                <div className="mk-icp-ic"><Icon name={c.ic} size={22} color="var(--vh-indigo)" /></div>
                <h3 className="mk-icp-t">{c.t}</h3>
                <p className="mk-icp-pain">{c.pain}</p>
                <div className="mk-icp-meta">{c.meta}</div>
                <span className="mk-icp-link">Learn more <Icon name="arrow-right" size={15} /></span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

const STATS = [
  { n: "Up to 50%", l: "faster time-to-bill" },
  { n: "98%", l: "first-pass approval rate" },
  { n: "30-day", l: "continuous monitoring" },
  { n: "200+ hrs", l: "of busywork removed monthly" },
];
function StatBand() {
  return (
    <section className="mk-stats">
      <div className="mk-stats-in">
        {STATS.map((s) => (
          <div className="mk-stat" key={s.l}>
            <div className="mk-stat-n">{s.n}</div>
            <div className="mk-stat-l">{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="mk-section">
      <div className="mk-quote-in">
        <Icon name="quote" size={34} color="var(--vh-indigo-300)" />
        <blockquote className="mk-quote">We tried to hire for this and couldn't. Varick took the entire enrollment backlog off our plate — our last four hires were billing inside a month.</blockquote>
        <div className="mk-quote-by">
          <Photo label="" ratio="1 / 1" radius={999} style={{ width: 48, height: 48, flex: "none" }} />
          <div>
            <div className="mk-quote-name">Director of Operations</div>
            <div className="mk-quote-role">Mid-sized outpatient therapy group, NYC · <em>illustrative</em></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="mk-cta">
      <div className="mk-cta-in">
        <div className="mk-cta-block" />
        <h2 className="mk-cta-h">Let's find the revenue stuck in your credentialing pipeline.</h2>
        <p className="mk-cta-sub">A 30-minute discovery call: we'll map your roster, payers, and the gap between hire date and first billable session.</p>
        <div className="mk-cta-actions">
          <a className="vh-btn vh-btn--on-dark">Book a Discovery Call</a>
          <a className="vh-btn vh-btn--primary">Request a Roster Review</a>
        </div>
      </div>
    </section>
  );
}

function HomePage({ go }) {
  return (
    <main>
      <Hero go={go} />
      <TrustStrip />
      <Lifecycle go={go} />
      <Solutions go={go} />
      <StatBand />
      <Quote />
      <CTA />
    </main>
  );
}

Object.assign(window, { HomePage });