@extends('layouts.app')

@section('content')
<main id="mainContent">
  <section class="section" style="min-height: 75vh; display: flex; align-items: center; padding: 4rem 0;">
    <div class="container" style="max-width: 540px;">
      
      <div class="service-card reveal" style="padding: 2.5rem; background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); text-align: center;">
        
        <!-- Icon -->
        <div style="width: 64px; height: 64px; margin: 0 auto 1.5rem; border-radius: 50%; background: rgba(239, 68, 68, 0.12); color: #ef4444; display: flex; align-items: center; justify-content: center; font-size: 1.75rem;">
          <i class="fas fa-times-circle"></i>
        </div>

        <span class="section-badge" style="margin-bottom: 0.75rem; background: rgba(239, 68, 68, 0.12); color: #dc2626; border-color: rgba(239, 68, 68, 0.25);">
          <i class="fas fa-shield-alt"></i> Invalid Link
        </span>

        <h1 style="font-size: 1.75rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-bottom: 0.75rem;">
          Invalid Verification Link
        </h1>

        <p style="color: var(--text-light); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem;">
          {{ $reason ?? 'The verification link you clicked is invalid or has been modified. Please make sure you copied the full link or request a new one.' }}
        </p>

        <div style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1.75rem; text-align: left; font-size: 0.88rem; color: var(--text-light); line-height: 1.5;">
          <p style="margin: 0 0 0.5rem 0; font-weight: 600; color: var(--text-heading);">
            <i class="fas fa-lightbulb" style="color: var(--accent); margin-right: 0.4rem;"></i> Suggestions:
          </p>
          <ul style="margin: 0; padding-left: 1.25rem;">
            <li>Log in with your email to receive a fresh verification link.</li>
            <li>If you haven't created an account yet, please register below.</li>
            <li>If you need assistance, please contact our support team.</li>
          </ul>
        </div>

        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
          <a href="{{ route('login') }}" class="btn btn-primary" style="width: 100%; justify-content: center; font-weight: 600; padding: 0.85rem 1.5rem;">
            <i class="fas fa-sign-in-alt"></i> Sign In to Portal
          </a>

          <div style="display: flex; gap: 0.75rem;">
            <a href="{{ route('register') }}" class="btn btn-outline" style="flex: 1; justify-content: center; font-size: 0.9rem;">
              <i class="fas fa-user-plus"></i> Register
            </a>
            <a href="{{ route('contact') }}" class="btn btn-outline" style="flex: 1; justify-content: center; font-size: 0.9rem;">
              <i class="fas fa-headset"></i> Support
            </a>
          </div>
        </div>

      </div>
    </div>
  </section>
</main>
@endsection