// app.jsx — tema, tweaks y composición

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "Togado",
  "palette": "Marino & Oro",
  "typeface": "Lapidaria",
  "iustitia": "statue",
  "density": "Cómodo",
  "heroCopy": "Aspiracional",
  "titles": "Dorado"
}/*EDITMODE-END*/;

const DIRECTIONS = {
  "Mármol":     { dark: false, centered: false },
  "Togado":     { dark: true,  centered: false },
  "Monumental": { dark: false, centered: true },
};

function buildTheme(t) {
  const p = PALETTES[t.palette] || PALETTES["Marino & Oro"];
  const d = DIRECTIONS[t.direction] || DIRECTIONS["Mármol"];
  const ty = TYPE_SETS[t.typeface] || TYPE_SETS["Lapidaria"];
  const den = DENSITY[t.density] || DENSITY["Cómodo"];
  const dark = d.dark;

  const goldTitles = t.titles === "Dorado";
  const vars = {
    "--brand": p.brand, "--brand-soft": p.brandSoft,
    "--accent": p.accent, "--accent-soft": p.accentSoft,
    "--font-display": ty.display, "--font-body": ty.body, "--tracking": ty.tracking,
    "--sec-y": den.sectionY + "px", "--hero-y": den.hero + "px", "--gap": den.gap + "px",
  };

  if (dark) {
    Object.assign(vars, {
      "--bg": p.darkBg, "--bg-elev": p.darkElev, "--bg-alt": p.darkBg, "--bg-sunk": p.darkSunk,
      "--text": p.darkInk, "--text-soft": p.darkInkSoft,
      "--line": "color-mix(in oklab, " + p.accentSoft + " 22%, transparent)",
      "--line-strong": "color-mix(in oklab, " + p.accentSoft + " 40%, transparent)",
      "--btn-bg": p.accent, "--btn-fg": p.darkBg,
      "--on-brand": p.darkInk,
      "--card-shadow": "0 18px 50px -28px rgba(0,0,0,0.7)",
      "--marble": "radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab," + p.accentSoft + " 9%, transparent), transparent 60%)",
    });
  } else {
    Object.assign(vars, {
      "--bg": p.paper, "--bg-elev": p.paperElev, "--bg-alt": p.paper, "--bg-sunk": p.paperSunk,
      "--text": p.ink, "--text-soft": p.inkSoft,
      "--line": "color-mix(in oklab, " + p.brand + " 14%, transparent)",
      "--line-strong": "color-mix(in oklab, " + p.brand + " 26%, transparent)",
      "--btn-bg": p.brand, "--btn-fg": p.paper,
      "--on-brand": p.paper,
      "--card-shadow": "0 20px 48px -30px rgba(20,30,50,0.32)",
      "--marble": "radial-gradient(1100px 560px at 82% -8%, color-mix(in oklab," + p.accent + " 10%, transparent), transparent 60%)",
    });
  }
  // Color de titulares (blanco/crema por defecto, o dorado)
  vars["--title"] = goldTitles
    ? (dark ? p.accentSoft : p.accent)
    : (dark ? p.darkInk : p.ink);
  return { vars, dark, centered: d.centered };
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [simOpen, setSimOpen] = React.useState(false);
  const [loginOpen, setLoginOpen] = React.useState(false);
  const { vars, dark, centered } = buildTheme(t);
  const copy = HERO_COPY[t.heroCopy] || HERO_COPY["Aspiracional"];

  // aplicar variables de tema a :root para que cubra body y panel
  React.useEffect(() => {
    const root = document.documentElement;
    Object.entries(vars).forEach(([k, v]) => root.style.setProperty(k, v));
    root.setAttribute("data-dark", dark ? "1" : "0");
  }, [vars, dark]);

  const start = () => setSimOpen(true);

  return (
    <div className="app">
      <Nav onStart={start} onLogin={() => setLoginOpen(true)} />
      <main>
        <Hero copy={copy} treatment={t.iustitia} vars={vars} dark={dark}
              onStart={start} centered={centered} />
        <Stats />
        <HowItWorks />
        <Subjects onStart={start} />
        <DemoSection onStart={start} />
        <Features />
        <QuestionSources />
        <Pricing onStart={start} />
        <FinalCTA onStart={start} dark={dark} />
      </main>
      <Footer />

      <DemoExam open={simOpen} onClose={() => setSimOpen(false)} />
      <LoginModal open={loginOpen} onClose={() => setLoginOpen(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Dirección de diseño" />
        <TweakRadio label="Dirección" value={t.direction}
          options={["Mármol", "Togado", "Monumental"]}
          onChange={(v) => setTweak("direction", v)} />
        <TweakRadio label="Iustitia" value={t.iustitia}
          options={["symbol", "statue"]}
          onChange={(v) => setTweak("iustitia", v)} />

        <TweakSection label="Identidad visual" />
        <TweakSelect label="Paleta" value={t.palette}
          options={Object.keys(PALETTES)}
          onChange={(v) => setTweak("palette", v)} />
        <TweakRadio label="Tipografía" value={t.typeface}
          options={Object.keys(TYPE_SETS)}
          onChange={(v) => setTweak("typeface", v)} />
        <TweakRadio label="Titulares" value={t.titles}
          options={["Blanco", "Dorado"]}
          onChange={(v) => setTweak("titles", v)} />
        <TweakRadio label="Densidad" value={t.density}
          options={Object.keys(DENSITY)}
          onChange={(v) => setTweak("density", v)} />

        <TweakSection label="Contenido del hero" />
        <TweakRadio label="Tono del titular" value={t.heroCopy}
          options={Object.keys(HERO_COPY)}
          onChange={(v) => setTweak("heroCopy", v)} />
        <TweakButton label="Abrir simulacro" onClick={start}>Probar simulacro</TweakButton>
      </TweaksPanel>
    </div>
  );
}

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