@extends('layouts.main')

@section('style')
  <style>
    .failure-section {
      min-height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    .failure-card {
      background: #ffffff;
      border-radius: 1.25rem;
      padding: 2.5rem 2rem;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
      text-align: center;
      max-width: 520px;
      width: 100%;
      animation: fadeInUp 0.5s ease;
    }

    .failure-icon {
      font-size: 64px;
      color: #fff;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      padding: 28px;
      border-radius: 50%;
      box-shadow: 0 8px 16px rgba(239, 68, 68, 0.3);
      margin-bottom: 1.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .failure-title {
      font-size: 1.8rem;
      font-weight: 700;
      color: #dc2626;
      margin-bottom: 0.5rem;
    }

    .failure-message {
      font-size: 1rem;
      color: #6b7280;
      margin-bottom: 1.75rem;
      line-height: 1.6;
    }

    .order-summary {
      background: #fef2f2;
      border: 1px dashed #fecaca;
      padding: 1.25rem;
      border-radius: 0.75rem;
      margin-bottom: 1.75rem;
      text-align: left;
    }

    .order-summary p {
      margin: 0.5rem 0;
      font-weight: 600;
      color: #991b1b;
    }

    .order-summary p strong {
      color: #b91c1c;
    }



    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
@endsection

@section('content')
  <div class="failure-section">
    <div class="failure-card">
      {{-- Font Awesome Error Icon --}}
      <div class="failure-icon">
        <i class="fas fa-times-circle"></i>
      </div>
      <h2 class="failure-title">Order Cancelled</h2>
      <p class="failure-message">
        Unfortunately, your order could not be processed.<br>
        Please try again or contact support if the issue persists.
      </p>

      <a class="btn btn-danger" href="{{ route('woohoo.home') }}">Try Again</a>
    </div>
  </div>
@endsection