const ProviderRoster = () => (
  <section className="section" id="providers">
    <div className="container">
      <div className="section__head">
        <span className="eyebrow eyebrow--gold">The roster</span>
        <h2 className="h-display section__title">
          Quietly <em>excellent</em>. Currently available.
        </h2>
        <p className="lede">
          A glimpse of the providers in our active network. Full bios, portfolios, and references
          available after your consultation.
        </p>
      </div>

      <div className="roster__grid">
        <div className="provider">
          <div className="provider__photo">
            <img
              className="provider__img"
              src="assets/providers/avery-lockwood-lead-injector.webp"
              alt="Avery Lockwood, lead injector"
            />
            <span className="provider__credential">DNP · FNP-C</span>
          </div>
          <div className="provider__body">
            <h4 className="provider__name">Avery Lockwood</h4>
            <span className="provider__role">Lead Injector · 9 yrs</span>
            <span className="provider__location">
              <i data-lucide="map-pin" style={{ width: 12, height: 12, strokeWidth: 1.5 }}></i>
              Available nationwide
            </span>
          </div>
        </div>

        <div className="provider">
          <div className="provider__photo">
            <img
              className="provider__img"
              src="assets/providers/mara-sinclair-aesthetic-injector.webp"
              alt="Mara Sinclair, aesthetic injector"
            />
            <span className="provider__credential">MSN · FNP-BC</span>
          </div>
          <div className="provider__body">
            <h4 className="provider__name">Mara Sinclair</h4>
            <span className="provider__role">Aesthetic Injector · 10 yrs</span>
            <span className="provider__location">
              <i data-lucide="map-pin" style={{ width: 12, height: 12, strokeWidth: 1.5 }}></i>
              Available nationwide
            </span>
          </div>
        </div>

        <div className="provider">
          <div className="provider__photo">
            <img
              className="provider__img"
              src="assets/providers/juliet-hayes-master-esthetician.webp"
              alt="Juliet Hayes, master esthetician"
            />
            <span className="provider__credential">Master Esthetician</span>
          </div>
          <div className="provider__body">
            <h4 className="provider__name">Juliet Hayes</h4>
            <span className="provider__role">Skin Health Lead · 6 yrs</span>
            <span className="provider__location">
              <i data-lucide="map-pin" style={{ width: 12, height: 12, strokeWidth: 1.5 }}></i>
              Available nationwide
            </span>
          </div>
        </div>

        <div className="provider">
          <div className="provider__photo">
            <img
              className="provider__img"
              src="assets/providers/elena-whitford-functional-wellness.webp"
              alt="Elena Whitford, functional wellness provider"
            />
            <span className="provider__credential">DNP · APRN</span>
          </div>
          <div className="provider__body">
            <h4 className="provider__name">Elena Whitford</h4>
            <span className="provider__role">Functional Wellness · 15 yrs</span>
            <span className="provider__location">
              <i data-lucide="map-pin" style={{ width: 12, height: 12, strokeWidth: 1.5 }}></i>
              Available nationwide
            </span>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 40, display: "flex", justifyContent: "center" }}>
        <a className="btn btn--ghost" href="#contact">REQUEST THE FULL ROSTER</a>
      </div>
    </div>
  </section>
);

Object.assign(window, { ProviderRoster });