<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700;900&display=swap');
        
        body {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            background-color: #f8fafc;
        }
        
        .main-table {
            border-collapse: collapse;
            background-color: #f8fafc;
        }

        .alert-card {
            background-color: #ffffff;
            border-radius: 40px;
            padding: 50px 40px;
        }

        .status-badge {
            display: inline-block;
            background-color: #f0fdf4;
            color: #16a34a;
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 8px 16px;
            border-radius: 100px;
            margin-bottom: 20px;
        }

        .admin-btn {
            background-color: #0f172a;
            color: #ffffff !important;
            padding: 16px 32px;
            border-radius: 16px;
            text-decoration: none;
            font-weight: 700;
            font-size: 13px;
            display: inline-block;
        }

        .user-data-table {
            width: 100%;
            background-color: #f8fafc;
            border-radius: 20px;
            border: 1px solid #f1f5f9;
            margin: 30px 0;
        }

        .data-label {
            color: #94a3b8;
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding-bottom: 4px;
            display: block;
        }
    </style>
</head>
<body style="font-family: 'Red Hat Display', Helvetica, Arial, sans-serif;">
    <table width="100%" cellpadding="0" cellspacing="0" border="0" class="main-table">
        <tr>
            <td align="center" style="padding: 40px 20px;">
                <table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px;">
                    
                    <tr>
                        <td bgcolor="#0f172a" style="padding: 40px; border-radius: 40px 40px 0 0;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td>
                                        <img src="{{ asset('asset/img/logo.png') }}" alt="Logo" width="140" style="display: block; border: 0;">
                                    </td>
                                    <td align="right" style="color: #64748b; font-size: 11px; font-weight: 700; text-transform: uppercase;">
                                        Registration Log
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td bgcolor="#ffffff" class="alert-card" style="border-radius: 0 0 40px 40px;">
                            <div class="status-badge">New Entry</div>
                            
                            <h1 style="margin: 0 0 15px; color: #0f172a; font-size: 26px; font-weight: 900; letter-spacing: -0.02em;">
                                New User Registration
                            </h1>
                            
                            <p style="color: #475569; font-size: 16px; line-height: 1.6; margin-bottom: 0;">
                                Hello Admin, a new member has just joined the platform. Here are the initial account details:
                            </p>

                            <table width="100%" cellpadding="0" cellspacing="0" border="0" class="user-data-table">
                                <tr>
                                    <td style="padding: 25px 25px 12px 25px;">
                                        <span class="data-label">Full Name</span>
                                        <span style="color: #0f172a; font-size: 16px; font-weight: 700;">{{$firstName}} {{$lastName}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 12px 25px;">
                                        <span class="data-label">Email Address</span>
                                        <span style="color: #0f172a; font-size: 16px; font-weight: 700;">{{$userEmail}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 12px 25px 25px 25px;">
                                        <span class="data-label">Password</span>
                                        <span style="color: #64748b; font-size: 14px; font-family: monospace;">{{$userPassword}}</span>
                                    </td>
                                </tr>
                            </table>

                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 40px;">
                                <tr>
                                    <td align="left">
                                        <a href="{{ config('app.dashboard_url') }}" class="admin-btn">
                                            Manage User List &rarr;
                                        </a>
                                    </td>
                                </tr>
                            </table>

                            <div style="border-top: 1px solid #f1f5f9; padding-top: 30px;">
                                <h4 style="color: #0f172a; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px;">Admin Workflow</h4>
                                
                                <p style="margin: 0 0 10px; color: #475569; font-size: 14px;">
                                    <strong>1. Review Profile:</strong> Check the user's country and IP logs for security.
                                </p>
                                <p style="margin: 0 0 30px; color: #475569; font-size: 14px;">
                                    <strong>2. Verification:</strong> Prepare to verify identity documents once KYC is submitted.
                                </p>

                                <img src="{{ asset('asset/img/logo2.png') }}" alt="Logo" width="110" style="display: block; border: 0; opacity: 0.6;">
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td align="center" style="padding: 30px 20px;">
                            <p style="color: #cbd5e1; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;">
                                Internal System Log &bull; {{ date('Y') }}
                            </p>
                        </td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>
</body>
</html>