<button className="bg-red-500 hover:bg-red-400 text-black font-bold py-4 rounded-2xl text-lg transition-all">
🔴 SMALL
</button>
</div>
<div className="bg-zinc-800 rounded-2xl p-4 space-y-2">
<h2 className="text-xl font-semibold text-green-300">Last Results</h2>
<div className="flex flex-wrap gap-2 mt-2">
{results.map((item, index) => (
<span
key={index}
className={`px-3 py-1 rounded-full text-sm font-semibold ${
item === "Big"
? "bg-green-500 text-black"
: "bg-red-500 text-black"
}`}
>
{item}
</span>
))}
</div>
</div>
<div className="bg-zinc-800 rounded-2xl p-4 space-y-3">
<h2 className="text-xl font-semibold text-cyan-300">Analysis</h2>
<div className="flex justify-between text-lg">
<span>Big Rate</span>
<span className="font-bold text-green-400">{bigRate}%</span>
</div>
<div className="flex justify-between text-lg">
<span>Small Rate</span>
<span className="font-bold text-red-400">{smallRate}%</span>
</div>
<div className="flex justify-between text-lg">
<span>Trend</span>
<span className="font-bold text-yellow-300">{trend}</span>
</div>
<div className="flex justify-between text-lg">
<span>Current Streak</span>
<span className="font-bold text-pink-400">
{streak}x {last}
</span>
</div>
<div className="flex justify-between text-lg">
<span>Confidence</span>
<span className="font-bold text-cyan-400">{confidence}%</span>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<button className="bg-cyan-500 hover:bg-cyan-400 text-black font-bold py-3 rounded-2xl transition-all">
🔍 ANALYZE
</button>
<button className="bg-zinc-700 hover:bg-zinc-600 text-white font-bold py-3 rounded-2xl transition-all">
🔄 RESET
</button>
</div>
<div className="bg-zinc-800 rounded-2xl p-4">
<div className="flex items-center justify-between mb-2">
<span className="text-lg font-semibold">Confidence Meter</span>
<span className="text-cyan-400 font-bold">{confidence}%</span>
</div>
<div className="w-full bg-zinc-700 rounded-full h-4 overflow-hidden">
<div
className="bg-cyan-400 h-4 rounded-full transition-all duration-500"
style={{ width: `${confidence}%` }}
/>
</div>
</div>
<div className="text-center text-xs text-zinc-500 pt-2">
This app provides statistical trend analysis only.
</div>