function DiscountCalculator() {
            const [price, setPrice] = useState('');
            const [discount, setDiscount] = useState('');
            const [result, setResult] = useState(null);

            const calculate = () => {
                const original = parseFloat(price);
                const discountPercent = parseFloat(discount);
                const discountAmount = (original * discountPercent) / 100;
                const finalPrice = original - discountAmount;
                setResult({ original, discountPercent, discountAmount, finalPrice });
            };

            return (
                <div className="card">
                    <h3 style={{ marginBottom: '16px' }}>🏷️ Discount Calculator</h3>
                    <div className="form-group">
                        <label className="form-label">Original Price (₹)</label>
                        <input type="number" className="form-input" value={price} onChange={(e) => setPrice(e.target.value)} placeholder="1000" />
                    </div>
                    <div className="form-group">
                        <label className="form-label">Discount (%)</label>
                        <input type="number" className="form-input" value={discount} onChange={(e) => setDiscount(e.target.value)} placeholder="20" />
                    </div>
                    <button className="btn btn-primary" onClick={calculate}>Calculate</button>
                    {result && (
                        <div className="mt-4" style={{ padding: '20px', background: 'var(--bg-tertiary)', borderRadius: '8px' }}>
                            <div style={{ marginBottom: '8px' }}>Original Price: <strong>₹{result.original}</strong></div>
                            <div style={{ marginBottom: '8px' }}>Discount ({result.discountPercent}%): <strong style={{ color: 'var(--danger)' }}>-₹{result.discountAmount.toFixed(2)}</strong></div>
                            <div style={{ fontSize: '20px', fontWeight: '700', color: 'var(--success)', paddingTop: '12px', borderTop: '1px solid var(--border-color)' }}>
                                Final Price: ₹{result.finalPrice.toFixed(2)}
                            </div>
                        </div>
                    )}
                </div>
            );
        }

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