// App: monta cada componente en su iframe-frame y enlaza Tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryGreen": "#7CAB3E",
  "primaryRed": "#C8253E",
  "baseFontSize": 16,
  "container": "medium"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  if (t.primaryGreen) {
    root.style.setProperty('--c-green', t.primaryGreen);
    // derive deep from primary
    root.style.setProperty('--c-green-deep', t.primaryGreen);
  }
  if (t.primaryRed) {
    root.style.setProperty('--c-red', t.primaryRed);
    root.style.setProperty('--c-red-deep', t.primaryRed);
  }
  if (t.baseFontSize) {
    root.style.setProperty('--base-fs', t.baseFontSize + 'px');
  }
  if (t.container) {
    document.body.dataset.container = t.container;
  }
}

function TweaksApp() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Marca">
        <window.TweakColor
          label="Verde primario"
          value={tweaks.primaryGreen}
          onChange={(v) => setTweak('primaryGreen', v)}
        />
        <window.TweakColor
          label="Rojo primario"
          value={tweaks.primaryRed}
          onChange={(v) => setTweak('primaryRed', v)}
        />
      </window.TweakSection>
      <window.TweakSection title="Tipografía">
        <window.TweakSlider
          label="Tamaño base"
          value={tweaks.baseFontSize}
          min={14} max={20} step={1} unit="px"
          onChange={(v) => setTweak('baseFontSize', v)}
        />
      </window.TweakSection>
      <window.TweakSection title="Layout">
        <window.TweakRadio
          label="Ancho contenedor"
          value={tweaks.container}
          options={[
            { value: 'narrow', label: 'Estrecho' },
            { value: 'medium', label: 'Medio' },
            { value: 'wide',   label: 'Ancho' },
          ]}
          onChange={(v) => setTweak('container', v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

// Mount each component
const mounts = [
  ['mount-nav',       window.CNav],
  ['mount-hero',      window.CHero],
  ['mount-about',     window.CAbout],
  ['mount-director',  window.CDirector],
  ['mount-lines',     window.CLines],
  ['mount-formacion', window.CFormacion],
  ['mount-palabra',   window.CPalabra],
  ['mount-ciencia',   window.CCiencia],
  ['mount-do-seals',  window.CDOSeals],
  ['mount-do',        window.CDO],
  ['mount-quick',     window.CQuick],
  ['mount-news',      window.CNews],
  ['mount-videos',    window.CVideos],
  ['mount-membresias',window.CMembresias],
  ['mount-cta',       window.CCta],
  ['mount-normativa', window.CNormativa],
  ['mount-footer',    window.CFooter],
  ['mount-whatsapp',  window.CWhatsapp],
  ['mount-agent',     window.CAgent],
];

mounts.forEach(([id, Comp]) => {
  const el = document.getElementById(id);
  if (el && Comp) {
    ReactDOM.createRoot(el).render(<Comp />);
  }
});

// Tweaks panel mount
const tweaksEl = document.getElementById('tweaks-mount');
if (tweaksEl) {
  ReactDOM.createRoot(tweaksEl).render(<TweaksApp />);
}