@extends('layouts.app')

@section('title', 'Home')

@section('content')
    <section class="hero">
        <div class="container hero-content">
            <span class="hero-badge">Perpetuals · DeFi · Web3</span>
            <h1>The Future of Perpetuals Is Here</h1>
            <p class="hero-subtitle">
                Leverage any token with a protocol trusted by billions — offering precision execution, speed, and reliability.
            </p>
            <div class="hero-cta">
                <a href="{{ route('register') }}" class="btn btn-primary btn-lg">Start Trading</a>
                <a href="#features" class="btn btn-outline btn-lg">Explore Features</a>
            </div>

            <div class="ticker-strip">
                @foreach(\App\Support\CryptoLogo::featured() as $coin)
                <div class="ticker-item">
                    <span class="ticker-icon">
                        @include('partials.crypto-logo', ['symbol' => $coin['symbol'], 'name' => $coin['name'], 'size' => 40, 'class' => 'ticker-icon__img'])
                    </span>
                    <div>
                        <div class="ticker-name">{{ $coin['name'] }}</div>
                        <div class="ticker-symbol">{{ $coin['symbol'] }}</div>
                    </div>
                </div>
                @endforeach
            </div>

            <div class="stats-row" id="stats">
                <div class="stat-card">
                    <div class="stat-value">$118,744,385,628.32</div>
                    <div class="stat-label">All-time trade volume</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">17,400</div>
                    <div class="stat-label">Total Trades</div>
                </div>
            </div>
        </div>
    </section>

    <section class="section" id="features">
        <div class="container">
            <div class="section-header">
                <h2>Empower Your Crypto Trading</h2>
                <p>Experience complete control and financial freedom with next-gen decentralized trading tools.</p>
            </div>

            <div class="features-grid">
                <article class="feature-card">
                    <div class="feature-icon">📈</div>
                    <h3>Leverage up to 30x</h3>
                    <p>Boost your potential returns with powerful leverage on major pairs.</p>
                </article>
                <article class="feature-card">
                    <div class="feature-icon">💧</div>
                    <h3>Compound with Yield Pools</h3>
                    <p>Earn passive income through our integrated DeFi liquidity solutions.</p>
                </article>
                <article class="feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3>Ultra-Low Fees</h3>
                    <p>Enjoy lightning-fast execution and industry-low transaction costs.</p>
                </article>
                <article class="feature-card">
                    <div class="feature-icon">🔐</div>
                    <h3>Bank-Grade Security</h3>
                    <p>Multi-layer encryption and decentralized storage protect your assets.</p>
                </article>
                <article class="feature-card">
                    <div class="feature-icon">🌐</div>
                    <h3>Global Liquidity</h3>
                    <p>Access deep liquidity pools for top crypto assets anytime, anywhere.</p>
                </article>
                <article class="feature-card">
                    <div class="feature-icon">🔗</div>
                    <h3>Fully Composable</h3>
                    <p>Integrates seamlessly with your favorite DeFi tools and Web3 dApps.</p>
                </article>
            </div>
        </div>
    </section>

    <section class="section security-section" id="security">
        <div class="container">
            <div class="security-grid">
                <div class="security-content">
                    <h2>Fully Decentralized. Completely Secure.</h2>
                    <p>Built with transparency and open-source integrity. Your keys, your crypto — always under your control.</p>
                    <ul class="security-list">
                        <li><span class="icon">✅</span> Continuous code audits and open reviews.</li>
                        <li><span class="icon">🔒</span> Non-custodial smart contracts ensure total user control.</li>
                        <li><span class="icon">🛡️</span> Security-first architecture backed by advanced encryption.</li>
                        <li><span class="icon">⚡</span> Real-time order execution powered by on-chain precision.</li>
                    </ul>
                </div>
                <div class="security-visual">
                    <div class="shield-icon">🛡️</div>
                    <p style="color: var(--text-secondary); font-size: 0.95rem;">
                        Your assets stay in your wallet. Trade with confidence on infrastructure designed for the decentralized era.
                    </p>
                </div>
            </div>
        </div>
    </section>
@endsection