// Root app — Zine variation as the chosen direction, with accent-color tweak.

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

const ACCENT_OPTIONS = [
  '#b0512c', // 鉄錆 · rust
  '#3a5a4a', // 苔色 · moss
  '#5d4a8a', // 江戸紫 · indigo violet
  '#a88a3b', // 黄土 · ochre
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <VariationZine accent={t.accent} />
      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakColor
          label="アクセント"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('accent', v)}
        />
        <div style={{
          fontSize: 10.5, color: 'rgba(41,38,27,0.55)', lineHeight: 1.55,
          marginTop: 4, fontStyle: 'italic',
        }}>
          鉄錆・苔・江戸紫・黄土
        </div>
      </TweaksPanel>
    </>
  );
}

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