<?php
/**
 * Orologio-inspired Parker storefront front page.
 *
 * Keeps the existing WordPress/WooCommerce database intact while rebuilding the
 * homepage as a premium Parker writing-instrument experience.
 */

get_header();

$upload_base = oc_upload_base();
$asset_base  = oc_asset_base();
$shop_url    = oc_shop_url();
$contact_url = oc_local_url( home_url( '/lien-he/' ) );
$home        = oc_home_settings();

$product_query = new WP_Query(
    array(
        'post_type'           => 'product',
        'post_status'         => 'publish',
        'posts_per_page'      => 8,
        'ignore_sticky_posts' => true,
        'tax_query'           => array(
            array(
                'taxonomy' => 'product_cat',
                'field'    => 'slug',
                'terms'    => array( 'phu-kien-parker' ),
                'operator' => 'NOT IN',
            ),
        ),
    )
);

$category_terms = get_terms(
    array(
        'taxonomy'   => 'product_cat',
        'hide_empty' => true,
        'number'     => 4,
    )
);

$collections = array(
    array(
        'title' => $home['collection_1_title'],
        'copy'  => $home['collection_1_copy'],
        'image' => $home['collection_1_image'],
    ),
    array(
        'title' => $home['collection_2_title'],
        'copy'  => $home['collection_2_copy'],
        'image' => $home['collection_2_image'],
    ),
    array(
        'title' => $home['collection_3_title'],
        'copy'  => $home['collection_3_copy'],
        'image' => $home['collection_3_image'],
    ),
);

$visible_product_terms = array();

if ( ! empty( $product_query->posts ) ) {
    foreach ( $product_query->posts as $product_post ) {
        $terms = wp_get_post_terms( $product_post->ID, 'product_cat' );

        if ( is_wp_error( $terms ) ) {
            continue;
        }

        foreach ( $terms as $term ) {
            if ( ! isset( $visible_product_terms[ $term->slug ] ) ) {
                $visible_product_terms[ $term->slug ] = $term->name;
            }
        }
    }
}

$product_tabs = array(
    array(
        'label' => 'Tất cả',
        'slug'  => 'all',
    ),
);

foreach ( array_slice( $visible_product_terms, 0, 4, true ) as $slug => $label ) {
    $product_tabs[] = array(
        'label' => $label,
        'slug'  => $slug,
    );
}
?>

