/* global React, ReactDOM, Header, Hero, Ticker, ComeFunziona, Problema, StatsBad, VsTable, Testimonial, Numbers, Prezzi, FAQ, FinalCTA, Footer, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakColor */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F97316",
  "heroLayout": "centered",
  "showTicker": true,
  "showFloatingStats": true,
  "darkBg": "#1C1C1E"
}/*EDITMODE-END*/;

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

  // Live-apply tweaks to CSS variables
  React.useEffect(() => {
    document.documentElement.style.setProperty('--orange', tweaks.accent);
    document.documentElement.style.setProperty('--ink', tweaks.darkBg);
  }, [tweaks.accent, tweaks.darkBg]);

  // Toggle hero layout (left vs centered) by setting body class
  React.useEffect(() => {
    document.body.classList.toggle('hero-left', tweaks.heroLayout === 'left');
    document.body.classList.toggle('hide-floats', !tweaks.showFloatingStats);
  }, [tweaks.heroLayout, tweaks.showFloatingStats]);

  return (
    <>
      <Header />
      <Hero />
      {tweaks.showTicker && <Ticker />}
      <ComeFunziona />
      <Problema />
      <StatsBad />
      <VsTable />
      <Testimonial />
      <Numbers />
      <Prezzi />
      <FAQ />
      <FinalCTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor label="Accent color" value={tweaks.accent} onChange={v => setTweak('accent', v)} />
          <TweakColor label="Dark background" value={tweaks.darkBg} onChange={v => setTweak('darkBg', v)} />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Layout"
            value={tweaks.heroLayout}
            onChange={v => setTweak('heroLayout', v)}
            options={[{ value: 'centered', label: 'Centrato' }, { value: 'left', label: 'Allineato sx' }]}
          />
          <TweakToggle label="Floating stat & PDF card" value={tweaks.showFloatingStats} onChange={v => setTweak('showFloatingStats', v)} />
        </TweakSection>
        <TweakSection title="Sections">
          <TweakToggle label="Marquee ticker" value={tweaks.showTicker} onChange={v => setTweak('showTicker', v)} />
        </TweakSection>
      </TweaksPanel>

      <style>{`
        body.hide-floats .hide-mobile { /* hero floating chips inherit hide-mobile, narrow class to .hero-floating */ }
        body.hide-floats [data-hero-float] { display: none !important; }

        /* hero-left layout variation */
        body.hero-left h1 { text-align: left !important; }
        body.hero-left section#top p { text-align: left !important; margin-left: 0 !important; }
        body.hero-left section#top [data-hero-eyebrow] { justify-content: flex-start !important; }
        body.hero-left section#top [data-hero-cta] { justify-content: flex-start !important; }
      `}</style>
    </>
  );
}

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