@extends('errors.layout')

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

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

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

@section('action')
    <button onclick="window.location.reload();" 
        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.retry') }}
    </button>
    <a href="{{ url('/') }}" 
        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_to_home') }}
    </a>
@endsection