// ── JINS · CAPITAL — shared tweaks app ────────────────────────────────
// Reads TWEAK_DEFAULTS from window (set by host page); persists via
// useTweaks (from tweaks-panel.jsx).

const PALETTES = {
  logo:     { label: 'Logo · Forest + Gold',   bg: '#f3eee3', ink: '#1d2a26', accent: '#b8893d' },
  midnight: { label: 'Midnight · Gold + Navy', bg: '#f7f3ec', ink: '#0f1726', accent: '#c69a52' },
  bone:     { label: 'Bone · Bronze + Ink',    bg: '#efece4', ink: '#221f1a', accent: '#9a6b34' },
  noir:     { label: 'Noir · Inverted',        bg: '#15181a', ink: '#f0ece2', accent: '#d4a35a' },
};

const FONTS = {
  editorial: { label: 'Editorial · Cormorant + Inter',
    display: '"Cormorant Garamond", serif', body: '"Inter", sans-serif' },
  modern:    { label: 'Modern · DM Serif + Grotesk',
    display: '"DM Serif Display", serif', body: '"Space Grotesk", sans-serif' },
};

function JinsTweaksApp() {
  const defaults = window.TWEAK_DEFAULTS || {
    palette: 'bone', typography: 'editorial',
    parallaxIntensity: 1, parallaxEnabled: true,
    monogram: true, floatingWords: true, gridLayer: false,
    network: false, tree: true,
  };
  const [t, setTweak] = useTweaks(defaults);
  const p = PALETTES[t.palette] || PALETTES.logo;
  const f = FONTS[t.typography] || FONTS.editorial;

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--bg', p.bg);
    r.setProperty('--ink', p.ink);
    r.setProperty('--accent', p.accent);
    const ink = p.ink.replace('#', '');
    const rr = parseInt(ink.slice(0,2),16), gg = parseInt(ink.slice(2,4),16), bb = parseInt(ink.slice(4,6),16);
    r.setProperty('--ink-soft', `rgba(${rr},${gg},${bb},.55)`);
    r.setProperty('--ink-faint', `rgba(${rr},${gg},${bb},.12)`);
    r.setProperty('--display', f.display);
    r.setProperty('--body', f.body);
  }, [t.palette, t.typography]);

  React.useEffect(() => {
    window.__pxIntensity = t.parallaxIntensity;
    window.__pxEnabled = t.parallaxEnabled;
    window.__pxRefresh && window.__pxRefresh();
  }, [t.parallaxIntensity, t.parallaxEnabled]);

  React.useEffect(() => {
    const m = document.querySelector('.px-monogram'); if (m) m.style.display = t.monogram ? '' : 'none';
    const g = document.querySelector('.px-grid');     if (g) g.style.display = t.gridLayer ? '' : 'none';
    document.querySelectorAll('.px-word').forEach(el => el.style.display = t.floatingWords ? '' : 'none');
    document.querySelectorAll('.px-network').forEach(el => el.style.display = t.network ? '' : 'none');
    document.querySelectorAll('.px-tree').forEach(el => el.style.display = t.tree ? '' : 'none');
  }, [t.monogram, t.gridLayer, t.floatingWords, t.network, t.tree]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Parallax" />
      <TweakToggle label="Enabled" value={t.parallaxEnabled}
        onChange={(v) => setTweak('parallaxEnabled', v)} />
      <TweakSlider label="Intensity" value={t.parallaxIntensity}
        min={0} max={2.5} step={0.05} unit="×"
        onChange={(v) => setTweak('parallaxIntensity', v)} />

      <TweakSection label="Background layers" />
      <TweakToggle label="Tree (logo)" value={t.tree}
        onChange={(v) => setTweak('tree', v)} />
      <TweakToggle label="Connection network" value={t.network}
        onChange={(v) => setTweak('network', v)} />
      <TweakToggle label="Giant J monogram" value={t.monogram}
        onChange={(v) => setTweak('monogram', v)} />
      <TweakToggle label="Grid lines" value={t.gridLayer}
        onChange={(v) => setTweak('gridLayer', v)} />
      <TweakToggle label="Drifting words" value={t.floatingWords}
        onChange={(v) => setTweak('floatingWords', v)} />

      <TweakSection label="Palette" />
      <TweakSelect label="Color" value={t.palette}
        options={Object.entries(PALETTES).map(([k, v]) => ({ value: k, label: v.label }))}
        onChange={(v) => setTweak('palette', v)} />
      <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
        {Object.entries(PALETTES).map(([k, pp]) => (
          <div key={k} onClick={() => setTweak('palette', k)}
            style={{
              flex: 1, cursor: 'default',
              border: t.palette === k ? '1.5px solid #29261b' : '1px solid rgba(0,0,0,.15)',
              borderRadius: 6, padding: 6, background: pp.bg,
              display: 'flex', flexDirection: 'column', gap: 4,
            }}>
            <div style={{ display: 'flex', gap: 3 }}>
              <div style={{ flex: 1, height: 14, background: pp.ink, borderRadius: 2 }} />
              <div style={{ flex: 1, height: 14, background: pp.accent, borderRadius: 2 }} />
            </div>
            <div style={{ font: '9px ui-monospace, monospace', color: pp.ink, textAlign: 'center' }}>
              {pp.label.split(' · ')[0]}
            </div>
          </div>
        ))}
      </div>

      <TweakSection label="Typography" />
      <TweakRadio label="Pairing" value={t.typography}
        options={['editorial', 'modern']}
        onChange={(v) => setTweak('typography', v)} />
    </TweaksPanel>
  );
}

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