function Dashboard() {
  return (
    <section id="painel">
      <div className="container">
        <div className="dashboard-grid">
          <div>
            <span className="eyebrow"><span className="dot"></span>Painel de gestão</span>
            <h2 style={{marginTop:16}}>
              Gerencie e monitore<br/>
              <span className="serif-i" style={{color:'var(--primary)'}}>com total controle.</span>
            </h2>
            <p style={{marginTop:18,fontSize:17,color:'var(--muted)',maxWidth:420,lineHeight:1.6}}>
              Uma plataforma com IA que entende as demandas da população, otimiza processos e garante total segurança dos dados da prefeitura.
            </p>
            <div style={{display:'flex',gap:12,marginTop:36,flexWrap:'wrap'}}>
              <a href="https://e11zr.share.hsforms.com/2VJMcjYGRSmyl0sq1pO8wGQ" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
                Contrate sem licitação <Icons.Arrow className="arr"/>
              </a>
            </div>
            <div style={{display:'flex',gap:40,marginTop:40,flexWrap:'wrap'}}>
              <div className="db-stat">
                <span className="db-stat-num">5x</span>
                <span className="db-stat-label">Implantação de serviço mais rápida</span>
              </div>
              <div className="db-stat">
                <span className="db-stat-num">80%</span>
                <span className="db-stat-label">Custos operacionais mais baixos</span>
              </div>
            </div>
          </div>
          <div className="dashboard-img-wrap">
            <div className="dashboard-img">
              <img src="assets/powerbi.jpeg" alt="Painel de gestão municipal"/>
            </div>

            <div className="db-badge db-badge-1" style={{animationDelay:'0s'}}>
              <span className="db-badge-icon" style={{background:'var(--primary)'}}>
                <Icons.Sparkle style={{width:14,height:14,color:'#fff'}}/>
              </span>
              <div>
                <div className="db-badge-title">Pergunta Tudo · IA</div>
                <div className="db-badge-sub">Resposta em 2s</div>
              </div>
            </div>

            <div className="db-badge db-badge-2" style={{animationDelay:'1.2s'}}>
              <span className="db-badge-icon" style={{background:'var(--accent)'}}>
                <Icons.Bell style={{width:14,height:14,color:'#fff'}}/>
              </span>
              <div>
                <div className="db-badge-title">Chamado roteado</div>
                <div className="db-badge-sub">IA → Secretaria de Obras</div>
              </div>
            </div>

            <div className="db-badge db-badge-3" style={{animationDelay:'2.1s'}}>
              <span className="db-badge-icon" style={{background:'#0C3A3A'}}>
                <Icons.Check style={{width:14,height:14,color:'#fff'}}/>
              </span>
              <div>
                <div className="db-badge-title">Serviço concluído</div>
                <div className="db-badge-sub">Satisfação: 98%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Dashboard = Dashboard;