@extends('errors.layout')

@section('title', __('errors.404_title'))
@section('code', '404')

@section('illustration')
    <div class="mb-4 flex justify-center">
        <img src="{{ asset('images/icn-404.svg') }}" alt="404 Illustration" class="h-20 sm:h-24 w-auto object-contain">
    </div>
@endsection

@section('message')
    {!! __('errors.404_message') !!}
@endsection

@section('action')
    <button onclick="history.back();" 
        class="btn-secondary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-gray-100 active:scale-[0.97]">
        {{ __('errors.back') }}
    </button>
    <a href="{{ url('/') }}" 
        class="btn-primary w-full sm:w-auto text-[13px] h-[40px] px-6 flex items-center justify-center transition-all duration-300 hover:scale-[1.03] hover:bg-primary-hover active:scale-[0.97]">
        {{ __('errors.back_to_home') }}
    </a>
@endsection