function Integrations() {
  const items = ["Dentrix", "Modento", "Open Dental", "Athenahealth", "eClinicalWorks", "Jane App", "DrChrono", "ModMed"];
  return (
    <section className="ints section--tight section">
      <div className="container">
        <div className="ints__head">
          <span className="eyebrow">PMS-native</span>
          <h3 className="ints__title">Writes back to the system you're already in.</h3>
        </div>
        <div className="ints__row">
          {items.map((it, i) => (
            <div key={i} className="ints__cell">
              <span className="ints__name">{it}</span>
            </div>
          ))}
        </div>
        <p className="ints__note">Don't see yours? We launch new integrations every 4–6 weeks. Tell us at the bottom of this page.</p>
      </div>
      <style>{`
        .ints__head { display: flex; align-items: baseline; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
        .ints__title { font-size: 22px; font-weight: 500; letter-spacing: -0.018em; margin: 0; color: var(--ink-900); }
        .ints__row { display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .ints__cell { padding: 32px 16px; border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: background .2s; }
        .ints__cell:last-child { border-right: 0; }
        .ints__cell:hover { background: rgba(31,29,26,0.03); }
        .ints__name { font-family: var(--font-sans); font-size: 15px; color: var(--ink-700); letter-spacing: -0.01em; font-weight: 500; }
        .ints__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: 1000px) { .ints__row { grid-template-columns: repeat(4, 1fr); } .ints__cell:nth-child(4) { border-right: 0; } .ints__cell:nth-child(n+5) { border-top: 1px solid var(--line); } }
        @media (max-width: 600px) { .ints__row { grid-template-columns: 1fr 1fr; } .ints__cell:nth-child(2n) { border-right: 0; } .ints__cell:nth-child(n+3) { border-top: 1px solid var(--line); } }
      `}</style>
    </section>
  );
}
window.Integrations = Integrations;