       {CARDS.map((card, idx) => (
                    <div
                        key={idx}
                        className={`bg-white rounded-2xl shadow-lg border transition-all duration-700 ease-in-out transform 
                            hover:shadow-2xl hover:scale-105 cursor-pointer
                            ${card.faded ? "opacity-60" : ""}
                            ${activeCard === card.title ? "cursor-default" : "cursor-pointer"}
                            ${selectedCampaigns.includes(card.title)
                                ? 'shadow-2xl scale-[1.02] '
                                : 'hover:scale-105 hover:shadow-xl'
                            } `}
                        onClick={() => handleCardClick(card.title, card.paused)}
                        style={{
                            transform: selectedCampaigns.includes(card.title)
                                ? 'translateY(-5px) scale(1.02)'
                                : 'translateY(0px) scale(1)'
                        }}
                    >
                        {selectedCampaigns.includes(card.title) && activeCard === card.title ? (
                            <div className="py-3 flex flex-col ">
                                {/* Header */}
                                <div className="flex items-center justify-between  border-b border-gray-200 pb-2">
                                    <div className="flex items-center gap-4">
                                        <button
                                            onClick={handleBackClick}
                                            className="p-2 hover:bg-gray-100 rounded-lg transition-all duration-300 hover:scale-110"
                                        >
                                            <ArrowLeft className="w-5 h-5 text-gray-600" />
                                        </button>
                                        <h1 className="text-xl font-bold text-gray-900">{card.title}</h1>
                                    </div>
                                    <button
                                        onClick={() => handleMenuClick(card.title)}
                                        className="p-2 hover:bg-gray-100 rounded-lg transition-all duration-300 hover:scale-110"
                                        title="View table"
                                    >
                                        <Menu className="w-5 h-5 text-gray-600" />
                                    </button>
                                </div>

                                {/* Content with smooth transitions */}
                                <div className={`transition-all duration-700 ease-in-out ${tableView === card.title
                                    ? 'opacity-0 translate-y-4 pointer-events-none'
                                    : 'opacity-100 translate-y-0'
                                    }`}
                                    style={{ display: tableView !== card.title ? 'block' : 'none' }}>
                                    <CampaignTracker />
                                </div>

                                {/* Table View with smooth transitions */}
                                <div className={`transition-all duration-700 ease-in-out ${tableView === card.title
                                    ? 'opacity-100 translate-y-0'
                                    : 'opacity-0 translate-y-4 pointer-events-none'
                                    }`}
                                    style={{ display: tableView === card.title ? 'block' : 'none' }}
                                >
                                    <div className="custom-scrollbar-table">
                                        <table className="w-full rounded-lg ">
                                            <tbody>
                                                {[
                                                    { icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' },
                                                    { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' },
                                                    { icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' },
                                                    { icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' },
                                                    { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' },
                                                    { icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' },
                                                    { icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' },
                                                    { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' },
                                                    { icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' },
                                                    { icon: '🅿️', title: 'Pinterest DR 97 DA 95 Traffic 3,989,220' },
                                                    { icon: '📄', title: 'Questions to ask your CPA Substack DR 97 DA 95' }
                                                ].map((row, rIdx) => (
                                                    <tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors'>
                                                        <td className='py-3 pl-2 text-center w-10'>{row.icon}</td>
                                                        <td className='py-3 px-1 min-w-[300px] text-[#4285F4] hover:text-[#1e40af] cursor-pointer font-medium' title={row.title}>
                                                            <div className='truncate max-w-[300px] text-sm underline'>{row.title}</div>
                                                        </td>
                                                    </tr>
                                                ))}
                                            </tbody>

                                        </table>

                                    </div>
                                    <div className="text-blue-600 text-sm cursor-pointer hover:underline transition-all duration-300 hover:text-blue-800 text-center pt-3" style={{ boxShadow: '#dadada 0px -6px 10px' }}>View All</div>
                                </div>

                            </div>
                        ) : (
                            // Card preview state
                            <div className="p-5 flex flex-col items-center">
                                {card.badge && (
                                    <div className="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold transform rotate-12 shadow-lg">
                                        {card.badge}
                                    </div>
                                )}
                                <MultiRingCircularProgress card={card} />
                                <div className={`mt-4 font-bold text-lg text-center ${card.faded ? "text-gray-400" : "text-gray-900"}`}>
                                    {card.title}
                                </div>
                                <div className="mt-3 flex flex-row gap-2 flex-wrap justify-center">
                                    {card.tags.map((tag, i) => (
                                        <span
                                            key={i}
                                            className={`rounded-full border-2 bg-white px-3 py-1 flex items-center text-sm font-medium transition-all duration-300 hover:scale-105 ${card.faded
                                                ? "text-gray-400 border-gray-300"
                                                : "text-gray-700 border-gray-200 hover:border-blue-300"
                                                }`}
                                            style={tag.color ? { color: tag.color, borderColor: tag.color } : {}}
                                        >
                                            {tag.text}
                                            {tag.extra && (
                                                <span className={`ml-1 text-xs ${card.faded ? "text-gray-400" : "text-green-600 font-bold"
                                                    }`}>
                                                    {tag.extra}
                                                </span>
                                            )}
                                        </span>
                                    ))}
                                </div>
                                {card.actionLink && (
                                    <div className="mt-3 text-blue-600 text-sm cursor-pointer hover:underline transition-all duration-300 hover:text-blue-800">
                                        {card.actionLink}
                                    </div>
                                )}
                                {card.paused && (
                                    <div className="mt-3 text-center">
                                        <div className="text-gray-400 text-sm">Campaign paused</div>
                                        <button className="text-blue-600 text-sm hover:underline transition-all duration-300 hover:text-blue-800">Resume</button>
                                    </div>
                                )}
                            </div>
                        )}

                    </div>
                ))}
