/* global React, ReactDOM,
   Nav, Footer, Fab, BookBar, BookingModal,
   HomePage, TreatmentsPage, SignaturePage,
   MembershipsPage, CafePage, GalleryPage, AboutPage, ReviewsPage, ContactPage,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakSelect */

const { useState, useEffect } = React;

function App() {
  // Tweakable defaults
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "accent":     "#C9A56A",
    "surface":    "#F7F2EA",
    "text":       "#2A241F",
    "displayFont":"Cormorant Garamond",
    "lang":       "en"
  }/*EDITMODE-END*/);

  // Apply tweaks to CSS vars / lang
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--champagne', t.accent);
    r.style.setProperty('--ivory', t.surface);
    r.style.setProperty('--espresso', t.text);
    if (t.displayFont) r.style.setProperty('--display', `"${t.displayFont}", "Times New Roman", serif`);
    r.setAttribute('dir', t.lang === 'ar' ? 'rtl' : 'ltr');
    r.setAttribute('lang', t.lang);
  }, [t.accent, t.surface, t.text, t.displayFont, t.lang]);

  // Hash-based page routing
  const seededRoute = window.__BYTESGLUE_SHOWCASE_ROUTE || 'home';
  const initial = (window.location.hash.replace('#','') || seededRoute);
  const [page, setPageState] = useState(initial);
  const setPage = (p) => {
    setPageState(p);
    window.location.hash = p;
    window.scrollTo({top:0, behavior:'instant'});
  };
  useEffect(() => {
    const onHash = () => {
      const next = window.location.hash.replace('#','') || (window.__BYTESGLUE_SHOWCASE_ROUTE || 'home');
      if (next !== page) {
        setPageState(next);
        window.scrollTo({top:0, behavior:'instant'});
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, [page]);

  // Booking modal
  const [bookingOpen, setBookingOpen] = useState(false);
  const openBooking = () => setBookingOpen(true);

  // Lang
  const lang = t.lang;
  const setLang = (l) => setTweak('lang', l);

  const PAGES = {
    home:        () => <HomePage setPage={setPage} openBooking={openBooking} lang={lang} />,
    treatments:  () => <TreatmentsPage openBooking={openBooking} />,
    signature:   () => <SignaturePage openBooking={openBooking} />,
    memberships: () => <MembershipsPage openBooking={openBooking} />,
    cafe:        () => <CafePage />,
    gallery:     () => <GalleryPage />,
    about:       () => <AboutPage />,
    reviews:     () => <ReviewsPage />,
    contact:     () => <ContactPage openBooking={openBooking} />,
  };
  const Page = PAGES[page] || PAGES.home;

  return (
    <>
      <Nav page={page} setPage={setPage} lang={lang} setLang={setLang} openBooking={openBooking} />
      <main>
        <Page />
      </main>
      <Footer setPage={setPage} lang={lang} />
      <Fab />
      <BookBar openBooking={openBooking} lang={lang} />
      <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakColor
            label="Accent (champagne)"
            value={t.accent}
            options={['#C9A56A', '#A8854C', '#B89B7C', '#6B8E7E', '#4F6B4A']}
            onChange={(v) => setTweak('accent', v)}
          />
          <TweakColor
            label="Surface (background)"
            value={t.surface}
            options={['#F7F2EA', '#FBF8F1', '#E7DED2', '#FFFFFF', '#2A241F']}
            onChange={(v) => setTweak('surface', v)}
          />
          <TweakColor
            label="Text (espresso)"
            value={t.text}
            options={['#2A241F', '#1F1A16', '#3D352D', '#4F6B4A']}
            onChange={(v) => setTweak('text', v)}
          />
        </TweakSection>
        <TweakSection label="Typography">
          <TweakSelect
            label="Display font"
            value={t.displayFont}
            options={['Cormorant Garamond', 'Playfair Display', 'EB Garamond', 'Libre Caslon Text', 'DM Serif Display']}
            onChange={(v) => setTweak('displayFont', v)}
          />
        </TweakSection>
        <TweakSection label="Locale">
          <TweakRadio
            label="Language"
            value={t.lang}
            options={[{value:'en', label:'English'}, {value:'ar', label:'AR'}]}
            onChange={(v) => setTweak('lang', v)}
          />
        </TweakSection>
        <TweakSection label="Quick links">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
            {['home','treatments','signature','memberships','cafe','gallery','about','reviews','contact'].map(p => (
              <button key={p}
                onClick={() => setPage(p)}
                style={{
                  padding:'8px 10px', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
                  border:'1px solid ' + (page===p ? 'var(--espresso)' : 'var(--line)'),
                  background: page===p ? 'var(--espresso)' : 'var(--cream-card)',
                  color: page===p ? 'var(--ivory)' : 'var(--espresso)',
                  cursor:'pointer'
                }}>
                {p}
              </button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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