function RacesCalculator() {
    const [raceType, setRaceType] = useState('distance');
    const [speedA, setSpeedA] = useState('');
    const [speedB, setSpeedB] = useState('');
    const [raceDistance, setRaceDistance] = useState('');
    const [beatBy, setBeatBy] = useState('');
    const [result, setResult] = useState(null);

    const calculate = () => {
        const sA = parseFloat(speedA);
        const sB = parseFloat(speedB);
        const dist = parseFloat(raceDistance);
        const beat = parseFloat(beatBy);

        let calculated = {};

        if (raceType === 'distance') {
            // A beats B by x meters
            const timeA = dist / sA;
            const distB = dist - beat;
            const actualSpeedB = distB / timeA;
            const ratio = sA / actualSpeedB;

            calculated = {
                timeA: timeA.toFixed(2),
                distanceB: distB,
                speedRatio: ratio.toFixed(2),
                formula: 'When A finishes, B is behind by given distance',
                calculation: `Time taken by A = ${dist} / ${sA} = ${timeA.toFixed(2)} hours\nDistance covered by B = ${distB} m\nSpeed ratio = ${ratio.toFixed(2)}:1`
            };
        } else {
            // A beats B by t seconds
            const timeA = dist / sA;
            const timeB = timeA + (beat / 3600); // Convert seconds to hours
            const actualSpeedB = dist / timeB;
            const ratio = sA / actualSpeedB;

            calculated = {
                timeA: timeA.toFixed(2),
                timeB: timeB.toFixed(2),
                timeDiff: beat,
                speedRatio: ratio.toFixed(2),
                formula: 'When A finishes, B takes additional time',
                calculation: `Time by A = ${dist} / ${sA} = ${timeA.toFixed(2)} hours\nTime by B = ${timeB.toFixed(2)} hours\nSpeed ratio = ${ratio.toFixed(2)}:1`
            };
        }

        setResult(calculated);
    };

    return (
        <div>
            <div style={{ marginBottom: '16px' }}>
                <label className="form-label">Race Type</label>
                <select className="form-input" value={raceType} onChange={(e) => setRaceType(e.target.value)}>
                    <option value="distance">A beats B by Distance</option>
                    <option value="time">A beats B by Time</option>
                </select>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">A's Speed (m/s)</label>
                    <input type="number" className="form-input" value={speedA} onChange={(e) => setSpeedA(e.target.value)} placeholder="10" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">B's Speed (m/s)</label>
                    <input type="number" className="form-input" value={speedB} onChange={(e) => setSpeedB(e.target.value)} placeholder="8" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Race Distance (m)</label>
                    <input type="number" className="form-input" value={raceDistance} onChange={(e) => setRaceDistance(e.target.value)} placeholder="100" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">A beats B by ({raceType === 'distance' ? 'm' : 'seconds'})</label>
                    <input type="number" className="form-input" value={beatBy} onChange={(e) => setBeatBy(e.target.value)} placeholder={raceType === 'distance' ? '20' : '5'} />
                </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>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(--primary)' }}>Speed Ratio (A:B) = {result.speedRatio}:1</div>
                        {result.distanceB && <div className="mt-2">B covered: {result.distanceB} m when A finished</div>}
                        {result.timeDiff && <div className="mt-2">Time difference: {result.timeDiff} seconds</div>}
                    </div>
                </div>
            )}
        </div>
    );
}

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