/* easyllc.live v2 — Tweaks panel (brand color + typeface) */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brand": "#1B5E42",
  "font": "Inter"
}/*EDITMODE-END*/;

function hexToRgb(hex) {
  hex = hex.replace('#', '');
  if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
  return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16) };
}
function mix(hex, target, amt) {
  const c = hexToRgb(hex);
  const r = Math.round(c.r + (target - c.r) * amt);
  const g = Math.round(c.g + (target - c.g) * amt);
  const b = Math.round(c.b + (target - c.b) * amt);
  return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
}
function rgba(hex, a) { const c = hexToRgb(hex); return `rgba(${c.r}, ${c.g}, ${c.b}, ${a})`; }

const FONT_STACKS = {
  Inter: "'Inter', ui-sans-serif, system-ui, sans-serif",
  Jakarta: "'Plus Jakarta Sans', 'Inter', system-ui, sans-serif"
};

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty('--brand', t.brand);
  root.style.setProperty('--brand-hover', mix(t.brand, 0, 0.16));
  root.style.setProperty('--brand-tint', rgba(t.brand, 0.08));
  root.style.setProperty('--brand-tint2', rgba(t.brand, 0.14));
  root.style.setProperty('--brand-bd', rgba(t.brand, 0.30));
  root.style.setProperty('--font-sans', FONT_STACKS[t.font] || FONT_STACKS.Inter);
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand colour" />
      <TweakColor
        label="Brand"
        value={t.brand}
        options={['#1B5E42', '#0E7C66', '#166534', '#155E75']}
        onChange={(v) => setTweak('brand', v)}
      />
      <TweakSection label="Typeface" />
      <TweakRadio
        label="Font"
        value={t.font}
        options={['Inter', 'Jakarta']}
        onChange={(v) => setTweak('font', v)}
      />
    </TweaksPanel>
  );
}

(function () {
  applyTweaks(TWEAK_DEFAULTS);
  const mount = document.createElement('div');
  mount.id = 'tweaks-root';
  document.body.appendChild(mount);
  ReactDOM.createRoot(mount).render(<TweaksApp />);
})();