@extends('installer.layout')
@section('title', 'Installation Complete — Quickro POS')

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

    {{-- Success animation badge --}}
    <div class="flex h-24 w-24 items-center justify-center rounded-full bg-accent-600/20 ring-4 ring-accent-600/30">
        <svg class="h-12 w-12 text-accent-400" 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>

    <h1 class="mt-8 text-4xl font-black text-white">Installation Complete!</h1>
    <p class="mt-4 max-w-lg text-base leading-7 text-slate-400">
        Quickro POS has been successfully installed and configured on your server.
        You can now log in to the admin panel and start managing your retail operations.
    </p>

    {{-- Summary --}}
    <div class="mt-12 grid w-full max-w-xl gap-4 text-left">
        <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500 mb-3">What was set up</p>
            <ul class="space-y-2.5 text-sm text-slate-400">
                <li class="flex items-center gap-2.5">
                    <svg class="h-4 w-4 shrink-0 text-accent-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    License verified and activated
                </li>
                <li class="flex items-center gap-2.5">
                    <svg class="h-4 w-4 shrink-0 text-accent-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Database configured and migrated
                </li>
                <li class="flex items-center gap-2.5">
                    <svg class="h-4 w-4 shrink-0 text-accent-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Administrator account created
                </li>
                <li class="flex items-center gap-2.5">
                    <svg class="h-4 w-4 shrink-0 text-accent-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Application caches cleared
                </li>
            </ul>
        </div>
    </div>

    {{-- Security notice --}}
    <div class="mt-6 w-full max-w-xl rounded-2xl border border-amber-500/20 bg-amber-500/10 p-5 text-left">
        <p class="text-xs font-semibold text-amber-400 mb-2">Security reminder</p>
        <p class="text-xs leading-5 text-slate-400">
            For security, consider restricting access to the <code class="text-amber-300">/install</code> route in your web server
            configuration after installation. The installer is blocked automatically by the lock file.
        </p>
    </div>

    {{-- CTAs --}}
    <div class="mt-10 flex flex-wrap justify-center gap-4">
        <a href="{{ route('admin.login') }}"
           class="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">
            Go to Admin Panel
            <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>
        <a href="{{ route('website.home') }}"
           class="inline-flex items-center gap-2 rounded-full border border-white/10 px-8 py-4 text-sm font-semibold text-slate-300 transition hover:border-white/30">
            Visit Website
        </a>
    </div>
</div>
@endsection