@extends('layouts.base')

@section('title', 'Pricing')

@section('content')

    <!-- Page Header -->
    <section class="bg-gradient-to-r from-primary-600 to-primary-800 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl font-bold text-white">Our Pricing</h1>
            <p class="mt-3 text-lg text-white/70">Choose a plan that fits your goals</p>
            <nav class="mt-4 flex justify-center">
                <ol class="flex items-center space-x-2 text-sm text-white/60">
                    <li><a href="/" class="hover:text-white transition-colors"><i data-lucide="home" class="w-4 h-4 inline"></i> Home</a></li>
                    <li>/</li>
                    <li class="text-white font-medium">Pricing</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- Pricing Cards -->
    <section class="bg-gray-50 dark:bg-gray-900 py-16 lg:py-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($plans as $plan)
                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-6 hover:shadow-lg transition-shadow">
                        <div class="text-center">
                            <div class="w-12 h-12 bg-primary-50 dark:bg-primary-900/30 rounded-xl flex items-center justify-center mx-auto mb-4">
                                <i data-lucide="gem" class="w-6 h-6 text-primary-500"></i>
                            </div>
                            <h3 class="font-bold text-lg text-gray-900 dark:text-white">{{ $plan->name }}</h3>
                            <div class="mt-2 text-2xl font-bold text-primary-500">
                                {{ $plan->min_price }}{{ $settings->currency }} - {{ $plan->max_price }}{{ $settings->currency }}
                            </div>
                        </div>
                        <ul class="mt-6 space-y-3">
                            <li class="flex items-start text-sm text-gray-600 dark:text-gray-400">
                                <i data-lucide="x-circle" class="w-4 h-4 mr-2 text-gray-400 flex-shrink-0 mt-0.5"></i>
                                Commission
                            </li>
                            <li class="flex items-start text-sm text-gray-600 dark:text-gray-400">
                                <i data-lucide="check-circle" class="w-4 h-4 mr-2 text-green-500 flex-shrink-0 mt-0.5"></i>
                                Full access to all instrument types
                            </li>
                            <li class="flex items-start text-sm text-gray-600 dark:text-gray-400">
                                <i data-lucide="check-circle" class="w-4 h-4 mr-2 text-green-500 flex-shrink-0 mt-0.5"></i>
                                All trading assets available
                            </li>
                            <li class="flex items-start text-sm text-gray-600 dark:text-gray-400">
                                <i data-lucide="check-circle" class="w-4 h-4 mr-2 text-green-500 flex-shrink-0 mt-0.5"></i>
                                24/7 live support
                            </li>
                            <li class="flex items-start text-sm text-gray-600 dark:text-gray-400">
                                <i data-lucide="check-circle" class="w-4 h-4 mr-2 text-green-500 flex-shrink-0 mt-0.5"></i>
                                Full education centre access
                            </li>
                        </ul>
                        <div class="mt-6">
                            <a href="/login" class="block w-full text-center px-4 py-2.5 bg-gradient-to-r from-primary-500 to-primary-700 text-white font-medium rounded-lg hover:from-primary-600 hover:to-primary-800 transition-all">
                                Get Started
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

@endsection
