// Tweaks for edgevibes.ai landing
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "editorial",
  "layout": "grid",
  "gridBg": "on",
  "headline": "Vibecoded apps from across *Remedy Edge*.",
  "subhead": "A landing pad for the small, sharp tools we ship between meetings — prototyped fast, deployed faster. New experiments land here.",
  "metaStatus": "v0.1 · live",
  "showCardArrow": true,
  "showTags": true,
  "showCount": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.body.dataset.mode = tweaks.mode;
    document.body.dataset.layout = tweaks.layout;
    document.body.dataset.gridBg = tweaks.gridBg;
  }, [tweaks.mode, tweaks.layout, tweaks.gridBg]);

  useEffect(() => {
    const t = document.getElementById("hero-title");
    if (!t) return;
    const html = tweaks.headline
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/\*([^*]+)\*/g, '<em>$1</em>');
    t.innerHTML = html;
  }, [tweaks.headline]);

  useEffect(() => {
    const s = document.getElementById("hero-sub");
    if (s) s.textContent = tweaks.subhead;
  }, [tweaks.subhead]);

  useEffect(() => {
    const m = document.getElementById("meta-status");
    if (m) m.textContent = tweaks.metaStatus;
  }, [tweaks.metaStatus]);

  useEffect(() => {
    document.querySelectorAll(".card-arrow").forEach(a => {
      a.style.display = tweaks.showCardArrow ? "" : "none";
    });
  }, [tweaks.showCardArrow]);

  useEffect(() => {
    document.querySelectorAll(".card-tags").forEach(el => {
      el.style.display = tweaks.showTags ? "" : "none";
    });
  }, [tweaks.showTags]);

  useEffect(() => {
    const c = document.querySelector(".section-head .count");
    if (c) c.style.visibility = tweaks.showCount ? "" : "hidden";
  }, [tweaks.showCount]);

  const { TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakText } = window;

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Look">
        <TweakRadio
          label="Mode"
          value={tweaks.mode}
          onChange={(v) => setTweak("mode", v)}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "cherry", label: "Cherry" },
            { value: "pop", label: "Pop" },
          ]}
        />
        <TweakRadio
          label="Layout"
          value={tweaks.layout}
          onChange={(v) => setTweak("layout", v)}
          options={[
            { value: "grid", label: "Grid" },
            { value: "list", label: "List" },
          ]}
        />
        <TweakToggle
          label="Grid background"
          value={tweaks.gridBg === "on"}
          onChange={(v) => setTweak("gridBg", v ? "on" : "off")}
        />
      </TweakSection>

      <TweakSection label="Copy">
        <TweakText
          label="Headline"
          value={tweaks.headline}
          onChange={(v) => setTweak("headline", v)}
        />
        <TweakText
          label="Subhead"
          value={tweaks.subhead}
          onChange={(v) => setTweak("subhead", v)}
        />
        <TweakText
          label="Status pill"
          value={tweaks.metaStatus}
          onChange={(v) => setTweak("metaStatus", v)}
        />
      </TweakSection>

      <TweakSection label="Card details">
        <TweakToggle
          label="Show arrow"
          value={tweaks.showCardArrow}
          onChange={(v) => setTweak("showCardArrow", v)}
        />
        <TweakToggle
          label="Show tags"
          value={tweaks.showTags}
          onChange={(v) => setTweak("showTags", v)}
        />
        <TweakToggle
          label="Show shipped count"
          value={tweaks.showCount}
          onChange={(v) => setTweak("showCount", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = ReactDOM.createRoot(
  (() => {
    const el = document.createElement("div");
    el.id = "tweaks-root";
    document.body.appendChild(el);
    return el;
  })()
);
root.render(<App />);