// App entry

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "glass": "subtle",
  "grain": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [openSvc, setOpenSvc] = React.useState(null);
  const contactRef = React.useRef(null);

  useReveal();

  React.useEffect(() => {
    document.body.dataset.glass = t.glass;
    document.querySelector('.grain').style.display = t.grain ? '' : 'none';
  }, [t]);

  React.useEffect(() => {
    if (!window.location.hash) return;
    history.scrollRestoration = 'manual';
    const id = window.location.hash.slice(1);
    const go = () => {
      const el = document.getElementById(id);
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 90;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    };
    // double rAF: fires after the browser calculates layout and paints
    requestAnimationFrame(() => requestAnimationFrame(go));
  }, []);

  const scrollContact = () => {
    const el = document.querySelector('section:nth-last-of-type(2)') || document.querySelector('form');
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
  };

  return (
    <div className="wrap">
      <Navbar onContact={scrollContact}/>
      <Hero/>
      <Services onOpen={setOpenSvc}/>
      <StatsBlock/>
      <QuienesSomos/>
      <Conversion/>
      <Footer/>
      <WaFloat/>
      <ServiceModal svc={openSvc} onClose={() => setOpenSvc(null)}/>

      <TweaksPanel>
        <TweakSection label="Acabado"/>
        <TweakRadio
          label="Liquid glass"
          value={t.glass}
          options={['subtle', 'strong', 'vivid']}
          onChange={(v) => setTweak('glass', v)}
        />
        <TweakToggle
          label="Grano de película"
          value={t.grain}
          onChange={(v) => setTweak('grain', v)}
        />
      </TweaksPanel>
    </div>
  );
}

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