@extends('layouts.public')

@section('content')
<style>
    .checkout-result {
        --cr-accent: #19733a;
        --cr-accent-soft: rgba(25, 115, 58, 0.12);
        --cr-accent-mid: rgba(25, 115, 58, 0.22);
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: min(72vh, 720px);
        display: flex;
        align-items: center;
        padding: 4.5rem 0 5rem;
        background:
            radial-gradient(ellipse 80% 60% at 50% -10%, var(--cr-accent-soft), transparent 70%),
            radial-gradient(ellipse 50% 40% at 100% 100%, rgba(63, 202, 144, 0.1), transparent 55%),
            linear-gradient(180deg, #f7fbf8 0%, #ffffff 55%, #f4f7f5 100%);
    }
    .checkout-result::before,
    .checkout-result::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: -1;
        filter: blur(2px);
    }
    .checkout-result::before {
        width: 18rem;
        height: 18rem;
        top: 12%;
        left: -6rem;
        background: var(--cr-accent-soft);
        animation: cr-drift 12s ease-in-out infinite alternate;
    }
    .checkout-result::after {
        width: 14rem;
        height: 14rem;
        bottom: 8%;
        right: -4rem;
        background: rgba(63, 202, 144, 0.12);
        animation: cr-drift 10s ease-in-out infinite alternate-reverse;
    }
    .checkout-result__inner {
        max-width: 36rem;
        margin: 0 auto;
        text-align: center;
        animation: cr-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .checkout-result__brand {
        display: inline-block;
        margin-bottom: 1.75rem;
        animation: cr-rise 0.7s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .checkout-result__brand img {
        width: min(200px, 55vw);
        height: auto;
    }
    .checkout-result__icon {
        position: relative;
        width: 5.5rem;
        height: 5.5rem;
        margin: 0 auto 1.5rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--cr-accent);
        color: #fff;
        box-shadow: 0 12px 32px var(--cr-accent-mid);
        animation: cr-pop 0.65s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .checkout-result__icon::before {
        content: "";
        position: absolute;
        inset: -0.55rem;
        border-radius: 50%;
        border: 2px solid var(--cr-accent-mid);
        animation: cr-ring 1.8s 0.4s ease-out both;
    }
    .checkout-result__icon i {
        font-size: 1.85rem;
        line-height: 1;
    }
    .checkout-result__title {
        font-family: Roboto, sans-serif;
        font-weight: 700;
        font-size: clamp(1.75rem, 4vw, 2.35rem);
        letter-spacing: -0.02em;
        color: #121519;
        margin-bottom: 0.85rem;
        animation: cr-rise 0.7s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .checkout-result__text {
        font-size: 1.05rem;
        line-height: 1.65;
        color: #576071;
        margin: 0 auto 2rem;
        max-width: 30rem;
        animation: cr-rise 0.7s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .checkout-result__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
        animation: cr-rise 0.7s 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .checkout-result__actions .btn {
        min-width: 9.5rem;
    }
    @keyframes cr-rise {
        from { opacity: 0; transform: translateY(18px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes cr-pop {
        from { opacity: 0; transform: scale(0.7); }
        to { opacity: 1; transform: scale(1); }
    }
    @keyframes cr-ring {
        from { opacity: 0.9; transform: scale(0.85); }
        to { opacity: 0; transform: scale(1.45); }
    }
    @keyframes cr-drift {
        from { transform: translate3d(0, 0, 0); }
        to { transform: translate3d(24px, 18px, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
        .checkout-result__inner,
        .checkout-result__brand,
        .checkout-result__icon,
        .checkout-result__icon::before,
        .checkout-result__title,
        .checkout-result__text,
        .checkout-result__actions,
        .checkout-result::before,
        .checkout-result::after {
            animation: none !important;
        }
    }
</style>

<section class="checkout-result" aria-labelledby="checkout-success-title">
    <div class="container">
        <div class="checkout-result__inner">
            <a href="{{ __url('/') }}" class="checkout-result__brand" aria-label="EpoxyArt">
                <img src="/assets/images/logo/logo.png" alt="EpoxyArt" width="200" height="auto">
            </a>

            <div class="checkout-result__icon" aria-hidden="true">
                <i class="fas fa-check"></i>
            </div>

            <h1 id="checkout-success-title" class="checkout-result__title">
                {{ __('public.checkout_success_title') }}
            </h1>
            <p class="checkout-result__text">{{ __('public.success_order') }}</p>

            <div class="checkout-result__actions">
                <a href="{{ __url('/login') }}" class="btn btn-sqr">
                    {{ __('public.menu.login') }}
                </a>
                <a href="{{ __url('/user/orders') }}" class="btn btn-sqr btn-sqr-outline">
                    {{ __('public.account.orders') }}
                </a>
                <a href="{{ __url('/') }}" class="btn btn-sqr btn-sqr-outline">
                    {{ __('public.menu.home') }}
                </a>
            </div>
        </div>
    </div>
</section>
@endsection