/* App root */

const App = () => {
  const [tw, setTw] = React.useState(window.__TWEAKS__ || {});
  React.useEffect(() => {
    document.documentElement.setAttribute('data-accent', tw.accent || 'orange');
  }, [tw.accent]);

  const patch = (p) => setTw(prev => ({...prev, ...p}));

  return (
    <>
      <Topbar/>
      <main>
        <Hero copy={tw.mainCopyVariant} layout={tw.heroLayout} showBadges={tw.showBadges}/>
        <Pain/>
        <Diagnose/>
        <Promises/>
        <Services/>
        <CoPromo/>
        <Numbers/>
        <Voice/>
        {tw.showRep && <Representative/>}
        <Blog/>
        <FAQ/>
        <FinalCTA/>
      </main>
      <Footer/>
      <StickyCTA/>
      <Tweaks values={tw} onChange={patch}/>
    </>
  );
};

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