// LeadForge — Tweaks app. Light, premium-aligned tweaks.

const LF_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#111111",
  "headingWeight": 600,
  "density": "regular",
  "highlightPopular": true,
  "showHeroChat": true
}/*EDITMODE-END*/;

function LeadForgeTweaks() {
  const [t, setTweak] = useTweaks(LF_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    // recompute accent-soft from accent
    root.style.setProperty('--accent-soft', t.accent === '#111111' ? 'rgba(17,17,17,.06)' : hexToRgba(t.accent, 0.08));

    // density
    const pads = {
      compact: 'clamp(60px, 7vw, 100px)',
      regular: 'clamp(80px, 9vw, 140px)',
      comfy:   'clamp(100px, 11vw, 180px)',
    };
    root.style.setProperty('--section-pad', pads[t.density] || pads.regular);

    // heading weight
    document.querySelectorAll('h1, h2, h3').forEach(h => h.style.fontWeight = t.headingWeight);

    // pricing popular highlight
    const pop = document.querySelector('.tier-pop');
    if (pop) {
      pop.style.background = t.highlightPopular ? '' : '#fff';
      pop.style.color = t.highlightPopular ? '' : 'var(--ink)';
      pop.style.borderColor = t.highlightPopular ? '' : 'var(--line)';
      pop.style.boxShadow = t.highlightPopular ? '' : 'none';
      pop.style.transform = t.highlightPopular ? '' : 'none';
      const badge = pop.querySelector('.tier-badge');
      if (badge) badge.style.background = t.highlightPopular ? '#fff' : 'var(--ink)';
      if (badge) badge.style.color = t.highlightPopular ? 'var(--ink)' : '#fff';
    }

    // hero chat card
    const chat = document.querySelector('.float-chat');
    if (chat) chat.style.display = t.showHeroChat ? '' : 'none';
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#111111', '#1d4ed8', '#0e7c66', '#b45309']}
        onChange={v => setTweak('accent', v)}
      />
      <TweakSection label="Typography" />
      <TweakRadio
        label="Heading weight"
        value={t.headingWeight}
        options={[500, 600, 700]}
        onChange={v => setTweak('headingWeight', v)}
      />
      <TweakSection label="Layout" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={['compact', 'regular', 'comfy']}
        onChange={v => setTweak('density', v)}
      />
      <TweakSection label="Features" />
      <TweakToggle
        label="Highlight 'Growth' tier"
        value={t.highlightPopular}
        onChange={v => setTweak('highlightPopular', v)}
      />
      <TweakToggle
        label="Hero chat bubble"
        value={t.showHeroChat}
        onChange={v => setTweak('showHeroChat', v)}
      />
    </TweaksPanel>
  );
}

function hexToRgba(hex, a) {
  const m = hex.replace('#', '');
  const v = m.length === 3 ? m.split('').map(c => c + c).join('') : m;
  const r = parseInt(v.slice(0, 2), 16);
  const g = parseInt(v.slice(2, 4), 16);
  const b = parseInt(v.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
}

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