/* Appearance, kept on this device: the three switches the mockup's
   Appearance page had. Each one is a data attribute on <html> that the
   foundations (mobile.css) read — no component has to know. */
/* `glass` is the desktop's frosted chrome (a backdrop blur behind the bars).
   Off by default on the phone: tests/mobile/perf.mjs measured it at half the
   frames on a Home scroll and on the player's opening. */
export const settings = $state({ ambience: true, accent: true, motion: true, glass: false, wifiOnly: false });

const KEY = "ss.mobile.prefs";

function apply() {
    const d = document.documentElement.dataset;
    d.material = settings.ambience ? "ambience" : "solid";
    d.accent = settings.accent ? "art" : "brand";
    d.motion = settings.motion ? "on" : "off";
    d.glass = settings.glass ? "blur" : "solid";
}

export function loadPrefs() {
    try {
        const saved = JSON.parse(localStorage.getItem(KEY) || "{}");
        for (const k of Object.keys(settings)) if (typeof saved[k] === "boolean") settings[k] = saved[k];
    } catch { /* a fresh phone */ }
    apply();
}

export function setSetting(k, v) {
    settings[k] = v;
    try { localStorage.setItem(KEY, JSON.stringify({ ...settings })); } catch { /* fine */ }
    apply();
}