@extends('layout.front.master')

@php
    // El user activó una prueba si hay trial_end seteado por Cashier.
    // Adaptamos copy para distinguir "Empezó tu prueba" vs "Pago confirmado".
    $isTrial = isset($trialEndsAt) && $trialEndsAt !== null;
    $trialEndFormatted = $isTrial ? $trialEndsAt->locale('es')->translatedFormat('d \d\e F') : null;
    $accentColor = $isTrial ? '#10b981' : '#818cf8';
    $accentBg    = $isTrial ? 'rgba(16,185,129,0.2)' : 'rgba(79,70,229,0.2)';
    $accentBorder = $isTrial ? 'rgba(16,185,129,0.5)' : 'rgba(79,70,229,0.5)';
@endphp

@section('title', ($isTrial ? '¡Tu prueba arrancó!' : '¡Pago confirmado!') . ' | ' . config('site.name'))

@section('scripts')
@if(config('site.google_ads.conversion_id'))
<script>
    gtag('event', 'conversion', {
        'send_to': '{{ config('site.google_ads.conversion_id') }}/{{ $isTrial ? 'trial_start' : 'purchase' }}',
        'transaction_id': '{{ request()->get('session_id', '') }}'
    });
</script>
@endif
@endsection

@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">

            {{-- Icon: regalo si es trial, check si es pago directo --}}
            <div class="mb-4">
                <div class="d-inline-flex align-items-center justify-content-center rounded-circle"
                     style="width:80px;height:80px;background:{{ $accentBg }};border:2px solid {{ $accentBorder }};">
                    <i class="fas {{ $isTrial ? 'fa-gift' : 'fa-check' }}" style="font-size:2rem;color:{{ $accentColor }};"></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:{{ $accentBg }};color:{{ $accentColor }};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($isTrial && $projectTitle)
                    ¡Tu prueba de<br><span style="color:{{ $accentColor }};">{{ $projectTitle }}</span> arrancó!
                @elseif($isTrial)
                    ¡Empezó tu<br><span style="color:{{ $accentColor }};">prueba gratis!</span>
                @elseif($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;">
                @if($isTrial)
                    Estamos construyendo tu sitio ahora mismo. En <strong style="color:{{ $accentColor }};">20–30 minutos</strong>
                    recibís un email con las credenciales para que lo edites.
                @else
                    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.
                @endif
            </p>

            {{-- Trial reminder: cuándo termina + precio post-trial --}}
            @if($isTrial && $trialEndFormatted)
            <div class="d-inline-block mb-5 p-3 px-4 rounded text-start"
                 style="background:rgba(255,255,255,0.04);border:1px dashed rgba(255,255,255,0.15);max-width:480px;">
                <div class="d-flex align-items-start gap-3">
                    <i class="fas fa-calendar-alt mt-1" style="color:{{ $accentColor }};font-size:1.1rem;"></i>
                    <div>
                        <p class="text-color-light font-weight-semibold text-3 mb-1">
                            Tu prueba termina el <strong>{{ $trialEndFormatted }}</strong>
                        </p>
                        <p class="text-2 mb-0" style="color:rgba(255,255,255,0.55);line-height:1.5;">
                            Antes de esa fecha podés agregar tu método de pago desde el panel.
                            Si no lo hacés, la cuenta se cancela automáticamente — sin cobros.
                            @if($monthlyPrice)
                                <span class="d-block mt-1">Después de la prueba: <strong style="color:{{ $accentColor }};">USD {{ number_format($monthlyPrice, 0) }}/mes</strong>.</span>
                            @endif
                        </p>
                    </div>
                </div>
            </div>
            @endif

            {{-- 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:{{ $accentColor }};font-size:0.75rem;font-weight:800;color:#fff;">✓</div>
                        <div>
                            <p class="text-color-light font-weight-semibold text-3 mb-0">
                                {{ $isTrial ? 'Prueba activada' : '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:{{ $accentBg }};font-size:0.75rem;font-weight:800;color:{{ $accentColor }};">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">
                <a href="{{ url('/my-projects') }}"
                   class="btn btn-rounded px-5 py-3 font-weight-semibold"
                   style="background:{{ $accentColor }};color:#fff;border:0;">
                    <i class="fas fa-folder-open me-2"></i>Ir a Mis Proyectos
                </a>
                @if(config('site.social_media.whatsapp.active'))
                <a href="{{ config('site.social_media.whatsapp.url') }}" target="_blank"
                   class="btn btn-outline-light btn-rounded px-5 py-3 font-weight-semibold">
                    <i class="fab fa-whatsapp me-2"></i>Tengo una duda
                </a>
                @endif
            </div>

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