// Main app — wires everything together with Tweaks

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroSize": 280,
  "cursorStyle": "ring",
  "waveOn": true,
  "servicesLayout": "list",
  "grainOpacity": 0.08,
  "accent": "#F05503"
}/*EDITMODE-END*/;

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

  // Apply tweak side-effects to CSS variables / cursor classes
  useEffectA(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--grain-opacity', String(t.grainOpacity));

    // cursor style
    const ring = document.querySelector('.cursor-ring');
    const dot = document.querySelector('.cursor-dot');
    if (!ring || !dot) return;
    ring.classList.remove('cs-thin', 'cs-bold', 'cs-block');
    if (t.cursorStyle === 'bold') ring.classList.add('cs-bold');
    if (t.cursorStyle === 'block') ring.classList.add('cs-block');
  }, [t.accent, t.grainOpacity, t.cursorStyle]);

  return (
    <>
      <Nav />
      <Hero heroSize={t.heroSize} waveOn={t.waveOn} />
      <Manifesto />
      <Servicos layout={t.servicesLayout} />
      <Trabalhos />
      <ClientesMarquee />
      <Sobre />
      <CTA />
      <Footer />
      <WhatsappFab />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakSlider label="Tamanho do STUND" value={t.heroSize} min={140} max={420} step={10} unit="px"
                     onChange={(v) => setTweak('heroSize', v)} />
        <TweakToggle label="Wave + RGB split" value={t.waveOn}
                     onChange={(v) => setTweak('waveOn', v)} />

        <TweakSection label="Estilo" />
        <TweakColor label="Accent" value={t.accent}
                    onChange={(v) => setTweak('accent', v)} />
        <TweakSlider label="Grain / noise" value={t.grainOpacity} min={0} max={0.25} step={0.01} unit=""
                     onChange={(v) => setTweak('grainOpacity', v)} />

        <TweakSection label="Interação" />
        <TweakRadio label="Cursor" value={t.cursorStyle}
                    options={['ring', 'bold', 'block']}
                    onChange={(v) => setTweak('cursorStyle', v)} />
        <TweakRadio label="Layout serviços" value={t.servicesLayout}
                    options={['list', 'grid']}
                    onChange={(v) => setTweak('servicesLayout', v)} />
      </TweaksPanel>

      <style>{`
        .cursor-ring.cs-bold { border-width: 2px; mix-blend-mode: normal; border-color: var(--accent); }
        .cursor-ring.cs-block { border-radius: 0; mix-blend-mode: normal; border-color: var(--accent); background: rgba(240,85,3,0.1); }
      `}</style>
    </>
  );
}

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