<!-- Path: app/Views/Email/welcome_notification.email.php -->
<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 0; background-color: #f4f7f6; }
        .wrapper { width: 100%; background-color: #f4f7f6; padding: 20px 0; }
        .container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
        .header { background: #1e3a8a; color: #fff; padding: 20px; text-align: center; }
        .header h2 { margin: 0; font-size: 24px; font-weight: bold; }
        .content { padding: 30px; }
        .content h3 { color: #1e3a8a; margin-top: 0; }
        .content p { margin: 10px 0 20px; color: #475569; font-size: 16px; }
        .btn-container { text-align: center; margin: 30px 0; }
        .btn { display: inline-block; background-color: #ef4444; color: #ffffff; padding: 12px 25px; text-decoration: none; border-radius: 5px; font-weight: bold; }
        .footer { background-color: #f8fafc; padding: 15px; font-size: 12px; color: #64748b; text-align: center; border-top: 1px solid #e2e8f0; }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div class="header">
                <h2>Welcome to ERCS</h2>
            </div>
            <div class="content">
                <h3>Hello <?= htmlspecialchars($name) ?>,</h3>
                <p>Welcome to the Emergency Response Coordination System. Your account has been successfully created and your phone number is securely registered.</p>
                <p>With your new account, you can quickly report emergencies, share your live GPS location with first responders, and track their arrival in real-time.</p>
                
                <div class="btn-container">
                    <!-- Note: In a real email, you'd replace APP_URL with the absolute URL like https://yourdomain.com -->
                    <a href="<?= defined('APP_URL') ? APP_URL : 'http://localhost' ?>/dashboard" class="btn">Go to Dashboard</a>
                </div>
                
                <p>Stay safe,<br>The ERCS Dispatch Team</p>
            </div>
            <div class="footer">
                <p>This is an automated message. Please do not reply directly to this email.</p>
                <p>&copy; <?= date('Y') ?> Emergency Response Coordination System.</p>
            </div>
        </div>
    </div>
</body>
</html>