@extends('layout.front.master')

@section('title', '¡Pago confirmado! | ' . config('site.name'))

@section('content')
<section class="page-header page-header-modern page-header-background bg-color-dark p-relative z-index-1" style="min-height: 100vh; display: flex; align-items: center;">
    <div class="container text-center py-5">
        <div class="appear-animation" data-appear-animation="zoomIn">

            {{-- Check icon --}}
            <div class="mb-4">
                <div class="d-inline-flex align-items-center justify-content-center rounded-circle"
                     style="width:80px;height:80px;background:rgba(79,70,229,0.2);border:2px solid rgba(79,70,229,0.5);">
                    <i class="fas fa-check" style="font-size:2rem;color:#818cf8;"></i>
                </div>
            </div>

            {{-- Product badge --}}
            @if($productName)
            <div class="mb-3">
                <span class="text-2 font-weight-semibold px-3 py-1 rounded"
                      style="background:rgba(79,70,229,0.25);color:#a5b4fc;letter-spacing:0.08em;text-transform:uppercase;">
                    {{ $productName }}
                </span>
            </div>
            @endif

            <h1 class="text-color-light font-weight-bold custom-text-10 mb-3">
                @if($projectTitle)
                    ¡<span class="text-color-primary">{{ $projectTitle }}</span><br>está en camino!
                @else
                    ¡Tu sitio está<br><span class="text-color-primary">en camino!</span>
                @endif
            </h1>

            <p class="text-color-light opacity-7 text-4 mb-4" style="max-width: 36rem; margin: 0 auto;">
                Recibimos tu pago. En este momento estamos construyendo tu sitio —
                en <strong style="color:#a5b4fc;">20–30 minutos</strong> recibís un email con todo listo.
            </p>

            {{-- Timeline --}}
            <div class="d-flex justify-content-center mb-5">
                <div style="max-width:380px;text-align:left;">
                    <div class="d-flex align-items-start gap-3 mb-3">
                        <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0"
                             style="width:32px;height:32px;background:#4f46e5;font-size:0.75rem;font-weight:800;color:#fff;">✓</div>
                        <div>
                            <p class="text-color-light font-weight-semibold text-3 mb-0">Pago confirmado</p>
                            <p class="text-2 mb-0" style="color:rgba(255,255,255,0.45);">Email de confirmación enviado a tu casilla</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-start gap-3 mb-3">
                        <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0"
                             style="width:32px;height:32px;background:rgba(79,70,229,0.3);font-size:0.75rem;font-weight:800;color:#a5b4fc;">2</div>
                        <div>
                            <p class="text-color-light font-weight-semibold text-3 mb-0">Construyendo tu sitio</p>
                            <p class="text-2 mb-0" style="color:rgba(255,255,255,0.45);">Configurando dominio, base de datos y contenido</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-start gap-3">
                        <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0"
                             style="width:32px;height:32px;background:rgba(255,255,255,0.08);font-size:0.75rem;font-weight:800;color:rgba(255,255,255,0.4);">3</div>
                        <div>
                            <p class="font-weight-semibold text-3 mb-0" style="color:rgba(255,255,255,0.5);">Email con credenciales</p>
                            <p class="text-2 mb-0" style="color:rgba(255,255,255,0.35);">Tu sitio online y acceso al panel (~20–30 min)</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-center gap-3 flex-wrap">
                @if(config('site.social_media.whatsapp.active'))
                <a href="{{ config('site.social_media.whatsapp.url') }}" target="_blank"
                   class="btn btn-primary btn-rounded px-5 py-3 font-weight-semibold">
                    <i class="fab fa-whatsapp me-2"></i>Tengo una duda
                </a>
                @endif
                <a href="{{ url('/') }}"
                   class="btn btn-outline-light btn-rounded px-5 py-3 font-weight-semibold">
                    Volver al inicio
                </a>
            </div>

        </div>
    </div>
</section>
@endsection