/* ARES Technology — main app */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "a"
}/*EDITMODE-END*/;

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

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 64;
    window.scrollTo({ top, behavior: 'smooth' });
  };
  const scrollToContact = () => scrollTo('contact');
  const scrollToSamples = () => scrollTo('samples');

  return (
    <>
      <Nav onCta={scrollToContact} />
      <Hero
        onPrimary={scrollToContact}
        onSecondary={scrollToSamples}
        headlineVariant={t.headline}
      />
      <Problem />
      <HowItWorks />
      <Pricing onCta={scrollToContact} />
      <Monthly onCta={scrollToContact} />
      <TrustStrip />
      <WhoFor />
      <WhyAres />
      <HumanTrust onCta={scrollToContact} />
      <ExamplePreview />
      <SampleLayouts onCta={scrollToContact} />
      <LiveWork onCta={scrollToContact} />
      <FAQ />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero headline">
          <TweakRadio
            label="Variant"
            value={t.headline}
            options={[
              { label: 'Short', value: 'a' },
              { label: 'Long',  value: 'b' },
            ]}
            onChange={(v) => setTweak('headline', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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