@extends('emails.layout')

@section('content')
    <h2>Welcome to {{ $companyName }}! 🎉</h2>

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

    <p>Your account has been successfully created. We're excited to have you on board!</p>

    <div class="credentials-box">
        <h3>Your Login Credentials</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">Username:</span>
            <span class="credential-value">{{ $username }}</span>
        </div>

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

    <div class="alert-box warning">
        <strong>⚠️ Important Security Notice</strong>
        <p>For your security, please change your password after your first login. Never share your password with anyone.</p>
    </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;">Getting Started</h3>
    <ul>
        <li>Log in using your credentials above</li>
        <li>Complete your profile information</li>
        <li>Change your password for security</li>
        <li>Explore the system features</li>
    </ul>

    <div class="info-box">
        <p><strong>Need Help?</strong></p>
        <p>If you did not expect this email or believe it was sent in error, please contact our support team at {{ $supportEmail }} immediately.</p>
    </div>
@endsection