<x-app-layout>
    <x-slot name="header">
            {{ __('Mailing unsubscribed') }}
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-theme-background overflow-hidden shadow-xl sm:rounded-lg">
                <div class="p-12 sm:px-20 bg-theme-background">

                    <div class="mt-8 text-center">
                        <div class="text-6xl text-green-500 mb-4">
                            ✓
                        </div>

                        <h1 class="text-2xl font-bold text-theme-primary mb-4">
                            {{ __('Successfully Unsubscribed') }}
                        </h1>

                        <div class="text-theme-secondary mb-6">
                            <p class="mb-2">
                                {{ __('You have been successfully unsubscribed from:') }}
                            </p>
                            <p class="font-semibold text-theme-primary">
                                {{ $typeName }}
                            </p>
                            <p class="text-sm mt-2">
                                {{ __('Email:') }} {{ $email }}
                            </p>
                        </div>

                        <div class="bg-blue-50 border border-blue-200 rounded-md p-4 text-sm text-blue-800 mb-6">
                            <p>{{ __('This change takes effect immediately. You will no longer receive emails of this type.') }}</p>
                            @if($type !== 'system_message')
                                <p class="mt-2">{{ __('You may still receive important system messages and account notifications.') }}</p>
                            @endif
                        </div>

                        <div class="space-y-3">
                            <p class="text-theme-secondary">
                                {{ __('Need to manage other newsletter preferences?') }}
                            </p>
                            <div class="space-x-4">
                                <a href="{{ route('login') }}"
                                   class="inline-flex items-center px-4 py-2 bg-theme-primary border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-theme-primary-dark focus:outline-none focus:border-theme-primary-dark focus:ring focus:ring-theme-primary disabled:opacity-25 transition">
                                    {{ __('Login to Account') }}
                                </a>
                                <a href="{{ route('welcome') }}"
                                   class="inline-flex items-center px-4 py-2 bg-gray-500 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-600 focus:outline-none focus:border-gray-600 focus:ring focus:ring-gray-500 disabled:opacity-25 transition">
                                    {{ __('Return to Homepage') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>