// Homepage composition + Tweaks panel to compare Hero directions.
(function () {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "heroVariant": "original"
  }/*EDITMODE-END*/;

  function HomeApp() {
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    const heroByVariant = {
      original: Hero,
      titluText: HeroTitluText,
      eyebrow: HeroEyebrow
    };
    const HeroEl = heroByVariant[t.heroVariant] || Hero;

    return (
      <div className="min-h-screen flex flex-col font-body">
        <Header />
        <main className="flex-grow">
          <HeroEl />
          <PartnersMarquee />
          <ProductsGrid />
          <ServicesGrid />
          <IndustriesSection />
          <StatsBand />
          <ContactSection />
        </main>
        <Footer />

        <TweaksPanel>
          <TweakSection label="Hero" />
          <TweakRadio
            label="Direcție"
            value={t.heroVariant}
            options={[
              { value: 'original', label: 'Original' },
              { value: 'titluText', label: 'Titlu+text' },
              { value: 'eyebrow', label: 'Eyebrow' }
            ]}
            onChange={(v) => setTweak('heroVariant', v)} />
        </TweaksPanel>
      </div>
    );
  }

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