function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero__copy">
        <div className="hero__brand">
          <div className="mark">T</div>
          <div>
            <div className="name">Dra. Thais Alves</div>
            <div className="role">Endocrinologista · CRM 127703 / RQE 52577</div>
          </div>
        </div>

        <div>
          <h1 className="hero__title">
            <span className="line l1">Decifre sua fome e</span>
            <span className="line l2 gold-grad">emagreça de verdade</span>
          </h1>
          <p className="hero__sub">
            Uma manhã sobre os tipos de fome, comportamento alimentar e o porquê
            de nem todo tratamento funcionar igual.
          </p>
          <a className="btn-gold hero__cta" href="https://chat.whatsapp.com/BTaNimP5Ufb3jC22G8kDIY?mode=gi_t" target="_blank" rel="noreferrer">
            Entrar no Grupo <span className="arrow">→</span>
          </a>
        </div>

        <div className="hero__meta">
          <div className="cell">
            <div className="k">Data</div>
            <div className="v">30 / 05 / 2026</div>
          </div>
          <div className="cell">
            <div className="k">Início</div>
            <div className="v">9h00</div>
          </div>
          <div className="cell">
            <div className="k">Inclui</div>
            <div className="v gold">Café da manhã</div>
          </div>
        </div>
      </div>

      <div className="hero__image">
        <img src="assets/hero-clean.png" alt="Decifre Sua Fome — Convite Especial" />
      </div>
    </section>
  );
}
window.Hero = Hero;