@extends('layouts.new-layout')
@section('content')
<div class="container py-5 text-center" style="min-height:60vh;display:flex;align-items:center;justify-content:center;">
    <div>
        <div style="font-size:72px;color:#dc3545;">✕</div>
        <h2 class="mt-3 fw-bold">Payment Failed</h2>
        <p class="text-muted mt-2">Unfortunately your payment could not be processed.</p>

        @if($appointmentId)
        <p class="mt-3">
            <a href="{{ route('redirectToClover', ['appointment_id' => $appointmentId]) }}"
               class="btn btn-primary">Try Again</a>
        </p>
        @endif

        <p class="text-muted small mt-3">If the issue persists, please contact us at
            <a href="mailto:info@mjvacservices.ca">info@mjvacservices.ca</a>
        </p>
        <a href="{{ route('welcome') }}" class="btn btn-outline-secondary mt-2">Back to Home</a>
    </div>
</div>
@endsection