function TemperatureConverter() {
    const [celsius, setCelsius] = useState('');
    const [fahrenheit, setFahrenheit] = useState('');
    const [kelvin, setKelvin] = useState('');

    const updateFromCelsius = (c) => {
        setCelsius(c);
        if (c !== '') {
            const val = parseFloat(c);
            setFahrenheit(((val * 9 / 5) + 32).toFixed(2));
            setKelvin((val + 273.15).toFixed(2));
        } else {
            setFahrenheit('');
            setKelvin('');
        }
    };

    const updateFromFahrenheit = (f) => {
        setFahrenheit(f);
        if (f !== '') {
            const val = parseFloat(f);
            const c = (val - 32) * 5 / 9;
            setCelsius(c.toFixed(2));
            setKelvin((c + 273.15).toFixed(2));
        } else {
            setCelsius('');
            setKelvin('');
        }
    };

    const updateFromKelvin = (k) => {
        setKelvin(k);
        if (k !== '') {
            const val = parseFloat(k);
            const c = val - 273.15;
            setCelsius(c.toFixed(2));
            setFahrenheit(((c * 9 / 5) + 32).toFixed(2));
        } else {
            setCelsius('');
            setFahrenheit('');
        }
    };

    return (
        <div className="card">
            <h3 style={{ marginBottom: '16px' }}>🌡️ Temperature Converter</h3>
            <div className="form-group">
                <label className="form-label">Celsius (°C)</label>
                <input type="number" className="form-input" value={celsius} onChange={(e) => updateFromCelsius(e.target.value)} placeholder="0" />
            </div>
            <div className="form-group">
                <label className="form-label">Fahrenheit (°F)</label>
                <input type="number" className="form-input" value={fahrenheit} onChange={(e) => updateFromFahrenheit(e.target.value)} placeholder="32" />
            </div>
            <div className="form-group">
                <label className="form-label">Kelvin (K)</label>
                <input type="number" className="form-input" value={kelvin} onChange={(e) => updateFromKelvin(e.target.value)} placeholder="273.15" />
            </div>
        </div>
    );
}

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