function BasicSTDCalculator() {
    const [speed, setSpeed] = useState('');
    const [distance, setDistance] = useState('');
    const [time, setTime] = useState('');
    const [speedUnit, setSpeedUnit] = useState('kmh');
    const [result, setResult] = useState(null);

    const calculate = () => {
        const s = parseFloat(speed);
        const d = parseFloat(distance);
        const t = parseFloat(time);

        let calculated = {};

        if (s && d && !t) {
            // Calculate time
            calculated.time = (d / s).toFixed(2);
            calculated.formula = 'Time = Distance / Speed';
            calculated.calculation = `${d} / ${s} = ${calculated.time} hours`;
        } else if (s && t && !d) {
            // Calculate distance
            calculated.distance = (s * t).toFixed(2);
            calculated.formula = 'Distance = Speed × Time';
            calculated.calculation = `${s} × ${t} = ${calculated.distance} km`;
        } else if (d && t && !s) {
            // Calculate speed
            calculated.speed = (d / t).toFixed(2);
            calculated.formula = 'Speed = Distance / Time';
            calculated.calculation = `${d} / ${t} = ${calculated.speed} km/h`;
        }

        setResult(calculated);
    };

    return (
        <div>
            <div style={{ background: 'var(--bg-tertiary)', padding: '12px', borderRadius: '8px', marginBottom: '16px', fontSize: '13px' }}>
                <strong>Formula:</strong> Speed = Distance / Time | Distance = Speed × Time | Time = Distance / Speed
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Speed (km/h)</label>
                    <input type="number" className="form-input" value={speed} onChange={(e) => setSpeed(e.target.value)} placeholder="60" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Distance (km)</label>
                    <input type="number" className="form-input" value={distance} onChange={(e) => setDistance(e.target.value)} placeholder="120" />
                </div>
                <div className="form-group" style={{ marginBottom: '0', gridColumn: 'span 2' }}>
                    <label className="form-label">Time (hours)</label>
                    <input type="number" className="form-input" value={time} onChange={(e) => setTime(e.target.value)} placeholder="2" />
                </div>
            </div>

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

            {result && Object.keys(result).length > 0 && (
                <div className="mt-4" style={{ padding: '20px', background: 'var(--bg-tertiary)', borderRadius: '8px' }}>
                    <div style={{ marginBottom: '12px' }}>
                        <strong>Formula Used:</strong> {result.formula}
                    </div>
                    <div style={{ marginBottom: '12px' }}>
                        <strong>Calculation:</strong> {result.calculation}
                    </div>
                    {result.speed && <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--primary)' }}>Speed: {result.speed} km/h</div>}
                    {result.distance && <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--primary)' }}>Distance: {result.distance} km</div>}
                    {result.time && <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--primary)' }}>Time: {result.time} hours</div>}
                </div>
            )}
        </div>
    );
}
// Export to global registry
window.BasicSTDCalculator = BasicSTDCalculator;