@extends('layout')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&family=Inter:wght@400;500&display=swap" rel="stylesheet">

<style>
    /* Scoped Container for 404 Page */
    #error-404-pg-wrapper {
        padding: 80px 20px;
        background-color: #ffffff;
        font-family: 'Inter', sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 70vh;
    }

    .error-404-content {
        max-width: 650px;
        text-align: center;
    }

    /* Illustration Styling */
    .error-404-illustration {
        margin-bottom: 40px;
        display: flex;
        justify-content: center;
    }

    .error-404-illustration img {
        max-width: 100%;
        height: auto;
        /* Matches the blue robot/gear aesthetic in your image */
    }

    /* Text Styling */
    .error-404-content h1 {
        font-family: 'Libre Baskerville', serif;
        font-size: 36px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 20px;
    }

    .error-404-content p {
        font-size: 15px;
        line-height: 1.6;
        color: #666;
        margin-bottom: 35px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Back to Home Button */
    .error-404-btn-home {
        display: inline-block;
        background: #00569d; /* Consistent Primary Blue */
        color: white;
        padding: 14px 50px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
        transition: all 0.3s ease;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 86, 157, 0.2);
    }

    .error-404-btn-home:hover {
        background: #003f75;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 86, 157, 0.3);
    }
</style>

<div id="error-404-pg-wrapper">
    <div class="error-404-content">
        <div class="error-404-illustration">
            <img src="{{ asset('assets/404.png') }}" alt="404 Error Illustration">
        </div>

        <h1>404, Page not found</h1>
        
        <p>
            Something went wrong. It looks like the page you requested could not be 
            found. It's looks like the link is broken or the page is removed.
        </p>

        <a href="{{ url('/') }}" class="error-404-btn-home">Back to Home</a>
    </div>
</div>

@endsection