function SpeedConverter() {
    const [activeTab, setActiveTab] = useState('basic');

    const tabs = [
        { id: 'basic', name: 'Basic STD', icon: '📐' },
        { id: 'trains', name: 'Trains', icon: '🚂' },
        { id: 'races', name: 'Races', icon: '🏃' },
        { id: 'boats', name: 'Boats & Streams', icon: '⛵' },
        { id: 'circular', name: 'Circular Track', icon: '⭕' },
        { id: 'average', name: 'Average Speed', icon: '📊' },
        { id: 'relative', name: 'Relative Speed', icon: '↔️' }
    ];

    return (
        <div className="card">
            <h3 style={{ marginBottom: '16px' }}>🚀 Advanced Speed Calculator</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '16px' }}>
                Comprehensive tool for competitive exam preparation
            </p>

            {/* Tab Navigation */}
            <div style={{ display: 'flex', gap: '8px', marginBottom: '20px', flexWrap: 'wrap', borderBottom: '2px solid var(--border-color)', paddingBottom: '8px' }}>
                {tabs.map(tab => (
                    <button
                        key={tab.id}
                        onClick={() => setActiveTab(tab.id)}
                        style={{
                            padding: '8px 16px',
                            border: 'none',
                            background: activeTab === tab.id ? 'var(--primary)' : 'var(--bg-secondary)',
                            color: activeTab === tab.id ? 'white' : 'var(--text-primary)',
                            borderRadius: '6px',
                            cursor: 'pointer',
                            fontSize: '13px',
                            fontWeight: activeTab === tab.id ? '600' : '400',
                            transition: 'all 0.2s'
                        }}
                    >
                        {tab.icon} {tab.name}
                    </button>
                ))}
            </div>

            {/* Tab Content */}
            {activeTab === 'basic' && <BasicSTDCalculator />}
            {activeTab === 'trains' && <TrainsCalculator />}
            {activeTab === 'races' && <RacesCalculator />}
            {activeTab === 'boats' && <BoatsCalculator />}
            {activeTab === 'circular' && <CircularTrackCalculator />}
            {activeTab === 'average' && <AverageSpeedCalculator />}
            {activeTab === 'relative' && <RelativeSpeedCalculator />}
        </div>
    );
}

// Export to global registry
window.SpeedConverter = SpeedConverter;