@extends('install.layout')

@section('content')
@php
    $currentStep = 1;
    $showNext = true;
@endphp

<div class="bg-white rounded-lg shadow-sm border">
    <div class="px-6 py-8">
        <!-- Header -->
        <div class="text-center mb-8">
            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-car text-blue-600 text-3xl"></i>
            </div>
            <h2 class="text-3xl font-bold text-gray-900 mb-2">Welcome to Al-Runan Fitment Centre</h2>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                Thank you for choosing our automotive fitment management system. 
                This installation wizard will guide you through setting up your backend system.
            </p>
        </div>

        <!-- Features Grid -->
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            <div class="bg-blue-50 rounded-lg p-6 border border-blue-100">
                <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
                    <i class="fas fa-shield-alt text-white"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Secure & Reliable</h3>
                <p class="text-gray-600 text-sm">Built with enterprise-grade security and reliability in mind.</p>
            </div>

            <div class="bg-green-50 rounded-lg p-6 border border-green-100">
                <div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mb-4">
                    <i class="fas fa-mobile-alt text-white"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Mobile Ready</h3>
                <p class="text-gray-600 text-sm">Fully compatible with mobile devices and responsive design.</p>
            </div>

            <div class="bg-purple-50 rounded-lg p-6 border border-purple-100">
                <div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center mb-4">
                    <i class="fas fa-chart-line text-white"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Advanced Analytics</h3>
                <p class="text-gray-600 text-sm">Comprehensive dashboard with real-time analytics and reporting.</p>
            </div>
        </div>

        <!-- System Requirements -->
        <div class="bg-gray-50 rounded-lg p-6 border border-gray-200 mb-8">
            <h3 class="text-xl font-semibold text-gray-900 mb-4">System Requirements</h3>
            <div class="grid md:grid-cols-2 gap-4 text-sm">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3"></i>
                    <span>PHP 8.1 or higher</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3"></i>
                    <span>MySQL 5.7+ or MariaDB 10.2+</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3"></i>
                    <span>Composer (for dependencies)</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3"></i>
                    <span>Web server (Apache/Nginx)</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3"></i>
                    <span>Required PHP extensions</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3"></i>
                    <span>Write permissions for storage</span>
                </div>
            </div>
        </div>

        <!-- Installation Steps -->
        <div class="border-t pt-6">
            <h3 class="text-xl font-semibold text-gray-900 mb-4">Installation Steps</h3>
            <div class="space-y-4">
                <div class="flex items-start">
                    <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm font-medium mr-4 flex-shrink-0">1</div>
                    <div>
                        <h4 class="font-semibold text-gray-900">Server Requirements Check</h4>
                        <p class="text-gray-600 text-sm">Verify that your server meets all the necessary requirements.</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 text-sm font-medium mr-4 flex-shrink-0">2</div>
                    <div>
                        <h4 class="font-semibold text-gray-900">Database Configuration</h4>
                        <p class="text-gray-600 text-sm">Set up your MySQL database connection details.</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 text-sm font-medium mr-4 flex-shrink-0">3</div>
                    <div>
                        <h4 class="font-semibold text-gray-900">Admin Account Setup</h4>
                        <p class="text-gray-600 text-sm">Create your administrator account for the system.</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 text-sm font-medium mr-4 flex-shrink-0">4</div>
                    <div>
                        <h4 class="font-semibold text-gray-900">Company Information</h4>
                        <p class="text-gray-600 text-sm">Enter your company details and upload your logo.</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 text-sm font-medium mr-4 flex-shrink-0">5</div>
                    <div>
                        <h4 class="font-semibold text-gray-900">API Configuration</h4>
                        <p class="text-gray-600 text-sm">Configure SMS and payment gateway API keys.</p>
                    </div>
                </div>

                <div class="flex items-start">
                    <div class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center text-gray-600 text-sm font-medium mr-4 flex-shrink-0">6</div>
                    <div>
                        <h4 class="font-semibold text-gray-900">Complete Installation</h4>
                        <p class="text-gray-600 text-sm">Finalize the setup and start using your system.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="border-t pt-6 flex justify-between">
            <div class="text-sm text-gray-500">
                <i class="fas fa-info-circle mr-2"></i>
                Estimated time: 5-10 minutes
            </div>
            <a href="{{ route('install.requirements') }}" 
               class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                Get Started
                <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </div>
</div>
@endsection