@extends('install.layout')

@section('title', 'Welcome to Installer')

@section('content')
    <div style="text-align: center; margin-bottom: 2rem;">
        <h2 style="font-size: 1.8rem; margin-bottom: 0.5rem;">Welcome to MyOpticals! 🎉</h2>
        <p style="color: var(--text-muted); font-size: 0.95rem;">
            This automated installation wizard will guide you through setting up your database, configuring environment variables, and creating your SuperAdmin management credentials.
        </p>
    </div>

    <div style="background: var(--card-inner); border-radius: 16px; padding: 1.5rem; border: 1px solid var(--border); margin-bottom: 2rem;">
        <h4 style="margin-bottom: 1rem; color: #fff;"><i class="fa-solid fa-list-check" style="color: var(--primary);"></i> What This Wizard Will Do:</h4>
        <ul style="list-style: none; display: flex; flex-direction: column; gap: 0.75rem; color: var(--text-muted); font-size: 0.9rem;">
            <li><i class="fa-solid fa-circle-check" style="color: var(--success); margin-right: 8px;"></i> Verify PHP 8.2+ and required extensions (PDO, OpenSSL, GD/Imagick, cURL, Fileinfo).</li>
            <li><i class="fa-solid fa-circle-check" style="color: var(--success); margin-right: 8px;"></i> Test writable directory permissions for cache, sessions, and storage.</li>
            <li><i class="fa-solid fa-circle-check" style="color: var(--success); margin-right: 8px;"></i> Configure Database Connection (MySQL / MariaDB / SQLite / PostgreSQL) with live connection testing.</li>
            <li><i class="fa-solid fa-circle-check" style="color: var(--success); margin-right: 8px;"></i> Automatically run database migrations, seed default categories, frames & subscription tiers.</li>
            <li><i class="fa-solid fa-circle-check" style="color: var(--success); margin-right: 8px;"></i> Create your SuperAdmin account and lock installer from unauthorized tampering.</li>
        </ul>
    </div>

    <div class="actions-row" style="justify-content: flex-end;">
        <a href="{{ route('install.requirements') }}" class="btn btn-primary">
            Start Installation <i class="fa-solid fa-arrow-right"></i>
        </a>
    </div>
@endsection
