// Tweaks panel — small set of high-impact knobs.

const App = () => {
  const [tweaks, setTweak] = useTweaks(window.__EHB_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    const hex = tweaks.accent.replace("#", "");
    const r = parseInt(hex.slice(0, 2), 16);
    const g = parseInt(hex.slice(2, 4), 16);
    const b = parseInt(hex.slice(4, 6), 16);
    document.documentElement.style.setProperty("--accent-soft", `rgba(${r},${g},${b},0.09)`);
  }, [tweaks.accent]);

  React.useEffect(() => {
    const h1 = document.querySelector(".hero h1");
    if (!h1) return;
    const text = tweaks.headline;
    const match = text.match(/\*([^*]+)\*/);
    let html;
    if (match) {
      html = text.replace(/\*([^*]+)\*/g, '<em>$1</em>');
    } else {
      html = text;
    }
    h1.innerHTML = html.replace(/\n/g, "<br/>");
  }, [tweaks.headline]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={tweaks.accent}
        onChange={v => setTweak("accent", v)}
      />
      <TweakSection label="Hero" />
      <TweakText
        label="Headline"
        value={tweaks.headline}
        placeholder="Wrap a phrase in *asterisks* to italicize"
        onChange={v => setTweak("headline", v)}
      />
    </TweaksPanel>
  );
};

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