/* global React, ReactDOM, Header, Hero, Stat, Manifesto, Features, Dashboard, Alerts, Fleet, Services, Clients, Coverage, Contact, Footer, Icon, TweaksPanel */
const { useState } = React;

function App() {
  const [audience, setAudience] = useState('retail');

  return (
    <>
      <Header audience={audience} setAudience={setAudience} />
      <main>
        <Hero audience={audience} />
        <Stat />
        <Manifesto />
        <Features />
        <Dashboard />
        <Alerts />
        <Fleet />
        <Services />
        <Clients />
        <Coverage />
        <Contact />
      </main>
      <Footer />

      <a
        href="https://wa.me/525611693553"
        target="_blank" rel="noreferrer"
        className="float-wa"
        aria-label="WhatsApp">
        <Icon name="whatsapp" size={26} />
      </a>
      <style>{`
        .float-wa {
          position: fixed; right: 22px; bottom: 22px; z-index: 60;
          width: 58px; height: 58px; border-radius: 50%;
          display: grid; place-items: center;
          background: #25d366; color: #073;
          box-shadow: 0 18px 40px -10px rgba(0,0,0,0.6);
          text-decoration: none;
          transition: transform .2s ease;
        }
        .float-wa:hover { transform: translateY(-3px) scale(1.04); }
      `}</style>

    </>
  );
}

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