/* global React, DENTISTS, IconCheck, IconLang, IconArrow */

function Dentists({ onBook }) {
  return (
    <section id="dentists" className="section" style={{ background: 'var(--paper)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">03 · Your dentists</div>
            <h2 className="h2" style={{ marginTop: 14 }}>
              Two dentists.<br/><em style={{ fontStyle: 'italic', color: 'var(--primary)' }}>One relationship</em> that lasts years.
            </h2>
          </div>
          <p className="lead">
            Many Empire patients have stayed with Dr Ammar for half a decade or more. There are no rotating locums here — you’ll see the same dentist at every visit, with a specialist orthodontist on hand when you need one.
          </p>
        </div>

        <div className="docs">
          {DENTISTS.map(d => (
            <article key={d.id} className="doc">
              {d.photo ? (
                <div className="doc__photo">
                  <img src={d.photo} alt={d.name} />
                </div>
              ) : (
                <div className="doc__photo placeholder">
                  Portrait pending<br/>
                  client to supply<br/>
                  hi-res headshot
                </div>
              )}
              <div>
                <div className="doc__role">{d.role}</div>
                <h3 className="doc__name">{d.name}</h3>
                <div className="doc__dha">
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--success)' }} />
                  {d.dha} · Verified
                </div>
                <p className="doc__bio">{d.bio}</p>
                <ul className="doc__list">
                  {d.credentials.map((c, i) => (
                    <li key={i}>
                      <IconCheck size={14} />
                      <span>{c}</span>
                    </li>
                  ))}
                </ul>
                <div className="doc__langs">
                  {d.langs.map(l => (
                    <span key={l} className="chip chip--teal" style={{ height: 26, fontSize: 12 }}>
                      <IconLang size={12} /> {l}
                    </span>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>

        <div style={{ marginTop: 40, display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', padding: '20px 0', borderTop: '1px solid var(--line)' }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--slate)' }}>
            Looking for a treatment-specific consultation?
          </span>
          <span className="spacer" />
          <button className="btn btn--primary" onClick={() => onBook()}>
            Book a Consultation <IconArrow size={14} />
          </button>
        </div>
      </div>
    </section>
  );
}

window.Dentists = Dentists;