<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
/**
 * صفحه خطای ۴۰۴ - صفحه پیدا نشد
 * طراحی مستقل و مدرن هماهنگ با پوسته اسکایلر
 */
?>
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>۴۰۴ - صفحه پیدا نشد | <?php $this->options->title(); ?></title>
    
    <!-- ---------- فونت و آیکون‌ها (آفلاین - از قالب) ---------- -->
    <link rel="stylesheet" href="<?php $this->options->themeUrl('css/all.css'); ?>">
    <link rel="stylesheet" href="<?php $this->options->themeUrl('css/fonts.css'); ?>">
    
    <!-- ---------- تعریف متغیرهای رنگی پوسته ---------- -->
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3a0ca3;
            --dark: #212529;
            --gray: #6c757d;
            --light: #f8f9fa;
            --border: #e9ecef;
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: 'Vazirmatn', sans-serif;
            background: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        
        /* استایل‌های تعاملی */
        .error-404-modern a[href*="history.back"]:hover,
        .error-404-modern a[href*="siteUrl"]:hover,
        .error-404-modern button:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(67,97,238,0.35);
        }
        
        .error-404-modern a[href*="history.back"]:hover {
            background: var(--primary) !important;
            color: white !important;
        }
        
        .error-404-modern input:focus {
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 4px rgba(67,97,238,0.1) !important;
        }
        
        .error-404-modern a[href*="/"]:hover {
            color: var(--primary) !important;
        }
        
        body, div, span, h1, p, a, button, input {
            font-family: 'Vazirmatn', sans-serif !important;
        }
    </style>
</head>
<body>

<!-- ---------- باکس اصلی خطای ۴۰۴ ---------- -->
<div class="error-404-modern" style="max-width: 1000px; width: 90%; margin: 20px auto; background: white; border-radius: 32px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); padding: 40px 30px; text-align: center; border: 1px solid var(--border);">

    <!-- ---------- آیکون و کد خطا ---------- -->
    <div style="position: relative; display: inline-block; margin-bottom: 20px;">
        <i class="fa-solid fa-compass" style="font-size: 100px; color: var(--primary); opacity: 0.15;"></i>
        <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 42px; font-weight: 900; color: var(--primary); text-shadow: 0 5px 15px rgba(67,97,238,0.2);">۴۰۴</span>
    </div>

    <!-- ---------- عنوان ---------- -->
    <h1 style="font-size: 30px; font-weight: 800; color: var(--dark); margin-bottom: 15px; line-height: 1.4; font-family: 'Vazirmatn', sans-serif;">
        صفحه‌ای که دنبالش بودی<br>گم شده!
    </h1>

    <!-- ---------- توضیحات ---------- -->
    <p style="font-size: 17px; color: var(--gray); margin-bottom: 30px; line-height: 1.7; max-width: 600px; margin-left: auto; margin-right: auto; font-family: 'Vazirmatn', sans-serif;">
        انگار مسیر را اشتباه آمدی. لینک زیر را امتحان کن یا از جستجو استفاده کن.
    </p>

    <!-- ---------- دکمه‌های اصلی ---------- -->
    <div style="display: flex; gap: 16px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap;">
        <a href="<?php $this->options->siteUrl(); ?>" style="display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 12px 28px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 16px; box-shadow: 0 8px 20px rgba(67,97,238,0.3); transition: all 0.3s ease; font-family: 'Vazirmatn', sans-serif;">
            <i class="fa-solid fa-house"></i> صفحه اصلی
        </a>
        <a href="javascript:history.back()" style="display: inline-flex; align-items: center; gap: 10px; background: white; color: var(--primary); padding: 12px 28px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 16px; border: 2px solid var(--primary); transition: all 0.3s ease; font-family: 'Vazirmatn', sans-serif;">
            <i class="fa-solid fa-arrow-right"></i> برگشت
        </a>
    </div>

    <!-- ---------- فرم جستجو ---------- -->
    <div style="background: var(--light); border-radius: 24px; padding: 25px; margin-top: 10px;">
        <h3 style="font-size: 18px; color: var(--dark); margin-bottom: 18px; font-weight: 700; font-family: 'Vazirmatn', sans-serif;">
            <i class="fa-solid fa-magnifying-glass" style="color: var(--primary); margin-left: 8px;"></i>
            جستجو در سایت
        </h3>
        <form action="<?php $this->options->siteUrl(); ?>" method="get" style="display: flex; gap: 12px; max-width: 550px; margin: 0 auto; flex-wrap: wrap; justify-content: center;">
            <input type="text" name="s" placeholder="کلمه مورد نظر را وارد کنید..." style="flex: 1; min-width: 220px; padding: 12px 20px; border: 1px solid var(--border); border-radius: 50px; font-family: 'Vazirmatn', sans-serif; font-size: 15px; outline: none; transition: all 0.3s;">
            <button type="submit" style="display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: white; padding: 12px 28px; border: none; border-radius: 50px; font-weight: 700; font-size: 15px; cursor: pointer; transition: all 0.3s ease; font-family: 'Vazirmatn', sans-serif;">
                <i class="fa-solid fa-magnifying-glass"></i> جستجو
            </button>
        </form>
    </div>

    <!-- ---------- لینک‌های سریع ---------- -->
    <div style="margin-top: 40px; padding-top: 25px; border-top: 2px dashed var(--border);">
        <div style="display: flex; gap: 25px; justify-content: center; flex-wrap: wrap;">
            
            <?php
            // ---------- استخراج صفحات منو برای نمایش لینک‌های سریع ----------
            $selectedPages = $this->options->navPages;
            $quickLinks = [];
            
            if (!empty($selectedPages) && is_array($selectedPages)):
                $this->widget('Widget_Contents_Page_List')->to($pages);
                while($pages->next()):
                    if (in_array($pages->permalink, $selectedPages) && count($quickLinks) < 3):
                        $quickLinks[] = $pages;
                    endif;
                endwhile;
            endif;
            
            // ---------- نمایش لینک‌های سریع ----------
            if (!empty($quickLinks)):
                foreach ($quickLinks as $page):
            ?>
                <a href="<?php $page->permalink(); ?>" style="color: var(--gray); text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; font-family: 'Vazirmatn', sans-serif;">
                    <i class="fa-regular fa-file-lines"></i> <?php $page->title(); ?>
                </a>
            <?php 
                endforeach;
            else:
                // ---------- لینک‌های پیش‌فرض در صورت عدم انتخاب صفحه ----------
            ?>
                <a href="<?php $this->options->siteUrl(); ?>" style="color: var(--gray); text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; font-family: 'Vazirmatn', sans-serif;">
                    <i class="fa-regular fa-file-lines"></i> خانه
                </a>
                <a href="<?php $this->options->siteUrl(); ?>sitemap.xml" style="color: var(--gray); text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; font-family: 'Vazirmatn', sans-serif;">
                    <i class="fa-regular fa-sitemap"></i> نقشه سایت
                </a>
            <?php endif; ?>
            
            <!-- ---------- لینک به صفحه لینک‌ها ---------- -->
            <a href="<?php $this->options->siteUrl(); ?>links" style="color: var(--gray); text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; font-family: 'Vazirmatn', sans-serif;">
                <i class="fa-solid fa-link"></i> لینک‌ها
            </a>
        </div>
    </div>

    <!-- ---------- متن پایانی ---------- -->
    <p style="margin-top: 35px; color: #adb5bd; font-size: 14px; font-family: 'Vazirmatn', sans-serif;">
        <i class="fa-regular fa-face-frown"></i> نگران نباش، من هم گاهی گم می‌شوم.
    </p>

</div>

</body>
</html>