<?php include 'header.php'; ?>

<div class="container overflow-hidden">
    <div class="row min-vh-100 align-items-center justify-content-center">
        <div class="col-md-10 col-lg-8 text-center position-relative">
            <!-- Large Decorative background 404 -->
            <div class="position-absolute top-50 start-50 translate-middle z-0 opacity-5 d-none d-md-block" style="font-size: 20rem; font-weight: 900; letter-spacing: -0.5rem; pointer-events: none; user-select: none;">
                404
            </div>
            
            <div class="position-relative z-1 py-5">
                <div class="mb-5 floating-animation">
                    <!-- Custom SVG Illustration instead of icons for better reliability -->
                    <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" class="mx-auto shadow-sm p-4 rounded-circle bg-white border border-light">
                        <path d="M100 0C44.7715 0 0 44.7715 0 100C0 155.228 44.7715 200 100 200C155.228 200 200 155.228 200 100C200 44.7715 155.228 0 100 0ZM100 185C53.0558 185 15 146.944 15 100C15 53.0558 53.0558 15 100 15C146.944 15 185 53.0558 185 100C185 146.944 146.944 185 100 185Z" fill="#00C853" fill-opacity="0.1"/>
                        <circle cx="100" cy="100" r="70" fill="#00C853" fill-opacity="0.05"/>
                        <path d="M100 60V110" stroke="#00C853" stroke-width="12" stroke-linecap="round"/>
                        <circle cx="100" cy="135" r="8" fill="#00C853"/>
                        <path d="M60 85L50 95M140 85L150 95" stroke="#00C853" stroke-width="8" stroke-linecap="round"/>
                    </svg>
                </div>
                
                <h1 class="display-3 fw-bold mb-3 text-dark"><?php echo __('404_title'); ?></h1>
                <p class="text-muted fs-5 mb-5 max-width-600 mx-auto px-3">
                    <?php echo __('404_text'); ?>
                </p>
                
                <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center align-items-center mb-5 px-3">
                    <a href="/" class="btn btn-success btn-lg rounded-pill px-5 py-3 shadow-sm hover-lift d-flex align-items-center w-100 w-sm-auto">
                        <i class="bi bi-house-door-fill me-2"></i>
                        <span class="fw-bold"><?php echo __('back_to_home'); ?></span>
                    </a>
                    <button onclick="window.history.back()" class="btn btn-outline-dark btn-lg rounded-pill px-5 py-3 hover-lift d-flex align-items-center w-100 w-sm-auto">
                        <i class="bi bi-arrow-left me-2"></i>
                        <span class="fw-bold"><?php echo __('Kembali', 'Kembali'); ?></span>
                    </button>
                </div>
                
                <div class="mt-5 p-4 bg-white rounded-5 shadow-sm border border-light-subtle max-width-500 mx-auto mx-3">
                    <p class="text-muted small fw-medium mb-3"><?php echo __('search_placeholder'); ?></p>
                    <form action="/" method="GET">
                        <div class="input-group bg-light rounded-pill p-1 border">
                            <span class="input-group-text bg-transparent border-0 ps-3">
                                <i class="bi bi-search text-muted small"></i>
                            </span>
                            <input type="text" name="search" class="form-control bg-transparent border-0 py-2 fs-6" placeholder="<?php echo __('search', 'Search...'); ?>">
                            <button class="btn btn-success rounded-pill px-4 fw-bold" type="submit"><?php echo __('search'); ?></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.max-width-600 {
    max-width: 600px;
}
.max-width-500 {
    max-width: 500px;
}
.bg-light {
    background-color: #f8f9fa !important;
}
.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}
@media (max-width: 768px) {
    .display-3 {
        font-size: 2.5rem;
    }
}
</style>

<?php include 'footer.php'; ?>