@extends('installer.layout')

@section('step_content')
    <div class="text-center space-y-5 py-4 sm:py-6">
        
        <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-emerald-500/20 text-emerald-400 font-bold flex items-center justify-center text-3xl sm:text-4xl mx-auto border border-emerald-500/30 shadow-2xl">
            🎉
        </div>

        <div class="space-y-2">
            <h2 class="text-xl sm:text-2xl font-black text-white">Installation Successfully Completed!</h2>
            <p class="text-xs sm:text-sm text-slate-300 max-w-md mx-auto leading-relaxed">
                Your Buy Me A Drink platform environment, database tables, seeders, and Super Admin account have been fully configured.
            </p>
        </div>

        <div class="p-3.5 rounded-2xl bg-slate-950 border border-slate-800 text-[11px] sm:text-xs text-slate-400 font-mono inline-block max-w-full truncate">
            Lock file created at <strong class="text-emerald-400">storage/installed</strong>
        </div>

        <div class="pt-4 border-t border-slate-800 flex flex-col sm:flex-row gap-3 justify-center">
            <a href="{{ route('login') }}" class="w-full sm:w-auto px-8 py-3.5 sm:py-4 rounded-2xl font-black text-xs text-slate-950 shadow-xl shadow-amber-500/25 hover:brightness-110 transition-all text-center" style="background-color: #FFC400;">
                Log In to Admin Dashboard <i class="fa-solid fa-arrow-right ml-1"></i>
            </a>

            <a href="{{ route('home') }}" class="w-full sm:w-auto px-8 py-3.5 sm:py-4 rounded-2xl bg-slate-900 border border-slate-800 text-white font-bold text-xs hover:bg-slate-800 transition-all text-center">
                Go to Public Homepage
            </a>
        </div>

    </div>
@endsection