/* Wired CIO marketing site — Tweaks panel UI (mounts into #tweaks-root) */
(function () {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "dark": false,
    "accent2": "green",
    "headFont": "rubik",
    "bodyFont": "worksans",
    "weight": "black",
    "radius": "rounded",
    "transparentHeader": false,
    "logoSize": "default"
  }/*EDITMODE-END*/;

  const A2 = window.WCTweaks.ACCENT2;
  const A2_KEYS = ['green', 'amber', 'coral', 'azure', 'violet'];

  function WCTweaksPanel() {
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    React.useEffect(() => { window.WCTweaks.apply(t); }, [t]);

    return (
      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Scheme" value={t.dark ? 'dark' : 'light'}
          options={['light', 'dark']}
          onChange={(v) => setTweak('dark', v === 'dark')} />
        <TweakColor label="Accent" value={A2[t.accent2].sw}
          options={A2_KEYS.map((k) => A2[k].sw)}
          onChange={(v) => {
            const key = A2_KEYS.find((k) => JSON.stringify(A2[k].sw) === JSON.stringify(v)) || 'green';
            setTweak('accent2', key);
          }} />

        <TweakSection label="Header" />
        <TweakToggle label="Transparent / overlay" value={t.transparentHeader}
          onChange={(v) => setTweak('transparentHeader', v)} />
        <TweakRadio label="Logo size" value={t.logoSize}
          options={[{ value: 'default', label: 'Default' }, { value: 'large', label: 'Large' }, { value: 'xl', label: 'XL' }]}
          onChange={(v) => setTweak('logoSize', v)} />

        <TweakSection label="Type" />
        <TweakRadio label="Headings" value={t.headFont}
          options={[{ value: 'rubik', label: 'Rubik' }, { value: 'grotesk', label: 'Grotesk' }, { value: 'serif', label: 'Serif' }]}
          onChange={(v) => setTweak('headFont', v)} />
        <TweakRadio label="Body" value={t.bodyFont}
          options={[{ value: 'worksans', label: 'Sans' }, { value: 'plex', label: 'Plex' }, { value: 'serif', label: 'Serif' }]}
          onChange={(v) => setTweak('bodyFont', v)} />
        <TweakRadio label="Weight" value={t.weight}
          options={[{ value: 'light', label: 'Light' }, { value: 'medium', label: 'Medium' }, { value: 'black', label: 'Black' }]}
          onChange={(v) => setTweak('weight', v)} />

        <TweakSection label="Shape" />
        <TweakRadio label="Corners" value={t.radius}
          options={[{ value: 'rounded', label: 'Rounded' }, { value: 'soft', label: 'Soft' }, { value: 'sharp', label: 'Sharp' }]}
          onChange={(v) => setTweak('radius', v)} />
      </TweaksPanel>
    );
  }

  window.WCTweaksPanel = WCTweaksPanel;
})();