function Shop({ showShop, setShowShop, t, userProfile, formatMoney, onPurchase, onEquip, onBuyShare, onClaimDividend, lang, Icons }) {
    if (!showShop || !userProfile) return null;

    const config = window.GAME_CONFIG || {};
    const shopConfig = config.shop || {};
    const sharesConfig = config.casinoShares || {};
    const isDebtor = userProfile.isDebtor;

    const items = [
        {
            id: 'extraPlay',
            category: 'general',
            icon: <Icons.Plus size={32} />,
            name: t.extraPlayName || (lang === 'TR' ? 'Ekstra Hak' : 'Extra Play'),
            desc: (t.extraPlayDesc || (lang === 'TR' ? '+{count} oyun hakkı ekler.' : '+{count} extra plays.')).replace('{count}', '1'),
            price: shopConfig.extraPlay?.PRICE ?? 100000,
            owned: false,
            color: '#10b981',
            bgColor: 'rgba(16, 185, 129, 0.08)',
            borderColor: 'rgba(16, 185, 129, 0.2)',
            emoji: '🎟️',
            isEquippable: false
        },
        {
            id: 'insurance',
            category: 'general',
            icon: <Icons.Briefcase size={32} />,
            name: t.insuranceName || (lang === 'TR' ? 'Sigorta' : 'Insurance'),
            desc: t.insuranceDesc || (lang === 'TR' ? 'Borca düşersen borcunun yarısını kasa üstlenir.' : 'The house covers half of your debt.'),
            price: shopConfig.insurance?.PRICE ?? 200000,
            owned: !!userProfile.inventory?.insurance,
            color: '#34d399',
            bgColor: 'rgba(52, 211, 153, 0.08)',
            borderColor: 'rgba(52, 211, 153, 0.2)',
            emoji: '🔒',
            isEquippable: false
        },
        {
            id: 'diceShield',
            category: 'oneMoreDice',
            icon: <Icons.ShieldCheck size={32} />,
            name: t.diceShieldName || (lang === 'TR' ? 'Zar Kalkanı' : 'Dice Shield'),
            desc: t.diceShieldDesc || (lang === 'TR' ? 'Bir kereliğine 50\'nin altında gelen zarı pas geçmenizi sağlar.' : 'Skip one dice roll below 50.'),
            price: shopConfig.diceShield?.PRICE ?? 500000,
            owned: !!userProfile.inventory?.diceShield,
            color: '#38bdf8',
            bgColor: 'rgba(56, 189, 248, 0.08)',
            borderColor: 'rgba(56, 189, 248, 0.2)',
            emoji: '🛡️',
            isEquippable: false
        },
        {
            id: 'premiumSkin',
            category: 'oneMoreDice',
            icon: <Icons.Sparkles size={32} />,
            name: t.premiumSkinName || (lang === 'TR' ? 'Premium Zar' : 'Premium Dice'),
            desc: t.premiumSkinDesc || (lang === 'TR' ? 'Neon efektler, özel sesler. Zenginlerin zarı.' : 'Neon effects, unique sounds.'),
            price: shopConfig.diceSkins?.PREMIUM_PRICE ?? 10000000,
            owned: userProfile.ownedSkins?.includes('premium'),
            equipped: userProfile.activeSkin === 'premium',
            confiscated: userProfile.confiscatedSkins?.includes('premium'),
            color: '#c084fc',
            bgColor: 'rgba(192, 132, 252, 0.08)',
            borderColor: 'rgba(192, 132, 252, 0.2)',
            emoji: '✨',
            isEquippable: true
        },
        {
            id: 'cardRemover',
            category: 'cardPath',
            icon: <Icons.Ban size={32} />,
            name: t.cardRemoverName || (lang === 'TR' ? 'Kart Temizleyici' : 'Card Remover'),
            desc: (t.cardRemoverDesc || (lang === 'TR' ? 'En kötü {count} negatif/nötr kartı yok eder.' : 'Removes {count} worst negative/neutral cards.')).replace('{count}', shopConfig.cardRemover?.REMOVE_COUNT || 2),
            price: shopConfig.cardRemover?.PRICE ?? 300000,
            owned: !!userProfile.inventory?.cardRemover,
            color: '#fbbf24',
            bgColor: 'rgba(251, 191, 36, 0.08)',
            borderColor: 'rgba(251, 191, 36, 0.2)',
            emoji: '🃏',
            isEquippable: false
        }
    ];

    const collections = [
        {
            id: 'rolex',
            icon: <Icons.Watch size={32} />,
            name: t.rolexName || (lang === 'TR' ? 'Altın Kaplama Saat' : 'Gold Plated Watch'),
            desc: t.rolexDesc || (lang === 'TR' ? 'Zamanın ne kadar değerli olduğunu gösterir.' : 'Shows how valuable time is.'),
            price: shopConfig.collections?.rolex?.PRICE ?? 50000000,
            owned: userProfile.inventory?.rolex,
            equipped: userProfile.activeCollection === 'rolex',
            color: '#fcd34d',
            bgColor: 'rgba(252, 211, 77, 0.08)',
            borderColor: 'rgba(252, 211, 77, 0.2)',
            emoji: '⌚',
            isEquippable: true
        },
        {
            id: 'yacht',
            icon: <Icons.Ship size={32} />,
            name: t.yachtName || (lang === 'TR' ? 'Süper Yat' : 'Super Yacht'),
            desc: t.yachtDesc || (lang === 'TR' ? 'Okyanusların hakimi olun.' : 'Rule the oceans.'),
            price: shopConfig.collections?.yacht?.PRICE ?? 250000000,
            owned: userProfile.inventory?.yacht,
            equipped: userProfile.activeCollection === 'yacht',
            color: '#38bdf8',
            bgColor: 'rgba(56, 189, 248, 0.08)',
            borderColor: 'rgba(56, 189, 248, 0.2)',
            emoji: '🛥️',
            isEquippable: true
        },
        {
            id: 'privateJet',
            icon: <Icons.Plane size={32} />,
            name: t.privateJetName || (lang === 'TR' ? 'Özel Jet' : 'Private Jet'),
            desc: t.privateJetDesc || (lang === 'TR' ? 'Dünyanın her yerine en hızlı şekilde ulaşın.' : 'Reach anywhere in the world.'),
            price: shopConfig.collections?.privateJet?.PRICE ?? 1000000000,
            owned: userProfile.inventory?.privateJet,
            equipped: userProfile.activeCollection === 'privateJet',
            color: '#94a3b8',
            bgColor: 'rgba(148, 163, 184, 0.08)',
            borderColor: 'rgba(148, 163, 184, 0.2)',
            emoji: '🛩️',
            isEquippable: true
        },
        {
            id: 'island',
            icon: <Icons.Palmtree size={32} />,
            name: t.islandName || (lang === 'TR' ? 'Tropik Ada' : 'Tropical Island'),
            desc: t.islandDesc || (lang === 'TR' ? 'Kendi cennetinize sahip olun.' : 'Own your private paradise.'),
            price: shopConfig.collections?.island?.PRICE ?? 5000000000,
            owned: userProfile.inventory?.island,
            equipped: userProfile.activeCollection === 'island',
            color: '#34d399',
            bgColor: 'rgba(52, 211, 153, 0.08)',
            borderColor: 'rgba(52, 211, 153, 0.2)',
            emoji: '🏝️',
            isEquippable: true
        },
        {
            id: 'cryptoExchange',
            icon: <Icons.Globe size={32} />,
            name: t.cryptoExchangeName || (lang === 'TR' ? 'Kripto Borsa' : 'Crypto Exchange'),
            desc: t.cryptoExchangeDesc || (lang === 'TR' ? 'Finans dünyasına hükmedin.' : 'Rule the financial world.'),
            price: shopConfig.collections?.cryptoExchange?.PRICE ?? 10000000000,
            owned: userProfile.inventory?.cryptoExchange,
            equipped: userProfile.activeCollection === 'cryptoExchange',
            color: '#818cf8',
            bgColor: 'rgba(129, 140, 248, 0.08)',
            borderColor: 'rgba(129, 140, 248, 0.2)',
            emoji: '🏦',
            isEquippable: true
        }
    ];

    const sharePrice = sharesConfig.SHARE_PRICE || 10000000;
    const dividendPct = sharesConfig.DIVIDEND_PERCENTAGE || 2.5;
    const today = new Date().toISOString().split('T')[0];
    const canClaimDividend = userProfile.shares > 0 && userProfile.lastDividendClaim !== today;
    const expectedDividend = Math.floor(userProfile.shares * sharePrice * (dividendPct / 100));

    const renderItemCard = (item) => {
        const canBuy = userProfile.totalWealth >= item.price && !item.owned && !item.confiscated;
        const isEquipped = item.equipped;

        return (
            <div key={item.id} className="interactive-card" style={{
                borderRadius: '16px',
                border: item.confiscated ? '1px solid rgba(244,63,94,0.3)' : item.owned ? `1px solid ${isEquipped ? item.color : 'rgba(52,211,153,0.2)'}` : `1px solid rgba(255,255,255,0.06)`,
                background: item.confiscated ? 'rgba(136,19,55,0.15)' : item.owned ? 'rgba(52,211,153,0.04)' : 'rgba(255,255,255,0.02)',
                position: 'relative',
                overflow: 'hidden'
            }}>
                {item.confiscated && (
                    <div style={{ position: 'absolute', inset: 0, background: 'rgba(76,5,25,0.8)', zIndex: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)', borderRadius: '16px' }}>
                        <div style={{ textAlign: 'center' }}>
                            <Icons.Lock size={40} className="text-rose-500" />
                            <p style={{ color: '#fb7185', fontWeight: 900, fontSize: '18px', margin: '8px 0 0 0' }}>{t.skinConfiscated || 'SEIZED'}</p>
                            <p style={{ color: 'rgba(251,113,133,0.5)', fontSize: '12px', marginTop: '4px' }}>{t.skinConfiscatedDesc || 'Pay debt to unlock'}</p>
                        </div>
                    </div>
                )}

                <div style={{ padding: '20px', display: 'flex', alignItems: 'center', gap: '20px' }}>
                    <div style={{ width: '64px', height: '64px', background: 'rgba(15,23,42,0.8)', borderRadius: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, border: '1px solid rgba(255,255,255,0.05)', color: item.color }}>
                        {item.icon}
                    </div>

                    <div style={{ flex: 1, minWidth: 0 }}>
                        <h5 style={{ fontWeight: 900, color: 'white', fontSize: '18px', margin: 0, lineHeight: 1.2 }}>{item.emoji} {item.name}</h5>
                        <p style={{ color: '#94a3b8', fontSize: '13px', margin: '6px 0 0 0', lineHeight: 1.5 }}>{item.desc}</p>
                        <p style={{ fontWeight: 900, fontSize: '20px', margin: '8px 0 0 0', color: item.color }}>{formatMoney(item.price)}</p>
                    </div>

                    <div style={{ flexShrink: 0 }}>
                        {item.owned ? (
                            <button
                                onClick={() => item.isEquippable && onEquip(item.id)}
                                disabled={isEquipped || !item.isEquippable}
                                style={{
                                    padding: '12px 20px',
                                    background: isEquipped ? item.color : 'rgba(52,211,153,0.15)',
                                    color: isEquipped ? '#000' : '#34d399',
                                    fontWeight: 900,
                                    fontSize: '13px',
                                    letterSpacing: '0.1em',
                                    borderRadius: '12px',
                                    border: isEquipped ? `1px solid ${item.color}` : '1px solid rgba(52,211,153,0.2)',
                                    textAlign: 'center',
                                    whiteSpace: 'nowrap',
                                    cursor: (isEquipped || !item.isEquippable) ? 'default' : 'pointer',
                                    transition: 'all 0.2s'
                                }}
                            >
                                {isEquipped ? t.equipped : (item.isEquippable ? t.equip : (lang === 'TR' ? `✓ Envanterde` : `✓ ${t.owned}`))}
                            </button>
                        ) : (
                            <button
                                onClick={() => onPurchase(item.id)}
                                disabled={!canBuy}
                                style={{
                                    padding: '12px 24px',
                                    fontWeight: 900,
                                    fontSize: '14px',
                                    letterSpacing: '0.1em',
                                    borderRadius: '12px',
                                    border: canBuy ? `1px solid ${item.borderColor}` : '1px solid rgba(51,65,85,0.5)',
                                    background: canBuy ? item.bgColor : 'rgba(30,41,59,0.5)',
                                    color: canBuy ? item.color : '#475569',
                                    cursor: canBuy ? 'pointer' : 'not-allowed',
                                    transition: 'all 0.2s',
                                    whiteSpace: 'nowrap'
                                }}
                            >
                                {t.buy || (lang === 'TR' ? 'Satın Al' : 'Buy')}
                            </button>
                        )}
                    </div>
                </div>
            </div>
        );
    };

    return (
        <div style={{ position: 'fixed', inset: 0, zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px', background: 'rgba(2, 6, 23, 0.95)', backdropFilter: 'blur(16px)' }} onClick={(e) => { if (e.target === e.currentTarget) setShowShop(false); }}>
            <div style={{ width: '100%', maxWidth: '750px', background: '#0f172a', border: '1px solid rgba(255,255,255,0.08)', borderRadius: '24px', overflow: 'hidden', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.7)', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>

                {/* HEADER */}
                <div style={{ padding: '28px 32px', borderBottom: '1px solid rgba(255,255,255,0.05)', background: 'linear-gradient(to right, rgba(168,85,247,0.08), transparent, rgba(245,158,11,0.08))', flexShrink: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                            <div style={{ padding: '14px', background: 'linear-gradient(135deg, #a855f7, #ec4899)', borderRadius: '16px', boxShadow: '0 8px 25px rgba(168,85,247,0.3)' }}>
                                <Icons.Store size={28} className="text-white" />
                            </div>
                            <div>
                                <h3 style={{ fontSize: '28px', fontWeight: 900, color: 'white', margin: 0, letterSpacing: '-0.02em' }}>{t.shopTitle || 'Market'}</h3>
                                <p style={{ fontSize: '14px', color: '#94a3b8', margin: '4px 0 0 0', fontWeight: 500 }}>{t.shopDesc || (lang === 'TR' ? 'Avantaj satın al, şansını artır' : 'Upgrade your luck')}</p>
                            </div>
                        </div>
                        <button onClick={() => setShowShop(false)} style={{ padding: '10px', background: 'transparent', border: 'none', cursor: 'pointer', borderRadius: '12px' }}>
                            <Icons.XCircle size={28} className="text-slate-400" />
                        </button>
                    </div>
                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: '10px', background: 'rgba(255,255,255,0.04)', borderRadius: '12px', padding: '10px 16px', border: '1px solid rgba(255,255,255,0.06)' }}>
                        <Icons.DollarSign size={18} className="text-emerald-400" />
                        <span style={{ fontSize: '12px', fontWeight: 900, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{t.totalWealth || 'Wealth'}:</span>
                        <motion.span 
                            key={userProfile.totalWealth}
                            initial={{ scale: 1, textShadow: "none" }}
                            animate={{ 
                                scale: [1, 1.15, 1],
                                color: userProfile.totalWealth === Infinity ? '#fbbf24' : (userProfile.totalWealth >= 0 ? ['#34d399', '#ffffff', '#34d399'] : ['#f43f5e', '#ffffff', '#f43f5e'])
                            }}
                            transition={{ duration: 0.4, ease: "easeOut" }}
                            style={{ 
                                fontSize: '20px', 
                                fontWeight: 900, 
                                color: userProfile.totalWealth === Infinity ? '#fbbf24' : (userProfile.totalWealth >= 0 ? '#34d399' : '#f43f5e'),
                                textShadow: userProfile.totalWealth === Infinity ? '0 0 10px rgba(251,191,36,0.5)' : 'none',
                                display: 'inline-block'
                            }}
                        >
                            {formatMoney(userProfile.totalWealth)}
                        </motion.span>
                    </div>
                </div>

                {/* SCROLLABLE CONTENT */}
                <div className="custom-scrollbar" style={{ padding: '28px 32px', overflowY: 'auto', flex: 1 }}>

                    {/* SECTION LABEL: ITEMS */}
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '24px' }}>
                        <div style={{ width: '32px', height: '1px', background: '#334155' }}></div>
                        <span style={{ fontSize: '11px', fontWeight: 900, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.2em', whiteSpace: 'nowrap' }}>
                            {t.sectionAdvantages || (lang === 'TR' ? 'AVANTAJLAR' : 'ADVANTAGES')}
                        </span>
                        <div style={{ flex: 1, height: '1px', background: '#334155' }}></div>
                    </div>

                    <div style={{ display: 'flex', flexDirection: 'column', gap: '40px', marginBottom: '40px' }}>
                        {['general', 'oneMoreDice', 'cardPath'].map(cat => {
                            const catItems = items.filter(i => i.category === cat);
                            if (catItems.length === 0) return null;
                            
                            const catTitle = cat === 'general' ? (lang === 'TR' ? 'GENEL' : 'GENERAL') :
                                            cat === 'oneMoreDice' ? (t.oneMoreDiceTitle || (lang === 'TR' ? 'BİR ZAR DAHA' : 'ONE MORE DICE')) :
                                            cat === 'cardPath' ? (t.cardPathTitle || (lang === 'TR' ? 'KART YOLU' : 'CARD PATH')) : '';

                            return (
                                <div key={cat} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                                    <h4 style={{ fontSize: '12px', fontWeight: 900, color: '#4b5563', letterSpacing: '0.12em', display: 'flex', alignItems: 'center', gap: '10px', background: 'rgba(255,255,255,0.03)', padding: '8px 16px', borderRadius: '8px', borderLeft: '4px solid #6366f1' }}>
                                        {catTitle.toUpperCase()}
                                    </h4>
                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                                        {catItems.map(item => renderItemCard(item))}
                                    </div>
                                </div>
                            );
                        })}
                    </div>

                    {/* SECTION LABEL: COLLECTIONS */}
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '20px' }}>
                        <div style={{ width: '32px', height: '1px', background: '#334155' }}></div>
                        <span style={{ fontSize: '11px', fontWeight: 900, color: '#a855f7', textTransform: 'uppercase', letterSpacing: '0.2em', whiteSpace: 'nowrap' }}>
                            {t.collections || (lang === 'TR' ? 'KOLEKSİYONLAR' : 'COLLECTIONS')}
                        </span>
                        <div style={{ flex: 1, height: '1px', background: '#334155' }}></div>
                    </div>

                    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginBottom: '40px' }}>
                        {collections.map(renderItemCard)}
                    </div>

                    {/* SECTION LABEL: SHARES */}
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '20px' }}>
                        <div style={{ width: '32px', height: '1px', background: '#334155' }}></div>
                        <span style={{ fontSize: '11px', fontWeight: 900, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.2em', whiteSpace: 'nowrap' }}>
                            {t.sharesTitle || (lang === 'TR' ? 'CASINO HİSSELERİ' : 'CASINO SHARES')}
                        </span>
                        <div style={{ flex: 1, height: '1px', background: '#334155' }}></div>
                    </div>

                    {/* SHARES CARD */}
                    <div style={{ borderRadius: '16px', border: '1px solid rgba(251,191,36,0.2)', background: 'linear-gradient(135deg, rgba(251,191,36,0.04), rgba(245,158,11,0.04))', overflow: 'hidden' }}>
                        <div style={{ padding: '24px' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '20px' }}>
                                <Icons.Coins size={24} className="text-amber-400" />
                                <div>
                                    <h5 style={{ fontSize: '20px', fontWeight: 900, color: 'white', margin: 0 }}>{t.sharesTitle || (lang === 'TR' ? 'Casino Hisseleri' : 'Casino Shares')}</h5>
                                    <p style={{ fontSize: '13px', color: '#94a3b8', margin: '2px 0 0 0' }}>{t.sharesDesc || (lang === 'TR' ? 'Hisse alarak pasif gelir elde edin' : 'Get passive income from shares')}</p>
                                </div>
                            </div>

                            {/* STATS */}
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '12px', marginBottom: '20px' }}>
                                <div style={{ background: 'rgba(15,23,42,0.6)', borderRadius: '12px', padding: '16px', textAlign: 'center', border: '1px solid rgba(255,255,255,0.04)' }}>
                                    <p style={{ fontSize: '10px', fontWeight: 900, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.15em', marginBottom: '8px' }}>{t.sharesOwned || (lang === 'TR' ? 'SAHİP OLUNAN' : 'OWNED')}</p>
                                    <p style={{ fontSize: '28px', fontWeight: 900, color: '#fbbf24', margin: 0 }}>{userProfile.shares || 0}</p>
                                    <p style={{ fontSize: '10px', fontWeight: 600, color: '#475569', marginTop: '4px' }}>{t.shareUnit || (lang === 'TR' ? 'hisse' : 'shares')}</p>
                                </div>
                                <div style={{ background: 'rgba(15,23,42,0.6)', borderRadius: '12px', padding: '16px', textAlign: 'center', border: '1px solid rgba(255,255,255,0.04)' }}>
                                    <p style={{ fontSize: '10px', fontWeight: 900, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.15em', marginBottom: '8px' }}>{t.sharePrice || (lang === 'TR' ? 'HİSSE FİYATI' : 'SHARE PRICE')}</p>
                                    <p style={{ fontSize: '16px', fontWeight: 900, color: 'white', margin: 0 }}>{formatMoney(sharePrice)}</p>
                                    <p style={{ fontSize: '10px', fontWeight: 600, color: '#475569', marginTop: '4px' }}>{t.shareUnitPrice || (lang === 'TR' ? 'adet başına' : 'per share')}</p>
                                </div>
                                <div style={{ background: 'rgba(15,23,42,0.6)', borderRadius: '12px', padding: '16px', textAlign: 'center', border: '1px solid rgba(255,255,255,0.04)' }}>
                                    <p style={{ fontSize: '10px', fontWeight: 900, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.15em', marginBottom: '8px' }}>{t.sharesDividend || (lang === 'TR' ? 'TEMETTÜ' : 'DIVIDEND')}</p>
                                    <p style={{ fontSize: '16px', fontWeight: 900, color: '#34d399', margin: 0 }}>{lang === 'TR' ? `%${dividendPct}` : `${dividendPct}%`}</p>
                                    <p style={{ fontSize: '10px', fontWeight: 600, color: '#475569', marginTop: '4px' }}>{t.shareReturn || (lang === 'TR' ? 'günlük getiri' : 'daily return')}</p>
                                </div>
                            </div>

                            {/* BUTTONS */}
                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
                                <button
                                    onClick={onBuyShare}
                                    disabled={userProfile.totalWealth < sharePrice || isDebtor}
                                    style={{
                                        padding: '14px',
                                        background: 'rgba(251,191,36,0.1)',
                                        color: '#fbbf24',
                                        fontWeight: 900,
                                        fontSize: '13px',
                                        borderRadius: '12px',
                                        border: '1px solid rgba(251,191,36,0.2)',
                                        cursor: (userProfile.totalWealth < sharePrice || isDebtor) ? 'not-allowed' : 'pointer',
                                        opacity: (userProfile.totalWealth < sharePrice || isDebtor) ? 0.3 : 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        gap: '8px',
                                        transition: 'all 0.2s'
                                    }}
                                >
                                    <Icons.DollarSign size={18} />
                                    <span>{isDebtor ? (t.debtRestricted || (lang === 'TR' ? 'Borçlulara Kapalı' : 'Debt Locked')) : (t.sharesBuy || (lang === 'TR' ? 'Hisse Al' : 'Buy Share'))}</span>
                                </button>
                                <button
                                    onClick={onClaimDividend}
                                    disabled={!canClaimDividend}
                                    style={{
                                        padding: '14px',
                                        background: 'rgba(52,211,153,0.1)',
                                        color: '#34d399',
                                        fontWeight: 900,
                                        fontSize: '13px',
                                        borderRadius: '12px',
                                        border: '1px solid rgba(52,211,153,0.2)',
                                        cursor: !canClaimDividend ? 'not-allowed' : 'pointer',
                                        opacity: !canClaimDividend ? 0.3 : 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        gap: '8px',
                                        transition: 'all 0.2s'
                                    }}
                                >
                                    <Icons.Gift size={18} />
                                    <span>{canClaimDividend ? `${t.sharesClaimDividend || (lang === 'TR' ? 'Temettü Topla' : 'Claim')} (${formatMoney(expectedDividend)})` : (t.sharesNoDividend || (lang === 'TR' ? 'Henüz temettü yok' : 'No dividend'))}</span>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    );
}

window.Shop = Shop;