/* global React, ReactDOM, DirectionB,
   TweaksPanel, useTweaks, TweakSection, TweakColor */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0B74C4"
}/*EDITMODE-END*/;

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

  const accentStyle = {
    "--color-brand-600": t.accent,
    "--color-brand-700": t.accent
  };

  return (
    <div style={accentStyle}>
      <DirectionB />

      <TweaksPanel title="Tweaks · Bouz Labs">
        <TweakSection title="Color de acento">
          <TweakColor
            label="Acento de marca"
            value={t.accent}
            options={[
              "#0B74C4", // MeteoZen blue
              "#0F1F3A", // Ink navy
              "#22C55E", // Success green
              "#F97316"  // Naranja AEMET
            ]}
            onChange={(v) => setTweak("accent", v)} />

        </TweakSection>
      </TweaksPanel>
    </div>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);