@extends('emails.partials.base_template')

@section('content')
<div style="max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
    <!-- Header -->
    <div style="background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); padding: 40px 30px; text-align: center;">
        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.5px;">
            Email Verification
        </h1>
        <p style="color: #E0E7FF; margin: 10px 0 0 0; font-size: 16px; font-weight: 400;">
            Complete your account setup
        </p>
    </div>

    <!-- Main Content -->
    <div style="padding: 40px 30px;">
        <div style="text-align: center; margin-bottom: 30px;">
            <h2 style="color: #1F2937; margin: 0 0 10px 0; font-size: 24px; font-weight: 600;">
                Welcome to {{ $companySettings['companyName'] ?? 'XERO AUTO DISPATCH' }}!
            </h2>
            <p style="color: #6B7280; margin: 0; font-size: 16px; line-height: 1.6;">
                Thank you for registering with {{ $companySettings['companyName'] ?? 'XERO AUTO DISPATCH' }}! To complete your account setup and ensure the security of your account, please verify your email address using the verification code below.
            </p>
        </div>

        <!-- Verification Code -->
        <div style="background: #F9FAFB; border: 2px dashed #D1D5DB; border-radius: 12px; padding: 30px; text-align: center; margin: 30px 0;">
            <p style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 500;">
                Your verification code:
            </p>
            <div style="background: #ffffff; border: 2px solid #3B82F6; border-radius: 8px; padding: 20px; display: inline-block; margin: 0 auto;">
                <span style="color: #3B82F6; font-size: 32px; font-weight: 700; letter-spacing: 8px; font-family: 'Courier New', monospace;">
                    {{ $code }}
                </span>
            </div>
            <p style="color: #6B7280; margin: 15px 0 0 0; font-size: 14px;">
                This code will expire in 10 minutes
            </p>
        </div>

        <!-- Instructions -->
        <div style="background: #F0F9FF; border-left: 4px solid #3B82F6; padding: 20px; margin: 30px 0; border-radius: 0 8px 8px 0;">
            <h3 style="color: #1E40AF; margin: 0 0 15px 0; font-size: 18px; font-weight: 600;">
                What's Next?
            </h3>
            <ul style="color: #374151; margin: 0; padding-left: 20px; line-height: 1.8;">
                <li><strong>Enter the Code:</strong> Use the verification code above to complete your registration</li>
                <li><strong>Secure Access:</strong> Your account will be protected with email verification</li>
                <li><strong>Complete Registration:</strong> Once verified, your account will be fully activated</li>
                <li><strong>Start Using Our Services:</strong> Access all our vehicle transport services</li>
            </ul>
        </div>

        <!-- Security Notice -->
        <div style="background: #f0f9ff; border: 1px solid #3b82f6; border-radius: 8px; padding: 20px; margin: 30px 0;">
            <h4 style="color: #1e3a8a; margin: 0 0 8px 0; font-size: 16px; font-weight: 600;">
                Security Notice
            </h4>
            <p style="color: #1e3a8a; margin: 0; font-size: 14px; line-height: 1.6;">
                Never share this verification code with anyone. Our team will never ask for your verification code via phone, email, or any other method.
            </p>
        </div>
    </div>

    <!-- Footer -->
    <div style="background: #F9FAFB; padding: 30px; text-align: center; border-top: 1px solid #E5E7EB;">
        <p style="color: #6B7280; margin: 0 0 15px 0; font-size: 14px; line-height: 1.6;">
            If you didn't request this verification code, please ignore this email. Your account will remain secure.
        </p>
        <p style="color: #9CA3AF; margin: 0; font-size: 12px;">
            This email was sent from {{ $companySettings['companyName'] ?? 'XERO AUTO DISPATCH' }}. 
            <br>
            For support, contact us at {{ $companySettings['companyEmail'] ?? 'support@company.com' }}
        </p>
    </div>
</div>
@endsection