@extends('installer.layout')

@section('content')
    <div style="text-align: center; padding: 2rem 0;">
        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--primary); margin-bottom: 1.5rem;">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
            <line x1="8" y1="21" x2="16" y2="21"></line>
            <line x1="12" y1="17" x2="12" y2="21"></line>
        </svg>
        
        <h2 style="margin-bottom: 1rem; color: var(--dark);">Welcome to the Setup Wizard</h2>
        <p style="color: var(--text-light); line-height: 1.6; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto;">
            Thank you for choosing MTWU Admin Panel. This wizard will guide you through the installation process.
            We will check your server requirements, verify permissions, and configure your database connection.
        </p>
    </div>

    <div class="actions" style="justify-content: center;">
        <a href="{{ route('installer.requirements') }}" class="btn btn-primary">
            Start Installation
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
        </a>
    </div>
@endsection