/* global React, Reveal */

function MuitoPrazer({ photo }) {
  return (
    <section className="about" data-screen-label="03 Muito prazer">
      <div className="container about-grid">
        <div>
          <Reveal>
            <div className="overline about-overline">Muito prazer, sou a</div>
          </Reveal>
          <Reveal delay={1}>
            <h2 className="about-name">Dra. Fernanda <em>Quilles.</em></h2>
          </Reveal>
          <Reveal delay={2}>
            <p className="about-text">
              Meu nome é Dra. Fernanda, sou cirurgiã-dentista com foco em estética e harmonização facial. Meu trabalho é unir técnica, precisão e sensibilidade para valorizar a beleza natural de cada paciente.
            </p>
          </Reveal>
          <Reveal delay={3}>
            <p className="about-text">
              Ao longo da minha atuação, busco oferecer tratamentos personalizados que vão além do sorriso, promovendo autoestima, confiança e bem-estar.
            </p>
          </Reveal>
          <Reveal delay={4}>
            <p className="about-text">
              Acredito que cada detalhe faz diferença. Por isso, cada atendimento é pensado de forma única, respeitando suas características e objetivos, para alcançar resultados naturais, equilibrados e duradouros.
            </p>
          </Reveal>
          <Reveal delay={5}>
            <div className="about-sig">
              <div className="about-sig-line" />
              <span className="about-sig-text">Fernanda Quilles</span>
            </div>
          </Reveal>
        </div>

        <Reveal delay={2} className="about-photo-wrap">
          <div className="about-ring-2" />
          <div className="about-photo" style={{ backgroundImage: `url(${photo})` }} />
          <div className="about-ring" />
          <div className="about-mark">— estética com alma</div>
        </Reveal>
      </div>
    </section>
  );
}

window.MuitoPrazer = MuitoPrazer;