// Gulf Oasis — top-level app, routing & tweaks

const GO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "sand",
  "displayFont": "sans",
  "heroLayout": "split",
  "heroPhoto": "mixed",
  "longStayFraming": "rate",
  "langSwitcher": false,
  "lang": "en"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(GO_TWEAK_DEFAULTS);
  const [route, setRoute] = useState(window.__BYTESGLUE_SHOWCASE_ROUTE || 'home');
  const [bookOpen, setBookOpen] = useState(false);

  // Apply palette + display font to root
  useEffect(() => {
    document.documentElement.setAttribute('data-palette', t.palette);
    document.documentElement.setAttribute('data-lang', t.lang);
    document.documentElement.setAttribute('data-display', t.displayFont || 'sans');
  }, [t.palette, t.lang, t.displayFont]);

  // Surface route setter globally so deep cards can navigate
  useEffect(() => { window.__route = setRoute; }, []);

  // Scroll to top on route change
  useEffect(() => { window.scrollTo({ top: 0, behavior: 'auto' }); }, [route]);

  const openBook = () => setRoute('apartments');

  return (
    <div data-screen-label={route === 'home' ? '01 Home' : route === 'apartments' ? '02 Apartments' : '03 Long-Stay'}>
      <Navbar route={route} setRoute={setRoute}
              lang={t.lang} setLang={(l) => setTweak('lang', l)}
              langSwitcherEnabled={t.langSwitcher}
              openBook={openBook}/>
      {route === 'home'       && <Home tweaks={t} openBook={openBook}/>}
      {route === 'apartments' && <Apartments/>}
      {route === 'long-stay'  && <LongStay/>}
      <Footer/>
      <WhatsAppFab/>

      <TweaksPanel>
        <TweakSection label="Typography"/>
        <TweakSelect label="Display font" value={t.displayFont || 'sans'}
                     options={[
                       { value: 'sans',       label: 'DM Sans (default)' },
                       { value: 'jakarta',    label: 'Plus Jakarta Sans' },
                       { value: 'instrument', label: 'Instrument Serif' },
                       { value: 'fraunces',   label: 'Fraunces (brief)' },
                     ]}
                     onChange={(v) => setTweak('displayFont', v)}/>

        <TweakSection label="Palette"/>
        <TweakColor label="Palette" value={t.palette === 'sand' ? '#1F5B6B' : t.palette === 'cool' ? '#2E4E6E' : '#8C3A1F'}
                    options={['#1F5B6B', '#2E4E6E', '#8C3A1F']}
                    onChange={(v) => setTweak('palette', v === '#1F5B6B' ? 'sand' : v === '#2E4E6E' ? 'cool' : 'terracotta')}/>
        <TweakRadio label="Tone" value={t.palette}
                    options={['sand','cool','terracotta']}
                    onChange={(v) => setTweak('palette', v)}/>

        <TweakSection label="Hero layout"/>
        <TweakSelect label="Layout" value={t.heroLayout}
                     options={[
                       { value: 'split',     label: 'Split: copy + widget' },
                       { value: 'fullbleed', label: 'Full-bleed photo overlay' },
                       { value: 'editorial', label: 'Editorial stacked' },
                     ]}
                     onChange={(v) => setTweak('heroLayout', v)}/>
        {t.heroLayout === 'split' && (
          <TweakRadio label="Strip" value={t.heroPhoto}
                      options={['mixed','photo']}
                      onChange={(v) => setTweak('heroPhoto', v)}/>
        )}

        <TweakSection label="Long-stay block framing"/>
        <TweakRadio label="Framing" value={t.longStayFraming}
                    options={['rate','testimonial','checklist']}
                    onChange={(v) => setTweak('longStayFraming', v)}/>

        <TweakSection label="Language switcher"/>
        <TweakToggle label="Show EN / AR / RU"
                     value={t.langSwitcher}
                     onChange={(v) => setTweak('langSwitcher', v)}/>
        {t.langSwitcher && (
          <div className="mono text-[10px] tracking-[0.14em] uppercase ink-soft mt-1 px-0.5" style={{ color: 'rgba(41,38,27,.55)' }}>
            Brief warns: only ship if translations are real.
          </div>
        )}

        <TweakSection label="Jump to"/>
        <TweakButton label="Home" onClick={() => setRoute('home')}/>
        <TweakButton label="Apartments" onClick={() => setRoute('apartments')}/>
        <TweakButton label="Long-Stay" onClick={() => setRoute('long-stay')}/>
      </TweaksPanel>
    </div>
  );
}

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