const WalletIcon = ({ size, className }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" /><path d="M3 5v14a2 2 0 0 0 2 2h16v-5" /><path d="M18 12a2 2 0 0 0 0 4h4v-4Z" /></svg>
);

const ShieldCheckIcon = ({ size, className }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" /><path d="m9 12 2 2 4-4" /></svg>
);

const ZapIcon = ({ size, className }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" /></svg>
);

const ArrowRightIcon = ({ size, className }) => (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
);

const WalletIntegration = () => {
    return (
        <section className="py-24 relative overflow-hidden" id="wallet">
            <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">

                {/* Left Interactive Mockup */}
                <div className="relative order-2 lg:order-1 perspective-1000 w-full flex justify-center lg:justify-start">
                    <div className="absolute inset-0 bg-emerald-500/10 rounded-full mix-blend-screen filter blur-[120px] animate-pulse-glow"></div>

                    <div className="w-full max-w-sm glass-panel border-emerald-500/40 border-2 rounded-[2.5rem] p-4 relative z-10 shadow-[0_0_50px_rgba(16,185,129,0.2)] bg-[#0f172a] fade-in-right transform perspective-1000 rotate-y-[-10deg]">
                        {/* Phone Top Bar */}
                        <div className="w-full flex justify-center mb-6 pt-2">
                            <div className="h-6 w-32 bg-black rounded-full flex items-center justify-between px-2">
                                <div className="h-2 w-2 bg-emerald-500 rounded-full animate-pulse"></div>
                            </div>
                        </div>

                        {/* Wallet Header */}
                        <div className="text-center mb-8">
                            <div className="w-16 h-16 rounded-full mx-auto bg-gradient-to-br from-emerald-500 to-teal-400 flex items-center justify-center p-1 mb-4">
                                <div className="w-full h-full bg-[#0f172a] rounded-full flex items-center justify-center border-2 border-transparent">
                                    <WalletIcon className="text-white" size={24} />
                                </div>
                            </div>
                            <h3 className="text-xl font-bold">DoxaWallet</h3>
                            <p className="text-emerald-400 font-bold text-3xl mt-2">24.942,80 BRLC</p>
                        </div>

                        {/* Activity List */}
                        <div className="space-y-3 mb-6">
                            <div className="bg-[#1A1A1E] rounded-2xl p-4 flex items-center justify-between border border-white/5 hover:bg-white/5 transition-colors cursor-pointer">
                                <div className="flex items-center gap-3">
                                    <div className="w-10 h-10 rounded-xl bg-[#10B981]/20 flex items-center justify-center text-[#10B981]">
                                        <ZapIcon size={18} />
                                    </div>
                                    <div>
                                        <p className="text-sm font-bold">Market Won</p>
                                        <p className="text-xs text-gray-500">Brazilian Serie A</p>
                                    </div>
                                </div>
                                <div className="text-right">
                                    <p className="text-sm font-bold text-[#10B981]">+ 1.240,00 BRLC</p>
                                    <p className="text-xs text-gray-500">Just now</p>
                                </div>
                            </div>

                            <div className="bg-[#1A1A1E] rounded-2xl p-4 flex items-center justify-between border border-white/5 hover:bg-white/5 transition-colors cursor-pointer">
                                <div className="flex items-center gap-3">
                                    <div className="w-10 h-10 rounded-xl bg-emerald-500/20 flex items-center justify-center text-emerald-500">
                                        <ShieldCheckIcon size={18} />
                                    </div>
                                    <div>
                                        <p className="text-sm font-bold">Position Opened</p>
                                        <p className="text-xs text-gray-500">US Elections 2028</p>
                                    </div>
                                </div>
                                <div className="text-right">
                                    <p className="text-sm font-bold text-white">- 500,00 BRLC</p>
                                    <p className="text-xs text-gray-500">2h ago</p>
                                </div>
                            </div>
                        </div>

                        <button className="w-full py-3.5 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-400 font-bold text-white shadow-lg text-sm hover:scale-[1.02] transition-transform">
                            Open DoxaWallet
                        </button>
                    </div>
                </div>

                {/* Right Copy */}
                <div className="order-1 lg:order-2 fade-in-up">
                    <h2 className="text-4xl md:text-5xl font-extrabold mb-6 leading-tight">
                        Powered natively by <br />
                        <span className="text-gradient">DoxaWallet.</span>
                    </h2>

                    <p className="text-gray-400 text-lg mb-8 leading-relaxed max-w-lg">
                        Say goodbye to clumsy bridge txs, high gas fees, and fragmented liquidity. DoxaMarket is fully integrated with DoxaWallet, giving you a totally frictionless prediction experience native to BRLC.
                    </p>

                    <ul className="space-y-6 mb-10">
                        {[
                            { title: "One-Click Plays", desc: "No approvals. No waiting. See a market, click, and you're in." },
                            { title: "Zero Gas Headaches", desc: "Gas is abstracted. Your balance is exactly what you trade." },
                            { title: "Self-Custody", desc: "You hold the keys. Nobody can access your funds or freeze your winnings." }
                        ].map((feature, i) => (
                            <li key={i} className="flex items-start gap-4 fade-in-up" style={{ animationDelay: `${0.2 + (i * 0.1)}s` }}>
                                <div className="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center text-emerald-500 mt-1 shrink-0">
                                    <ShieldCheckIcon size={16} />
                                </div>
                                <div>
                                    <h4 className="font-bold text-white mb-1">{feature.title}</h4>
                                    <p className="text-gray-400 text-sm leading-relaxed">{feature.desc}</p>
                                </div>
                            </li>
                        ))}
                    </ul>

                    <button className="flex items-center gap-2 text-emerald-400 font-bold hover:text-white transition-colors group">
                        Download DoxaWallet Extension
                        <span className="group-hover:translate-x-1 transition-transform inline-block"><ArrowRightIcon size={18} /></span>
                    </button>
                </div>

            </div>
        </section>
    );
};


window.WalletIntegration = WalletIntegration;

window.WalletIntegration = WalletIntegration;