{{--
    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,
    'showUnsubscribe' => $showUnsubscribe ?? false,
    'unsubscribeUrl' => $unsubscribeUrl ?? null
])

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

{{-- Introduction --}}
@component('emails.atoms.text', ['colors' => $colors])
    Thank you for joining <strong>Global Gala</strong>, 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 style="color: {{ $colors['primary-600'] }};">{{ $userEmail }}</strong>
@endcomponent

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

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

    @component('emails.atoms.text', ['colors' => $colors])
        Your Global Gala account gives you access to:
    @endcomponent

    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 0;">
        <tr>
            <td style="padding: 8px 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;">
                                <strong style="font-weight: 600;">Browse Events</strong> – Discover upcoming concerts, shows, and experiences
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="padding: 8px 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;">
                                <strong style="font-weight: 600;">Interactive Seating</strong> – Select your perfect seats with our visual seating system
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="padding: 8px 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;">
                                <strong style="font-weight: 600;">Manage Bookings</strong> – Track all your orders from your account dashboard
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td style="padding: 8px 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;">
                                <strong style="font-weight: 600;">Exclusive Access</strong> – Get early bird offers and VIP notifications
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
@endcomponent

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

{{-- Call to Action --}}
@component('emails.molecules.button', [
    'href' => $frontendUrl . '/events',
    'variant' => 'primary',
    'size' => 'large',
    'colors' => $colors
])
    Explore Events
@endcomponent

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

{{-- Support Section --}}
@component('emails.organisms.alert-box', [
    'variant' => 'info',
    'colors' => $colors
])
    Need help getting started? Our support team is here to assist you with any questions about booking tickets or using your account.
@endcomponent

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

{{-- Closing --}}
@component('emails.atoms.text', ['colors' => $colors])
    Happy booking!<br>
    <strong style="font-weight: 600; color: {{ $colors['neutral-900'] }};">The Global Gala Team</strong>
@endcomponent

{{-- Email Tracking Pixel (Phase 4 - 2025-10-28) --}}
@if(isset($trackingPixelUrl) && $trackingPixelUrl)
<img src="{{ $trackingPixelUrl }}" width="1" height="1" alt="" style="display:none;" />
@endif

@endcomponent