// SENSI — main app
const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#A07B4C",
  "noir": "#15130F",
  "ivory": "#F7F3EC",
  "heroImage": "media/project-royal-atlantis-cover.webp",
  "page": "home"
}/*EDITMODE-END*/;

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

  const [page, setPage] = useS(t.page || 'home');
  const [project, setProject] = useS(null);
  const [drawer, setDrawer] = useS(false);
  const [locale, setLocale] = useS('en');
  const [toast, setToast] = useS('');

  // apply tweaks to CSS vars
  useE(() => {
    document.documentElement.style.setProperty('--bronze', t.accent);
    document.documentElement.style.setProperty('--noir', t.noir);
    document.documentElement.style.setProperty('--ivory', t.ivory);
  }, [t.accent, t.noir, t.ivory]);

  // sync hero image
  useE(() => {
    const el = document.querySelector('.hero-media img');
    if (el) el.src = t.heroImage;
  }, [t.heroImage, page]);

  // sync page via tweak
  useE(() => {
    if (t.page && t.page !== page) {
      setPage(t.page);
      window.scrollTo({ top: 0 });
    }
  }, [t.page]);

  // RTL on AR
  useE(() => {
    document.documentElement.dir = locale === 'ar' ? 'rtl' : 'ltr';
    document.documentElement.lang = locale;
  }, [locale]);

  const showToast = (m) => { setToast(m); setTimeout(() => setToast(''), 3200); };

  const openProject = (p) => setProject(p);
  const closeProject = () => setProject(null);
  const openConsult = () => setDrawer(true);
  const closeConsult = () => setDrawer(false);
  const submitConsult = () => {
    setDrawer(false);
    showToast("Enquiry sent — we'll reply within 24 hours.");
  };

  // detect dark hero (only on home page initially)
  const [onDarkHero, setOnDarkHero] = useS(true);
  useE(() => {
    const onScroll = () => setOnDarkHero(page === 'home' && window.scrollY < window.innerHeight - 120);
    if (page === 'home') {
      window.addEventListener('scroll', onScroll, { passive: true });
      onScroll();
    } else {
      setOnDarkHero(false);
    }
    return () => window.removeEventListener('scroll', onScroll);
  }, [page]);

  const { TopBar } = window.SENSI_PAGES_1;
  const { Footer, HomePage, MaterialsPage, BrandsPage, ProjectsPage, StudioPage, ShowroomPage, AboutPage, ProjectModal, ConsultDrawer } = window.SENSI_PAGES_2;
  const { TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSelect } = window;

  return (
    <React.Fragment>
      <TopBar
        page={page}
        setPage={(p) => { setPage(p); setTweak('page', p); }}
        locale={locale}
        setLocale={setLocale}
        openConsult={openConsult}
        onDark={onDarkHero}
      />

      <main key={page}>
        {page === 'home' && <HomePage setPage={(p) => { setPage(p); setTweak('page', p); }} openProject={openProject} openConsult={openConsult} locale={locale} />}
        {page === 'materials' && <MaterialsPage openConsult={openConsult} />}
        {page === 'brands' && <BrandsPage />}
        {page === 'projects' && <ProjectsPage openProject={openProject} />}
        {page === 'studio' && <StudioPage openConsult={openConsult} />}
        {page === 'showroom' && <ShowroomPage openConsult={openConsult} />}
        {page === 'about' && <AboutPage />}
      </main>

      <Footer setPage={(p) => { setPage(p); setTweak('page', p); }} openConsult={openConsult} />

      <ProjectModal project={project} onClose={closeProject} />
      <ConsultDrawer open={drawer} onClose={closeConsult} onSubmit={submitConsult} />

      <div className={`toast ${toast ? 'show' : ''}`}>{toast || '·'}</div>

      <TweaksPanel title="Tweaks · SENSI">
        <TweakSection label="Accent" />
        <TweakColor
          label="Bronze"
          value={t.accent}
          options={['#A07B4C', '#7D5C3A', '#B89A6D', '#3D5A48', '#8C2A1F', '#2A4A6B']}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSection label="Atmosphere" />
        <TweakRadio
          label="Dark"
          value={t.noir}
          options={[
            { value:'#15130F', label:'Noir' },
            { value:'#0E1612', label:'Forest' },
            { value:'#1A1410', label:'Espresso' },
          ]}
          onChange={(v) => setTweak('noir', v)}
        />
        <TweakRadio
          label="Paper"
          value={t.ivory}
          options={[
            { value:'#F7F3EC', label:'Ivory' },
            { value:'#EFEAE0', label:'Linen' },
            { value:'#F4F0E8', label:'Bone' },
          ]}
          onChange={(v) => setTweak('ivory', v)}
        />
        <TweakSection label="Hero" />
        <TweakSelect
          label="Image"
          value={t.heroImage}
          options={[
            { value:'media/project-royal-atlantis-cover.webp', label:'Atlantis The Royal' },
            { value:'media/project-museum-future-facade.webp', label:'Museum of the Future' },
            { value:'media/studio-palm-jumeirah.webp', label:'Palm Jumeirah Villa' },
            { value:'media/project-mall-of-oman.webp', label:'Mall of Oman' },
            { value:'media/studio-downtown-dubai-penthouse.webp', label:'Downtown Penthouse' },
            { value:'media/project-one-zabeel-cover.webp', label:"One Za'abeel" },
          ]}
          onChange={(v) => setTweak('heroImage', v)}
        />
        <TweakSection label="Navigation" />
        <TweakSelect
          label="Page"
          value={page}
          options={[
            { value:'home', label:'Home' },
            { value:'materials', label:'Materials' },
            { value:'brands', label:'Brands' },
            { value:'projects', label:'Projects' },
            { value:'studio', label:'Studio' },
            { value:'showroom', label:'Showroom' },
            { value:'about', label:'About' },
          ]}
          onChange={(v) => { setPage(v); setTweak('page', v); window.scrollTo({top:0}); }}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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