{{--
    Email Change Verification - Atomic Design System v2.0
    Sent to NEW email address when user requests email change

    Note: $colors automatically injected via View Composer
--}}
@component('emails.layouts.base', [
    'title' => 'Verify Your New Email Address',
    'previewText' => 'Confirm your email address change request',
    'colors' => $colors
])

@component('emails.atoms.h1', ['colors' => $colors])
    Verify Your New Email Address
@endcomponent

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

@component('emails.atoms.text', ['colors' => $colors])
    You've requested to change your Global Gala account email address. Enter the following verification code in the app to confirm:
@endcomponent

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

<div style="text-align: center; padding: 20px 0;">
    <span style="display: inline-block; font-family: 'Courier New', monospace; font-size: 32px; font-weight: bold; letter-spacing: 8px; color: {{ $colors['neutral-900'] }}; background-color: {{ $colors['neutral-100'] }}; padding: 16px 32px; border-radius: 8px; border: 1px solid {{ $colors['neutral-200'] }};">{{ $token }}</span>
</div>

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

@component('emails.atoms.text', ['colors' => $colors])
    Or click the button below to verify automatically:
@endcomponent

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

@component('emails.molecules.button', [
    'href' => $verificationUrl,
    'variant' => 'primary',
    'size' => 'large',
    'colors' => $colors
])
    Verify Email Address
@endcomponent

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

@component('emails.organisms.alert-box', [
    'variant' => 'warning',
    'title' => 'Important',
    'colors' => $colors
])
    This verification link will expire in <strong>{{ $expiryMinutes }} minutes</strong>. For your security, please use it promptly.
@endcomponent

@if($currentEmail)
@component('emails.atoms.text', ['colors' => $colors])
    <strong>Current email:</strong> {{ $currentEmail }}
@endcomponent
@endif

@component('emails.atoms.text', ['colors' => $colors])
    If you did not request this email change, you can safely ignore this message. Your account email will remain unchanged.
@endcomponent

@component('emails.atoms.small', ['colors' => $colors])
    <strong>Security note:</strong> This link can only be used once and will become invalid after verification or expiry.
@endcomponent

@endcomponent