// App shell — full-bleed StickerPro prototype + Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "highlighter",
  "font": "zine",
  "hero": "bounce",
  "sound": true,
  "confetti": true,
  "markerTrail": false
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <>
      <StickerPro tweaks={tweaks} setTweak={setTweak}/>

      {/* Tweaks Panel (editor only — hidden on the live site) */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Look"/>
        <TweakSelect label="Color theme" value={tweaks.theme} onChange={(v)=>setTweak('theme', v)}
          options={Object.keys(SP_THEMES)}/>
        <TweakSelect label="Type set" value={tweaks.font} onChange={(v)=>setTweak('font', v)}
          options={Object.keys(SP_FONTS)}/>
        <TweakSection label="Hero"/>
        <TweakRadio label="Animation" value={tweaks.hero} onChange={(v)=>setTweak('hero', v)}
          options={['bounce','wobble','still']}/>
        <TweakSection label="Interactions"/>
        <TweakToggle label="Click sounds" value={tweaks.sound} onChange={(v)=>setTweak('sound', v)}/>
        <TweakToggle label="Confetti bursts" value={tweaks.confetti} onChange={(v)=>setTweak('confetti', v)}/>
        <TweakToggle label="Marker cursor trail" value={tweaks.markerTrail} onChange={(v)=>setTweak('markerTrail', v)}/>
      </TweaksPanel>
    </>
  );
}

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