// Tweaks panel for DEMON.html — applies live to existing DOM/CSS.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "releaseDate": "07 / 25 / 26",
  "marquee": "In Theaters • July 25, 2026",
  "verse": "Transformation comes from the gradual increase of pressure. The more the weight, the greater the diamond. The mirror of truth doesn't change.",
  "pathHeadline": "You felt it too, didn’t you?",
  "pathSub": "That quiet pressure behind your eyes. That little voice asking whether this life is really the one you chose.",
  "crimson": "#8A0303",
  "amethyst": "#6B21A8",
  "grain": true,
  "snap": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };

  set('tw-date',  t.releaseDate);
  set('tw-meta',  t.marquee);
  set('tw-verse', t.verse);
  set('tw-path-sub', t.pathSub);

  // Headline: preserve <strong> wrapper around the emphasized word.
  // Simple convention: wrap the word "looking" (or first **word**) in strong.
  const head = document.getElementById('tw-path-head');
  if (head) {
    const raw = (t.pathHeadline || '').trim();
    // Allow **word** to mark the emphasized run; otherwise emphasize the
    // word "looking" if it appears.
    let html;
    if (/\*\*[^*]+\*\*/.test(raw)) {
      html = raw.replace(/\*\*([^*]+)\*\*/, '<strong>$1</strong>');
    } else {
      html = raw.replace(/\b(looking|direction|truth|descent|path)\b/i, '<strong>$1</strong>');
    }
    // Insert a soft break before the strong if it's near the middle
    head.innerHTML = html;
  }

  // CSS color vars
  document.documentElement.style.setProperty('--crimson', t.crimson);
  document.documentElement.style.setProperty('--amethyst', t.amethyst);
  // Amethyst variant for the gradient
  const dark = mixHex(t.amethyst, '#000000', 0.55);
  document.documentElement.style.setProperty('--amethyst-2', dark);

  // Grain on/off
  document.body.style.setProperty('--grain-opacity', t.grain ? '.08' : '0');
  if (!document.getElementById('tw-grain-style')) {
    const s = document.createElement('style');
    s.id = 'tw-grain-style';
    s.textContent = 'body::after{opacity:var(--grain-opacity,.08) !important}';
    document.head.appendChild(s);
  }

  // Scroll-snap on/off
  const shell = document.getElementById('shell');
  if (shell) shell.style.scrollSnapType = t.snap ? 'y mandatory' : 'none';
}

// Hex mixer for amethyst-2 derivation
function mixHex(a, b, amt) {
  const p = (h) => {
    const x = h.replace('#','');
    const v = x.length === 3 ? x.split('').map(c=>c+c).join('') : x;
    return [parseInt(v.slice(0,2),16), parseInt(v.slice(2,4),16), parseInt(v.slice(4,6),16)];
  };
  const [r1,g1,b1] = p(a), [r2,g2,b2] = p(b);
  const r = Math.round(r1*(1-amt)+r2*amt);
  const g = Math.round(g1*(1-amt)+g2*amt);
  const bl = Math.round(b1*(1-amt)+b2*amt);
  return '#' + [r,g,bl].map(n => n.toString(16).padStart(2,'0')).join('');
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="D\E/M\O/N Tweaks">

      <TweakSection label="Release" />
      <TweakText  label="Date"       value={t.releaseDate}
                  onChange={(v) => setTweak('releaseDate', v)} />
      <TweakText  label="Marquee"    value={t.marquee}
                  onChange={(v) => setTweak('marquee', v)} />

      <TweakSection label="Copy" />
      <TweakText  label="Path headline" value={t.pathHeadline}
                  onChange={(v) => setTweak('pathHeadline', v)} />
      <TweakText  label="Path subline"  value={t.pathSub}
                  onChange={(v) => setTweak('pathSub', v)} />

      <TweakSection label="Palette" />
      <TweakColor  label="Crimson"  value={t.crimson}
                   options={['#8A0303', '#B91313', '#5A0202', '#D6A100', '#E8E4DC']}
                   onChange={(v) => setTweak('crimson', v)} />
      <TweakColor  label="Amethyst" value={t.amethyst}
                   options={['#6B21A8', '#3B1574', '#A23BD9', '#1B5E20', '#0E3A66']}
                   onChange={(v) => setTweak('amethyst', v)} />

      <TweakSection label="Effects" />
      <TweakToggle label="Film grain"   value={t.grain} onChange={(v) => setTweak('grain', v)} />
      <TweakToggle label="Scroll snap"  value={t.snap}  onChange={(v) => setTweak('snap',  v)} />

    </TweaksPanel>
  );
}

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