<?php oc_clone_header(); ?>
<main id="primary" class="site-main orologio-clone oc-home">

    <section class="oc-hero oc-hero-v2" aria-labelledby="oc-home-hero-title" style="--oc-hero-image: url('<?php echo esc_url( $home['hero_image'] ); ?>');">
        <div class="oc-hero-v2-media" aria-hidden="true"></div>
        <div class="oc-hero-v2-heading">
            <p class="oc-kicker"><?php echo esc_html( $home['hero_kicker'] ); ?></p>
            <h1 id="oc-home-hero-title">
                <span><?php echo esc_html( $home['hero_line_1'] ); ?></span>
                <span><em><?php echo esc_html( $home['hero_em'] ); ?></em> <?php echo esc_html( $home['hero_line_2'] ); ?></span>
            </h1>
        </div>
        <div class="oc-hero-v2-bottom">
            <p><?php echo esc_html( $home['hero_copy'] ); ?></p>
            <a class="oc-button" href="<?php echo esc_url( $shop_url ); ?>"><?php echo esc_html( $home['hero_button'] ); ?></a>
        </div>
    </section>

    <section class="oc-collections-shell oc-section oc-reveal" aria-labelledby="oc-home-collections-title">
        <div class="oc-collection-stage">
            <header class="oc-collections-heading">
                <p class="oc-kicker"><?php echo esc_html( $home['intro_kicker'] ); ?></p>
                <h2 id="oc-home-collections-title"><?php echo esc_html( $home['intro_title'] ); ?></h2>
            </header>

            <div class="oc-collection-viewport" role="region" aria-roledescription="carousel" aria-labelledby="oc-home-collections-title">
                <div class="oc-collection-track" aria-live="polite">
                    <?php foreach ( $collections as $index => $collection ) : ?>
                        <?php
                        $term = ( ! empty( $category_terms ) && ! is_wp_error( $category_terms ) && isset( $category_terms[ $index ] ) ) ? $category_terms[ $index ] : null;
                        $link = $term ? oc_local_url( get_term_link( $term ) ) : $shop_url;
                        ?>
                        <article class="oc-collection-card" aria-label="<?php echo esc_attr( sprintf( 'Bộ sưu tập %1$d trên %2$d: %3$s', $index + 1, count( $collections ), $collection['title'] ) ); ?>" aria-hidden="<?php echo 0 === $index ? 'false' : 'true'; ?>" <?php echo 0 === $index ? '' : 'inert'; ?>>
                            <a href="<?php echo esc_url( $link ); ?>">
                                <img src="<?php echo esc_url( $collection['image'] ); ?>" alt="<?php echo esc_attr( $collection['title'] ); ?>">
                                <div class="oc-collection-copy">
                                    <p class="oc-kicker">Collection</p>
                                    <h3><?php echo esc_html( $collection['title'] ); ?></h3>
                                    <p><?php echo esc_html( $collection['copy'] ); ?></p>
                                    <span><?php echo esc_html( $home['collection_button'] ); ?></span>
                                </div>
                                <div class="oc-collection-blank" aria-hidden="true"></div>
                            </a>
                        </article>
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="oc-collection-controls" role="group" aria-label="Điều khiển bộ sưu tập Parker">
                <button class="oc-collection-arrow" type="button" data-oc-collection-prev aria-label="Bộ sưu tập trước">←</button>
                <div class="oc-collection-tabs">
                    <?php foreach ( $collections as $index => $collection ) : ?>
                        <?php $collection_label = function_exists( 'mb_strtoupper' ) ? mb_strtoupper( $collection['title'], 'UTF-8' ) : strtoupper( $collection['title'] ); ?>
                        <button type="button" class="<?php echo 0 === $index ? 'is-active' : ''; ?>" data-oc-collection-tab="<?php echo esc_attr( $index ); ?>" aria-pressed="<?php echo 0 === $index ? 'true' : 'false'; ?>" aria-label="<?php echo esc_attr( 'Xem bộ sưu tập ' . $collection['title'] ); ?>"><?php echo esc_html( $collection_label ); ?></button>
                    <?php endforeach; ?>
                </div>
                <button class="oc-collection-arrow" type="button" data-oc-collection-next aria-label="Bộ sưu tập tiếp theo">→</button>
            </div>
        </div>
    </section>

    <section class="oc-section oc-products oc-reveal" aria-labelledby="oc-home-products-title">
        <div class="oc-section-heading">
            <p class="oc-kicker"><?php echo esc_html( $home['products_kicker'] ); ?></p>
            <h2 id="oc-home-products-title"><?php echo esc_html( $home['products_title'] ); ?></h2>
            <a class="oc-text-link" href="<?php echo esc_url( $shop_url ); ?>"><?php echo esc_html( $home['products_link'] ); ?></a>
        </div>

        <nav class="oc-model-tabs" aria-label="Lọc sản phẩm Parker" aria-controls="oc-home-product-grid">
            <?php foreach ( $product_tabs as $index => $tab ) : ?>
                <button type="button" class="<?php echo 0 === $index ? 'is-active' : ''; ?>" data-oc-model-tab="<?php echo esc_attr( $tab['slug'] ); ?>" aria-pressed="<?php echo 0 === $index ? 'true' : 'false'; ?>"><?php echo esc_html( $tab['label'] ); ?></button>
            <?php endforeach; ?>
        </nav>

        <div class="oc-product-grid" id="oc-home-product-grid">
            <?php
            if ( $product_query->have_posts() ) :
                while ( $product_query->have_posts() ) :
                    $product_query->the_post();
                    $product      = function_exists( 'wc_get_product' ) ? wc_get_product( get_the_ID() ) : null;
                    $product_link = oc_local_url( get_permalink() );
                    $product_cats = wp_get_post_terms( get_the_ID(), 'product_cat', array( 'fields' => 'slugs' ) );
                    $product_cats = ! is_wp_error( $product_cats ) ? implode( ' ', $product_cats ) : '';
                    $display_title = preg_replace( '/\s*\([^)]*\)\s*/', '', get_the_title() );
                    $display_title = preg_replace( '/\s+TB\d?-\S+/i', '', $display_title );
                    $display_title = preg_replace( '/^Bút\s+(?:Bi|Máy|Dạ Bi)\s+Cao Cấp\s+/iu', '', $display_title );
                    $display_title = preg_replace( '/^Bút Bi URB PRM Đ-/iu', 'Parker Urban Premium ', $display_title );
                    $display_title = str_ireplace( 'X-STAIN Steel', 'X-Stainless Steel', $display_title );
                    $display_title = wp_trim_words( $display_title, 9, '' );
                    ?>
                    <article class="oc-product-card" data-oc-model-card data-cats="<?php echo esc_attr( $product_cats ); ?>" aria-labelledby="oc-home-product-<?php the_ID(); ?>">
                        <a class="oc-product-image" href="<?php echo esc_url( $product_link ); ?>" aria-label="<?php echo esc_attr( 'Xem chi tiết ' . $display_title ); ?>">
                            <?php
                            if ( has_post_thumbnail() ) {
                                the_post_thumbnail( 'large', array( 'alt' => $display_title ) );
                            }
                            ?>
                        </a>
                        <div class="oc-product-body">
                            <p class="oc-product-eyebrow">Parker chính hãng</p>
                            <h3 id="oc-home-product-<?php the_ID(); ?>"><a href="<?php echo esc_url( $product_link ); ?>"><?php echo esc_html( $display_title ); ?></a></h3>
                            <p class="oc-product-benefit">Sẵn sàng khắc tên, đóng hộp quà và tư vấn chọn màu theo phong cách người nhận.</p>
                            <?php if ( $product ) : ?>
                                <div class="oc-price"><?php echo wp_kses_post( $product->get_price_html() ); ?></div>
                                <div class="oc-product-card-actions">
                                    <a class="oc-cart-link" href="<?php echo esc_url( oc_local_url( $product->add_to_cart_url() ) ); ?>">Mua ngay</a>
                                    <a class="oc-detail-link" href="<?php echo esc_url( $product_link ); ?>">Chi tiết</a>
                                </div>
                            <?php endif; ?>
                        </div>
                    </article>
                    <?php
                endwhile;
                wp_reset_postdata();
            endif;
            ?>
        </div>
    </section>

    <section class="oc-editorial oc-section oc-reveal" aria-labelledby="oc-home-editorial-title">
        <div class="oc-editorial-copy">
            <p class="oc-kicker"><?php echo esc_html( $home['editorial_kicker'] ); ?></p>
            <h2 id="oc-home-editorial-title">CRAFTED <em>for</em> THOSE <em>who</em> VALUE <em>every</em> MOMENT</h2>
            <p><?php echo esc_html( $home['editorial_copy'] ); ?></p>
        </div>
        <div class="oc-editorial-media" aria-hidden="true">
            <img src="<?php echo esc_url( $home['editorial_image_1'] ); ?>" alt="">
            <img src="<?php echo esc_url( $home['editorial_image_2'] ); ?>" alt="">
        </div>
    </section>

    <div class="oc-marquee oc-ticker-section" aria-hidden="true">
        <div class="ticker-frame">
            <div class="ticker-scale">
            <?php
            $marquee_items = array_filter( array_map( 'trim', explode( '|', $home['marquee_text'] ) ) );
            $marquee_items = $marquee_items ? $marquee_items : array( 'est. 1888', 'Parker signature', 'nghe thuat ky ten' );
            $marquee_items = array_map(
                static function ( $item ) {
                    return strtr(
                        $item,
                        array(
                            'Parker chính hãng' => 'Parker signature',
                            'nghệ thuật viết'   => 'nghe thuat ky ten',
                        )
                    );
                },
                $marquee_items
            );

            for ( $loop = 0; $loop < 3; $loop++ ) :
                ?>
                <div class="ticker-text ticker--animated">
                    <?php foreach ( $marquee_items as $marquee_item ) : ?>
                        <div class="ticker-item"><span><?php echo esc_html( $marquee_item ); ?></span></div>
                    <?php endforeach; ?>
                </div>
            <?php endfor; ?>
            </div>
        </div>
    </div>
    <div class="oc-marquee-fallback" hidden>
        <?php foreach ( $marquee_items as $marquee_item ) : ?>
            <span><?php echo esc_html( $marquee_item ); ?></span>
        <?php endforeach; ?>
    </div>

    <section class="oc-brand oc-section oc-reveal" aria-labelledby="oc-home-brand-title">
        <div class="oc-brand-copy">
            <h2 id="oc-home-brand-title"><?php echo esc_html( $home['brand_title'] ); ?></h2>
            <p><?php echo esc_html( $home['brand_copy'] ); ?></p>
            <a class="oc-text-link" href="<?php echo esc_url( $contact_url ); ?>"><?php echo esc_html( $home['brand_link'] ); ?></a>
        </div>
        <img class="oc-brand-image" src="<?php echo esc_url( $home['brand_image'] ); ?>" alt="Parker signature writing experience">
    </section>

    <section class="oc-latest oc-section oc-reveal" aria-labelledby="oc-home-latest-title">
        <div class="oc-latest-copy">
            <p class="oc-kicker"><?php echo esc_html( $home['latest_kicker'] ); ?></p>
            <h2 id="oc-home-latest-title"><?php echo esc_html( $home['latest_title'] ); ?></h2>
            <h3><?php echo esc_html( $home['latest_subtitle'] ); ?></h3>
            <a class="oc-button" href="<?php echo esc_url( $shop_url ); ?>"><?php echo esc_html( $home['latest_button'] ); ?></a>
        </div>
        <div class="oc-latest-images">
            <img class="oc-latest-float" data-oc-float src="<?php echo esc_url( $home['latest_image_2'] ); ?>" alt="Parker brushed metal detail">
        </div>
    </section>

    <aside class="oc-social oc-section oc-reveal" aria-label="Kết nối cùng Parker">
        <div>
            <p><?php echo esc_html( $home['social_copy'] ); ?></p>
            <div class="oc-social-links">
                <a href="<?php echo esc_url( $contact_url ); ?>">Khac ten</a>
                <a href="<?php echo esc_url( $shop_url ); ?>">Qua tang</a>
            </div>
        </div>
        <img src="<?php echo esc_url( $home['social_image'] ); ?>" alt="Parker gift collection">
    </aside>
    <?php
    $oc_home_seo_content = trim( (string) oc_home_field( 'seo_content' ) );
    ?>
    <?php if ( trim( wp_strip_all_tags( $oc_home_seo_content ) ) ) : ?>
        <section class="oc-home-seo oc-category-bottom is-collapsible oc-reveal" aria-labelledby="oc-home-seo-title" data-oc-expandable data-oc-collapse-height="430">
            <div class="oc-home-seo-inner">
                <header class="oc-category-bottom-heading">
                    <div class="oc-home-seo-meta">
                        <p class="oc-category-kicker">KIẾN THỨC PARKER</p>
                        <span>Chọn bút / Khắc tên / Quà tặng</span>
                    </div>
                    <div class="oc-home-seo-title-group">
                        <h2 id="oc-home-seo-title">Bút Parker <em>khắc tên</em><br>chính hãng</h2>
                        <p>Những hướng dẫn chọn bút, cá nhân hóa và chuẩn bị quà tặng được biên soạn cho trải nghiệm Parker chỉn chu hơn.</p>
                    </div>
                </header>
                <div class="oc-category-bottom-content" id="oc-home-seo-content" data-oc-expandable-content>
                    <?php echo wp_kses_post( apply_filters( 'the_content', $oc_home_seo_content ) ); ?>
                </div>
                <div class="oc-home-seo-action">
                    <button class="oc-category-bottom-toggle" type="button" data-oc-expandable-toggle aria-controls="oc-home-seo-content" aria-expanded="false">
                        <span data-open-label>Xem toàn bộ kiến thức</span>
                        <span data-close-label>Thu gọn nội dung</span>
                        <span class="oc-home-seo-toggle-mark" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </section>
    <?php endif; ?>
</main>

<?php oc_clone_footer_cta(); ?>

<?php
get_footer();