function SpecialtyValue() {
  const cards = [
    {
      label: "Dental",
      title: "Recover six-figure implant revenue lost to voicemail.",
      points: ["After-hours implant calls answered live", "Insurance and prior-care captured upfront", "Writes to Dentrix, Modento, Open Dental"],
      stat: { v: "+27%", k: "booked consults / month" }
    },
    {
      label: "Dermatology",
      title: "Filter cosmetic from medical at the front door.",
      points: ["Triage by concern, location, history", "Reduce mis-scoped appointments", "Free providers for the right work"],
      stat: { v: "−41%", k: "mis-booked visits" }
    },
    {
      label: "Aesthetics",
      title: "Catch consults before they call the next clinic.",
      points: ["Sub-2-ring response, 24/7", "Live calendar slot offers", "SMS confirmation in seconds"],
      stat: { v: "1.4s", k: "avg pickup" }
    },
    {
      label: "Primary care",
      title: "The first AI access tool with the doctor in control.",
      points: ["30-second physician approval loop", "Acute symptoms routed to urgent care", "Hard-coded emergency protocol"],
      stat: { v: "28s", k: "median doctor decision" }
    },
  ];

  return (
    <section className="spec section section--paper" id="specialty">
      <div className="container">
        <div className="spec__head">
          <span className="eyebrow">Built for the way your clinic works</span>
          <h2 className="display h-lg">
            One platform.<br/>
            <span className="serif">Four playbooks.</span>
          </h2>
          <p className="lede">Each specialty ships with a pre-built intake script, vocabulary, and approval flow tuned to its clinical reality. Switch templates per location.</p>
        </div>
        <div className="spec__grid">
          {cards.map((c, i) => (
            <article key={i} className="spec__card">
              <div className="spec__top">
                <span className="spec__label">{c.label}</span>
                <span className="spec__num">0{i+1}/04</span>
              </div>
              <h3 className="spec__title">{c.title}</h3>
              <ul className="spec__list">
                {c.points.map((p, j) => <li key={j}>{p}</li>)}
              </ul>
              <div className="spec__stat">
                <span className="spec__stat-v">{c.stat.v}</span>
                <span className="spec__stat-k">{c.stat.k}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .spec__head { max-width: 720px; margin-bottom: 64px; display: flex; flex-direction: column; gap: 16px; }
        .spec__head h2 { margin: 8px 0 8px; }
        .spec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .spec__card {
          background: var(--cream-100);
          border: 1px solid var(--line);
          border-radius: var(--radius-lg);
          padding: 36px;
          display: flex; flex-direction: column; gap: 20px;
          transition: transform .3s ease, box-shadow .3s ease;
        }
        .spec__card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -25px rgba(31,29,26,0.18); }
        .spec__top { display: flex; justify-content: space-between; }
        .spec__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-700); }
        .spec__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-400); }
        .spec__title { font-size: 26px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.18; margin: 0; color: var(--ink-900); max-width: 22ch; }
        .spec__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 20px; }
        .spec__list li { font-size: 14.5px; color: var(--ink-600); padding-left: 22px; position: relative; }
        .spec__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 1px; background: var(--ink-700); }
        .spec__stat { display: flex; align-items: baseline; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); margin-top: auto; }
        .spec__stat-v { font-family: var(--font-sans); font-size: 36px; font-weight: 500; letter-spacing: -0.025em; color: var(--ink-900); }
        .spec__stat-k { font-size: 13px; color: var(--ink-500); }
        @media (max-width: 800px) {
          .spec__grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}
window.SpecialtyValue = SpecialtyValue;