const Hero = ({ layout = "split", tone = "acolhedor" }) => (
  <section className="hero" id="top" data-layout={layout} data-tone={tone}>
    <div className="container hero-inner">
      <div>
        <h1>
          A mão que <em>cuida</em>,<br />
          também <span className="accent">luta</span>.
        </h1>
        <p className="hero-sub">
          Representação, apoio jurídico e benefícios para auxiliares e técnicos de
          enfermagem em Bauru e região. Uma categoria
          unida é uma categoria mais forte.
        </p>
        <div className="hero-cta-row">
          <a href="#sobre" className="btn btn-ghost">
            Conheça o S.A.T.E.
            <Icon name="arrow" size={16} />
          </a>
        </div>

        <div className="hero-stats">
          <div>
            <div className="stat-num">10+</div>
            <div className="stat-label">Anos de atuação</div>
          </div>
          <div>
            <div className="stat-num">6.2k</div>
            <div className="stat-label">Profissionais associados</div>
          </div>
          <div>
            <div className="stat-num">Bauru</div>
            <div className="stat-label">e região</div>
          </div>
        </div>
      </div>

      <div className="hero-visual">
        <div className="hero-img-wrap">
          <img
            src="assets/img-hero.jpg"
            alt="Diretoras do S.A.T.E. com credenciais institucionais"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          />
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero });