/* Main App shell */

function App() {
  const [tweaks, setTweaks] = React.useState(window.__TWEAKS__);
  const [editMode, setEditMode] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--green', tweaks.primaryGreen);
    document.documentElement.style.setProperty('--red', tweaks.accentRed);
    document.documentElement.style.setProperty('--green-deep', darken(tweaks.primaryGreen, 0.5));
    document.documentElement.style.setProperty('--green-soft', lighten(tweaks.primaryGreen, 0.93));
    document.documentElement.style.setProperty('--red-soft', lighten(tweaks.accentRed, 0.93));
  }, [tweaks.primaryGreen, tweaks.accentRed]);

  React.useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode')   setEditMode(true);
      if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const applyTweak = (patch) => {
    setTweaks(prev => ({ ...prev, ...patch }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  return (
    <I18nProvider>
      <TopStrip/>
      <Nav/>
      <Hero tweaks={tweaks}/>
      <CarsSection tweaks={tweaks}/>
      <WhyUs/>
      <Reviews/>
      <About/>
      <FAQ/>
      <Footer/>
      <FloatingWhatsapp/>
      {editMode && <TweaksPanel tweaks={tweaks} onChange={applyTweak}/>}
    </I18nProvider>
  );
}

function mix(hex, target, amt) {
  const h = hex.replace('#','');
  const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
  const tr = (target>>16)&255, tg = (target>>8)&255, tb = target&255;
  const nr = Math.round(r + (tr-r)*amt), ng = Math.round(g + (tg-g)*amt), nb = Math.round(b + (tb-b)*amt);
  return `#${nr.toString(16).padStart(2,'0')}${ng.toString(16).padStart(2,'0')}${nb.toString(16).padStart(2,'0')}`;
}
function darken(hex, amt) { return mix(hex, 0x000000, amt); }
function lighten(hex, amt) { return mix(hex, 0xFFFFFF, amt); }

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