// App — full-bleed Cinematic tutorial + Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "bgTexture": "clean"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { CinematicDirection } = window;

  return (
    <React.Fragment>
      <div style={{
        position: 'fixed', inset: 0,
        background: '#000',
      }}>
        <CinematicDirection bgTexture={t.bgTexture} />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Background" />
        <TweakRadio
          label="Textura"
          value={t.bgTexture}
          options={[
            { value: 'clean', label: 'Clean' },
            { value: 'ghost', label: "LET'S FLY" },
          ]}
          onChange={(v) => setTweak('bgTexture', v)}
        />
        <div style={{
          fontSize: 11, color: 'rgba(41,38,27,.55)', lineHeight: 1.4, marginTop: 4,
        }}>
          Textura ghost tile o wordmark <em>LET'S FLY</em> em outline diagonal, conforme o sistema.
        </div>
      </TweaksPanel>
    </React.Fragment>
  );
}

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