function Doctor() {
  const { Button, Badge } = window.DentOFitDesignSystem_a776f9;
  const { CREDS } = window.LP;

  return (
    <section className="sec" id="doctor">
      <div className="wrap two">
        <div className="reveal" style={{position:'relative'}}>
          <div className="portrait"><img src="assets/doctor-portrait.jpg" alt="Dr. Namrata Patil Shiwalkar at the Dent-O-Fit clinic" style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
          <div className="portrait-badge">Powai, since 2010 🦷</div>
        </div>
        <div>
          <div className="kicker reveal">Meet your dentist</div>
          <h2 className="sh" style={{fontSize:'clamp(30px,3.6vw,46px)'}}><Words text="Dr. Namrata Patil"/><br/><Words text="Shiwalkar"/><em> BDS</em></h2>
          <p className="lede reveal" style={{'--d':'140ms'}}>She has run Dent-O-Fit in Hiranandani Gardens since 2010, on a simple idea: dentistry goes better when you understand it. So you'll get the X-ray on screen, the plan in writing, and an honest answer on what can wait.</p>
          <ul className="creds">
            {CREDS.map((c, i) => (
              <li className="reveal" key={c} style={{'--d': 160 + i * 90 + 'ms'}}><i>✓</i>{c}</li>
            ))}
          </ul>
          <div className="reveal" style={{'--d':'300ms',display:'flex',gap:12,flexWrap:'wrap',alignItems:'center'}}>
            <Button onClick={window.LP.book}>Book With Dr. Namrata</Button>
            <Badge tone="success">Consults in English, Hindi & Marathi</Badge>
          </div>
        </div>
      </div>
    </section>
  );
}
function Stats() {
  const { STATS } = window.LP;
  return (
    <section className="sec stats" style={{padding:'72px 0'}}>
      <div className="wrap">
        {STATS.map((s, i) => (
          <div className="stat reveal" key={s.l} style={{'--d': i * 120 + 'ms'}}>
            <b>{s.n}</b><span>{s.l}</span>
          </div>
        ))}
      </div>
    </section>
  );
}
function Quotes() {
  const { QUOTES } = window.LP;
  return (
    <section className="sec">
      <div className="wrap">
        <SecHead kicker="In their words" title="What patients say" accent="afterwards"/>
        <div className="grid3">
          {QUOTES.map((q, i) => (
            <figure className="quote reveal" key={q.who} style={{'--d': i * 120 + 'ms', margin:0}}>
              <div className="stars" aria-hidden="true">★★★★★</div>
              <blockquote style={{margin:0}}><p>{q.q}</p></blockquote>
              <figcaption className="who">{q.who} · {q.t}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Doctor, Stats, Quotes });