@extends('layouts.app_web')

@section('title', '500 Server Error | Non Woven Fabric Manufacturer')

@push('styles')
    <style>
        .error-500-wrapper {
            min-height: calc(100vh - 200px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 80px 60px 100px 60px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .error-500-title {
            font-size: 46px;
            font-weight: 400;
            color: #456C6C;
            line-height: 1.2;
            margin-bottom: 40px;
            max-width: 600px;
        }

        .error-500-divider {
            width: 100%;
            height: 4px;
            background-color: #C9D4EA;
            margin-bottom: 40px;
        }

        .error-500-description {
            font-size: 18px;
            color: #555;
            line-height: 1.8;
            max-width: 800px;
        }

        .error-500-description a {
            color: #456C6C;
            text-decoration: underline;
        }

        .error-500-description a:hover {
            color: #4ECDC4;
        }

        @media (max-width: 768px) {
            .error-500-wrapper {
                padding: 60px 30px 80px 30px;
            }

            .error-500-title {
                font-size: 2.5rem;
            }
        }
    </style>
@endpush

@section('content')
    <div class="error-500-wrapper">
        <h2 class="error-500-title">Something went wrong<br> on our end</h2>

        <div class="error-500-divider"></div>

        <p class="error-500-description">
            We encountered an unexpected error while processing your request.
            Our team has been notified and is working to resolve the issue.
            Please try again in a few moments, or return to the
            <a href="{{ url('/') }}">homepage</a> and continue browsing.
        </p>
    </div>
@endsection