function GSTCalculator() {
            const [amount, setAmount] = useState('');
            const [gstRate, setGstRate] = useState('18');
            const [result, setResult] = useState(null);

            const calculate = () => {
                const base = parseFloat(amount);
                const rate = parseFloat(gstRate);
                const gstAmount = (base * rate) / 100;
                const total = base + gstAmount;
                setResult({ base, rate, gstAmount, total });
            };

            return (
                <div className="card">
                    <h3 style={{ marginBottom: '16px' }}>🧾 GST Calculator</h3>
                    <div className="form-group">
                        <label className="form-label">Base Amount (₹)</label>
                        <input type="number" className="form-input" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="1000" />
                    </div>
                    <div className="form-group">
                        <label className="form-label">GST Rate (%)</label>
                        <select className="form-input" value={gstRate} onChange={(e) => setGstRate(e.target.value)}>
                            <option value="5">5%</option>
                            <option value="12">12%</option>
                            <option value="18">18%</option>
                            <option value="28">28%</option>
                        </select>
                    </div>
                    <button className="btn btn-primary" onClick={calculate}>Calculate GST</button>
                    {result && (
                        <div className="mt-4" style={{ padding: '20px', background: 'var(--bg-tertiary)', borderRadius: '8px' }}>
                            <div style={{ marginBottom: '8px' }}>Base Amount: <strong>₹{result.base}</strong></div>
                            <div style={{ marginBottom: '8px' }}>GST ({result.rate}%): <strong style={{ color: 'var(--primary)' }}>₹{result.gstAmount.toFixed(2)}</strong></div>
                            <div style={{ fontSize: '20px', fontWeight: '700', color: 'var(--success)', paddingTop: '12px', borderTop: '1px solid var(--border-color)' }}>
                                Total Amount: ₹{result.total.toFixed(2)}
                            </div>
                        </div>
                    )}
                </div>
            );
        }

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