@extends('installer.layout')
@section('title', 'Welcome — Quickro POS Installer')

@section('content')
<div class="flex flex-col items-center text-center">

    {{-- Logo badge --}}
    <div class="flex h-20 w-20 items-center justify-center rounded-3xl bg-brand-600 text-3xl font-black text-white shadow-2xl shadow-brand-600/40">Q</div>

    <h1 class="mt-8 text-4xl font-black text-white">Welcome to Quickro POS</h1>
    <p class="mt-4 max-w-lg text-base leading-7 text-slate-400">
        This wizard will guide you through installing Quickro POS Cloud Suite on your server.
        The process takes around 5 minutes and requires a valid license key.
    </p>

    {{-- What to expect --}}
    <div class="mt-12 grid w-full max-w-2xl gap-4 sm:grid-cols-3 text-left">
        <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-600/20 text-brand-400">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <h3 class="mt-4 text-sm font-bold text-white">Server Check</h3>
            <p class="mt-1.5 text-xs leading-5 text-slate-400">Verify PHP extensions and folder permissions meet the minimum requirements.</p>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-600/20 text-brand-400">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
            </div>
            <h3 class="mt-4 text-sm font-bold text-white">License Activation</h3>
            <p class="mt-1.5 text-xs leading-5 text-slate-400">Activate your Quickro POS purchase code or use a master license key.</p>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-600/20 text-brand-400">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/></svg>
            </div>
            <h3 class="mt-4 text-sm font-bold text-white">Database Setup</h3>
            <p class="mt-1.5 text-xs leading-5 text-slate-400">Configure your MySQL database, run migrations, and create your admin account.</p>
        </div>
    </div>

    {{-- Requirements notice --}}
    <div class="mt-10 w-full max-w-2xl rounded-2xl border border-amber-500/20 bg-amber-500/10 p-5 text-left">
        <p class="text-sm font-semibold text-amber-400">Before you begin, make sure you have:</p>
        <ul class="mt-3 space-y-1.5 text-xs leading-5 text-slate-400 list-disc list-inside">
            <li>PHP 8.2 or higher with required extensions</li>
            <li>MySQL 8+ database with credentials ready</li>
            <li>A valid Quickro POS purchase code and buyer email</li>
            <li>Write permission on <code class="text-amber-300">.env</code>, <code class="text-amber-300">storage/</code>, and <code class="text-amber-300">bootstrap/cache/</code></li>
        </ul>
    </div>

    {{-- CTA --}}
    <a href="{{ route('install.requirements') }}"
       class="mt-10 inline-flex items-center gap-2 rounded-full bg-brand-600 px-8 py-4 text-sm font-bold text-white shadow-xl shadow-brand-600/30 transition hover:bg-brand-700">
        Start Installation
        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
    </a>
</div>
@endsection