@extends('emails.layout')

@section('content')
    <h2>Account Unlocked - Access Restored ✅</h2>

    <p>Hello <strong>{{ $userName }}</strong>,</p>

    <p>Good news! Your account has been unlocked and you can now access the system again.</p>

    <div class="alert-box success">
        <strong>✅ Account Status: ACTIVE</strong>
        <p>Your account is now active and you can log in with your credentials.</p>
    </div>

    <div class="credentials-box">
        <h3>Account Information</h3>

        <div class="credential-item">
            <span class="credential-label">Email:</span>
            <span class="credential-value">{{ $email }}</span>
        </div>

        <div class="credential-item">
            <span class="credential-label">Status:</span>
            <span style="color: #28a745; font-weight: 600;">✓ Active</span>
        </div>

        <div class="credential-item">
            <span class="credential-label">Unlocked On:</span>
            <span style="color: #555; font-weight: 600;">{{ date('F j, Y g:i A') }}</span>
        </div>
    </div>

    <div style="text-align: center;">
        <a href="{{ $loginUrl }}" class="button">Login to Your Account</a>
    </div>

    <hr class="divider">

    <h3 style="color: #333; font-size: 18px; margin-bottom: 15px;">🔐 Security Reminders</h3>
    <ul>
        <li>Keep your password secure and don't share it with anyone</li>
        <li>Use a strong, unique password for your account</li>
        <li>Enable two-factor authentication if available</li>
        <li>Log out when using shared computers</li>
        <li>Report any suspicious activity immediately</li>
    </ul>

    <div class="info-box">
        <p><strong>⚠️ Important Notice</strong></p>
        <p>If you did not request this action or if you notice any suspicious activity on your account, please contact our support team immediately at <strong>{{ $supportEmail }}</strong>.</p>
    </div>

    <div style="background: #f8f9fa; padding: 20px; border-radius: 6px; margin: 25px 0; text-align: center;">
        <p style="margin: 0; color: #555; font-size: 14px;">
            Welcome back! If you have any questions or need assistance, our support team is here to help.
        </p>
    </div>
@endsection