src/App.tsx

import React, { useState } from 'react';
import { slidesData } from './data/slides';
import { styles } from './styles/appStyles';
import ProgressBar from './components/ProgressBar';
import SlideRenderer from './components/SlideRenderer';

const App = () => {
    const [step, setStep] = useState(0);

    const handleNext = () => setStep(prev => Math.min(prev + 1, slidesData.length - 1));
    const handlePrev = () => setStep(prev => Math.max(0, prev - 1));

    const currentSlideData = slidesData[step];
    
    return (
        <div style={styles.slideWrapper}>
            <div style={styles.card}>
                <ProgressBar current={step} total={slidesData.length} />
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
                    <SlideRenderer slide={currentSlideData} />
                </div>
                <div style={{...styles.buttonContainer, padding: '0.25rem 1rem', borderTop: '1px solid #e0e0e0', backgroundColor: '#fafafa', flexShrink: 0}}>
                    <button onClick={handlePrev} disabled={step === 0} style={{ ...styles.button, ...(step === 0 && styles.buttonDisabled) }}>
                        ← Prev
                    </button>
                    <button onClick={handleNext} disabled={step === slidesData.length - 1} style={{ ...styles.button, ...(step === slidesData.length - 1 && styles.buttonDisabled) }}>
                        Next →
                    </button>
                </div>
            </div>
        </div>
    );
};

export default App;