function Lobby({ t, lang, setActiveGame, setGameState, Icons, userProfile, setShowShop, setShowDebtPanel }) {
    const isDebtor = userProfile?.isDebtor;

    const gameCards = [
        {
            id: 'oneMoreDice',
            title: t.oneMoreDiceTitle,
            desc: t.oneMoreDiceDesc,
            icon: <Icons.Dices size={44} />,
            color: 'from-indigo-600 to-blue-500',
            glow: 'shadow-indigo-500/40',
            bg: 'bg-indigo-500/10',
            playText: t.playNow
        },
        {
            id: 'cardPath',
            title: t.cardPathTitle || "Card Path",
            desc: t.cardPathDesc || "2 karttan biri GÜVENLİ, diğeri TUZAK. Doğru seçimi yaparak büyük ödüle ulaşın.",
            icon: <Icons.DollarSign size={44} />,
            color: 'from-emerald-600 to-teal-500',
            glow: 'shadow-emerald-500/40',
            bg: 'bg-emerald-500/10',
            playText: t.choosePath
        },
        {
            id: 'fortuneFlip',
            title: t.fortuneFlipTitle || "Fortune Flip",
            desc: t.comingSoon + "...",
            icon: <Icons.Trophy size={44} />,
            color: 'from-slate-700 to-slate-800',
            glow: '',
            bg: 'bg-slate-800/10',
            locked: true
        }
    ];

    return (
        <div className="w-full max-w-6xl mx-auto px-4 py-8 animate-in fade-in slide-in-from-bottom-8 duration-1000">

            {/* DEBTOR WARNING */}
            {isDebtor && (
                <div className="mb-10 bg-rose-500/10 border border-rose-500/20 rounded-3xl p-6 flex flex-col md:flex-row items-center gap-6 backdrop-blur-md">
                    <div className="w-16 h-16 bg-rose-600 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg shadow-rose-600/30 animate-pulse">
                        <Icons.AlertTriangle size={32} className="text-white" />
                    </div>
                    <div className="flex-1 text-center md:text-left">
                        <p className="text-rose-400 font-black text-xl tracking-tight uppercase italic">{t.debtorWarning}</p>
                        <p className="text-rose-300/60 text-sm mt-1 font-medium italic">{t.debtorJobsDesc}</p>
                    </div>
                    <button
                        onClick={() => setShowDebtPanel(true)}
                        className="px-8 py-4 bg-gradient-to-r from-rose-600 to-rose-700 hover:from-rose-500 hover:to-rose-600 text-white font-black text-sm uppercase tracking-widest rounded-2xl transition-all hover:scale-105 active:scale-95 shadow-xl shadow-rose-600/20 flex items-center gap-3"
                    >
                        <Icons.Hammer size={18} />
                        {t.debtorJobsTitle}
                    </button>
                </div>
            )}

            {/* STATUS BADGES & MARKET */}
            <div className="mb-8 flex flex-wrap items-center justify-center gap-4">
                <button 
                    onClick={() => setShowShop(true)}
                    className="group relative flex items-center gap-4 bg-slate-950/60 border border-purple-500/30 px-6 py-3 rounded-2xl backdrop-blur-md shadow-2xl hover:bg-purple-600/10 hover:scale-105 active:scale-95 transition-all"
                    title={t.shopDesc}
                >
                    <Icons.Store size={22} className="text-purple-400" />
                    <span className="text-[12px] font-black tracking-[0.3em] text-purple-400 uppercase">{t.market || "MARKET"}</span>
                    <div className="absolute inset-0 rounded-2xl bg-purple-500/5 blur-xl group-hover:bg-purple-500/10 transition-all"></div>
                </button>

                {userProfile?.title && (
                    <div 
                        className="flex items-center gap-3 bg-slate-900/60 border border-amber-500/30 px-5 py-2 rounded-2xl backdrop-blur-md shadow-lg cursor-help"
                        title={t[`title${userProfile.title.replace(/\s/g, '')}Desc`]}
                    >
                        <Icons.Star size={18} className="text-amber-400" />
                        <span className="text-[12px] font-black tracking-[0.2em] text-amber-500 uppercase">
                            {t[`title${userProfile.title.replace(/\s/g, '')}`] || userProfile.title}
                        </span>
                    </div>
                )}
                {userProfile?.activeCollection && (
                    <div 
                        className="flex items-center gap-3 bg-slate-900/60 border border-purple-500/30 px-5 py-2 rounded-2xl backdrop-blur-md shadow-lg cursor-help"
                        title={t[`${userProfile.activeCollection}Desc`]}
                    >
                        <Icons.Gem size={18} className="text-purple-400" />
                        <span className="text-[12px] font-black tracking-[0.2em] text-purple-400 uppercase">
                            {t[`${userProfile.activeCollection}Name`] || userProfile.activeCollection}
                        </span>
                    </div>
                )}
            </div>

            {/* HERO SECTION */}
            <div className="text-center mb-16 relative">
                <div className="absolute -top-24 left-1/2 -translate-x-1/2 w-96 h-96 bg-indigo-600/10 blur-[120px] -z-10 rounded-full"></div>
                <h2 className="text-7xl font-black mb-6 tracking-tighter bg-gradient-to-b from-white via-slate-200 to-slate-500 bg-clip-text text-transparent italic">
                    {t.selectGame}
                </h2>
                <div className="flex items-center justify-center gap-4">
                    <div className="h-px w-12 bg-gradient-to-r from-transparent to-indigo-500/50"></div>
                    <p className="text-indigo-400/60 font-black tracking-[0.3em] uppercase text-xs">{t.subtitle}</p>
                    <div className="h-px w-12 bg-gradient-to-l from-transparent to-indigo-500/50"></div>
                </div>
            </div>

            {/* GAME GRID */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mb-20">
                {gameCards.map((card) => (
                    <div
                        key={card.id}
                        onClick={() => { if (!card.locked && !isDebtor) { setActiveGame(card.id); setGameState('start'); } }}
                        className={`group relative h-full flex flex-col p-[2px] rounded-[3.5rem] transition-all duration-500 ${card.locked || isDebtor ? 'opacity-40 grayscale pointer-events-none cursor-default' : 'cursor-pointer hover:scale-[1.03] active:scale-95'}`}
                    >
                        {/* BORDER GRADIENT */}
                        <div className={`absolute inset-0 rounded-[3.5rem] bg-gradient-to-br transition-all duration-500 ${card.locked ? 'from-slate-700 to-slate-800' : 'from-slate-800 via-slate-700 to-slate-800 group-hover:' + card.color}`}></div>

                        {/* MAIN CONTENT */}
                        <div className="relative flex-1 bg-[#020617] rounded-[3.4rem] p-10 flex flex-col items-center text-center overflow-hidden">

                            {/* LOCKED OVERLAY */}
                            {card.locked && (
                                <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-slate-950/80 backdrop-blur-sm">
                                    <div className="p-5 bg-slate-900 rounded-3xl mb-4 border border-white/5">
                                        <Icons.Lock size={48} className="text-slate-600" />
                                    </div>
                                    <p className="font-black text-slate-500 tracking-widest uppercase text-sm italic">{t.comingSoon}</p>
                                </div>
                            )}

                            {/* DEBTOR OVERLAY */}
                            {!card.locked && isDebtor && (
                                <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-rose-950/40 backdrop-blur-md">
                                    <div className="p-5 bg-rose-900 rounded-3xl mb-4 border border-rose-500/20 shadow-2xl shadow-rose-600/30">
                                        <Icons.ShieldAlert size={48} className="text-white" />
                                    </div>
                                    <p className="font-black text-white tracking-widest uppercase text-xs italic px-6 py-3 bg-rose-600 rounded-2xl shadow-xl">{t.debtRestricted}</p>
                                </div>
                            )}

                            {/* DECORATION BLUR */}
                            <div className={`absolute -top-20 -right-20 w-40 h-40 bg-gradient-to-br ${card.color} opacity-0 group-hover:opacity-20 blur-[60px] transition-opacity duration-700`}></div>

                            {/* ICON BOX */}
                            <div className={`w-28 h-28 ${card.locked ? 'bg-slate-900' : 'bg-gradient-to-br ' + card.color} rounded-[2rem] flex items-center justify-center mb-10 shadow-2xl ${card.locked ? '' : card.glow} transition-all duration-700 group-hover:scale-110 group-hover:rotate-6`}>
                                <div className="text-white drop-shadow-lg">
                                    {card.icon}
                                </div>
                            </div>

                            <h3 className={`text-3xl font-black mb-4 tracking-tight ${card.locked ? 'text-slate-600' : 'text-white'}`}>{card.title}</h3>
                            <p className={`text-sm leading-relaxed mb-10 italic flex-1 ${card.locked ? 'text-slate-700' : 'text-slate-400'}`}>
                                {card.desc}
                            </p>

                            {!card.locked && (
                                <div className="w-full flex items-center justify-between mt-auto pt-6 border-t border-white/5">
                                    <span className={`flex items-center gap-3 font-black text-xs uppercase tracking-[0.2em] transition-all ${isDebtor ? 'text-rose-400' : 'text-white group-hover:text-amber-400 group-hover:translate-x-1'}`}>
                                        <div className={`w-2 h-2 rounded-full animate-ping ${isDebtor ? 'bg-rose-400' : 'bg-amber-400'}`}></div>
                                        {card.playText}
                                    </span>
                                    <div className={`w-14 h-14 rounded-2xl flex items-center justify-center text-white transition-all duration-500 border border-white/5 ${isDebtor ? 'bg-rose-900/20 overflow-hidden text-rose-500' : 'bg-white/5 group-hover:bg-amber-500 group-hover:text-black group-hover:shadow-lg group-hover:shadow-amber-500/30 group-hover:rotate-12'}`}>
                                        <Icons.PlayCircle size={28} />
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

window.Lobby = Lobby;