// Object 1 — W1NNER microsite root

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "fullbleed",
  "galleryLayout": "mosaic",
  "density": "regular",
  "platesOn": true,
  "locale": "en"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [locale, setLocale] = React.useState(t.locale || 'en');
  const [brochureOpen, setBrochureOpen] = React.useState(false);
  const [viewingOpen, setViewingOpen] = React.useState(false);

  React.useEffect(() => { setLocale(t.locale || 'en'); }, [t.locale]);

  React.useEffect(() => {
    const i = window.I18N[locale];
    document.documentElement.setAttribute('dir', i.dir);
    document.documentElement.setAttribute('lang', locale);
    document.body.setAttribute('data-density', t.density);
  }, [locale, t.density]);

  const onLocale = (l) => { setLocale(l); setTweak('locale', l); };
  const i = window.I18N[locale];

  const onCta = () => {
    const el = document.getElementById('register-form');
    el && el.scrollIntoView({ behavior: 'smooth', block: 'center' });
  };

  return (
    <>
      <Nav t={i} locale={locale} setLocale={onLocale} onCta={onCta} />
      <Hero t={i} variant={t.heroVariant} onCta={onCta} onBrochure={() => setBrochureOpen(true)} />
      <Concept t={i} />
      <Location t={i} />
      <Amenities t={i} platesOn={t.platesOn} />
      <Residences t={i} onCta={onCta} />
      <Gallery t={i} layout={t.galleryLayout} />
      <Momentum t={i} />
      <Lead t={i}
            onSubmit={(form) => console.log('Lead captured:', { ...form, project: 'w1nner', locale, src: 'microsite' })}
            onBrochure={() => setBrochureOpen(true)}
            onViewing={() => setViewingOpen(true)} />
      <Contact t={i} />
      <Footer t={i} />

      <WhatsAppFab />
      <BrochureModal t={i} open={brochureOpen} onClose={() => setBrochureOpen(false)} />
      <ViewingModal t={i} open={viewingOpen} onClose={() => setViewingOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Hero treatment" value={t.heroVariant}
                    options={['fullbleed', 'split', 'editorial']}
                    onChange={(v) => setTweak('heroVariant', v)} />

        <TweakSection label="Gallery" />
        <TweakRadio label="Layout" value={t.galleryLayout}
                    options={['mosaic', 'uniform']}
                    onChange={(v) => setTweak('galleryLayout', v)} />
        <TweakToggle label="Exhibition plates (P.01 …)" value={t.platesOn}
                     onChange={(v) => setTweak('platesOn', v)} />

        <TweakSection label="Composition" />
        <TweakRadio label="Density" value={t.density}
                    options={['compact', 'regular', 'airy']}
                    onChange={(v) => setTweak('density', v)} />

        <TweakSection label="Locale" />
        <TweakRadio label="Language" value={t.locale}
                    options={['en', 'ar']}
                    onChange={(v) => setTweak('locale', v)} />
      </TweaksPanel>
    </>
  );
}

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