// Tweaks panel for Nice Hotel scroll scene
const { useState, useEffect } = React;

function App() {
  const [t, setTweak] = useTweaks({
    turtleCount: 9,
    tempo: 1.0,
    showTracks: true,
    timeOfDay: "auto"
  });

  // Push live values to the page script
  useEffect(() => {
    window.__niceHotelTweaks = t;
    if (window.__niceHotelRebuild) window.__niceHotelRebuild();
    if (window.__niceHotelApplyTime) window.__niceHotelApplyTime(t.timeOfDay);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Schildkröten">
        <TweakSlider
          label="Anzahl"
          value={t.turtleCount}
          min={1} max={20} step={1}
          onChange={(v) => setTweak('turtleCount', v)}
        />
        <TweakSlider
          label="Scroll-Tempo"
          value={t.tempo}
          min={0.4} max={2.0} step={0.1}
          onChange={(v) => setTweak('tempo', v)}
        />
        <TweakToggle
          label="Sand-Spuren"
          value={t.showTracks}
          onChange={(v) => setTweak('showTracks', v)}
        />
      </TweakSection>
      <TweakSection label="Atmosphäre">
        <TweakSelect
          label="Tageszeit"
          value={t.timeOfDay}
          options={[
            { value: 'auto',   label: 'Auto (Anamur-Zeit)' },
            { value: 'dawn',   label: 'Dawn' },
            { value: 'midday', label: 'Midday' },
            { value: 'dusk',   label: 'Dusk' }
          ]}
          onChange={(v) => setTweak('timeOfDay', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);