<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= lang('Notifications.emailChangeSubject') ?></title>
</head>
<body style="font-family: sans-serif; color: #333;">
    <div style="max-width: 600px; margin: auto; padding: 20px; border: 1px solid #ddd; border-radius: 5px;">
        <h2 style="color: #4f46e5;"><?= lang('Notifications.emailChangeSubject') ?></h2>
        <p><?= lang('Notifications.emailChangeGreeting') ?></p>
        <p><?= lang('Notifications.emailChangeMessage', [getenv('app.name')]) ?></p>
        <p style="margin: 25px 0;">
            <a href="<?= esc($verificationLink, 'url') ?>" 
               style="display: inline-block; padding: 12px 24px; font-size: 16px; font-weight: bold; background-color: #4f46e5; color: white; text-decoration: none; border-radius: 5px;">
                <?= lang('Notifications.emailChangeButton') ?>
            </a>
        </p>
        <p style="font-size: 12px; color: #777;">
            <?= lang('Notifications.verificationBackup') ?><br> 
            <a href="<?= esc($verificationLink, 'url') ?>" style="color: #4f46e5;"><?= esc($verificationLink) ?></a>
        </p>
        <hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
        <p style="font-size: 12px; color: #777;"><?= lang('Notifications.emailChangeDisclaimer') ?></p>
    </div>
</body>
</html>