// Main app
const { useState: aS, useEffect: aE } = React;

// Read initial tweaks from the inline JSON config
function getInitialTweaks() {
  try {
    const node = document.getElementById('tweak-config');
    if (!node) return { logoVariant: 'abogados', heroMode: 'dark', accentHue: 'gold' };
    const txt = node.textContent.replace(/\/\*EDITMODE-(BEGIN|END)\*\//g, '').trim();
    return JSON.parse(txt);
  } catch (e) {
    return { logoVariant: 'abogados', heroMode: 'dark', accentHue: 'gold' };
  }
}

function App() {
  const [tweaks, setTweaks] = aS(getInitialTweaks);
  const [editMode, setEditMode] = aS(false);

  // Edit mode protocol
  aE(() => {
    const handler = (ev) => {
      const data = ev.data || {};
      if (data.type === '__activate_edit_mode') setEditMode(true);
      if (data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', handler);
    // Announce availability after listener is live
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', handler);
  }, []);

  // Apply accent colors based on tweak
  aE(() => {
    const root = document.documentElement;
    const accentMap = {
      gold: { main: '#c9a661', light: '#e8cf94', deep: '#a1823f' },
      burgundy: { main: '#8a3b3b', light: '#c27474', deep: '#5c2525' },
      emerald: { main: '#3d7a5c', light: '#6fa887', deep: '#235240' },
    };
    const c = accentMap[tweaks.accentHue] || accentMap.gold;
    root.style.setProperty('--gold', c.main);
    root.style.setProperty('--gold-light', c.light);
    root.style.setProperty('--gold-deep', c.deep);
    root.style.setProperty('--line', `${c.main}40`);
  }, [tweaks.accentHue]);

  return (
    <>
      <Nav logoVariant={tweaks.logoVariant} />
      <Hero logoVariant={tweaks.logoVariant} />
      <PracticeStrip />
      <MissionVision />
      <StatsBand />
      <Services />
      <ValuesSection />
      <Contact />
      <Footer logoVariant={tweaks.logoVariant} />
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} visible={editMode} />
    </>
  );
}

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