@extends(theme_view('layouts.app'))

@section('title', '404 - Página no encontrada')

@section('content')
<div class="main-container col1-layout">
    <div class="main container">
        <div class="col-main">
            <div class="error-page" style="text-align: center; padding: 100px 20px;">
                <h1 style="font-size: 120px; color: #f77b71; margin: 0;">404</h1>
                <h2 style="font-size: 36px; margin: 20px 0;">¡Oops! Página no encontrada</h2>
                <p style="font-size: 18px; color: #666; margin: 20px 0;">
                    La página que estás buscando no existe o ha sido movida.
                </p>
                <p style="font-size: 16px; color: #999; margin: 20px 0;">
                    Es posible que el enlace esté roto o que la página haya sido eliminada.
                </p>
                <div style="margin: 40px 0;">
                    <a href="{{ route('front.home') }}" class="button" style="background: #f77b71; color: white; padding: 12px 30px; text-decoration: none; border-radius: 4px; display: inline-block;">
                        <i class="fa fa-home"></i> Volver al Inicio
                    </a>
                    <a href="{{ route('front.shop') }}" class="button" style="background: #333; color: white; padding: 12px 30px; text-decoration: none; border-radius: 4px; display: inline-block; margin-left: 10px;">
                        <i class="fa fa-shopping-cart"></i> Ir a la Tienda
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection