/* global React, ReactDOM, Nav, Hero, Shelf, Schedule, Story, Visit, Footer,
   useTweaks, TweaksPanel, TweakSection, TweakRadio */
const { useEffect: useE } = React;

/* Palette options — default is the brief's paper-bag warmth. */
const PALETTES = {
  'Paper bag':   { paper:'#F2E5C4', paper2:'#ECDCB1', paper3:'#E4CF95', ink:'#3C2415', inkSoft:'#7A5237', red:'#C8312C', butter:'#F4C868', cream:'#FBF3DE' },
  'Deeper brown':{ paper:'#EADFC0', paper2:'#E2D4AE', paper3:'#D8C58E', ink:'#2E1A0E', inkSoft:'#6A4428', red:'#BE2F26', butter:'#F0BE55', cream:'#FBF3DE' },
  'Bright butter':{ paper:'#F6E9C6', paper2:'#F1E0B4', paper3:'#EBD295', ink:'#3C2415', inkSoft:'#7A5237', red:'#CF342B', butter:'#FBD173', cream:'#FFF8E6' },
};

const CJK = {
  'Subtle':   { scale: 0.86, opacity: 0.78 },
  'Balanced': { scale: 1.0,  opacity: 1.0 },
  'Bold':     { scale: 1.16, opacity: 1.0 },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Paper bag",
  "chinese": "Balanced"
}/*EDITMODE-END*/;

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

  useE(() => {
    const r = document.documentElement.style;
    const p = PALETTES[t.palette] || PALETTES['Paper bag'];
    r.setProperty('--paper', p.paper);
    r.setProperty('--paper-2', p.paper2);
    r.setProperty('--paper-3', p.paper3);
    r.setProperty('--ink', p.ink);
    r.setProperty('--ink-soft', p.inkSoft);
    r.setProperty('--red', p.red);
    r.setProperty('--butter', p.butter);
    r.setProperty('--cream', p.cream);
    r.setProperty('--line', p.ink + '28');
    const c = CJK[t.chinese] || CJK['Balanced'];
    r.setProperty('--cjk-scale', c.scale);
    r.setProperty('--cjk-opacity', c.opacity);
  }, [t.palette, t.chinese]);

  return (
    <>
      <Nav />
      <Hero />
      <Shelf />
      <Schedule />
      <Story />
      <Visit />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio label="Warmth" value={t.palette} options={Object.keys(PALETTES)} onChange={(v) => setTweak('palette', v)} />
        <TweakSection label="Bilingual" />
        <TweakRadio label="Chinese prominence" value={t.chinese} options={Object.keys(CJK)} onChange={(v) => setTweak('chinese', v)} />
      </TweaksPanel>
    </>
  );
}

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