@extends('layouts.guest-page')

@section('title', 'Features')
@section('description', 'Discover the powerful tools that make CheckMyAlgo the ultimate trading platform. Historical replay, deep analytics, and integrated journaling.')

@section('no-container', true)

@section('content')
    <div class="bg-[#030508] relative overflow-hidden">
        
        <!-- Hero Section -->
        <div class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 px-4 sm:px-6 lg:px-8">
            <div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent"></div>
            <!-- Background Glow -->
            <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-blue-500/10 rounded-full blur-[120px] pointer-events-none"></div>

            <div class="max-w-4xl mx-auto text-center relative z-10">
                <h2 class="text-blue-500 font-bold tracking-widest uppercase text-xs mb-4">Professional Grade Tools</h2>
                <h1 class="text-4xl md:text-6xl font-display font-bold text-white mb-6 leading-tight">
                    Everything You Need to <br/>
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500">Master Your Edge</span>
                </h1>
                <p class="text-gray-400 text-lg md:text-xl mb-8 leading-relaxed max-w-2xl mx-auto">
                    Stop gambling. Start trading. We provide the institutional-grade environment you need to test, refine, and prove your trading prowess.
                </p>
            </div>
        </div>

        <!-- Section 1: Institutional Backtesting -->
        <div class="py-24 relative border-t border-white/5 bg-[#05080e]">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                    <div class="order-2 lg:order-1">
                        <div class="relative rounded-2xl border border-white/10 bg-[#0A0C10] shadow-2xl overflow-hidden group">
                            <div class="absolute inset-0 bg-blue-500/5 group-hover:bg-blue-500/10 transition-colors duration-500"></div>
                            <!-- Mockup Image -->
                            <img src="/images/dashboard-mockup.png" alt="Backtesting Engine" class="w-full h-auto transform transition-transform duration-700 group-hover:scale-[1.02]">
                            
                            <!-- Floating Badge -->
                            <div class="absolute top-6 right-6 bg-[#0E121A]/90 backdrop-blur border border-white/10 p-3 rounded-xl shadow-lg">
                                <div class="flex items-center gap-3">
                                    <div class="h-2 w-2 rounded-full bg-green-500 animate-pulse"></div>
                                    <div class="text-xs font-mono text-gray-300">
                                        <div class="text-[10px] text-gray-500 uppercase tracking-wider">Spread</div>
                                        0.0 Pips
                                    </div>
                                    <div class="w-px h-6 bg-white/10"></div>
                                    <div class="text-xs font-mono text-gray-300">
                                        <div class="text-[10px] text-gray-500 uppercase tracking-wider">Latency</div>
                                        0ms
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="order-1 lg:order-2">
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-900/20 border border-blue-500/20 text-blue-400 text-xs font-bold uppercase tracking-wider mb-6">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                            Backtesting Engine
                        </div>
                        <h3 class="text-3xl md:text-4xl font-display font-bold text-white mb-6">Complete Control Over<br/>Your Testing Environment</h3>
                        <p class="text-gray-400 text-lg mb-8 leading-relaxed">
                            Simulate any market condition. Set your starting balance, leverage (up to 1:1000), spread, and commission rules to match your broker exactly.
                        </p>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <svg class="w-5 h-5 text-blue-500 mt-1 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                <div>
                                    <h4 class="text-white font-bold">Multi-Timeframe Replay</h4>
                                    <p class="text-gray-500 text-sm mt-1">View and trade on multiple timeframes simultaneously, just like in a live environment.</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <svg class="w-5 h-5 text-blue-500 mt-1 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                <div>
                                    <h4 class="text-white font-bold">Customizable Risk Parameters</h4>
                                    <p class="text-gray-500 text-sm mt-1">Define max daily drawdown and risk per trade limits to enforce discipline.</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section 2: Trading Battles -->
        <div class="py-24 relative border-t border-white/5">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                    <div>
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-900/20 border border-purple-500/20 text-purple-400 text-xs font-bold uppercase tracking-wider mb-6">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                            Multiplayer Battles
                        </div>
                        <h3 class="text-3xl md:text-4xl font-display font-bold text-white mb-6">Prove Your Skills<br/>Against Real Traders</h3>
                        <p class="text-gray-400 text-lg mb-8 leading-relaxed">
                            Trading doesn't have to be lonely. Create or join battle rooms to compete on ROI, Drawdown management, and Consistency.
                        </p>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="bg-white/5 border border-white/10 p-4 rounded-xl">
                                <div class="text-2xl font-bold text-white mb-1">50+</div>
                                <div class="text-xs text-gray-500 uppercase tracking-widest">Participants</div>
                            </div>
                            <div class="bg-white/5 border border-white/10 p-4 rounded-xl">
                                <div class="text-2xl font-bold text-white mb-1">Real-time</div>
                                <div class="text-xs text-gray-500 uppercase tracking-widest">Leaderboards</div>
                            </div>
                        </div>
                    </div>
                    <div class="relative">
                        <!-- Abstract Battle Visual -->
                        <div class="relative rounded-2xl border border-white/10 bg-[#0E121A] p-6 shadow-2xl">
                             <div class="space-y-4">
                                <!-- Battle Header -->
                                <div class="flex justify-between items-center mb-6">
                                    <div>
                                        <div class="text-sm text-gray-400">Battle #2948</div>
                                        <div class="text-lg font-bold text-white">Gold Rush S23</div>
                                    </div>
                                    <div class="px-3 py-1 bg-green-500/20 text-green-500 text-xs font-bold rounded-full">LIVE</div>
                                </div>
                                
                                <!-- Leaderboard Rows -->
                                <div class="space-y-3">
                                    <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/5">
                                        <div class="flex items-center gap-3">
                                            <div class="w-6 h-6 rounded bg-yellow-500/20 text-yellow-500 flex items-center justify-center text-xs font-bold">1</div>
                                            <div class="text-sm font-medium text-white">AlexTrader</div>
                                        </div>
                                        <div class="text-green-400 font-mono text-sm">+12.4%</div>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/5">
                                        <div class="flex items-center gap-3">
                                            <div class="w-6 h-6 rounded bg-gray-500/20 text-gray-400 flex items-center justify-center text-xs font-bold">2</div>
                                            <div class="text-sm font-medium text-white">Sarah_Fx</div>
                                        </div>
                                        <div class="text-green-400 font-mono text-sm">+8.1%</div>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/5 opacity-60">
                                        <div class="flex items-center gap-3">
                                            <div class="w-6 h-6 rounded bg-gray-500/20 text-gray-400 flex items-center justify-center text-xs font-bold">3</div>
                                            <div class="text-sm font-medium text-white">JohnDoe</div>
                                        </div>
                                        <div class="text-red-400 font-mono text-sm">-1.2%</div>
                                    </div>
                                </div>
                             </div>
                        </div>
                        
                        <!-- Decorative Elements -->
                        <div class="absolute -top-10 -right-10 w-32 h-32 bg-purple-500/20 rounded-full blur-[50px] pointer-events-none"></div>
                        <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-blue-500/20 rounded-full blur-[50px] pointer-events-none"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Section 3: Deep Analytics -->
        <div class="py-24 relative border-t border-white/5 bg-[#05080e]">
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                    <div class="order-2 lg:order-1 relative">
                        <div class="relative rounded-2xl border border-white/10 bg-[#0A0C10] overflow-hidden group shadow-2xl">
                             <img src="/images/feature-analytics.png" alt="Analytics Dashboard" class="w-full h-auto opacity-90 group-hover:opacity-100 transition-opacity duration-500">
                        </div>
                    </div>
                    <div class="order-1 lg:order-2">
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-900/20 border border-emerald-500/20 text-emerald-400 text-xs font-bold uppercase tracking-wider mb-6">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                            Deep Analytics
                        </div>
                        <h3 class="text-3xl md:text-4xl font-display font-bold text-white mb-6">Know Your Stats.<br/>Optimize Your Strategy.</h3>
                        <p class="text-gray-400 text-lg mb-8 leading-relaxed">
                            We track every click. Analyze your Win Rate, Profit Factor, Sharpe Ratio, and drawdown periods automatically. Identify your strengths and eliminate emotional errors.
                        </p>
                        <div class="flex flex-wrap gap-3">
                             <div class="bg-[#1A1E29] border border-white/5 px-4 py-2 rounded-lg text-sm text-gray-300">Win Rate</div>
                             <div class="bg-[#1A1E29] border border-white/5 px-4 py-2 rounded-lg text-sm text-gray-300">Profit Factor</div>
                             <div class="bg-[#1A1E29] border border-white/5 px-4 py-2 rounded-lg text-sm text-gray-300">Avg R:R</div>
                             <div class="bg-[#1A1E29] border border-white/5 px-4 py-2 rounded-lg text-sm text-gray-300">Drawdown</div>
                             <div class="bg-[#1A1E29] border border-white/5 px-4 py-2 rounded-lg text-sm text-gray-300">Expected Value</div>
                        </div>
                    </div>
                </div>
             </div>
        </div>

        <!-- Section 4: Market Coverage -->
        <div class="py-24 border-t border-white/5 relative overflow-hidden">
             <div class="absolute top-0 left-0 w-full h-full bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div>
             <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
                 <h2 class="text-3xl font-display font-bold text-white mb-12">Trade Any Market</h2>
                 <div class="grid grid-cols-2 md:grid-cols-5 gap-4 md:gap-8">
                     <!-- Asset Class Items -->
                     <div class="p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/50 transition-colors group">
                         <div class="text-blue-500 mb-3 group-hover:scale-110 transition-transform duration-300">
                             <svg class="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                         </div>
                         <h4 class="font-bold text-white">Forex</h4>
                         <p class="text-xs text-gray-500 mt-1">Majors & Minors</p>
                     </div>
                     <div class="p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/50 transition-colors group">
                         <div class="text-orange-500 mb-3 group-hover:scale-110 transition-transform duration-300">
                             <svg class="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                         </div>
                         <h4 class="font-bold text-white">Crypto</h4>
                         <p class="text-xs text-gray-500 mt-1">BTC, ETH, SOL</p>
                     </div>
                      <div class="p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/50 transition-colors group">
                         <div class="text-green-500 mb-3 group-hover:scale-110 transition-transform duration-300">
                             <svg class="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path></svg>
                         </div>
                         <h4 class="font-bold text-white">Indices</h4>
                         <p class="text-xs text-gray-500 mt-1">US30, NAS100</p>
                     </div>
                      <div class="p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/50 transition-colors group">
                         <div class="text-yellow-500 mb-3 group-hover:scale-110 transition-transform duration-300">
                             <svg class="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                         </div>
                         <h4 class="font-bold text-white">Metals</h4>
                         <p class="text-xs text-gray-500 mt-1">Gold & Silver</p>
                     </div>
                      <div class="p-6 rounded-2xl bg-white/5 border border-white/10 hover:border-blue-500/50 transition-colors group">
                         <div class="text-purple-500 mb-3 group-hover:scale-110 transition-transform duration-300">
                             <svg class="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path></svg>
                         </div>
                         <h4 class="font-bold text-white">Commodities</h4>
                         <p class="text-xs text-gray-500 mt-1">Oil & Gas</p>
                     </div>
                 </div>
             </div>
        </div>

        <!-- CTA Section -->
        <div class="py-24 relative overflow-hidden">
            <div class="absolute inset-0 bg-blue-600/5"></div>
            <div class="max-w-5xl mx-auto px-4 text-center relative z-10">
                <h2 class="text-4xl font-display font-bold text-white mb-6">Ready to Level Up?</h2>
                <p class="text-gray-400 text-lg mb-10 max-w-2xl mx-auto">
                    Join thousands of traders who have stopped gambling and started building a verifiable edge.
                </p>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                    <a href="{{ route('pricing') }}" class="w-full sm:w-auto px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-xl shadow-lg shadow-blue-600/20 transition-all hover:scale-105">
                        View Pricing
                    </a>
                    <a href="{{ route('register') }}" class="w-full sm:w-auto px-8 py-4 bg-white/5 border border-white/10 hover:bg-white/10 text-white font-bold rounded-xl transition-all">
                        Start Free Trial
                    </a>
                </div>
            </div>
        </div>

    </div>
@endsection