/* app.jsx — composición portal.
 *
 * Layout (mayo 2026):
 *   1. Header (sobre el hero, transparente; navy translúcido al hacer scroll)
 *   2. Hero diagonal: Legales (oscuro) | Técnicos (claro), medallón central
 *   3. Banda de servicios con íconos (2 columnas × 4 íconos)
 *   4. ThemisX band (asistente IA)
 *   5. About link + footer
 *
 * No se incluyen las dos secciones finales del referente (RIGOR LEGAL / stats)
 * por indicación del cliente.
 */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "green",
  "showThemisX": true,
  "headerScrolled": false
}/*EDITMODE-END*/;

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

  const [themisxOpen, setThemisxOpen] = React.useState(false);
  const [aboutOpen, setAboutOpen] = React.useState(false);

  const goTo = (variant) => {
    window.location.href = variant === "legal" ? "servicios-legales.html" : "servicios-tecnicos.html";
  };

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });

  React.useEffect(() => {
    const lock = themisxOpen || aboutOpen;
    document.body.style.overflow = lock ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [themisxOpen, aboutOpen]);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") {
        if (themisxOpen) setThemisxOpen(false);
        else if (aboutOpen) setAboutOpen(false);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [themisxOpen, aboutOpen]);

  // Toggle a body-class accent so we can swap the secondary accent globally
  React.useEffect(() => {
    document.body.dataset.accent = t.accent;
  }, [t.accent]);

  return (
    <div className="portal">
      <Header onThemisXClick={() => setThemisxOpen(true)} />

      <main className="portal-main">
        <PortalHero onSelect={goTo} />
        <PortalCards onSelect={goTo} />
        {t.showThemisX && <ThemisXBand onClick={() => setThemisxOpen(true)} />}
        <PortalFooter onAboutClick={() => setAboutOpen(true)} />
      </main>

      <ThemisXModal open={themisxOpen} onClose={() => setThemisxOpen(false)} />
      <AboutModal open={aboutOpen} onClose={() => setAboutOpen(false)} />

      <TweaksPanel title="Tweaks · Landing">
        <TweakSection label="Acento secundario">
          <TweakRadio
            label="Tono"
            value={t.accent}
            options={[
              { value: "blue",  label: "Solo azules" },
              { value: "green", label: "Azul + verde" },
            ]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>

        <TweakSection label="Banda ThemisX">
          <TweakToggle
            label="Mostrar invitación"
            value={t.showThemisX}
            onChange={(v) => setTweak("showThemisX", v)}
          />
          <TweakButton label="Abrir chat de ThemisX" onClick={() => setThemisxOpen(true)} />
        </TweakSection>

        <TweakSection label="Navegación rápida">
          <TweakButton label="Ir a Servicios Legales" onClick={() => goTo("legal")} />
          <TweakButton label="Ir a Servicios Técnicos" onClick={() => goTo("tecnico")} secondary={true} />
          <TweakButton label="Abrir 'Conoce HONDULegal'" onClick={() => setAboutOpen(true)} secondary={true} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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