// Tweaks for Landing A — mounts a React panel that drives the static page imperatively.
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "headerAuth": "Register only",
    "accent": "#2A5B8C",
    "aiWidget": "Open"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ["#9D2E2C", "#1F6F6B", "#2A5B8C", "#B7791F"];

function applyTweaks(t) {
    // --- Header auth buttons ---
    const login = document.querySelector('[data-auth="login"]');
    const register = document.querySelector('[data-auth="register"]');
    if (login) login.style.display = (t.headerAuth === "Login + Register") ? "" : "none";
    if (register) register.style.display = (t.headerAuth === "None") ? "none" : "";

    // --- Accent color ---
    const a = t.accent;
    document.documentElement.style.setProperty("--accent", a);
    document.documentElement.style.setProperty("--accent-ink", a);
    // Elements that hardcode the accent inline:
    if (register) { register.style.backgroundColor = a; register.style.borderColor = a; }
    document.querySelectorAll('.nav .links a.active').forEach(el => el.style.color = a);
    document.querySelectorAll('.featured').forEach(el => el.style.background = a);
    document.querySelectorAll('.ai-win .head .av, .bubble.me, .ai-fab').forEach(el => el.style.backgroundColor = a);
    document.querySelectorAll('.ai-win .input .send').forEach(el => el.style.color = a);

    // --- AI assistant widget ---
    const win = document.getElementById('ai-win');
    const fab = document.getElementById('ai-fab');
    if (win && fab) {
        if (t.aiWidget === "Open") { win.style.display = "flex"; fab.style.display = "none"; }
        else if (t.aiWidget === "Collapsed") { win.style.display = "none"; fab.style.display = "grid"; }
        else { win.style.display = "none"; fab.style.display = "none"; }
    }
}

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

    useEffect(() => { applyTweaks(t); }, [t]);

    return (
        <TweaksPanel>
            <TweakSection label="Header" />
            <TweakRadio label="Auth buttons" value={t.headerAuth}
                        options={["Login + Register", "Register only", "None"]}
                        onChange={(v) => setTweak('headerAuth', v)} />

            <TweakSection label="Brand" />
            <TweakColor label="Accent" value={t.accent} options={ACCENT_OPTIONS}
                        onChange={(v) => setTweak('accent', v)} />

            <TweakSection label="AI assistant" />
            <TweakRadio label="Widget" value={t.aiWidget}
                        options={["Open", "Collapsed", "Hidden"]}
                        onChange={(v) => setTweak('aiWidget', v)} />
        </TweaksPanel>
    );
}

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