/* Colleague Pulse — Home page. */

const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS;

function App() {
  useReveal();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <>
      <Header />
      <main id="main">
        <HeroV2 bg={t.heroBg} accent={t.heroAccent} />
        <TrustSectionV2 />
        <PainCarousel />
        <SectorBlock />
        <CredibilityStrip />
        <HomeFinalCTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakColor
          label="Hero background"
          value={t.heroBg}
          options={['#FFFFFF', '#F8FAFC', '#EFF6FF', '#F1F5F9']}
          onChange={(v) => setTweak('heroBg', v)}
        />
        <TweakColor
          label="Eyebrow accent"
          value={t.heroAccent}
          options={['#2563EB', '#1D4ED8', '#0B3D91', '#0F172A']}
          onChange={(v) => setTweak('heroAccent', v)}
        />
      </TweaksPanel>
    </>
  );
}

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