function RelativeSpeedCalculator() {
    const [direction, setDirection] = useState('opposite');
    const [speed1, setSpeed1] = useState('');
    const [speed2, setSpeed2] = useState('');
    const [distance, setDistance] = useState('');
    const [result, setResult] = useState(null);

    const calculate = () => {
        const s1 = parseFloat(speed1);
        const s2 = parseFloat(speed2);
        const d = parseFloat(distance);

        let calculated = {};

        if (direction === 'opposite') {
            const relativeSpeed = s1 + s2;
            const timeToMeet = d / relativeSpeed;

            calculated = {
                relativeSpeed: relativeSpeed.toFixed(2),
                timeToMeet: timeToMeet.toFixed(2),
                timeInMinutes: (timeToMeet * 60).toFixed(2),
                formula: 'Relative Speed = Speed₁ + Speed₂ (opposite direction)',
                calculation: `Relative Speed = ${s1} + ${s2} = ${relativeSpeed} km/h\nTime to meet = ${d} / ${relativeSpeed} = ${timeToMeet.toFixed(2)} hours`,
                type: 'Speed of Approach'
            };
        } else {
            const relativeSpeed = Math.abs(s1 - s2);
            const timeToMeet = d / relativeSpeed;

            calculated = {
                relativeSpeed: relativeSpeed.toFixed(2),
                timeToMeet: timeToMeet.toFixed(2),
                timeInMinutes: (timeToMeet * 60).toFixed(2),
                formula: 'Relative Speed = |Speed₁ - Speed₂| (same direction)',
                calculation: `Relative Speed = |${s1} - ${s2}| = ${relativeSpeed} km/h\nTime to meet = ${d} / ${relativeSpeed} = ${timeToMeet.toFixed(2)} hours`,
                type: 'Speed of Separation'
            };
        }

        setResult(calculated);
    };

    return (
        <div>
            <div style={{ background: 'var(--bg-tertiary)', padding: '12px', borderRadius: '8px', marginBottom: '16px', fontSize: '13px' }}>
                <strong>Concept:</strong><br />
                • Opposite Direction: Relative Speed = S₁ + S₂ (Speed of Approach)<br />
                • Same Direction: Relative Speed = |S₁ - S₂| (Speed of Separation)
            </div>

            <div style={{ marginBottom: '16px' }}>
                <label className="form-label">Direction of Movement</label>
                <select className="form-input" value={direction} onChange={(e) => setDirection(e.target.value)}>
                    <option value="opposite">Moving Towards Each Other</option>
                    <option value="same">Moving in Same Direction</option>
                </select>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Object 1 Speed (km/h)</label>
                    <input type="number" className="form-input" value={speed1} onChange={(e) => setSpeed1(e.target.value)} placeholder="60" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Object 2 Speed (km/h)</label>
                    <input type="number" className="form-input" value={speed2} onChange={(e) => setSpeed2(e.target.value)} placeholder="40" />
                </div>
                <div className="form-group" style={{ marginBottom: '0', gridColumn: 'span 2' }}>
                    <label className="form-label">Distance Between Them (km)</label>
                    <input type="number" className="form-input" value={distance} onChange={(e) => setDistance(e.target.value)} placeholder="200" />
                </div>
            </div>

            <button className="btn btn-primary mt-4" onClick={calculate}>Calculate</button>

            {result && (
                <div className="mt-4" style={{ padding: '20px', background: 'var(--bg-tertiary)', borderRadius: '8px' }}>
                    <div style={{ marginBottom: '12px' }}>
                        <strong>Type:</strong> {result.type}
                    </div>
                    <div style={{ marginBottom: '12px' }}>
                        <strong>Formula:</strong> {result.formula}
                    </div>
                    <div style={{ marginBottom: '12px', whiteSpace: 'pre-line' }}>
                        <strong>Calculation:</strong><br />{result.calculation}
                    </div>
                    <div style={{ borderTop: '1px solid var(--border-color)', paddingTop: '12px', marginTop: '12px' }}>
                        <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--success)' }}>Relative Speed: {result.relativeSpeed} km/h</div>
                        <div style={{ fontSize: '20px', fontWeight: '700', color: 'var(--primary)', marginTop: '8px' }}>Time to Meet: {result.timeToMeet} hours ({result.timeInMinutes} minutes)</div>
                    </div>
                </div>
            )}
        </div>
    );
}



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