function AgeCalculator() {
            const [birthdate, setBirthdate] = useState('');
            const [age, setAge] = useState(null);

            const calculateAge = () => {
                const birth = new Date(birthdate);
                const today = new Date();
                let years = today.getFullYear() - birth.getFullYear();
                let months = today.getMonth() - birth.getMonth();
                let days = today.getDate() - birth.getDate();

                if (days < 0) {
                    months--;
                    days += new Date(today.getFullYear(), today.getMonth(), 0).getDate();
                }
                if (months < 0) {
                    years--;
                    months += 12;
                }

                const totalDays = Math.floor((today - birth) / (1000 * 60 * 60 * 24));
                setAge({ years, months, days, totalDays });
            };

            return (
                <div className="card">
                    <h3 style={{ marginBottom: '16px' }}>🎂 Age Calculator</h3>
                    <div className="form-group">
                        <label className="form-label">Date of Birth</label>
                        <input type="date" className="form-input" value={birthdate} onChange={(e) => setBirthdate(e.target.value)} />
                    </div>
                    <button className="btn btn-primary" onClick={calculateAge}>Calculate Age</button>
                    {age && (
                        <div className="mt-4" style={{ padding: '20px', background: 'var(--bg-tertiary)', borderRadius: '8px', textAlign: 'center' }}>
                            <div style={{ fontSize: '28px', fontWeight: '700', color: 'var(--primary)', marginBottom: '12px' }}>
                                {age.years} years, {age.months} months, {age.days} days
                            </div>
                            <div style={{ fontSize: '14px', color: 'var(--text-secondary)' }}>
                                Total: {age.totalDays.toLocaleString()} days
                            </div>
                        </div>
                    )}
                </div>
            );
        }

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