const RefreshCcwIcon = ({ 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 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" /><path d="M16 21v-5h5" /></svg>
);

const HandCoinsIcon = ({ 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="M11 15h2a2 2 0 1 0 0-4h-3c-1.09 0-2-.91-2-2a2 2 0 0 1 2-2h4" /><path d="M12 4v3" /><path d="M12 17v3" /><path d="m2 18 3-3" /><path d="m22 6-3 3" /></svg>
);

const ExternalLinkIcon = ({ 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="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" /></svg>
);

const Features = () => {
    return (
        <section className="py-24 relative overflow-hidden" id="markets">
            <div className="max-w-7xl mx-auto px-6">
                <div className="text-center mb-20 fade-in-up">
                    <h2 className="text-4xl md:text-5xl font-extrabold mb-6">
                        Markets that <span className="text-gradient">Move Fast.</span>
                    </h2>
                    <p className="text-gray-400 text-lg md:text-xl max-w-2xl mx-auto">
                        Trade on the absolute cutting edge. No delays, seamless liquidations, instantly settled in BRLC to your DoxaWallet.
                    </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {/* Feature Card 1 */}
                    <div className="glass-panel p-8 relative overflow-hidden group hover:-translate-y-2 transition-transform duration-300 fade-in-up" style={{ animationDelay: '0.1s' }}>
                        <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                        <div className="w-14 h-14 rounded-2xl bg-emerald-500/20 flex items-center justify-center mb-6 text-emerald-500 relative z-10 group-hover:scale-110 transition-transform">
                            <RefreshCcwIcon size={28} />
                        </div>
                        <h3 className="text-2xl font-bold mb-4 relative z-10">Real-Time Sync</h3>
                        <p className="text-gray-400 relative z-10 leading-relaxed">
                            Every tick, every goal, every election poll updated in milliseconds. If it happens in reality, it's immediately tradeable on DoxaMarket.
                        </p>
                    </div>

                    {/* Feature Card 2 */}
                    <div className="glass-panel p-8 relative overflow-hidden group hover:-translate-y-2 transition-transform duration-300 fade-in-up" style={{ animationDelay: '0.2s' }}>
                        <div className="absolute inset-0 bg-gradient-to-br from-teal-400/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                        <div className="w-14 h-14 rounded-2xl bg-teal-400/20 flex items-center justify-center mb-6 text-teal-400 relative z-10 group-hover:scale-110 transition-transform">
                            <HandCoinsIcon size={28} />
                        </div>
                        <h3 className="text-2xl font-bold mb-4 relative z-10">Instant BRLC Payouts</h3>
                        <p className="text-gray-400 relative z-10 leading-relaxed">
                            No pending periods. The moment an event resolves, winnings are piped directly into your DoxaWallet on-chain in BRLC.
                        </p>
                    </div>

                    {/* Feature Card 3 */}
                    <div className="glass-panel p-8 relative overflow-hidden group hover:-translate-y-2 transition-transform duration-300 fade-in-up md:col-span-2 lg:col-span-1" style={{ animationDelay: '0.3s' }}>
                        <div className="absolute inset-0 bg-gradient-to-br from-[#10B981]/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                        <div className="w-14 h-14 rounded-2xl bg-[#10B981]/20 flex items-center justify-center mb-6 text-[#10B981] relative z-10 group-hover:scale-110 transition-transform">
                            <ExternalLinkIcon size={28} />
                        </div>
                        <h3 className="text-2xl font-bold mb-4 relative z-10">Boundless Liquidity</h3>
                        <p className="text-gray-400 relative z-10 leading-relaxed">
                            Aggregated across the most liquid pools in the ecosystem, so you always get the best fill regardless of size.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    );
};


window.Features = Features;

window.Features = Features;