@component('shop::emails.layout')
    <div style="margin-bottom: 34px;">
        <p style="font-weight: bold;font-size: 20px;color: #121A26;line-height: 24px;margin-bottom: 24px">
            Congratulations! Your Vendor Application Has Been Approved 🎉
        </p>

        <p style="font-size: 16px;color: #384860;line-height: 24px;">
            Dear {{ $vendor->company_name }},
        </p>

        <p style="font-size: 16px;color: #384860;line-height: 24px;">
            We are pleased to inform you that your vendor application has been approved. You can now access your vendor account and start managing your business on our platform.
        </p>
    </div>

    <div style="background: #e8f5e8; padding: 20px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #28a745;">
        <h3 style="margin: 0 0 15px 0; color: #155724;">Application Details:</h3>
        
        <table style="width: 100%; border-collapse: collapse;">
            <tr>
                <td style="padding: 8px 0; font-weight: bold; color: #155724; width: 150px;">Company Name:</td>
                <td style="padding: 8px 0; color: #155724;">{{ $vendor->company_name }}</td>
            </tr>
            <tr>
                <td style="padding: 8px 0; font-weight: bold; color: #155724;">Company Email:</td>
                <td style="padding: 8px 0; color: #155724;">{{ $vendor->company_email }}</td>
            </tr>
            <tr>
                <td style="padding: 8px 0; font-weight: bold; color: #155724;">Status:</td>
                <td style="padding: 8px 0; color: #155724;">✅ Approved</td>
            </tr>
            <tr>
                <td style="padding: 8px 0; font-weight: bold; color: #155724;">Approved On:</td>
                <td style="padding: 8px 0; color: #155724;">{{ core()->formatDate($vendor->approved_at, 'Y-m-d H:i:s') }}</td>
            </tr>
        </table>
    </div>

    <p style="font-size: 16px;color: #384860;line-height: 24px;margin-bottom: 40px">
        You can now log in to your vendor account using your registered email address and password. Welcome to our vendor community!
    </p>

    <div style="display: flex;margin-bottom: 95px">
        <a
            href="{{ route('shop.customer.session.index') }}"
            style="padding: 16px 45px;justify-content: center;align-items: center;gap: 10px;border-radius: 2px;background: #28a745;color: #FFFFFF;text-decoration: none;text-transform: uppercase;font-weight: 700;"
        >
            Login to Your Account
        </a>
    </div>

    <p style="font-size: 14px;color: #6c757d;line-height: 20px;">
        If you have any questions or need assistance, please don't hesitate to contact our support team.
    </p>
@endcomponent