@extends('emails.layout')

@section('content')
    <h2 style="margin-top: 0;">
        {{ $type === 'welcome' ? "Welcome to " . config('app.name') . "!" : 'Your Password Reset' }}
    </h2>
    <p>Hi {{ $name }},</p>
    
    <p>
        {{ $type === 'welcome' 
            ? "Thanks for booking with us! We've created an account for you so you can manage your bookings, message hosts, and download invoices easily." 
            : "We've reset your password as requested. You can now use the credentials below to access your account." 
        }}
    </p>

    <div class="info-section">
        <div class="info-header">Login Credentials</div>
        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
            <tr>
                <td style="padding: 8px 0; color: #64748B; font-size: 12px; font-weight: 600; width: 45%;">Email Address</td>
                <td style="padding: 8px 0; color: #0F172A; font-size: 12px; font-weight: 700; text-align: right;">
                    <a href="mailto:{{ $email }}" style="color: #3525CD; text-decoration: none;">{{ $email }}</a>
                </td>
            </tr>
            <tr>
                <td style="padding: 8px 0; color: #64748B; font-size: 12px; font-weight: 600;">Temporary Password</td>
                <td style="padding: 8px 0; color: #0F172A; font-family: monospace; font-size: 16px; font-weight: 700; text-align: right; letter-spacing: 1px;">
                    {{ $password }}
                </td>
            </tr>
        </table>
    </div>

    <p style="font-size: 13px; color: #64748B; font-style: italic;">
        Note: We recommend changing this password in your profile settings after you log in.
    </p>

    <div style="text-align: center; margin-top: 30px;">
        <a href="{{ $login_url }}" class="button">Log In to Your Dashboard</a>
    </div>
@endsection