/* Tweaks panel — Dexpress
   Lets the user flip color dominance and toggle the hero treatment. */

function DexpressTweaks() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "colorDominance": "red",
    "heroVariant": "truck",
    "showCoords": true
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks live
  React.useEffect(() => {
    const root = document.documentElement;
    if (tweaks.colorDominance === 'blue') {
      root.style.setProperty('--primary-cta', 'var(--blue)');
    } else {
      root.style.setProperty('--primary-cta', 'var(--red)');
    }
  }, [tweaks.colorDominance]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Color dominance">
        <TweakRadio
          value={tweaks.colorDominance}
          onChange={v => setTweak('colorDominance', v)}
          options={[
            { value: 'red', label: 'Red' },
            { value: 'blue', label: 'Blue' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Hero treatment">
        <TweakRadio
          value={tweaks.heroVariant}
          onChange={v => setTweak('heroVariant', v)}
          options={[
            { value: 'truck', label: 'Truck' },
            { value: 'fleet', label: 'Fleet' },
            { value: 'sunset', label: 'Sunset' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Coordinates overlay">
        <TweakToggle value={tweaks.showCoords} onChange={v => setTweak('showCoords', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

window.DexpressTweaks = DexpressTweaks;
window.useDexTweaks = () => {
  // Read live values from CSS to keep things consistent if user has tweaks open
  return {};
};