@extends('layouts.app')

@section('title', 'Unsubscribe — ECA Networks Newsletter')

@section('content')
<div class="min-h-screen flex items-center justify-center py-20 px-4">
    <div class="max-w-md w-full text-center">

        @if($status === 'success')
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <i class="fas fa-check-circle text-green-500 text-3xl"></i>
        </div>
        <h1 class="text-2xl font-bold text-navy mb-3">You've been unsubscribed</h1>
        <p class="text-gray-500 mb-6"><strong>{{ $email }}</strong> has been removed from our newsletter list. You won't receive any more emails from us.</p>
        <p class="text-sm text-gray-400 mb-8">Changed your mind? <a href="{{ url('/') }}" class="text-electric-blue hover:underline">Visit our store</a> and subscribe again anytime.</p>

        @elseif($status === 'already')
        <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <i class="fas fa-info-circle text-yellow-500 text-3xl"></i>
        </div>
        <h1 class="text-2xl font-bold text-navy mb-3">Already unsubscribed</h1>
        <p class="text-gray-500 mb-8"><strong>{{ $email }}</strong> is not on our active subscriber list.</p>

        @else
        <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <i class="fas fa-times-circle text-red-500 text-3xl"></i>
        </div>
        <h1 class="text-2xl font-bold text-navy mb-3">Link not found</h1>
        <p class="text-gray-500 mb-8">This unsubscribe link is invalid or has expired.</p>
        @endif

        <a href="{{ url('/') }}" class="inline-block bg-electric-blue text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-dark transition-colors">
            Back to Store
        </a>
    </div>
</div>
@endsection