/* global React, ReactDOM, HablaiLanding */
// Entry point para Hablai.html — monta solo la landing, sin canvas de portfolio.
// El canvas con secciones ("04 / landing — La página que vende") queda
// reservado para Hablai App.html y exploración interna.

const { useState, useEffect } = React;

function LandingRoot() {
  const [theme, setTheme] = useState(() => localStorage.getItem("hablai-theme") || "dark");

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("hablai-theme", theme);
  }, [theme]);

  return (
    <>
      <button
        className="theme-toggle"
        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
        aria-label="Cambiar tema"
        title={theme === "dark" ? "Modo claro" : "Modo oscuro"}
      >
        {theme === "dark" ? "☀" : "☾"}
      </button>
      <HablaiLanding />
    </>
  );
}

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