// App root — theme persistence, composition, tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#8B5CF6", "#EC4899"],
  "heroGlow": 100
}/*EDITMODE-END*/;

function getInitialTheme() {
  try { const s = localStorage.getItem('backread-theme'); if (s) return s; } catch (e) {}
  return 'dark';
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [theme, setTheme] = React.useState(getInitialTheme());

  useReveal();

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem('backread-theme', theme); } catch (e) {}
  }, [theme]);

  React.useEffect(() => {
    const [a, b] = t.accent;
    const r = document.documentElement.style;
    r.setProperty('--purple', a);
    r.setProperty('--magenta', b);
    r.setProperty('--grad', `linear-gradient(135deg, ${a} 0%, ${b} 100%)`);
    r.setProperty('--grad-rev', `linear-gradient(135deg, ${b} 0%, ${a} 100%)`);
  }, [t.accent]);

  const toggleTheme = () => setTheme(prev => prev === 'dark' ? 'light' : 'dark');

  return (
    <>
      <Nav theme={theme} onToggleTheme={toggleTheme} />
      <Hero glow={t.heroGlow} />
      <PositioningBand />
      <FeatureSections />
      <Pricing />
      <FinalCta />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode" value={theme}
          options={[{ value:'dark', label:'Dark' }, { value:'light', label:'Light' }]}
          onChange={(v) => setTheme(v)}
        />

        <TweakSection label="Accent gradient" />
        <TweakColor
          label="Primary" value={t.accent}
          options={[
            ['#8B5CF6', '#EC4899'],
            ['#6366F1', '#8B5CF6'],
            ['#EC4899', '#F97316'],
            ['#3B82F6', '#22D3EE'],
            ['#10B981', '#06B6D4'],
          ]}
          onChange={(v) => setTweak('accent', v)}
        />

        <TweakSection label="Hero" />
        <TweakSlider
          label="Glow intensity" value={t.heroGlow}
          min={0} max={140} step={5} unit="%"
          onChange={(v) => setTweak('heroGlow', v)}
        />
      </TweaksPanel>
    </>
  );
}

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