// tweaks.jsx — Tweaks panel for Barone funnel
// Live-toggles palette, density, and hero copy.

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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "amber",
  "density": "regular",
  "headline_a": "The structural support",
  "headline_b": "behind every upload.",
  "sub": "Send us your raw footage. We re-cut it to the trends moving on TikTok, Reels and Facebook this week, post it on schedule, and tell you exactly what worked — so your brand can stop guessing and start being seen."
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const firstRun = React.useRef(true);

  // Palette + density
  React.useEffect(() => {
    document.documentElement.setAttribute('data-palette', t.palette);
  }, [t.palette]);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-density', t.density);
  }, [t.density]);

  // Hero copy — only rewrite when user actually changes a value.
  // (The HTML already paints the headline editorially on first load.)
  React.useEffect(() => {
    if (firstRun.current) { firstRun.current = false; return; }
    const h = document.getElementById('hero-headline');
    if (h) {
      const a = escapeHtml(t.headline_a || '');
      const b = escapeHtml(t.headline_b || '');
      // Italicize first phrase, dim last word for editorial cadence.
      const bParts = b.trim().split(/\s+/);
      const last = bParts.pop() || '';
      const rest = bParts.join(' ');
      h.innerHTML = `<em>${a}</em><br/>${rest ? rest + ' ' : ''}<span class="light">${last}</span>`;
    }
    const s = document.getElementById('hero-sub');
    if (s) s.textContent = t.sub;
  }, [t.headline_a, t.headline_b, t.sub]);

  return (
    <TweaksPanel>
      <TweakSection label="Look" />
      <TweakRadio
        label="Palette"
        value={t.palette}
        options={['amber', 'oxblood', 'ice']}
        onChange={(v) => setTweak('palette', v)}
      />
      <TweakRadio
        label="Density"
        value={t.density}
        options={['compact', 'regular', 'comfy']}
        onChange={(v) => setTweak('density', v)}
      />
      <TweakSection label="Hero copy" />
      <TweakText
        label="Headline · line 1"
        value={t.headline_a}
        onChange={(v) => setTweak('headline_a', v)}
      />
      <TweakText
        label="Headline · line 2"
        value={t.headline_b}
        onChange={(v) => setTweak('headline_b', v)}
      />
      <TweakText
        label="Subtitle"
        value={t.sub}
        onChange={(v) => setTweak('sub', v)}
      />
    </TweaksPanel>
  );
}

function escapeHtml(s) {
  return String(s).replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

ReactDOM.createRoot(document.getElementById('tweaks-mount')).render(<App />);