@extends('emails.layout')

@section('content')
<tr>
    <td style="padding: 0 40px;">
        @if($language === 'fr')
        <h1 style="color: #1a202c; font-size: 24px; font-weight: 600; margin: 0 0 16px 0;">
            Votre abonnement a été annulé
        </h1>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Bonjour {{ $userName }},
        </p>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Votre abonnement <strong>{{ $planName }}</strong> a été annulé le <strong>{{ $canceledDate }}</strong>
            en raison d'échecs de paiement répétés. Nous nous excusons pour tout inconvénient.
        </p>
        @else
        <h1 style="color: #1a202c; font-size: 24px; font-weight: 600; margin: 0 0 16px 0;">
            Your Subscription Has Been Canceled
        </h1>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Hi {{ $userName }},
        </p>
        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 24px 0;">
            Your <strong>{{ $planName }}</strong> subscription has been canceled on <strong>{{ $canceledDate }}</strong>
            due to repeated payment failures. We apologize for any inconvenience.
        </p>
        @endif

        <!-- Details Box -->
        <table style="width: 100%; border-collapse: collapse; margin: 0 0 32px 0; background-color: #f7fafc; border-radius: 8px;">
            <tr>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0;">
                    <strong style="color: #2d3748; font-size: 14px;">
                        {{ $language === 'fr' ? 'Abonnement' : 'Subscription' }}
                    </strong>
                </td>
                <td style="padding: 16px 20px; border-bottom: 1px solid #e2e8f0; text-align: right;">
                    <span style="color: #4a5568; font-size: 14px;">{{ $planName }}</span>
                </td>
            </tr>
            <tr>
                <td style="padding: 16px 20px;">
                    <strong style="color: #2d3748; font-size: 14px;">
                        {{ $language === 'fr' ? 'Date d\'annulation' : 'Canceled On' }}
                    </strong>
                </td>
                <td style="padding: 16px 20px; text-align: right;">
                    <span style="color: #4a5568; font-size: 14px;">{{ $canceledDate }}</span>
                </td>
            </tr>
        </table>

        <p style="color: #4a5568; font-size: 16px; line-height: 24px; margin: 0 0 28px 0;">
            @if($language === 'fr')
            Vous pouvez vous réabonner à tout moment en mettant à jour vos informations de paiement.
            @else
            You can resubscribe at any time by updating your payment information.
            @endif
        </p>

        <!-- CTA Button -->
        <table style="width: 100%; border-collapse: collapse; margin: 0 0 32px 0;">
            <tr>
                <td style="text-align: center;">
                    <a href="{{ $resubscribeUrl }}"
                       style="display: inline-block; background-color: #416270; color: #ffffff; font-size: 16px; font-weight: 600;
                              padding: 14px 36px; border-radius: 8px; text-decoration: none; letter-spacing: 0.5px;">
                        @if($language === 'fr')
                        Se réabonner
                        @else
                        Resubscribe Now
                        @endif
                    </a>
                </td>
            </tr>
        </table>

        <p style="color: #718096; font-size: 14px; line-height: 22px; margin: 0 0 24px 0;">
            @if($language === 'fr')
            Si vous pensez qu'il s'agit d'une erreur, veuillez contacter notre équipe d'assistance.
            @else
            If you believe this is an error, please contact our support team.
            @endif
        </p>
    </td>
</tr>
@endsection