/* ===== Root app + Tweaks ===== */
const { useEffect:useER } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#1ba1f3","#269de6"],
  "baseTone": "navy",
  "richMotion": true,
  "gridOverlay": true
}/*EDITMODE-END*/;

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

  useER(()=>{
    const r = document.documentElement.style;
    const [a,a2] = t.accent;
    r.setProperty('--accent', a);
    r.setProperty('--accent-2', a2);
    r.setProperty('--accent-glow', a.replace('#','').length===6 ? hexA(a,0.45) : a);
    if(t.baseTone==='black'){
      r.setProperty('--bg','#040508'); r.setProperty('--bg-1','#06070b'); r.setProperty('--bg-2','#0a0c11');
    }else{
      r.setProperty('--bg','#05080f'); r.setProperty('--bg-1','#070c16'); r.setProperty('--bg-2','#0a1120');
    }
    document.body.classList.toggle('no-rich', !t.richMotion);
    document.querySelector('.bg-grid').style.display = t.gridOverlay ? '' : 'none';
  },[t]);

  return (
    <>
      <Nav/>
      <Hero/>
      <Difference/>
      <RatesFramework/>
      <MobMap/>
      <NightWorks/>
      <Services/>
      <Experience/>
      <FinalCTA/>
      <Footer/>
      <Assistant/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent signal" />
        <TweakColor label="Accent" value={t.accent}
          options={[["#1ba1f3","#269de6"],["#22e0d6","#1ba1f3"],["#4d7cff","#269de6"],["#1f8cff","#7aa8ff"]]}
          onChange={(v)=>setTweak('accent',v)} />
        <TweakSection label="Base tone" />
        <TweakRadio label="Background" value={t.baseTone} options={['navy','black']}
          onChange={(v)=>setTweak('baseTone',v)} />
        <TweakSection label="Interface" />
        <TweakToggle label="Rich motion" value={t.richMotion} onChange={(v)=>setTweak('richMotion',v)} />
        <TweakToggle label="Grid overlay" value={t.gridOverlay} onChange={(v)=>setTweak('gridOverlay',v)} />
      </TweaksPanel>
    </>
  );
}

function hexA(hex,a){
  const h=hex.replace('#',''); const n=parseInt(h,16);
  const r=(n>>16)&255,g=(n>>8)&255,b=n&255;
  return `rgba(${r},${g},${b},${a})`;
}

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