/* =========================================================
   M-FLOW — App + Tweaks
   ========================================================= */
const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "noir",
    "density": "normal",
    "heroVariant": "default",
    "stoneOnManifesto": true,
    "stoneOnContact": true,
    "serifAccent": true,
    "showWaFloat": true
}/*EDITMODE-END*/;

const CONTACT = {
    email: "go@mflowia.cloud",
    phone: "+55 11 0000-0000",
};

function App() {
    const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
    const contactRef = useRefApp(null);
    const servicesRef = useRefApp(null);

    // apply palette + density to root
    useEffectApp(() => {
        document.documentElement.dataset.palette = tweaks.palette;
        document.documentElement.dataset.density = tweaks.density;
        document.documentElement.dataset.serifAccent = tweaks.serifAccent ? "true" : "false";
        // Toggle stone backgrounds via CSS variable
        document.documentElement.style.setProperty("--manifesto-stone-opacity", tweaks.stoneOnManifesto ? "1" : "0");
        document.documentElement.style.setProperty("--contact-stone-opacity", tweaks.stoneOnContact ? "0.32" : "0");
    }, [tweaks]);

    const scrollTo = (id) => () => {
        const el = document.getElementById(id);
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    };

    return (
        <>
            <SiteHeader onContactClick={scrollTo("contato")} />
            <main>
                <Hero
                    variant={tweaks.heroVariant}
                    onContactClick={scrollTo("contato")}
                    onServicesClick={scrollTo("servicos")}
                />
                <Manifesto />
                <Services />
                <Differentials />
                <Stack />
                <Contact phone={CONTACT.phone} email={CONTACT.email} />
            </main>
            <SiteFooter email={CONTACT.email} phone={CONTACT.phone} />
            {tweaks.showWaFloat && <WhatsAppFloat phone={CONTACT.phone} />}

            <TweaksPanel title="Tweaks · M-FLOW">
                <TweakSection label="Paleta">
                    <TweakRadio
                        label="Direção"
                        value={tweaks.palette}
                        onChange={(v) => setTweak("palette", v)}
                        options={[
                            { value: "noir", label: "Noir" },
                            { value: "graphite", label: "Graphite" },
                        ]}
                    />
                    <TweakRadio
                        value={tweaks.palette}
                        onChange={(v) => setTweak("palette", v)}
                        options={[
                            { value: "parchment", label: "Parchment" },
                            { value: "ink", label: "Ink" },
                        ]}
                    />
                </TweakSection>

                <TweakSection label="Hero">
                    <TweakRadio
                        label="Variante"
                        value={tweaks.heroVariant}
                        onChange={(v) => setTweak("heroVariant", v)}
                        options={[
                            { value: "default", label: "Tipográfico" },
                            { value: "split", label: "Com pedra" },
                        ]}
                    />
                </TweakSection>

                <TweakSection label="Imagem de pedra">
                    <TweakToggle
                        label="No manifesto"
                        value={tweaks.stoneOnManifesto}
                        onChange={(v) => setTweak("stoneOnManifesto", v)}
                    />
                    <TweakToggle
                        label="No CTA final"
                        value={tweaks.stoneOnContact}
                        onChange={(v) => setTweak("stoneOnContact", v)}
                    />
                </TweakSection>

                <TweakSection label="Layout">
                    <TweakRadio
                        label="Densidade"
                        value={tweaks.density}
                        onChange={(v) => setTweak("density", v)}
                        options={[
                            { value: "compact", label: "Compacto" },
                            { value: "normal", label: "Normal" },
                            { value: "spacious", label: "Amplo" },
                        ]}
                    />
                    <TweakToggle
                        label="WhatsApp flutuante"
                        value={tweaks.showWaFloat}
                        onChange={(v) => setTweak("showWaFloat", v)}
                    />
                </TweakSection>
            </TweaksPanel>
        </>
    );
}

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