/* The Healthy Way — app + tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "left",
  "scaleBig": false,
  "plansLayout": "feat",
  "accent": "#E1A1A3",
  "marqueeReverse": false,
  "fxIntensity": 1.6,
  "magnetic": true,
  "tilt": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const solo = new URLSearchParams(location.search).get('solo');

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  React.useEffect(() => {
    window.__fxK = t.fxIntensity;
    window.__magnetic = t.magnetic;
    window.__tilt = t.tilt;
    window.dispatchEvent(new Event('scroll'));
  }, [t.fxIntensity, t.magnetic, t.tilt]);

  React.useEffect(() => { initScrollFx(); }, []);

  if (solo) {
    const map = {
      programas: <ProgramsStack />,
      planes: <Plans layout={t.plansLayout} />,
      scrollmarquee: <ScrollMarquee />,
      porque: <Comparison />,
      coaching: <Coaching />,
      sobremi: <Story />,
      contacto: <CTA />,
      marquee: <Marquee />,
      manifesto: <Manifesto />,
      footer: <Footer />,
    };
    React.useEffect(() => { document.body.classList.add('qa-solo'); }, []);
    const y = parseInt(new URLSearchParams(location.search).get('y') || '0', 10);
    return <div style={{ marginTop: -y }}>{map[solo] || <div style={{ padding: 60 }}>?</div>}</div>;
  }

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero layout={t.heroLayout} scaleBig={t.scaleBig} />
        <Marquee reverse={t.marqueeReverse} />
        <Manifesto />
        <ProgramsStack />
        <Plans layout={t.plansLayout} />
        <ScrollMarquee />
        <Comparison />
        <Coaching />
        <Story />
        <CTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Composición" value={t.heroLayout}
          options={['left', 'center', 'split']}
          onChange={(v) => setTweak('heroLayout', v)} />
        <TweakToggle label="Titular gigante" value={t.scaleBig}
          onChange={(v) => setTweak('scaleBig', v)} />

        <TweakSection label="Planes" />
        <TweakRadio label="Grilla" value={t.plansLayout}
          options={['3col', '2col', 'feat']}
          onChange={(v) => setTweak('plansLayout', v)} />

        <TweakSection label="Marca" />
        <TweakColor label="Acento" value={t.accent}
          options={['#E1A1A3', '#CC3366', '#E7C2A0', '#B9D1C9']}
          onChange={(v) => setTweak('accent', v)} />

        <TweakSection label="Movimiento" />
        <TweakSlider label="Intensidad parallax" value={t.fxIntensity}
          min={0.4} max={2.6} step={0.1} unit="×"
          onChange={(v) => setTweak('fxIntensity', v)} />
        <TweakToggle label="Botones magnéticos" value={t.magnetic}
          onChange={(v) => setTweak('magnetic', v)} />
        <TweakToggle label="Tilt en tarjetas" value={t.tilt}
          onChange={(v) => setTweak('tilt', v)} />
        <TweakToggle label="Marquee invertido" value={t.marqueeReverse}
          onChange={(v) => setTweak('marqueeReverse', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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