const { useState, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "dark-teal",
  "paper": "warm",
  "heroLayout": "listen-panel"
}/*EDITMODE-END*/;

const PALETTES = {
  "dark-teal":   { val: "183 70% 18%", hover: "183 70% 14%" },
  "deep-pine":   { val: "170 60% 16%", hover: "170 60% 12%" },
  "ink-teal":    { val: "192 45% 14%", hover: "192 45% 10%" },
  "brand-teal":  { val: "175 84% 32%", hover: "175 84% 28%" },
};

const PAPERS = {
  "warm":    { paper: "42 22% 96%", paper2: "40 18% 93%" },
  "cool":    { paper: "210 25% 98%", paper2: "210 22% 94%" },
  "bone":    { paper: "36 14% 94%", paper2: "34 12% 90%" },
};

const App = () => {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [editMode, setEditMode] = useState(false);

  // Edit mode availability
  useEffectApp(() => {
    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);
  }, []);

  // Apply tweak values as CSS vars
  useEffectApp(() => {
    const root = document.documentElement;
    const p = PALETTES[tweaks.primaryColor] || PALETTES["dark-teal"];
    root.style.setProperty("--pp-dark-teal", p.val);
    root.style.setProperty("--pp-dark-teal-hover", p.hover);
    const paper = PAPERS[tweaks.paper] || PAPERS["warm"];
    root.style.setProperty("--pp-paper", paper.paper);
    root.style.setProperty("--pp-paper-2", paper.paper2);
  }, [tweaks]);

  const update = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: patch }, "*");
  };

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Problem />
        <TrustArc />
        <FailureLine />
        <Plays />
        <Handling />
        <FinalCTA />
      </main>
      <Footer />

      <div className={`tweaks${editMode ? " open" : ""}`}>
        <header>
          <span className="title">Tweaks</span>
          <span style={{ fontSize: 11, fontFamily: "var(--font-mono)", color: "hsl(var(--pp-quiet))" }}>
            LIVE
          </span>
        </header>
        <div className="row-t">
          <label>PRIMARY COLOR</label>
          <div className="swatches">
            {Object.entries(PALETTES).map(([k, v]) => (
              <div
                key={k}
                className={`sw${tweaks.primaryColor === k ? " active" : ""}`}
                style={{ background: `hsl(${v.val})` }}
                title={k}
                onClick={() => update({ primaryColor: k })}
              />
            ))}
          </div>
        </div>
        <div className="row-t">
          <label>PAPER</label>
          <div className="choices">
            {Object.keys(PAPERS).map((k) => (
              <button
                key={k}
                className={`choice${tweaks.paper === k ? " active" : ""}`}
                onClick={() => update({ paper: k })}
              >
                {k}
              </button>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

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