const Hero = () => (
  <section className="hero" id="top">
    <div className="hero-tag">
      <span className="line"></span>
      Curitiba · Paraná · Est. 2018
    </div>

    <div className="shell hero-grid">
      <div className="hero-copy">
        <div className="eyebrow hero-eyebrow"><span className="dot"></span>Neuro-oftalmologia &amp; Equilíbrio</div>

        <h1>
          Dr. Leonardo
          <span className="it">Ariello</span>
        </h1>

        <p className="lede">
          Referência em <em style={{fontStyle:'italic', color:'var(--gold)'}}>neuro-oftalmologia</em> e nos distúrbios do equilíbrio — tonturas, vertigens e desorientação visual.
        </p>

        <p className="body">
          Diretor Técnico do Instituto Neurológico da Visão e Equilíbrio. Clínica dedicada ao cuidado de problemas neuro-oftalmológicos e neuro-otológicos com tempo, escuta e medicina baseada em evidência.
        </p>

        <div className="hero-actions">
          <a href="#visita" className="btn btn-solid">
            Agendar Consulta
            <span className="arr"></span>
          </a>
          <a href="#sobre" className="btn">
            Conhecer o médico
            <span className="arr"></span>
          </a>
        </div>
      </div>

      <div className="hero-portrait">
        <div className="frame"></div>
        <div className="img">
          <img src="img/ariello-stool.jpg" alt="Dr. Leonardo Ariello" />
        </div>
        <div className="caption">
          <span className="sep"></span>
          Retrato · Estúdio Curitiba
        </div>
      </div>
    </div>
  </section>
);

window.Hero = Hero;