                  {/* ── STUNNING NEW HERO SECTION ── */}
                  <div className="relative rounded-[32px] overflow-hidden bg-slate-900 p-8 md:p-10 shadow-2xl flex flex-col md:flex-row md:items-center justify-between gap-8 border border-slate-800">
                    <div className="absolute top-0 right-0 w-96 h-96 bg-blue-500 rounded-full blur-[120px] opacity-30 -mr-20 -mt-20 pointer-events-none"></div>
                    <div className="absolute bottom-0 left-0 w-96 h-96 bg-indigo-500 rounded-full blur-[120px] opacity-20 -ml-20 -mb-20 pointer-events-none"></div>
                    
                    <div className="relative z-10 space-y-4">
                      <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
                        <span className="relative flex h-2.5 w-2.5">
                          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                          <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
                        </span>
                        <span className="text-[10px] font-bold tracking-widest uppercase text-slate-300">Live Workspace</span>
                      </div>
                      <h1 className="text-4xl md:text-5xl font-black text-white tracking-tight leading-tight">
                        Welcome back, <br/>
                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-400">
                          {currentUser?.name?.split(' ')[0] || 'Admin'}
                        </span> 👋
                      </h1>
                      <p className="text-slate-400 font-medium max-w-lg text-sm md:text-base leading-relaxed">
                        Here's what's happening with your store today. You have <strong className="text-white">{pendingOrders} pending orders</strong> requiring your attention.
                      </p>
                    </div>

                    <div className="relative z-10 flex gap-4 w-full md:w-auto">
                      <div className="flex-1 md:flex-none bg-white/5 border border-white/10 backdrop-blur-md rounded-2xl p-5 min-w-[140px]">
                        <p className="text-xs text-slate-400 font-bold uppercase tracking-wider mb-2">Today's Revenue</p>
                        <p className="text-3xl font-black text-white">৳{confirmedOrderValue.toLocaleString()}</p>
                      </div>
                      <div className="flex-1 md:flex-none bg-white/5 border border-white/10 backdrop-blur-md rounded-2xl p-5 min-w-[140px]">
                        <p className="text-xs text-slate-400 font-bold uppercase tracking-wider mb-2">Net Profit</p>
                        <p className={`text-3xl font-black ${isProfit ? 'text-emerald-400' : 'text-red-400'}`}>
                          {isProfit ? '+' : '-'}৳{Math.abs(netProfit).toLocaleString()}
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* ── REDESIGNED STAT CARDS ── */}
                  <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
                    {[
                      { label: 'Total Orders', value: totalOrders, sub: `${pendingOrders} pending`, icon: ClipboardList, color: 'text-blue-600', bg: 'bg-blue-50', border: 'border-blue-100', shadow: 'shadow-blue-500/10' },
                      { label: 'Incomplete', value: totalLeads, sub: `${totalInitiatedCheckouts} initiated`, icon: Users, color: 'text-purple-600', bg: 'bg-purple-50', border: 'border-purple-100', shadow: 'shadow-purple-500/10' },
                      { label: 'Revenue', value: `৳${confirmedOrderValue.toLocaleString()}`, sub: `${grossMargin.toFixed(1)}% gross margin`, icon: CreditCard, color: 'text-emerald-600', bg: 'bg-emerald-50', border: 'border-emerald-100', shadow: 'shadow-emerald-500/10' },
                      { label: 'Net Margin', value: `${profitMargin.toFixed(1)}%`, sub: `৳${Math.abs(netProfit).toLocaleString()} ${isProfit ? 'profit' : 'loss'}`, icon: isProfit ? TrendingUpIcon : TrendingDownIcon, color: isProfit ? 'text-emerald-600' : 'text-red-600', bg: isProfit ? 'bg-emerald-50' : 'bg-red-50', border: isProfit ? 'border-emerald-100' : 'border-red-100', shadow: isProfit ? 'shadow-emerald-500/10' : 'shadow-red-500/10' },
                    ].map((s, i) => (
                      <div key={i} className={`bg-white rounded-3xl p-6 border ${s.border} hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-default shadow-sm ${s.shadow}`}>
                        <div className={`w-12 h-12 rounded-2xl flex items-center justify-center mb-4 ${s.bg} ${s.color}`}>
                          <s.icon size={22} />
                        </div>
                        <p className="text-3xl font-black text-slate-800 tracking-tight leading-none mb-2">{s.value}</p>
                        <p className="text-sm font-bold text-slate-500">{s.label}</p>
                        <div className="mt-4 inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-wider bg-slate-50 text-slate-600 border border-slate-200">
                          {s.sub}
                        </div>
                      </div>
                    ))}
                  </div>
