<?php

/**
 * The template for displaying 404 pages (not found)
 *
 * @package Theme_An_Phat
 */

get_header(); ?>

<main id="primary" class="site-main">
    <section class="error-404-section bg-light py-6">
        <div class="container text-center">

            <!-- Animated SVG Illustration -->
            <div class="mb-4" style="max-width:220px;margin:0 auto;">
                <svg viewBox="0 0 220 160" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:auto;">
                    <circle cx="110" cy="80" r="70" fill="rgba(127,206,35,0.07)" />
                    <circle cx="110" cy="80" r="50" fill="rgba(127,206,35,0.10)" />
                    <text x="50%" y="54%" text-anchor="middle" dominant-baseline="middle"
                        font-family="'Plus Jakarta Sans',sans-serif" font-weight="800"
                        font-size="60" fill="rgba(127,206,35,0.15)">?</text>
                    <!-- Capsule shapes -->
                    <ellipse cx="55" cy="40" rx="14" ry="7" fill="#FFB800" opacity="0.6" transform="rotate(-30 55 40)" />
                    <ellipse cx="165" cy="120" rx="14" ry="7" fill="#1A3636" opacity="0.4" transform="rotate(20 165 120)" />
                    <ellipse cx="160" cy="45" rx="10" ry="5" fill="#FFB800" opacity="0.4" transform="rotate(15 160 45)" />
                </svg>
            </div>

            <div class="error-404-code mb-3">404</div>

            <h1 class="font-heading fw-bold text-primary fs-3 mb-3"><?php esc_html_e('Trang không tìm thấy', 'theme-anphat'); ?></h1>
            <p class="text-muted mb-5 max-w-2xl mx-auto lh-lg">
                <?php esc_html_e('Trang bạn đang tìm kiếm có thể đã bị xóa, đổi tên hoặc tạm thời không hoạt động. Hãy thử tìm kiếm bên dưới hoặc quay về trang chủ.', 'theme-anphat'); ?>
            </p>

            <!-- Search Box -->
            <div class="max-w-2xl mx-auto mb-5">
                <?php get_search_form(); ?>
            </div>

            <!-- Quick Navigation Links -->
            <div class="d-flex flex-wrap gap-3 justify-content-center mb-5">
                <a href="<?php echo esc_url(home_url('/')); ?>" class="btn btn-primary btn-lg fw-bold shadow">
                    <i class="fa-solid fa-house me-2"></i><?php esc_html_e('Về trang chủ', 'theme-anphat'); ?>
                </a>
                <a href="<?php echo esc_url(home_url('/san-pham/')); ?>" class="btn btn-outline-primary btn-lg fw-bold">
                    <i class="fa-solid fa-boxes-stacked me-2"></i><?php esc_html_e('Xem sản phẩm', 'theme-anphat'); ?>
                </a>
                <a href="<?php echo esc_url(home_url('/lien-he/')); ?>" class="btn btn-outline-primary btn-lg fw-bold">
                    <i class="fa-solid fa-phone me-2"></i><?php esc_html_e('Liên hệ', 'theme-anphat'); ?>
                </a>
            </div>

            <!-- Popular Pages Grid -->
            <div class="row g-3 max-w-3xl mx-auto">
                <?php
                $quick_pages = array(
                    array('icon' => 'fa-solid fa-building', 'label' => __('Giới thiệu', 'theme-anphat'),    'url' => home_url('/gioi-thieu/')),
                    array('icon' => 'fa-solid fa-handshake', 'label' => __('Đối tác', 'theme-anphat'),       'url' => home_url('/doi-tac/')),
                    array('icon' => 'fa-solid fa-newspaper', 'label' => __('Tin tức', 'theme-anphat'),      'url' => home_url('/tin-tuc/')),
                    array('icon' => 'fa-solid fa-user-plus', 'label' => __('Tuyển dụng', 'theme-anphat'),  'url' => home_url('/tuyen-dung/')),
                );
                foreach ($quick_pages as $qp) :
                ?>
                    <div class="col-6 col-md-3">
                        <a href="<?php echo esc_url($qp['url']); ?>"
                            class="d-flex flex-column align-items-center gap-2 bg-white rounded-4 p-3 text-decoration-none border hover-shadow text-center">
                            <span class="d-flex align-items-center justify-content-center rounded-circle bg-primary-light text-primary"
                                style="width:52px;height:52px;font-size:1.25rem;">
                                <i class="<?php echo esc_attr($qp['icon']); ?>"></i>
                            </span>
                            <span class="font-heading fw-semibold text-dark text-sm"><?php echo esc_html($qp['label']); ?></span>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
</main>

<?php get_footer(); ?>