@extends('layouts.bistro')

@section('title', 'Stranica nije pronađena - ' . config('app.name'))

@section('content')

<!-- Page Header -->
<section id="page_header" style="background-image: url('{{ asset('images/konoba/konoba-ulaz-nocna-hero.jpg') }}');">
    <div class="page_title">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="title">404</h2>
                    <p>Stranica nije pronađena</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 404 Section -->
<section class="padding">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-lg-6 text-center mx-auto">
                <div style="padding: 60px 40px; background: #f8f9fa; border-radius: 8px;">
                    <div style="font-size: 120px; font-weight: bold; color: #c33; line-height: 1; margin-bottom: 20px;">
                        404
                    </div>
                    <h2 style="color: #333; margin-bottom: 20px;">Stranica nije pronađena</h2>
                    <p style="font-size: 18px; color: #666; margin-bottom: 40px;">
                        Nažalost, stranica koju tražite ne postoji ili je uklonjena.<br>
                        Možda ste ukucali pogrešnu adresu ili je link zastario.
                    </p>
                    
                    <div>
                        <a href="{{ url('/') }}" class="btn-common" style="display: inline-block; margin-right: 10px;">
                            <i class="fa fa-home"></i> Povratak na početnu stranicu
                        </a>
                        <a href="{{ route('contact') }}" class="btn-default" style="display: inline-block; padding: 10px 25px;">
                            <i class="fa fa-envelope"></i> Kontaktirajte nas
                        </a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div style="margin-top: 50px;">
                    <h3 style="margin-bottom: 30px; color: #333;">Možda vas zanima:</h3>
                    <div class="row">
                        <div class="col-md-4">
                            <a href="{{ route('menu') }}" style="display: block; padding: 20px; background: #fff; border-radius: 4px; text-decoration: none; transition: all 0.3s; border: 2px solid #e9ecef;">
                                <i class="fa fa-cutlery" style="font-size: 36px; color: #c33; margin-bottom: 10px;"></i>
                                <h4 style="color: #333; margin: 10px 0 5px 0;">Jelovnik</h4>
                                <p style="color: #666; margin: 0; font-size: 14px;">Pogledajte našu ponudu</p>
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="{{ route('daily-menu') }}" style="display: block; padding: 20px; background: #fff; border-radius: 4px; text-decoration: none; transition: all 0.3s; border: 2px solid #e9ecef;">
                                <i class="fa fa-list" style="font-size: 36px; color: #c33; margin-bottom: 10px;"></i>
                                <h4 style="color: #333; margin: 10px 0 5px 0;">Dnevni meni</h4>
                                <p style="color: #666; margin: 0; font-size: 14px;">Današnja ponuda</p>
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="{{ route('reservations') }}" style="display: block; padding: 20px; background: #fff; border-radius: 4px; text-decoration: none; transition: all 0.3s; border: 2px solid #e9ecef;">
                                <i class="fa fa-calendar" style="font-size: 36px; color: #c33; margin-bottom: 10px;"></i>
                                <h4 style="color: #333; margin: 10px 0 5px 0;">Rezervacije</h4>
                                <p style="color: #666; margin: 0; font-size: 14px;">Rezervirajte stol</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@push('styles')
<style>
    a[href*="route"] > div:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        border-color: #c33 !important;
    }
</style>
@endpush