/* global React, Reveal, Cta */

function Hero({ photo, avatar, layout = "split" }) {
  return (
    <section className={`hero layout-${layout}`} data-screen-label="01 Hero">
      <div className="hero-grid">
        <div className="hero-left">
          <Reveal>
            <span className="overline hero-overline">Dra.</span>
          </Reveal>
          <Reveal delay={1}>
            <h1 className="hero-name">
              Fernanda<br /><em>Quilles</em>
            </h1>
          </Reveal>
          <Reveal delay={2}>
            <div className="accent-line">
              <p className="hero-impact">Sua autoestima começa aqui.</p>
              <p className="hero-desc">
                Sou a Dra. Fernanda, cirurgiã-dentista com foco em estética, dedicada a realçar a beleza natural com técnica, sensibilidade e atendimento personalizado. Meu objetivo é valorizar sua confiança em cada detalhe.
              </p>
            </div>
          </Reveal>
          <Reveal delay={3}>
            <Cta>Agendar consulta</Cta>
          </Reveal>
        </div>

        <div className="hero-photo-wrap">
          <div className="hero-photo" style={{ backgroundImage: `url(${photo})` }} />
          <div className="hero-photo-tag">
            Estética &amp; Harmonização
            <span className="hero-photo-tag-line" />
          </div>
        </div>
      </div>

      <div className="hero-footer">
        <div className="hero-footer-grid">
          <div className="hero-cro">
            <div className="hero-cro-avatar" style={{ backgroundImage: `url(${avatar})` }} />
            <div className="hero-cro-text">
              <strong>CRO SP 175.816</strong>
              Cirurgiã-Dentista · Estética &amp; Harmonização
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;