{{--
    Welcome Email - Atomic Design System v2.0 (Luxury Edition)
    Sent when a user creates an account on Global Gala

    Note: $colors automatically injected via View Composer
--}}
@component('emails.layouts.base', [
    'title' => 'Welcome to Global Gala',
    'previewText' => "Welcome aboard, {$userName}! Start exploring amazing events.",
    'colors' => $colors
])

@component('emails.atoms.h1', ['colors' => $colors])
    Welcome to Global Gala, {{ $userName }}
@endcomponent

@component('emails.atoms.text', ['colors' => $colors])
    Thank you for joining Global Gala, your premier destination for event ticketing and unforgettable experiences.
@endcomponent

@component('emails.atoms.text', ['colors' => $colors])
    Your account has been successfully created with the email: <strong>{{ $userEmail }}</strong>
@endcomponent

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

@component('emails.organisms.section', ['background' => 'ash', 'colors' => $colors])
    @component('emails.atoms.h2', ['colors' => $colors])
        What You Can Do Now
    @endcomponent

    {{-- Custom bullet list with bronze dots - using design tokens --}}
    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 0;">
        <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'] }};">
                                <strong>Browse Events</strong> – Discover upcoming concerts, shows, and experiences
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <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'] }};">
                                <strong>Select Your Seats</strong> – Use our interactive seating system to find the perfect view
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <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'] }};">
                                <strong>Manage Bookings</strong> – Access your account dashboard anytime
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <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'] }};">
                                <strong>Exclusive Offers</strong> – Receive early access to special events
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
@endcomponent

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

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td align="center">
            @component('emails.molecules.button', [
                'href' => $frontendUrl . '/events',
                'variant' => 'ghost-primary',
                'size' => 'large',
                'colors' => $colors
            ])
                Explore Events
            @endcomponent
        </td>
    </tr>
</table>

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

@component('emails.organisms.alert-box', [
    'variant' => 'info',
    'title' => 'Need Help Getting Started?',
    'colors' => $colors
])
    Our support team is here to assist you with any questions about finding events, selecting seats, or managing your bookings.
@endcomponent

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

@endcomponent