function BMICalculator() {
            const [weight, setWeight] = useState('');
            const [height, setHeight] = useState('');
            const [bmi, setBmi] = useState(null);

            const calculateBMI = () => {
                const h = parseFloat(height) / 100;
                const result = parseFloat(weight) / (h * h);
                setBmi(result.toFixed(2));
            };

            const getCategory = () => {
                if (!bmi) return '';
                if (bmi < 18.5) return { text: 'Underweight', color: 'var(--warning)' };
                if (bmi < 25) return { text: 'Normal', color: 'var(--success)' };
                if (bmi < 30) return { text: 'Overweight', color: 'var(--warning)' };
                return { text: 'Obese', color: 'var(--danger)' };
            };

            const category = getCategory();

            return (
                <div className="card">
                    <h3 style={{ marginBottom: '16px' }}>⚖️ BMI Calculator</h3>
                    <div className="form-group">
                        <label className="form-label">Weight (kg)</label>
                        <input type="number" className="form-input" value={weight} onChange={(e) => setWeight(e.target.value)} placeholder="70" />
                    </div>
                    <div className="form-group">
                        <label className="form-label">Height (cm)</label>
                        <input type="number" className="form-input" value={height} onChange={(e) => setHeight(e.target.value)} placeholder="170" />
                    </div>
                    <button className="btn btn-primary" onClick={calculateBMI}>Calculate BMI</button>
                    {bmi && (
                        <div className="mt-4" style={{ padding: '20px', background: 'var(--bg-tertiary)', borderRadius: '8px', textAlign: 'center' }}>
                            <div style={{ fontSize: '32px', fontWeight: '700', color: 'var(--primary)', marginBottom: '8px' }}>BMI: {bmi}</div>
                            <div style={{ fontSize: '18px', color: category.color, fontWeight: '600' }}>Category: {category.text}</div>
                        </div>
                    )}
                </div>
            );
        }

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