/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakText, TweakSlider, TweakSelect, TweakRadio, Sky, Direction1, Direction2, CS */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "style": "banner",
  "headline": "Something magical is on the way!",
  "starDensity": 16,
  "mood": "sky"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const Direction = t.style === 'card' ? Direction2 : Direction1;

  return (
    <React.Fragment>
      <Sky density={t.starDensity} mood={t.mood} />
      <Direction headline={t.headline} />

      {/* unobtrusive direction switch (preview only) */}
      <div style={{
        position: 'fixed', top: 16, left: '50%', transform: 'translateX(-50%)', zIndex: 40,
        display: 'flex', gap: 4, padding: 4, borderRadius: 50,
        background: 'rgba(255,255,255,0.55)', backdropFilter: 'blur(6px)',
        border: '1px solid rgba(255,255,255,0.7)', boxShadow: '0 4px 14px rgba(20,40,60,0.18)',
      }}>
        {[['banner', 'Banner'], ['card', 'Card']].map(([v, l]) => (
          <button key={v} onClick={() => setTweak('style', v)} style={{
            fontFamily: CS.display, fontWeight: 600, fontSize: 14, cursor: 'pointer',
            padding: '6px 18px', borderRadius: 50, border: 'none',
            background: t.style === v ? CS.magenta : 'transparent',
            color: t.style === v ? '#fff' : '#5b5470',
          }}>{l}</button>
        ))}
      </div>

      <TweaksPanel>
        <TweakSection label="Content" />
        <TweakText label="Headline" value={t.headline} placeholder="Headline…"
          onChange={(v) => setTweak('headline', v)} />
        <TweakRadio label="Layout" value={t.style} options={['banner', 'card']}
          onChange={(v) => setTweak('style', v)} />
        <TweakSection label="Starry sky" />
        <TweakSelect label="Background mood" value={t.mood}
          options={[
            { value: 'sky', label: 'Sky blue' },
            { value: 'pink', label: 'Pink pop' },
            { value: 'sunset', label: 'Sunset' },
            { value: 'dreamy', label: 'Dreamy gradient' },
          ]}
          onChange={(v) => setTweak('mood', v)} />
        <TweakSlider label="Star density" value={t.starDensity} min={6} max={36} step={1}
          onChange={(v) => setTweak('starDensity', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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