// ── App with Tweaks ───────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cyan",
  "grain": true,
  "showCounter": true
}/*EDITMODE-END*/;

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

  const themeClass = (() => {
    switch (tweaks.palette) {
      case 'amber':   return 'themed--amber';
      case 'magenta': return 'themed--magenta';
      case 'lime':    return 'themed--lime';
      default:        return '';
    }
  })();

  return (
    <div className={themeClass}>
      {tweaks.grain && <div className="grain"></div>}
      <Nav />
      <Hero />
      <Evolution />
      <Features />
      <TrimDemo />
      <Spend />
      <Manifesto />
      <CTA />
      <FooterEl />

      <TweaksPanel title="TOKI / Tweaks">
        <TweakSection label="Aura">
          <TweakColor
            label="Accent palette"
            value={tweaks.palette === 'cyan' ? '#7FE3F0' :
                   tweaks.palette === 'amber' ? '#F4B860' :
                   tweaks.palette === 'magenta' ? '#E78AC4' : '#A7E879'}
            options={['#7FE3F0', '#F4B860', '#E78AC4', '#A7E879']}
            onChange={(v) => {
              const map = {'#7FE3F0':'cyan', '#F4B860':'amber', '#E78AC4':'magenta', '#A7E879':'lime'};
              setTweak('palette', map[v] || 'cyan');
            }}
          />
        </TweakSection>
        <TweakSection label="Texture">
          <TweakToggle
            label="Film grain overlay"
            value={tweaks.grain}
            onChange={(v) => setTweak('grain', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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