function MassConverter() {
    const [kilograms, setKilograms] = useState('');
    const [result, setResult] = useState(null);

    const convert = () => {
        const kg = parseFloat(kilograms);
        setResult({
            grams: (kg * 1000).toFixed(2),
            milligrams: (kg * 1000000).toFixed(2),
            pounds: (kg * 2.20462).toFixed(4),
            ounces: (kg * 35.274).toFixed(4),
            tons: (kg / 1000).toFixed(6),
        });
    };

    return (
        <div className="card">
            <h3 style={{ marginBottom: '16px' }}>⚖️ Mass/Weight Converter</h3>
            <div className="form-group">
                <label className="form-label">Kilograms</label>
                <input type="number" className="form-input" value={kilograms} onChange={(e) => setKilograms(e.target.value)} placeholder="1" />
            </div>
            <button className="btn btn-primary" onClick={convert}>Convert</button>
            {result && (
                <div className="mt-4" style={{ padding: '20px', background: 'var(--bg-tertiary)', borderRadius: '8px' }}>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '12px' }}>
                        <div><strong>Grams:</strong> {result.grams}</div>
                        <div><strong>Milligrams:</strong> {result.milligrams}</div>
                        <div><strong>Pounds:</strong> {result.pounds}</div>
                        <div><strong>Ounces:</strong> {result.ounces}</div>
                        <div><strong>Metric Tons:</strong> {result.tons}</div>
                    </div>
                </div>
            )}
        </div>
    );
}

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