<?php
/*--------------------------------------------------------------
 Search Form
--------------------------------------------------------------*/
?>

<form role="search" method="get" class="custom-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <button type="button" class="search-overlay-close" aria-label="إغلاق البحث">
        <i class="fas fa-times"></i>
    </button>

    <div class="search-wrapper">
        <h2 class="search-overlay-title"><?php esc_html_e( 'ما الذي تبحث عنه؟', 'saint' ); ?></h2>

        <div class="search-input-container">
            <input
                type="search"
                class="search-input"
                placeholder="<?php echo esc_attr_x( 'اكتب كلمة البحث هنا...', 'placeholder', 'saint' ); ?>"
                value="<?php echo esc_attr( get_search_query() ); ?>"
                name="s"
                title="<?php echo esc_attr_x( 'بحث', 'label', 'saint' ); ?>"
                required
                autocomplete="off"
            />
            <button type="submit" class="search-submit-btn" aria-label="بحث">
                <i class="fas fa-search"></i>
                <span>بحث</span>
            </button>
            <button type="button" class="search-clear-btn" aria-label="مسح">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="search-suggestions"></div>

        <?php
$popular_searches = function_exists( 'saint_get_popular_searches' )
    ? saint_get_popular_searches( 3 )
    : array();
?>

<?php if ( ! empty( $popular_searches ) ) : ?>
    <div class="popular-searches">
        <span class="popular-label"><?php _e( 'البحث الشائع:', 'saint' ); ?></span>
        <?php foreach ( $popular_searches as $item ) : ?>
            <a href="<?php echo esc_url( home_url( '/?s=' . urlencode( $item['term'] ) ) ); ?>" class="popular-tag">
                <?php echo esc_html( $item['term'] ); ?>
            </a>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

    </div>
</form>
