// Hero.jsx — MSO hero
function MsoHero({ tone, hexMotif }) {
  const isDark = tone === "dark";
  const motifClass =
    hexMotif === "strong" ? "hero__hex--strong" :
    hexMotif === "off" ? "" : "hero__hex--subtle";
  return (
    <section id="top" className={`hero ${isDark ? "hero--dark" : "hero--light"}`}>
      <div className={`hero__hex ${motifClass}`}>
        <HexOutlineCluster size={720} color={isDark ? "#5EEAD4" : "#134E4A"} />
      </div>
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="hero__inner">
          <div>
            <a className="parent-pill" href="https://altapath.health" target="_blank" rel="noopener">
              <span className="parent-pill__dot" />
              A subsidiary of AltaPath Inc
              <span style={{ opacity: 0.6 }}>→</span>
            </a>
            <h1 className="hero__title" style={{ marginTop: 28 }}>
              The operational <em className="serif">backbone</em> for anatomic pathology laboratories.
            </h1>
            <div className="hero__cta">
              <a href="#contact" className="btn btn--primary">
                Talk to our operations team
                <span className="arrow">→</span>
              </a>
              <a href="#services" className="btn btn--ghost">
                See services
              </a>
            </div>
          </div>
          <div className="hero__meta">
            <p className="lede">
              AltaPath Management Services is the management services
              organization (MSO) inside the AltaPath platform &mdash; running
              billing, contracting, compliance, IT, and back-office for
              independent laboratories so clinicians stay at the bench.
            </p>
            <div className="mono" style={{ color: isDark ? "rgba(248,250,252,0.55)" : "var(--ink-55)" }}>
              ALTAPATH MANAGEMENT SERVICES LLC  ·  EST. 2026
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MsoFactsStrip() {
  const items = [
    { label: "ENTITY", value: "AltaPath Management Services LLC" },
    { label: "ROLE", value: "MSO to AltaPath laboratories" },
    { label: "DISCIPLINES", value: "RCM · Compliance · IT · HR" },
    { label: "FOOTPRINT", value: "Multi-state" },
  ];
  return (
    <section className="facts" aria-label="At a glance">
      <div className="facts__row">
        {items.map((it) => (
          <div className="facts__cell" key={it.label}>
            <div className="facts__label">{it.label}</div>
            <div className="facts__value">{it.value}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { MsoHero, MsoFactsStrip });