function App() {
  const headline = (
    <>
      <span style={{color:'var(--ink)'}}>O melhor aplicativo para gestão municipal</span>
      <br/><span className="serif-i" style={{color:'#7cc53f'}}>impulsionado por IA.</span>
    </>
  );

  return (
    <>
      <Nav />
      <HeroSection headline={headline} />
      <LogoCarousel />
      <About />
      <Services />
      <Dashboard />
      <Differentials />
      <Cases />
      <CTA />
      <Footer />
      <ChatWidget />
    </>
  );
}

function HeroSection({ headline }) {
  return (
    <header className="hero" style={{color:'rgb(11,31,58)'}}>
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="eyebrow"><span className="dot"></span>App municipal com IA</span>
            <h1 className="hero-headline" style={{marginTop:20}}>{headline}</h1>
            <p className="hero-sub">
              Modernize a comunicação da sua prefeitura com inteligência artificial, conectando secretarias e cidadãos.
            </p>
            <div className="hero-cta">
              <a href="https://e11zr.share.hsforms.com/2VJMcjYGRSmyl0sq1pO8wGQ" target="_blank" rel="noopener noreferrer" className="btn btn-primary">Contrate por inexigibilidade <Icons.Arrow className="arr" /></a>
              <a href="#servicos" className="btn btn-ghost">Ver funcionalidades</a>
            </div>
            <TrustRow/>
          </div>
          <div className="hero-visual">
            <img src="assets/mockoup.png" alt="Cidade na Mão app" style={{width:'100%',maxWidth:480,display:'block',margin:'0 auto'}}/>
          </div>
        </div>
      </div>
    </header>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);