@extends('web.layouts.layout')
@section('meta_title', 'Thank You for Your Enrollment')
<meta name="description" content="Thank you for enrolling in our course. Check your email for further details.">
<meta name="keywords" content="enrollment, thank you, course, payment success">

@section('content')
<main>
    <!-- breadcrumb area start -->
    <section class="bd-breadcrumb-area p-relative fix z-index-11">
        <div class="bd-breadcrumb-bg-two" data-background="assets/images/breadcrumb/breadcrumb-bg-2.webp"></div>
        <div class="bd-breadcrumb-wrapper p-relative">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="bd-breadcrumb style-two d-flex-center">
                            <div class="bd-breadcrumb-content">
                                <h1 class="bd-breadcrumb-title">Thank You!</h1>
                                <div class="bd-breadcrumb-list">
                                    <span><a href="/">Home</a></span>
                                    <span class="divider"><i class="fa-regular fa-angle-right"></i></span>
                                    <span class="active">Thank You</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb area end -->

    <!-- Thank You Section -->
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 text-center">
                    <div class="success-icon mb-4">
                        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 12l2 2 4-4m-6 8a9 9 0 110-18 9 9 0 010 18z" stroke="#28a745" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h2 class="mb-3">Enrollment Successful!</h2>
                    <p class="lead mb-4">Thank you for enrolling in our course. Please check your email for login details and further instructions.</p>
                    <a href="{{ url('/') }}" class="btn btn-primary btn-lg">Return to Home</a>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- CSS for Styling -->
<style>
    .success-icon svg {
        animation: popIn 0.5s ease;
    }
    .lead {
        font-size: 1.25rem;
        color: #333;
    }
    @keyframes popIn {
        0% { transform: scale(0); opacity: 0; }
        70% { transform: scale(1.2); opacity: 1; }
        100% { transform: scale(1); }
    }
</style>
@endsection