@extends('layouts.app')

@section('content')
<main id="mainContent">
  <section class="section" style="padding: 8rem 0; text-align: center;">
    <div class="container" style="max-width: 680px;">
      <div style="font-size: 7rem; font-weight: 800; font-family: var(--font-heading); line-height: 1; color: var(--danger); margin-bottom: 1rem;">
        500
      </div>
      <h1 style="font-size: 2rem; margin-bottom: 1rem;">Internal System Disruption</h1>
      <p style="color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; margin-bottom: 2.5rem;">
        Our engineering infrastructure encountered an unexpected exception. Our technical support team in Nagpur has been notified.
      </p>

      <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
        <a href="{{ route('home') }}" class="btn btn-primary btn-lg">
          <i class="fas fa-home"></i> Back to Homepage
        </a>
        <a href="{{ route('contact') }}" class="btn btn-outline btn-lg">
          <i class="fas fa-headset"></i> Contact Support
        </a>
      </div>
    </div>
  </section>
</main>
@endsection