/* Tweaks app — exposes the design knobs the user can flip live */

const HERO_IMAGES = [
    { id: 'haussmann', label: 'Haussmann' },
    { id: 'rooftops',  label: 'Toits Paris' },
    { id: 'modern',    label: 'Verre moderne' },
    { id: 'aerial',    label: 'Aérienne' },
    { id: 'hall',      label: 'Hall' },
];

function TweaksApp() {
    const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS || TWEAK_DEFAULTS);

    // Apply tweaks to the DOM
    React.useEffect(() => {
        document.documentElement.setAttribute('data-hero', t.hero || 'haussmann');
        document.documentElement.setAttribute('data-layout', t.layout || 'split');
    }, [t.hero, t.layout]);

    return (
        <TweaksPanel title="Tweaks">
            <TweakSection label="Hero — image de fond">
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
                    {HERO_IMAGES.map(img => (
                        <button
                            key={img.id}
                            onClick={() => setTweak('hero', img.id)}
                            style={{
                                padding: '10px 8px',
                                fontSize: 12,
                                fontWeight: 500,
                                borderRadius: 8,
                                border: '1px solid ' + (t.hero === img.id ? '#6D28D9' : '#e8e5f0'),
                                background: t.hero === img.id ? '#EDE9FE' : '#fff',
                                color: t.hero === img.id ? '#5B21B6' : '#52496E',
                                cursor: 'pointer',
                                transition: 'all .15s',
                            }}
                        >
                            {img.label}
                        </button>
                    ))}
                </div>
            </TweakSection>

            <TweakRadio
                label="Layout du hero"
                value={t.layout}
                onChange={(v) => setTweak('layout', v)}
                options={[
                    { value: 'split',    label: 'Split + mockup' },
                    { value: 'centered', label: 'Centré' },
                ]}
            />
        </TweaksPanel>
    );
}

const tweaksRoot = ReactDOM.createRoot(document.getElementById('tweaks-root'));
tweaksRoot.render(<TweaksApp />);