const ShopTab = ({
  player,
  shopCosts,
  buyPart,
  buyWeapon,
  enhanceWeapon,
  weapon
}) => {
  return (
    <div className="p-10 lg:p-16 max-w-4xl mx-auto space-y-8 animate-fade-in-up">
      <h2 className="text-2xl font-bold border-b border-gray-700 pb-4 text-emerald-400 flex items-center gap-3">
        <Database size={28} /> ジャンク屋 - SHOP
      </h2>

      <div className="bg-gray-800 border border-gray-700 rounded-2xl p-8 flex items-center justify-between shadow-2xl relative overflow-hidden group">
        <div className="absolute top-0 right-0 w-64 h-64 bg-yellow-500/5 rounded-full -mr-20 -mt-20 blur-3xl group-hover:bg-yellow-500/10 transition-colors"></div>
        <div className="relative z-10">
          <div className="text-xs text-gray-500 font-bold tracking-widest mb-1 uppercase">Available Scrap</div>
          <div className="text-4xl font-black text-yellow-400 flex items-baseline gap-2">
            {player.scrap || 0} 
            <span className="text-sm font-bold text-gray-500 tracking-widest uppercase">Scrap</span>
          </div>
        </div>
        <div className="bg-gray-900/80 px-6 py-4 rounded-2xl border border-gray-700 text-sm text-gray-400 italic shadow-inner relative z-10 max-w-[200px] text-center">
          「良いブツが入ってるぜ、あんた。」
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-gray-800 border border-gray-700 rounded-2xl p-8 hover:border-emerald-500/50 transition-all group shadow-xl hover:shadow-emerald-900/10 relative overflow-hidden">
          <div className="flex items-start justify-between mb-6">
            <div className="w-14 h-14 bg-emerald-900/30 rounded-2xl flex items-center justify-center text-emerald-400 group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg border border-emerald-800/30">
              <Package size={32} />
            </div>
            <div className="bg-gray-900 px-4 py-1.5 rounded-full text-[10px] font-black tracking-widest text-emerald-400 border border-emerald-900/50 uppercase">Item</div>
          </div>
          <h3 className="text-2xl font-black mb-2">Random Part</h3>
          <p className="text-gray-400 text-sm mb-8 leading-relaxed opacity-80">現在の階層に応じたパーツをランダムに1つ提供する。予期せぬ発見があるかもしれない。</p>
          <button 
            onClick={buyPart}
            disabled={(player.scrap || 0) < shopCosts.part}
            className={`w-full py-4 rounded-xl font-black text-xs tracking-widest uppercase transition-all shadow-lg ${
              (player.scrap || 0) >= shopCosts.part 
                ? 'bg-emerald-600 hover:bg-emerald-500 text-white shadow-emerald-900/50' 
                : 'bg-gray-700 text-gray-500 cursor-not-allowed border border-gray-600'
            }`}
          >
            Purchase ({shopCosts.part} S)
          </button>
        </div>

        <div className="bg-gray-800 border border-gray-700 rounded-2xl p-8 hover:border-emerald-500/50 transition-all group shadow-xl hover:shadow-emerald-900/10 relative overflow-hidden">
          <div className="flex items-start justify-between mb-6">
            <div className="w-14 h-14 bg-emerald-900/30 rounded-2xl flex items-center justify-center text-emerald-400 group-hover:scale-110 group-hover:-rotate-3 transition-all duration-300 shadow-lg border border-emerald-800/30">
              <Sword size={32} />
            </div>
            <div className="bg-gray-900 px-4 py-1.5 rounded-full text-[10px] font-black tracking-widest text-emerald-400 border border-emerald-900/50 uppercase">Gear</div>
          </div>
          <h3 className="text-2xl font-black mb-2">Random Weapon</h3>
          <p className="text-gray-400 text-sm mb-8 leading-relaxed opacity-80">現在の階層に応じた武器をランダムに1つ提供する。強力なベース武器を探しているならこれだ。</p>
          <button 
            onClick={buyWeapon}
            disabled={(player.scrap || 0) < shopCosts.weapon}
            className={`w-full py-4 rounded-xl font-black text-xs tracking-widest uppercase transition-all shadow-lg ${
              (player.scrap || 0) >= shopCosts.weapon 
                ? 'bg-emerald-600 hover:bg-emerald-500 text-white shadow-emerald-900/50' 
                : 'bg-gray-700 text-gray-500 cursor-not-allowed border border-gray-600'
            }`}
          >
            Purchase ({shopCosts.weapon} S)
          </button>
        </div>

        <div className="bg-gray-800 border border-gray-700 rounded-2xl p-8 hover:border-blue-500/50 transition-all group shadow-xl hover:shadow-blue-900/10 md:col-span-2 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-full bg-gradient-to-l from-blue-500/5 to-transparent pointer-events-none"></div>
          <div className="flex items-start justify-between mb-6">
            <div className="w-14 h-14 bg-blue-900/30 rounded-2xl flex items-center justify-center text-blue-400 group-hover:scale-110 transition-all duration-300 shadow-lg border border-blue-800/30">
              <Zap size={32} />
            </div>
            <div className="bg-gray-900 px-4 py-1.5 rounded-full text-[10px] font-black tracking-widest text-blue-400 border border-blue-900/50 uppercase">Modification</div>
          </div>
          <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
            <div className="flex-1">
              <h3 className="text-2xl font-black mb-2">Weapon Enhancement</h3>
              <p className="text-gray-400 text-sm leading-relaxed opacity-80">現在装備中の武器の基本攻撃力を永続的にアップさせる。(Base ATK +5)</p>
            </div>
            <div className="flex gap-4">
               <div className="bg-gray-900/80 rounded-2xl p-4 border border-gray-700 shadow-inner min-w-[100px] text-center">
                 <div className="text-[10px] text-gray-500 mb-1 font-black tracking-widest uppercase opacity-60">Level</div>
                 <div className="text-xl font-black text-blue-400">Lv {weapon.enhanceLv || 0}</div>
               </div>
               <div className="bg-gray-900/80 rounded-2xl p-4 border border-gray-700 shadow-inner min-w-[100px] text-center">
                 <div className="text-[10px] text-gray-500 mb-1 font-black tracking-widest uppercase opacity-60">Current Atk</div>
                 <div className="text-xl font-black text-blue-400">{weapon.baseAtk}</div>
               </div>
            </div>
          </div>
          <button 
            onClick={enhanceWeapon}
            disabled={(player.scrap || 0) < shopCosts.enhance}
            className={`w-full py-4 rounded-xl font-black text-xs tracking-widest uppercase transition-all shadow-lg ${
              (player.scrap || 0) >= shopCosts.enhance 
                ? 'bg-blue-600 hover:bg-blue-500 text-white shadow-blue-900/50' 
                : 'bg-gray-700 text-gray-500 cursor-not-allowed border border-gray-600'
            }`}
          >
            Enhance Weapon ({shopCosts.enhance} S)
          </button>
        </div>
      </div>
    </div>
  );
};