// App entry: routing + tweaks + theme

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "crimson",
  "lang": "en",
  "featuredProperty": "redfestdxb",
  "headlineStyle": "split"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useStateApp(() => {
    const h = (window.location.hash || '').replace('#', '');
    return ['home','work','services','events','about','partner','contact'].includes(h) ? h : 'home';
  });

  const go = (r) => {
    setRoute(r);
    window.location.hash = r;
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  useEffectApp(() => {
    const onHash = () => {
      const h = (window.location.hash || '').replace('#', '');
      if (['home','work','services','events','about','partner','contact'].includes(h)) {
        setRoute(h);
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Apply theme + lang to root
  const themeAttr = t.theme === 'crimson' ? null : t.theme;
  useEffectApp(() => {
    if (themeAttr) document.documentElement.setAttribute('data-theme', themeAttr);
    else document.documentElement.removeAttribute('data-theme');
  }, [themeAttr]);

  const lang = t.lang || 'en';
  const i18n = I18N[lang] || I18N.en;

  useEffectApp(() => {
    document.documentElement.setAttribute('lang', lang);
    document.documentElement.setAttribute('dir', i18n.dir);
  }, [lang, i18n.dir]);

  const sharedProps = {
    t: i18n,
    lang,
    setLang: (l) => setTweak('lang', l),
    go,
    route,
    featured: t.featuredProperty,
    setFeatured: (id) => setTweak('featuredProperty', id),
    headlineStyle: t.headlineStyle,
  };

  return (
    <>
      <Nav {...sharedProps} />

      {route === 'home' && <HomePage {...sharedProps} />}
      {route === 'work' && <WorkPage {...sharedProps} />}
      {route === 'services' && <ServicesPage {...sharedProps} />}
      {route === 'events' && <EventsPage {...sharedProps} />}
      {route === 'about' && <AboutPage {...sharedProps} />}
      {route === 'partner' && <PartnerPage {...sharedProps} />}
      {route === 'contact' && <ContactPage {...sharedProps} />}

      <Footer {...sharedProps} />

      {/* Mobile bottom CTA */}
      <div className="mobile-cta">
        <button onClick={()=>go('contact')} className="btn btn-primary">{i18n.cta.plan}</button>
        <button onClick={()=>go('events')} className="btn btn-ghost">{i18n.cta.whatson}</button>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor label="Accent palette" value={t.theme}
          options={[
            ['#E5114B', '#0B0B0D', '#FFFFFF'],
            ['#5B5BFF', '#0B0B0D', '#22D3EE'],
            ['#F6F6F8', '#0B0B0D', '#9A9AA3'],
            ['#F59E0B', '#0B0B0D', '#E5114B'],
          ]}
          onChange={(v)=>{
            const idx = JSON.stringify(v);
            const map = {
              [JSON.stringify(['#E5114B', '#0B0B0D', '#FFFFFF'])]: 'crimson',
              [JSON.stringify(['#5B5BFF', '#0B0B0D', '#22D3EE'])]: 'electric',
              [JSON.stringify(['#F6F6F8', '#0B0B0D', '#9A9AA3'])]: 'mono',
              [JSON.stringify(['#F59E0B', '#0B0B0D', '#E5114B'])]: 'amber',
            };
            setTweak('theme', map[idx] || 'crimson');
          }} />
        <TweakRadio label="Language" value={t.lang}
          options={['en', 'ar']}
          onChange={(v)=>setTweak('lang', v)} />
        <TweakSection label="Home" />
        <TweakSelect label="Featured property" value={t.featuredProperty}
          options={PROPERTIES.map(p => ({ value: p.id, label: p.name }))}
          onChange={(v)=>setTweak('featuredProperty', v)} />
      </TweaksPanel>
    </>
  );
}

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