/* App principal: Nav + ensamblado + Tweaks */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "gradient": ["#2f61eb", "#7f53eb"],
  "display": "Geist",
  "headline": "Atendé más clientes, sin trabajar más."
} /*EDITMODE-END*/;

const FONT_STACK = {
  "Clash Display": "'Clash Display', sans-serif",
  "Geist": "'Geist', sans-serif",
  "Bricolage Grotesque": "'Bricolage Grotesque', sans-serif",
  "Space Grotesk": "'Space Grotesk', sans-serif"
};

function Nav() {
  const [scrolled, setScrolled] = useStateApp(false);
  const [openMenu, setOpenMenu] = useStateApp(false);
  useEffectApp(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  // Bloquea el scroll del body mientras el menú está abierto
  useEffectApp(() => {
    document.body.style.overflow = openMenu ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [openMenu]);
  const nav = window.CONTENT.nav;
  return (
    <React.Fragment>
    <nav className={"nav" + (scrolled ? " nav--scrolled" : "")}>
      <div className="container nav__inner">
        <a href="#top" className="logo logo--img"><img src="assets/logo-simplifai.png" alt="SimplifAI" className="brand-logo" style={{ width: "110px", height: "30px" }} /></a>
        <div className={"nav__links" + (openMenu ? " is-open" : "")}>
          {nav.map((n) =>
          <a key={n.href} href={n.href} onClick={() => setOpenMenu(false)}>{n.label}</a>
          )}
          <a href="login.html" className="nav__login" onClick={() => setOpenMenu(false)}>Iniciar sesión</a>
          <a href="#demo" className="btn btn--grad btn--sm nav__cta" onClick={() => setOpenMenu(false)}>Probar gratis</a>
        </div>
        <button className="nav__burger" onClick={() => setOpenMenu(!openMenu)} aria-label="Menú">
          <span></span><span></span><span></span>
        </button>
      </div>
    </nav>
      <div className={"nav__scrim" + (openMenu ? " is-open" : "")} onClick={() => setOpenMenu(false)}></div>
    </React.Fragment>);

}

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

  useEffectApp(() => {
    const root = document.documentElement;
    root.style.setProperty("--grad-a", t.gradient[0]);
    root.style.setProperty("--grad-b", t.gradient[1]);
    root.style.setProperty("--font-display", FONT_STACK[t.display] || FONT_STACK["Clash Display"]);
  }, [t.gradient, t.display]);

  // sincroniza el headline editable con el contenido (resalta lo que va después de la coma)
  window.CONTENT.hero.title = function () {
    const text = t.headline;
    const idx = text.indexOf(",");
    if (idx !== -1) return [text.slice(0, idx + 1), text.slice(idx + 1).trim(), ""];
    return [text, "", ""];
  }();

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero />
        <Logos />
        <Steps />
        <Features />
        <Partner />
        <Pricing />
        <Faq />
        <FinalCta />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Color" />
        <TweakColor
          label="Gradiente"
          value={t.gradient}
          options={[
          ["#2f61eb", "#7f53eb"],
          ["#0ea5e9", "#2f61eb"],
          ["#22c55e", "#0ea5e9"],
          ["#f97316", "#db2777"],
          ["#111827", "#4b5563"]]
          }
          onChange={(v) => setTweak("gradient", v)} />
        
        <TweakSection label="Tipografía" />
        <TweakSelect
          label="Títulos"
          value={t.display}
          options={Object.keys(FONT_STACK)}
          onChange={(v) => setTweak("display", v)} />
        
        <TweakSection label="Copy" />
        <TweakText
          label="Headline"
          value={t.headline}
          onChange={(v) => setTweak("headline", v)} />
        
      </TweaksPanel>
    </React.Fragment>);

}

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