// main.jsx — App shell. Wires Header, hero, sections, footer + Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "green",
    "lang": "es",
    "terminalFlavor": "shell",
    "ticker": true
}/*EDITMODE-END*/;

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

    // Sync accent to <body data-accent>
    React.useEffect(() => {
        document.body.setAttribute('data-accent', t.accent);
    }, [t.accent]);

    function scrollToContact() {
        const el = document.getElementById('contacto');
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    return (
        <div>
            {t.ticker && <DevTicker />}
            <DevHeader lang={t.lang}
                setLang={(l) => setTweak('lang', l)}
                onCta={scrollToContact} />

            <main>
                <DevHero lang={t.lang}
                    flavor={t.terminalFlavor}
                    setFlavor={(f) => setTweak('terminalFlavor', f)} />
                <DevServices lang={t.lang} />
                <DevCases lang={t.lang} />
                <DevAbout lang={t.lang} />
                <DevContact lang={t.lang} />
            </main>

            <DevFooter lang={t.lang} />

            <TweaksPanel title="Tweaks · dev.oropezas">
                <TweakSection label={t.lang === 'es' ? 'Idioma' : 'Language'}>
                    <TweakRadio
                        label={t.lang === 'es' ? 'Idioma' : 'Language'}
                        value={t.lang}
                        options={[{ value: 'es', label: 'Español' }, { value: 'en', label: 'English' }]}
                        onChange={(v) => setTweak('lang', v)}
                    />
                </TweakSection>
                <TweakSection label={t.lang === 'es' ? 'Color de acento' : 'Accent color'}>
                    <TweakRadio
                        label={t.lang === 'es' ? 'Acento' : 'Accent'}
                        value={t.accent}
                        options={[
                            { value: 'green', label: 'Verde' },
                            { value: 'blue',  label: 'Azul' },
                            { value: 'red',   label: 'Rojo' },
                            { value: 'mono',  label: 'Mono' },
                        ]}
                        onChange={(v) => setTweak('accent', v)}
                    />
                </TweakSection>
                <TweakSection label={t.lang === 'es' ? 'Hero · terminal' : 'Hero · terminal'}>
                    <TweakRadio
                        label={t.lang === 'es' ? 'Demo' : 'Demo'}
                        value={t.terminalFlavor}
                        options={[
                            { value: 'shell', label: 'Deploy' },
                            { value: 'build', label: 'Stack' },
                            { value: 'agent', label: 'Agente' },
                        ]}
                        onChange={(v) => setTweak('terminalFlavor', v)}
                    />
                </TweakSection>
                <TweakSection label={t.lang === 'es' ? 'Masthead' : 'Masthead'}>
                    <TweakToggle
                        label={t.lang === 'es' ? 'Ticker (alerta roja)' : 'Ticker (red alert)'}
                        value={t.ticker}
                        onChange={(v) => setTweak('ticker', v)}
                    />
                </TweakSection>
            </TweaksPanel>
        </div>
    );
}

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