/* Tweaks panel for RelayCRM landing (light theme) */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#6ee7b7",
  "density": "comfortable"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#6ee7b7", // AMN mint
  "#67e8f9", // AMN cyan
  "#c4b5fd", // AMN lilac
  "#f4c074", // AMN amber
  "#a3e635"  // lime
];

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

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--mint', t.accent);
    document.documentElement.style.setProperty('--accent-ink', '#0a0d18');
    document.body.setAttribute('data-density', t.density);

  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakColor
          label="Color"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v)=> setTweak('accent', v)}
        />
      </TweakSection>

      <TweakSection title="Layout">
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            { value: 'comfortable', label: 'Comfort' },
            { value: 'compact', label: 'Compact' }
          ]}
          onChange={(v)=> setTweak('density', v)}
        />
      </TweakSection>

    </TweaksPanel>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);