{{--
    Post-Purchase Signup Prompt Email
    Sent to guest customers after checkout to encourage account creation

    Note: $colors automatically injected via View Composer

    @see CUST-5.5: Add Post-Purchase Signup Prompt
--}}
@component('emails.layouts.base', [
    'title' => 'Create your account for instant ticket access',
    'previewText' => "{$customerName}, create your account to access your tickets anytime!",
    'colors' => $colors
])

@component('emails.atoms.h1', ['colors' => $colors])
    {{ $headline }}
@endcomponent

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

@component('emails.atoms.text', ['colors' => $colors])
    Thank you for your purchase! Your order <strong>{{ $orderReference }}</strong> for <strong>{{ $eventName }}</strong> has been confirmed.
@endcomponent

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

{{-- Benefits Section --}}
@component('emails.organisms.section', ['background' => 'ash', 'colors' => $colors])
    @component('emails.atoms.h2', ['colors' => $colors])
        {{ $subheadline }}
    @endcomponent

    @component('emails.atoms.text', ['colors' => $colors])
        Create an account with your email <strong>{{ $customerEmail }}</strong> and enjoy these benefits:
    @endcomponent

    {{-- Benefits list with bronze dots --}}
    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">
        @foreach($benefits as $benefit)
        <tr>
            <td style="padding: {{ $spacing['1'] }} 0;">
                <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="padding-right: {{ $spacing['2'] }}; vertical-align: top;">
                            <div style="width: 6px; height: 6px; background-color: {{ $colors['primary-500'] }}; border-radius: 50%; margin-top: {{ $spacing['1'] }};"></div>
                        </td>
                        <td>
                            <p style="margin: 0; color: {{ $colors['neutral-900'] }}; font-size: {{ $typography['sizes']['base'] }}; line-height: {{ $typography['line-heights']['relaxed'] }}; font-family: {{ $typography['font-family'] }};">
                                {{ $benefit }}
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        @endforeach
    </table>
@endcomponent

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

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td align="center">
            @component('emails.molecules.button', [
                'href' => $signupUrl,
                'variant' => 'primary',
                'size' => 'large',
                'colors' => $colors
            ])
                Create My Account
            @endcomponent
        </td>
    </tr>
</table>

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

@component('emails.atoms.text', ['colors' => $colors, 'align' => 'center'])
    Or copy and paste this link into your browser:
@endcomponent

@component('emails.atoms.small', ['colors' => $colors])
    <span style="color: {{ $colors['primary-600'] }}; word-break: break-all; font-family: 'Courier New', monospace;">{{ $signupUrl }}</span>
@endcomponent

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

{{-- Important Note --}}
@component('emails.organisms.alert-box', [
    'variant' => 'info',
    'title' => 'Your tickets are safe!',
    'colors' => $colors
])
    You can access your tickets at any time using your order confirmation email. Creating an account just makes it easier to manage all your orders in one place.
@endcomponent

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

@component('emails.atoms.text', ['colors' => $colors])
    <strong>Not ready to create an account?</strong> No problem! You can always create one later and your past orders will be automatically linked to your new account.
@endcomponent

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

@component('emails.atoms.text', ['colors' => $colors])
    If you have any questions, please contact our support team at <a href="mailto:{{ $supportEmail }}" style="color: {{ $colors['primary-600'] }}; text-decoration: none;">{{ $supportEmail }}</a>.
@endcomponent

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

@component('emails.atoms.text', ['colors' => $colors])
    Thank you for choosing Global Gala!<br>
    <strong>The Global Gala Team</strong>
@endcomponent

@endcomponent