// Simplified app — only Variation C
const { useState: uApp, useEffect: eApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "es",
  "accent": "#B14A43"
}/*EDITMODE-END*/;

function App() {
  const loadState = () => {
    try { return { ...TWEAK_DEFAULTS, ...JSON.parse(localStorage.getItem("tj_state") || "{}") }; }
    catch { return { ...TWEAK_DEFAULTS }; }
  };
  const [st, setSt] = uApp(loadState);
  const [editMode, setEditMode] = uApp(false);

  const update = (patch) => {
    const next = { ...st, ...patch };
    setSt(next);
    localStorage.setItem("tj_state", JSON.stringify(next));
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
  };

  eApp(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode") setEditMode(true);
      if (e.data?.type === "__deactivate_edit_mode") setEditMode(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return (
    <>
      <window.VariationC lang={st.lang} accent={st.accent} />
      <LangBar st={st} update={update} />
      {editMode && <TweaksPanel st={st} update={update} />}
    </>
  );
}

function LangBar({ st, update }) {
  return (
    <div style={{
      position: "fixed", bottom: 20, left: "50%", transform: "translateX(-50%)",
      zIndex: 100, display: "flex", gap: 2, alignItems: "center",
      background: "rgba(42,35,32,.92)", backdropFilter: "blur(12px)",
      borderRadius: 999, padding: 4, color: "var(--cream)",
      fontFamily: "var(--f-sans)", fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase",
      boxShadow: "0 12px 40px -12px rgba(0,0,0,.4)",
    }}>
      {["es", "en"].map(l => (
        <button key={l} onClick={() => update({ lang: l })}
          style={{
            padding: "8px 14px", borderRadius: 999,
            background: st.lang === l ? "var(--rose)" : "transparent",
            color: st.lang === l ? "var(--cream)" : "rgba(239,230,220,.6)",
            transition: "all .25s", fontWeight: 600, letterSpacing: ".22em",
          }}>{l.toUpperCase()}</button>
      ))}
    </div>
  );
}

function TweaksPanel({ st, update }) {
  const swatches = ["#B14A43", "#8F342E", "#6E2420", "#A8735A", "#3E5A47", "#2A2320"];
  return (
    <div style={{
      position: "fixed", top: 80, right: 20, zIndex: 100,
      width: 260, background: "var(--paper)", border: "1px solid var(--line)",
      borderRadius: 4, padding: 20, color: "var(--ink)",
      fontFamily: "var(--f-sans)", boxShadow: "0 20px 50px -20px rgba(42,35,32,.35)",
    }}>
      <div style={{ fontSize: 11, letterSpacing: ".3em", textTransform: "uppercase", color: "var(--rose)", marginBottom: 4 }}>Tweaks</div>
      <div style={{ fontFamily: "var(--f-display)", fontSize: 20, marginBottom: 20 }}>Ajustes</div>
      <div style={{ fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 8 }}>Color de acento</div>
      <div style={{ display: "flex", gap: 8, marginBottom: 22, flexWrap: "wrap" }}>
        {swatches.map(s => (
          <button key={s} onClick={() => update({ accent: s })}
            style={{
              width: 32, height: 32, borderRadius: "50%", background: s,
              border: st.accent === s ? "2px solid var(--ink)" : "2px solid transparent",
              outline: st.accent === s ? "1px solid var(--ink)" : "none",
              outlineOffset: 2, cursor: "pointer",
            }} />
        ))}
      </div>
      <div style={{ fontSize: 11, letterSpacing: ".2em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 8 }}>Idioma</div>
      <div style={{ display: "flex", gap: 6 }}>
        {["es", "en"].map(l => (
          <button key={l} onClick={() => update({ lang: l })}
            style={{
              flex: 1, padding: "10px", borderRadius: 3,
              background: st.lang === l ? "var(--rose)" : "transparent",
              color: st.lang === l ? "var(--cream)" : "var(--ink)",
              border: "1px solid var(--line-soft)",
              fontSize: 12, letterSpacing: ".2em", textTransform: "uppercase",
            }}>
            {l === "es" ? "Español" : "English"}
          </button>
        ))}
      </div>
    </div>
  );
}

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