/* Centaurus Charter — app shell */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentMode": "gold",
  "showRouteBanner": true,
  "density": "comfortable"
}/*EDITMODE-END*/;

function App() {
  const [screen, setScreen] = useStateA('home');
  const [param, setParam] = useStateA(null);
  const [lang, setLang] = useStateA('EN');
  const [bookingOpen, setBookingOpen] = useStateA(false);
  const [prefill, setPrefill] = useStateA('');
  const [lightbox, setLightbox] = useStateA(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const goto = (s, p) => {
    setScreen(s); setParam(p || null);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };
  const openBook = (yachtSlug) => { setPrefill(yachtSlug || ''); setBookingOpen(true); };
  const closeBook = () => setBookingOpen(false);

  // Apply accent override
  useEffectA(() => {
    const root = document.documentElement;
    if (t.accentMode === 'amber') {
      root.style.setProperty('--gold', '#E8A93C');
      root.style.setProperty('--gold-soft', '#F0BD5C');
    } else if (t.accentMode === 'rose') {
      root.style.setProperty('--gold', '#E76E55');
      root.style.setProperty('--gold-soft', '#F08A77');
    } else {
      root.style.setProperty('--gold', '#F7CE05');
      root.style.setProperty('--gold-soft', '#F5E812');
    }
  }, [t.accentMode]);

  const isDarkHero = (screen === 'home' || screen === 'yacht' || screen === 'destination' || screen === 'experience');
  const [scrolled, setScrolled] = useStateA(false);
  useEffectA(() => {
    const handler = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', handler);
    handler();
    return () => window.removeEventListener('scroll', handler);
  }, []);

  let body;
  if (screen === 'home') body = <HomeScreen goto={goto} onBook={openBook}/>;
  else if (screen === 'fleet') body = <FleetScreen goto={goto} onBook={openBook}/>;
  else if (screen === 'yacht') body = <YachtScreen slug={param} goto={goto} onBook={openBook} setLightbox={setLightbox}/>;
  else if (screen === 'destinations') body = <DestinationsScreen goto={goto} onBook={openBook}/>;
  else if (screen === 'destination') body = <DestinationDetailScreen slug={param} goto={goto} onBook={openBook}/>;
  else if (screen === 'experiences') body = <ExperiencesScreen goto={goto} onBook={openBook}/>;
  else if (screen === 'experience') body = <ExperienceDetailScreen slug={param} goto={goto} onBook={openBook}/>;
  else if (screen === 'watersports') body = <WatersportsScreen goto={goto} onBook={openBook}/>;
  else if (screen === 'about') body = <AboutScreen/>;
  else if (screen === 'contact') body = <ContactScreen onBook={openBook}/>;
  else body = <HomeScreen goto={goto} onBook={openBook}/>;

  // Decide nav style based on screen + scroll
  const wantDark = isDarkHero && !scrolled;

  return (
    <div data-screen-label={`${screen.toUpperCase()}${param ? ' · ' + param : ''}`}>
      {/* Demo banner */}
      {t.showRouteBanner && (
        <div style={{
          background:'var(--gold)', color:'var(--noir)', textAlign:'center',
          padding:'8px 16px', fontFamily:"'IBM Plex Mono', monospace", fontSize: 11,
          letterSpacing:'0.12em', textTransform:'uppercase', position:'relative', zIndex:70
        }}>
          New · Route ideas now live · 6 curated Dubai cruises  &nbsp;·&nbsp;  Book in minutes on WhatsApp +971 52 490 1269
        </div>
      )}
      <Nav screen={screen} goto={goto} dark={wantDark} lang={lang} setLang={setLang} onBook={() => openBook()}/>
      {body}
      <Footer goto={goto}/>
      <WhatsAppFab/>
      <BookingModal open={bookingOpen} onClose={closeBook} prefillYacht={prefill}/>
      <Lightbox src={lightbox} onClose={() => setLightbox(null)}/>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks · Centaurus">
        <TweakSection label="Accent system"/>
        <TweakRadio
          label="Brand accent"
          value={t.accentMode}
          options={['gold','amber','rose']}
          onChange={(v) => setTweak('accentMode', v)}
        />
        <TweakSection label="Layout"/>
        <TweakToggle
          label="Show 'new route ideas' top banner"
          value={t.showRouteBanner}
          onChange={(v) => setTweak('showRouteBanner', v)}
        />
        <TweakSection label="Locale"/>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.65)', padding: '4px 0 8px', lineHeight: 1.5 }}>
          Currently <strong style={{color:'var(--gold)'}}>{lang}</strong>. Toggle EN/AR/RU/ZH in the navbar.
        </div>
      </TweaksPanel>
    </div>
  );
}

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