// Main app — routing, tweaks, mount.
const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "accent": "red",
  "heroMode": "image",
  "displayFont": "Cormorant Garamond",
  "density": "comfortable",
  "showVipPattern": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = {
  red:    { vip: '#d12127', gold: '#C9A24B', label: 'House Red'   },
  oxblood:{ vip: '#7A1C22', gold: '#C9A24B', label: 'Oxblood'      },
  ink:    { vip: '#1A1718', gold: '#C9A24B', label: 'Ink Mono'    },
  gold:   { vip: '#A78033', gold: '#A78033', label: 'All Gold'    },
};

function App() {
  const [route, setRoute] = useStateA(() => {
    const h = (window.location.hash || '').replace('#', '');
    const initialRoute = h || window.__BYTESGLUE_SHOWCASE_ROUTE || '';
    return ['home','services','vip','gallery','about','reviews','contact','book'].includes(initialRoute) ? initialRoute : 'home';
  });
  const [bookOpen, setBookOpen] = useStateA(false);
  const [bookPick, setBookPick] = useStateA(null);
  const [tweaks, setTweaks] = window.useTweaks(TWEAK_DEFAULS);

  const navigate = (r) => {
    setRoute(r);
    window.location.hash = r;
    window.scrollTo({ top: 0, behavior: 'instant' in document.documentElement.style ? 'instant' : 'auto' });
  };

  useEffectA(() => {
    const onHash = () => {
      const h = (window.location.hash || '').replace('#', '');
      if (h && ['home','services','vip','gallery','about','reviews','contact','book'].includes(h)) setRoute(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Apply tweaks via CSS variables.
  useEffectA(() => {
    const root = document.documentElement;
    const accent = ACCENT_OPTIONS[tweaks.accent] || ACCENT_OPTIONS.red;
    root.style.setProperty('--vip-red', accent.vip);
    root.style.setProperty('--gold',    accent.gold);
    root.style.setProperty('--display-font', `'${tweaks.displayFont}', 'Cormorant Garamond', serif`);
    root.dataset.density = tweaks.density;
    root.dataset.heroMode = tweaks.heroMode;
    root.dataset.pattern = tweaks.showVipPattern ? 'on' : 'off';
  }, [tweaks]);

  const openBook = (preselect) => {
    setBookPick(preselect || null);
    setBookOpen(true);
  };
  const closeBook = () => setBookOpen(false);

  let Page = null;
  if (route === 'home')      Page = <PageHome navigate={navigate} openBook={openBook}/>;
  if (route === 'services')  Page = <PageServices navigate={navigate} openBook={openBook}/>;
  if (route === 'vip')       Page = <PageVip navigate={navigate} openBook={openBook}/>;
  if (route === 'gallery')   Page = <PageGallery navigate={navigate}/>;
  if (route === 'about')     Page = <PageAbout navigate={navigate} openBook={openBook}/>;
  if (route === 'reviews')   Page = <PageReviews navigate={navigate} openBook={openBook}/>;
  if (route === 'contact')   Page = <PageContact navigate={navigate} openBook={openBook}/>;
  if (route === 'book')      Page = <PageBook openBook={openBook}/>;

  const darkHeader = route === 'home' || route === 'vip';

  return (
    <React.Fragment>
      <Header route={route} navigate={navigate} dark={darkHeader}/>
      {Page}
      <Footer navigate={navigate}/>
      <MobileBar navigate={(r) => { if (r === 'book') openBook(); else navigate(r); }}/>
      <BookSheet open={bookOpen} onClose={closeBook} preselect={bookPick}/>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Accent palette" />
        <window.TweakRadio
          label="Brand colour"
          value={tweaks.accent}
          onChange={(v) => setTweaks({ accent: v })}
          options={['red', 'oxblood', 'ink', 'gold']}
        />
        <window.TweakSection label="Hero treatment" />
        <window.TweakRadio
          label="Hero"
          value={tweaks.heroMode}
          onChange={(v) => setTweaks({ heroMode: v })}
          options={['image', 'dark', 'red']}
        />
        <window.TweakSection label="Typography" />
        <window.TweakSelect
          label="Display font"
          value={tweaks.displayFont}
          onChange={(v) => setTweaks({ displayFont: v })}
          options={['Cormorant Garamond', 'Playfair Display', 'Marcellus', 'DM Serif Display']}
        />
        <window.TweakSection label="Layout" />
        <window.TweakRadio
          label="Density"
          value={tweaks.density}
          onChange={(v) => setTweaks({ density: v })}
          options={['cosy', 'comfortable', 'roomy']}
        />
        <window.TweakToggle
          label="VIP pattern overlay"
          value={tweaks.showVipPattern}
          onChange={(v) => setTweaks({ showVipPattern: v })}
        />
      </window.TweaksPanel>
    </React.Fragment>
  );
}

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