function Comparison() {
  const rows = [
    { cap: "Answers 100% of inbound calls 24/7", k: "Y", a: "Y", h: "Y", hp: "P", i: "Y" },
    { cap: "Specialty-specific structured intake", k: "Y", a: "Y", h: "Y", hp: "B", i: "B" },
    { cap: "Physician pre-screening loop", k: "Y", a: "N", h: "N", hp: "N", i: "N" },
    { cap: "Direct PMS write-back", k: "Y", a: "Y", h: "P", hp: "P", i: "P" },
    { cap: "No-show recovery flow", k: "Y", a: "P", h: "N", hp: "Y", i: "N" },
    { cap: "Operator-grade ROI dashboard", k: "Y", a: "P", h: "Y", hp: "P", i: "P" },
    { cap: "HIPAA · BAA · audit trail", k: "Y", a: "Y", h: "Y", hp: "Y", i: "Y" },
  ];
  const Cell = ({ v }) => {
    if (v === "Y") return <span className="cmp__y">●</span>;
    if (v === "N") return <span className="cmp__n">—</span>;
    if (v === "P") return <span className="cmp__p">Partial</span>;
    if (v === "B") return <span className="cmp__p">Basic</span>;
    return null;
  };
  return (
    <section className="cmp section">
      <div className="container">
        <div className="cmp__head">
          <span className="eyebrow">Where Samika sits in the category</span>
          <h2 className="display h-md">The only one with the doctor <span className="serif">in the loop.</span></h2>
        </div>
        <div className="cmp__table">
          <div className="cmp__row cmp__row--head">
            <div>Capability</div>
            <div className="cmp__us">Samika</div>
            <div>Assort</div>
            <div>Hyro</div>
            <div>Hello Patient</div>
            <div>Infinitus</div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="cmp__row">
              <div className="cmp__cap">{r.cap}</div>
              <div className="cmp__us"><Cell v={r.k}/></div>
              <div><Cell v={r.a}/></div>
              <div><Cell v={r.h}/></div>
              <div><Cell v={r.hp}/></div>
              <div><Cell v={r.i}/></div>
            </div>
          ))}
        </div>
        <p className="cmp__note">Comparison reflects publicly stated capabilities as of Q2 2025. Independent benchmarks available on request.</p>
      </div>
      <style>{`
        .cmp__head { display:flex; flex-direction:column; gap:12px; margin-bottom: 48px; max-width: 720px; }
        .cmp__table { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .cmp__row {
          display: grid;
          grid-template-columns: 2.4fr 1fr 1fr 1fr 1fr 1fr;
          align-items: center;
          padding: 18px 0;
          border-bottom: 1px solid var(--line);
          font-size: 14.5px;
          color: var(--ink-700);
        }
        .cmp__row:last-child { border-bottom: 0; }
        .cmp__row--head { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); padding: 14px 0; }
        .cmp__row > div { padding: 0 12px; text-align: center; }
        .cmp__row > div:first-child { text-align: left; }
        .cmp__cap { color: var(--ink-900); font-weight: 400; }
        .cmp__us { background: rgba(31,29,26,0.04); position: relative; }
        .cmp__row--head .cmp__us { color: var(--ink-900); font-weight: 500; }
        .cmp__y { color: var(--ink-900); font-size: 14px; }
        .cmp__n { color: var(--ink-300); }
        .cmp__p { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-500); text-transform: uppercase; }
        .cmp__note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); margin-top: 24px; }
        @media (max-width: 800px) { .cmp__table { overflow-x: auto; } .cmp__row { min-width: 720px; } }
      `}</style>
    </section>
  );
}
window.Comparison = Comparison;