// ───────────────────────────────────────────────────────────
// App — ensamblado + panel de Tweaks
// ───────────────────────────────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "pasosFormat": "timeline",
  "titleWeight": "extrabold",
  "density": "amplio",
  "motion": "on"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.dataset.tw = t.titleWeight;
    r.dataset.density = t.density;
    r.dataset.motion = t.motion;
  }, [t.titleWeight, t.density, t.motion]);

  return (
    <>
      <ScrollProgress />
      <Header />
      <main>
        <Hero />
        <Adiccion />
        <Modelo pasosFormat={t.pasosFormat} />
        <Tratamientos />
        <Enfoque />
        <Equipo />
        <Familias />
        <Testimonios />
        <Recursos />
        <Contacto />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Los 12 Pasos" />
        <TweakRadio
          label="Formato"
          value={t.pasosFormat}
          options={[
            { value: "timeline", label: "Sendero" },
            { value: "accordion", label: "Acordeón" },
            { value: "cards", label: "Tarjetas" },
          ]}
          onChange={(v) => setTweak("pasosFormat", v)}
        />

        <TweakSection label="Tipografía" />
        <TweakRadio
          label="Peso de títulos"
          value={t.titleWeight}
          options={[
            { value: "extrabold", label: "ExtraBold" },
            { value: "black", label: "Black" },
          ]}
          onChange={(v) => setTweak("titleWeight", v)}
        />

        <TweakSection label="Ritmo" />
        <TweakRadio
          label="Densidad"
          value={t.density}
          options={[
            { value: "amplio", label: "Amplio" },
            { value: "compacto", label: "Compacto" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakRadio
          label="Animaciones"
          value={t.motion}
          options={[
            { value: "on", label: "Sutiles" },
            { value: "off", label: "Sin" },
          ]}
          onChange={(v) => setTweak("motion", v)}
        />
      </TweaksPanel>
    </>
  );
}

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