<?php
/**
 * EXAMPLE: Customized Email Verification Email Template
 *
 * This is an example of how you might customize the email verification
 * email to match your brand.
 *
 * To use this example:
 * 1. Copy this file to: your-theme/guard-dog/emails/email-verification.php
 * 2. Customize the HTML, CSS, and content to match your brand
 * 3. The plugin will automatically use your customized version
 *
 * Available variables:
 * @var string $user_name User's display name
 * @var string $verification_link Full verification URL
 * @var int $expires_in Number of hours until link expires
 * @var string $site_name Site name
 * @var string $site_url Site URL
 *
 * @package GuardDog
 * @since 1.9.0
 */

if (!defined('ABSPATH')) exit;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo esc_html__('Verify Your Email Address', 'guard-dog'); ?></title>
    <style type="text/css">
        /* Example custom branding styles */
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: #2c3e50;
            max-width: 600px;
            margin: 0 auto;
            padding: 0;
            background-color: #ecf0f1;
        }
        .email-wrapper {
            background: #ffffff;
            margin: 20px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .email-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #ffffff;
            padding: 40px 30px;
            text-align: center;
        }
        .email-header h1 {
            margin: 0;
            font-size: 28px;
            font-weight: 300;
        }
        .email-content {
            padding: 40px 30px;
        }
        .email-content p {
            margin: 0 0 15px 0;
            font-size: 16px;
        }
        .verify-button {
            display: inline-block;
            background: #667eea;
            color: #ffffff;
            padding: 15px 40px;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 16px;
            margin: 20px 0;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
        }
        .verify-button:hover {
            background: #5568d3;
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        }
        .button-container {
            text-align: center;
            margin: 30px 0;
        }
        .alternative-link {
            background: #f7f9fc;
            padding: 15px;
            border-radius: 6px;
            word-break: break-all;
            font-size: 13px;
            color: #667eea;
            border: 1px solid #e1e8ed;
        }
        .email-footer {
            background: #f7f9fc;
            padding: 30px;
            text-align: center;
            font-size: 13px;
            color: #95a5a6;
            border-top: 1px solid #e1e8ed;
        }
        .email-footer a {
            color: #667eea;
            text-decoration: none;
        }
        .info-box {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }
        .info-box p {
            margin: 0;
            font-size: 14px;
            color: #856404;
        }
    </style>
</head>
<body>
    <div class="email-wrapper">
        <div class="email-header">
            <h1>✨ <?php // Translators: %s is the site name. ?>
            <?php printf(esc_html__('Welcome to %s', 'guard-dog'), esc_html($site_name)); ?></h1>
        </div>

        <div class="email-content">
            <p style="font-size: 18px; font-weight: 600;">
                <?php // Translators: %s is the user's display name. ?>
                <?php printf(esc_html__('Hello %s,', 'guard-dog'), esc_html($user_name)); ?>
            </p>

            <p><?php esc_html_e('We\'re excited to have you on board! To get started, please verify your email address by clicking the button below:', 'guard-dog'); ?></p>

            <div class="button-container">
                <a href="<?php echo esc_url($verification_link); ?>" class="verify-button">
                    <?php esc_html_e('Verify My Email Address', 'guard-dog'); ?>
                </a>
            </div>

            <p style="color: #7f8c8d; font-size: 14px;">
                <?php esc_html_e('Or copy and paste this link into your browser:', 'guard-dog'); ?>
            </p>

            <div class="alternative-link">
                <?php echo esc_url($verification_link); ?>
            </div>

            <div class="info-box">
                <p>
                    <strong><?php esc_html_e('Important:', 'guard-dog'); ?></strong>
                    <?php
                    printf(
                        // Translators: %d is the number of hours until the verification link expires.
                        esc_html__('This verification link will expire in %d hours for security reasons.', 'guard-dog'),
                        absint($expires_in)
                    );
                    ?>
                </p>
            </div>

            <p style="color: #95a5a6; font-size: 14px; margin-top: 30px;">
                <?php esc_html_e('If you did not create an account, you can safely ignore this email. No account has been created yet.', 'guard-dog'); ?>
            </p>
        </div>

        <div class="email-footer">
            <p style="margin: 0 0 10px 0;">
                <?php // Translators: %s is the site name. ?>
                <?php printf(esc_html__('This email was sent by %s', 'guard-dog'), esc_html($site_name)); ?>
            </p>
            <p style="margin: 0;">
                <a href="<?php echo esc_url($site_url); ?>">
                    <?php echo esc_url($site_url); ?>
                </a>
            </p>
        </div>
    </div>
</body>
</html>
