function Hero() {
  return (
    <section id="top" className="hero">
      <div className="hero-bg-wrap">
        <img src="assets/imagery/destaque06-aiagents.jpg" alt="" />
      </div>
      <div className="hero-bg-grad" />
      <div className="hero-content">
        <div className="hero-eyebrow">
          <span className="dot" />
          <span style={{ fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: '.8125rem' }}>18 e 25 de junho</span>
          <span className="divider" />
          <span style={{ fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: '.8125rem' }}>São Paulo</span>
          <span className="divider" />
          <span style={{ fontFamily: 'var(--font-ui)', fontSize: '.8125rem', opacity: .65 }}>9h às 13h · presencial</span>
        </div>
        <h1 className="hero-h1">
          AI Agents <span className="light">Lab</span>
        </h1>
        <div className="hero-sub">
          Do cenário ao agente: uma imersão prática para líderes de negócio.
        </div>
        <p className="text-large hero-desc" style={{ margin: 0 }}>
          Uma manhã para entender, estruturar e construir agentes de IA aplicáveis aos desafios reais da sua área, com apoio da metodologia AI7 da Maitha Tech.
        </p>
        <div className="hero-cta-row">
          <PrimaryButton href="#inscricao">Quero participar dessa experiência</PrimaryButton>
          <SecondaryButton href="#agenda">Ver agenda</SecondaryButton>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });