// app.jsx — root app: state, routing between projects, Tweaks.

const { useState: useState_a, useEffect: useEffect_a, useMemo: useMemo_a } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "project": "casa-canal",
  "language": "en",
  "accent": "#A57B52",
  "showWhatsApp": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const project = window.PROJECTS[t.project] || window.PROJECTS['casa-canal'];
  const lang = t.language || 'en';
  const copy = useMemo_a(() => {
    const c = window.COPY[lang] || window.COPY.en;
    return { ...c, _lang: lang };
  }, [lang]);

  // Modal state
  const [openModal, setOpenModal] = useState_a(null); // 'register' | 'brochure' | 'viewing' | null
  const [lbIdx, setLbIdx] = useState_a(null);

  // Apply language direction + accent
  useEffect_a(() => {
    document.body.setAttribute('dir', copy.dir);
    document.body.setAttribute('lang', lang);
  }, [copy.dir, lang]);
  useEffect_a(() => {
    if (t.accent) {
      document.documentElement.style.setProperty('--accent', t.accent);
    }
  }, [t.accent]);

  // Re-run image parallax when project changes (page jumps to top)
  useEffect_a(() => {
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, [t.project]);

  const onOpen = (k) => setOpenModal(k);
  const onClose = () => setOpenModal(null);

  return (
    <>
      <Navbar lang={lang} setLang={(v) => setTweak('language', v)} copy={copy} onOpen={onOpen} />
      <Hero project={project} copy={copy} onOpen={onOpen} />
      <ProjectRail project={project} copy={copy} onOpen={onOpen} />
      <Overview project={project} copy={copy} />
      <Location project={project} copy={copy} />
      <Partners project={project} copy={copy} />
      <Residences project={project} copy={copy} onOpen={onOpen} />
      <Amenities project={project} copy={copy} />
      <Gallery project={project} copy={copy} onLightbox={setLbIdx} />
      <Founder copy={copy} />
      <Press copy={copy} />
      <CTABand copy={copy} onOpen={onOpen} />
      <Footer copy={copy} />

      {t.showWhatsApp && <WhatsAppFab onOpen={onOpen} />}

      <RegisterModal open={openModal === 'register'} onClose={onClose} project={project} copy={copy} />
      <BrochureModal open={openModal === 'brochure'} onClose={onClose} project={project} copy={copy} />
      <ViewingModal open={openModal === 'viewing'} onClose={onClose} project={project} copy={copy} />
      <Lightbox
        items={project.gallery}
        idx={lbIdx}
        onClose={() => setLbIdx(null)}
        onPrev={() => setLbIdx((lbIdx - 1 + project.gallery.length) % project.gallery.length)}
        onNext={() => setLbIdx((lbIdx + 1) % project.gallery.length)}
      />

      <TweaksPanel>
        <TweakSection label="Project" />
        <TweakSelect
          label="Microsite"
          value={t.project}
          options={[
            { value: 'casa-canal', label: 'Casa Canal · $850M' },
            { value: 'casa-ahs', label: 'Casa AHS · $750M' },
            { value: 'one-crescent', label: 'One Crescent · $250M' },
            { value: 'one-canal', label: 'One Canal · $500M' },
          ]}
          onChange={(v) => setTweak('project', v)}
        />

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

        <TweakSection label="Theme" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={['#A57B52','#2F6F73','#5E7377','#7D5D3D']}
          onChange={(v) => setTweak('accent', v)}
        />

        <TweakSection label="Conversion" />
        <TweakToggle label="WhatsApp FAB" value={t.showWhatsApp} onChange={(v) => setTweak('showWhatsApp', v)} />
        <TweakButton onClick={() => onOpen('register')}>Open Register Interest</TweakButton>
        <TweakButton onClick={() => onOpen('brochure')}>Open Brochure Gate</TweakButton>
        <TweakButton onClick={() => onOpen('viewing')}>Open Private Viewing</TweakButton>
      </TweaksPanel>
    </>
  );
}

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