{{--
    Account Deleted Confirmation Email - Atomic Design System v2.0
    Sent when a user's account is deleted (GDPR right to erasure)

    Note: $colors automatically injected via View Composer

    @story CUST-4.4: Add GDPR Account Deletion (Anonymization)
--}}
@component('emails.layouts.base', [
    'title' => 'Account Deleted',
    'previewText' => 'Your account has been permanently deleted',
    'colors' => $colors
])

@component('emails.atoms.h1', ['colors' => $colors])
    Account Deleted
@endcomponent

@component('emails.atoms.text', ['colors' => $colors])
    @if($userName)
        Hello {{ $userName }},
    @else
        Hello,
    @endif
@endcomponent

@component('emails.atoms.text', ['colors' => $colors])
    This email confirms that your Global Gala account has been permanently deleted as requested.
@endcomponent

@include('emails.atoms.spacer', ['height' => '20px'])

@component('emails.organisms.alert-box', [
    'variant' => 'info',
    'title' => 'Deletion Details',
    'colors' => $colors
])
    <strong>Date & Time:</strong> {{ $deletedAt }}<br>
    <strong>Status:</strong> Account permanently deleted
@endcomponent

@include('emails.atoms.spacer', ['height' => '20px'])

@component('emails.atoms.h3', ['colors' => $colors])
    What This Means
@endcomponent

@component('emails.atoms.text', ['colors' => $colors])
    Your personal data has been anonymized in compliance with GDPR (General Data Protection Regulation). This includes:
@endcomponent

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 0 0 16px;">
    <tr>
        <td style="padding: 4px 0;">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="padding-right: 12px; vertical-align: top;">
                        <div style="width: 6px; height: 6px; background-color: {{ $colors['primary-500'] }}; border-radius: 50%; margin-top: 8px;"></div>
                    </td>
                    <td>
                        <p style="margin: 0; color: {{ $colors['neutral-700'] }}; font-size: 14px; line-height: 1.5; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
                            Your email address, name, and phone number have been removed
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="padding: 4px 0;">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="padding-right: 12px; vertical-align: top;">
                        <div style="width: 6px; height: 6px; background-color: {{ $colors['primary-500'] }}; border-radius: 50%; margin-top: 8px;"></div>
                    </td>
                    <td>
                        <p style="margin: 0; color: {{ $colors['neutral-700'] }}; font-size: 14px; line-height: 1.5; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
                            Your address information has been deleted
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="padding: 4px 0;">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="padding-right: 12px; vertical-align: top;">
                        <div style="width: 6px; height: 6px; background-color: {{ $colors['primary-500'] }}; border-radius: 50%; margin-top: 8px;"></div>
                    </td>
                    <td>
                        <p style="margin: 0; color: {{ $colors['neutral-700'] }}; font-size: 14px; line-height: 1.5; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
                            You can no longer log in to your account
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="padding: 4px 0;">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td style="padding-right: 12px; vertical-align: top;">
                        <div style="width: 6px; height: 6px; background-color: {{ $colors['primary-500'] }}; border-radius: 50%; margin-top: 8px;"></div>
                    </td>
                    <td>
                        <p style="margin: 0; color: {{ $colors['neutral-700'] }}; font-size: 14px; line-height: 1.5; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
                            Your past order records are retained anonymously for legal/accounting purposes
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

@include('emails.atoms.spacer', ['height' => '20px'])

@component('emails.organisms.alert-box', [
    'variant' => 'error',
    'title' => 'Was this a mistake?',
    'colors' => $colors
])
    If you did not request this deletion or believe this was done in error, please contact our support team immediately at <a href="mailto:{{ $supportEmail }}" style="color: {{ $colors['primary-500'] }};">{{ $supportEmail }}</a>.
    <br><br>
    <strong>Note:</strong> Account recovery may be limited as personal data has already been anonymized.
@endcomponent

@include('emails.atoms.spacer', ['height' => '20px'])

@component('emails.atoms.text', ['colors' => $colors])
    Thank you for being a Global Gala customer. If you ever wish to return, you're welcome to create a new account at any time.
@endcomponent

@endcomponent