@extends('layout.mainlayout')

@php
    $metaTitle = 'Page Not Found';
    $metaDescription = 'The page you are looking for could not be found.';
@endphp

@section('content')
<div class="error-page">
    <div class="container">
        <div class="row align-items-center justify-content-center min-vh-100">
            <div class="col-lg-6">
                <div class="error-content text-center">
                    <div class="error-img mb-4">
                        <img src="{{ asset('build/img/error-400.svg') }}" alt="404 Error" class="img-fluid">
                    </div>
                    <h1 class="display-1 text-primary mb-3">404</h1>
                    <h2 class="mb-3">Page Not Found</h2>
                    <p class="text-muted mb-4">
                        The page you are looking for might have been removed, had its name changed, 
                        or is temporarily unavailable.
                    </p>
                    <div class="d-flex gap-3 justify-content-center flex-wrap">
                        <a href="{{ route('home') }}" class="btn btn-primary">
                            <i class="ti ti-home"></i> Go to Homepage
                        </a>
                        <a href="javascript:history.back()" class="btn btn-outline-secondary">
                            <i class="ti ti-arrow-left"></i> Go Back
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection