/* doctor.jsx */

function Doctor({ onBookClick }) {
  return (
    <section className="doctor" id="doctora">
      <div className="wrap">
        <div className="doctor-grid">
          <Reveal>
            <Photo tone="mocha" label="dra. victoria d'janon · retrato editorial" src="assets/dra-victoria-djanon.jpeg" alt="Dra. Victoria D'janon" className="doctor-portrait" />
          </Reveal>

          <Reveal delay={1}>
            <Eyebrow>La doctora</Eyebrow>
            <h2 className="display" style={{ fontSize: "clamp(46px, 5.5vw, 84px)", marginTop: 18, marginBottom: 24 }}>
              Dra. Victoria<br /><em style={{ fontFamily: "var(--f-serif)", fontStyle: "italic", color: "var(--champagne)" }}>D'janon.</em>
            </h2>
            <p className="lead">
              Médica estética con formación en tricología y microinjerto capilar. Su práctica se construye
              sobre diagnóstico clínico riguroso, técnica de manos finas y una conversación honesta con cada paciente.
            </p>

            <div className="doctor-creds">
              <div className="doctor-cred">Médica · Universidad del Sinú</div>
              <div className="doctor-cred">Posgrado en Medicina Estética · Universidad del Tolima</div>
              <div className="doctor-cred">Máster en Tricología & Microinjerto Capilar · Academia DRAVI</div>
              <div className="doctor-cred">Miembro activo · SIRF Sociedad & ACOMEL Colombia</div>
              <div className="doctor-cred">Docente · ICAM</div>
              <div className="doctor-cred">Práctica privada en Montería desde 2022</div>
            </div>

            <div className="doctor-stats">
              <div>
                <div className="doctor-stat-num">4+</div>
                <div className="doctor-stat-label">Años en consulta</div>
              </div>
              <div>
                <div className="doctor-stat-num">+500</div>
                <div className="doctor-stat-label">Pacientes atendidas</div>
              </div>
              <div>
                <div className="doctor-stat-num">12</div>
                <div className="doctor-stat-label">Certificaciones</div>
              </div>
            </div>

            <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
              <button className="btn btn-gold" onClick={onBookClick}>Agendar valoración <Arr /></button>
              <a className="btn btn-ghost" style={{ color: "var(--cream)", borderColor: "rgba(255,255,255,0.18)" }} href="https://www.instagram.com/medvictoriadjanon/" target="_blank" rel="noreferrer">
                @medvictoriadjanon
              </a>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Doctor });