// Tweaks for the Myfab site

function MyfabTweaks() {
  const [t, setTweak] = useTweaks(window.__myfabDefaults);

  // Apply tweaks to document
  React.useEffect(() => {
    document.documentElement.setAttribute('data-palette', t.palette);
    window.__myfabTweaks = t;
    window.dispatchEvent(new CustomEvent('myfab-tweaks', { detail: t }));
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection title="Palette mode">
        <TweakRadio
          value={t.palette}
          onChange={(v) => setTweak('palette', v)}
          options={[
            { value: 'light', label: 'Light' },
            { value: 'midnight', label: 'Midnight' },
            { value: 'cream', label: 'Cream' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Hero layout">
        <TweakRadio
          value={t.heroVariant}
          onChange={(v) => setTweak('heroVariant', v)}
          options={[
            { value: 'a', label: 'A · Editorial' },
            { value: 'b', label: 'B · Monolith' },
            { value: 'c', label: 'C · Manifesto' },
          ]}
        />
      </TweakSection>

      <TweakSection title="House symbol overlay">
        <TweakRadio
          value={t.houseOverlay}
          onChange={(v) => setTweak('houseOverlay', v)}
          options={[
            { value: 'off', label: 'Off' },
            { value: 'soft', label: 'Soft' },
            { value: 'strong', label: 'Strong' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

Object.assign(window, { MyfabTweaks });