@extends('frontend.layouts.app')

@section('title', 'Email Verification')

@section('content')

    <section class="mt-[8rem] flex justify-center px-4">
        <div class="max-w-[520px] w-full mx-auto bg-[#FFEBED] lg:p-12 md:p-10 sm:p-8 p-6 rounded-lg shadow-md text-center">

            <x-validation-errors class="mb-4" />

            @include('_message')

            <div class="mb-6 text-sm text-gray-600 leading-relaxed">
                {{ __('Please, verify your email address by clicking on the link we just emailed you. If you did not receive the email, look for it in the spam folder or we will gladly send you another.') }}
            </div>

            <div class="mt-6 flex flex-col sm:flex-row items-center justify-center gap-4">
                {{-- Resend Verification Form --}}
                <form method="POST" action="{{ route('verification.send') }}" class="w-full sm:w-auto">
                    @csrf
                    <button type="submit"
                        class="bg-[#F42C56] text-white rounded-lg px-6 py-2 h-11 w-full sm:w-auto hover:bg-[#d9264b] hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#F42C56]">
                        {{ __('Resend Verification Email') }}
                    </button>
                </form>
            </div>
        </div>
    </section>
@endsection