// Screen 8: Badge Earned
function BadgeEarned({ badge, onContinue, totalSessions = 100 }) {
  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100 flex flex-col relative overflow-hidden">
      <window.TopStripe />
      {/* Subtle red ambient glow */}
      <div className="absolute inset-0 pointer-events-none" style={{
        background: `radial-gradient(circle at 50% 40%, ${window.GPS_RED}15 0%, transparent 50%)`,
      }} />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] rounded-full pointer-events-none" style={{
        background: `radial-gradient(circle, ${window.GPS_RED}25 0%, transparent 60%)`,
        animation: "pulse 2.6s ease-in-out infinite",
      }} />

      <div className="flex-1 flex flex-col items-center justify-center px-8 relative z-10" style={{ animation: "badgeEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1)" }}>
        <div className="font-display text-[22px] tracking-[0.4em] mb-6" style={{ color: window.GPS_RED }}>
          NEW BADGE UNLOCKED
        </div>
        <div className="text-[160px] leading-none mb-6 select-none" style={{ filter: `drop-shadow(0 0 40px ${window.GPS_RED}80)` }}>
          {badge.icon}
        </div>
        <div className="font-display text-[88px] leading-none tracking-tight text-center">
          {badge.name}
        </div>
        <div className="text-[22px] text-zinc-300 mt-4 text-center max-w-[600px]">
          {badge.desc}
        </div>
        <div className="text-[15px] text-zinc-500 mt-8">
          You've now completed <span className="text-zinc-200 tabular-nums">{totalSessions} sessions</span> total
        </div>
      </div>

      <div className="px-8 pb-10 relative z-10">
        <button onClick={onContinue}
          className="h-[88px] w-full max-w-[820px] mx-auto rounded-xl bg-zinc-800 border border-zinc-700 text-zinc-100 font-display text-[24px] tracking-wider hover:bg-zinc-700 active:scale-[0.99] transition block">
          CONTINUE →
        </button>
      </div>

      <style>{`
        @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } }
        @keyframes badgeEnter { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
      `}</style>
    </div>
  );
}

window.BadgeEarned = BadgeEarned;