function CircularTrackCalculator() {
    const [direction, setDirection] = useState('opposite');
    const [speed1, setSpeed1] = useState('');
    const [speed2, setSpeed2] = useState('');
    const [circumference, setCircumference] = useState('');
    const [result, setResult] = useState(null);

    const calculate = () => {
        const s1 = parseFloat(speed1);
        const s2 = parseFloat(speed2);
        const circ = parseFloat(circumference);

        let calculated = {};

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

            calculated = {
                relativeSpeed: relativeSpeed.toFixed(2),
                timeToMeet: timeToMeet.toFixed(2),
                timeInMinutes: (timeToMeet * 60).toFixed(2),
                meetingsPerHour: meetingsPerHour.toFixed(2),
                formula: 'Time to meet = Circumference / (Speed₁ + Speed₂)',
                calculation: `Relative Speed = ${s1} + ${s2} = ${relativeSpeed} km/h\nTime = ${circ} / ${relativeSpeed} = ${timeToMeet.toFixed(2)} hours`
            };
        } else {
            const relativeSpeed = Math.abs(s1 - s2);
            const timeToMeet = circ / relativeSpeed;
            const meetingsPerHour = 1 / timeToMeet;

            calculated = {
                relativeSpeed: relativeSpeed.toFixed(2),
                timeToMeet: timeToMeet.toFixed(2),
                timeInMinutes: (timeToMeet * 60).toFixed(2),
                meetingsPerHour: meetingsPerHour.toFixed(2),
                formula: 'Time to meet = Circumference / |Speed₁ - Speed₂|',
                calculation: `Relative Speed = |${s1} - ${s2}| = ${relativeSpeed} km/h\nTime = ${circ} / ${relativeSpeed} = ${timeToMeet.toFixed(2)} hours`
            };
        }

        setResult(calculated);
    };

    return (
        <div>
            <div style={{ marginBottom: '16px' }}>
                <label className="form-label">Direction</label>
                <select className="form-input" value={direction} onChange={(e) => setDirection(e.target.value)}>
                    <option value="opposite">Running in Opposite Directions</option>
                    <option value="same">Running 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">Person 1 Speed (km/h)</label>
                    <input type="number" className="form-input" value={speed1} onChange={(e) => setSpeed1(e.target.value)} placeholder="5" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Person 2 Speed (km/h)</label>
                    <input type="number" className="form-input" value={speed2} onChange={(e) => setSpeed2(e.target.value)} placeholder="3" />
                </div>
                <div className="form-group" style={{ marginBottom: '0', gridColumn: 'span 2' }}>
                    <label className="form-label">Track Circumference (km)</label>
                    <input type="number" className="form-input" value={circumference} onChange={(e) => setCircumference(e.target.value)} placeholder="0.4" />
                </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><strong>Relative Speed:</strong> {result.relativeSpeed} km/h</div>
                        <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--primary)', marginTop: '8px' }}>Time to Meet: {result.timeToMeet} hours ({result.timeInMinutes} minutes)</div>
                        <div className="mt-2">Meetings per hour: {result.meetingsPerHour}</div>
                    </div>
                </div>
            )}
        </div>
    );

}

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