<?php
require_once __DIR__ . '/includes/header.php';
require_once __DIR__ . '/classes/Product.php';
require_once __DIR__ . '/classes/HomeContent.php';

$products    = new Products();
$homeContent = new HomeContent();

$bestSellersByCategory = $products->getBestSellersByCategory(6, 4);
$hero             = $homeContent->getHero();
$collections      = $homeContent->getCollections();
$featuredProducts = $homeContent->getFeaturedProducts();
?>

<body>
    <?php require_once __DIR__ . '/includes/preload.php'; ?>
    
    <main id="wrapper">
        <?php require_once __DIR__ . '/includes/topbar.php'; ?>
        <?php require_once __DIR__ . '/includes/menu.php'; ?>
        <?php require_once __DIR__ . '/includes/categories.php'; ?>

        <!-- Banner Hero -->
        <?php if ($hero): ?>
        <?php $heroLink = $hero['link'] ? SITE_URL . htmlspecialchars($hero['link'], ENT_QUOTES) : SITE_URL . 'products'; ?>
        <section class="section-collection banner-cls">
            <div class="col-12">
                <div class="banner-image-text type-abs style-14 h-100">
                    <a href="<?= $heroLink ?>" class="bn-image img-style">
                        <img loading="lazy" width="1290" height="860"
                            src="<?= ASSETS_URL . htmlspecialchars($hero['image'], ENT_QUOTES) ?>" alt="Image">
                    </a>
                    <div class="bn-content wow fadeInUp">
                        <a href="<?= $heroLink ?>" class="title h1 fw-medium text-white link">
                            <?= htmlspecialchars($hero['title'], ENT_QUOTES) ?>
                        </a>
                        <h6 class="desc text-body-1 text-white letter-space--1">
                            <?= htmlspecialchars($hero['desc'], ENT_QUOTES) ?>
                        </h6>
                        <a href="<?= $heroLink ?>" class="btn-action tf-btn btn-white hv-primary">
                            <?= htmlspecialchars($hero['cta'], ENT_QUOTES) ?>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <?php endif; ?>
        <!-- /Banner Hero -->

        <!-- Collection -->
        <?php if (!empty($collections)): ?>
        <div class="flat-spacing">
            <div class="container">
                <div class="tf-grid-layout sm-col-2">
                    <?php foreach ($collections as $col):
                        $colLink = $col['link'] ? SITE_URL . htmlspecialchars($col['link'], ENT_QUOTES) : 'javascript:void(0)';
                    ?>
                    <div class="box-image_v04">
                        <a href="<?= $colLink ?>" class="box-image_img img-style">
                            <img loading="lazy" width="690" height="388"
                                src="<?= ASSETS_URL . htmlspecialchars($col['image'], ENT_QUOTES) ?>"
                                alt="Image">
                        </a>
                        <div class="box-image_content wow fadeInUp">
                            <a href="<?= $colLink ?>" class="title h3 fw-medium link text-primary">
                                <?= htmlspecialchars($col['title'], ENT_QUOTES) ?>
                            </a>
                            <p class="desc text-body-1 cl-text-line">
                                <?= htmlspecialchars($col['desc'], ENT_QUOTES) ?>
                            </p>
                            <?php if ($col['link']): ?>
                            <a href="<?= $colLink ?>" class="btn-action tf-btn-line-2 style-white">
                                <span class="fw-semibold">
                                    <?= __('btn.shop') ?>
                                </span>
                            </a>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        <?php endif; ?>
        <!-- /Collection -->

        <!-- Best Seller -->
        <?php if (!empty($bestSellersByCategory)): ?>
        <section class="flat-spacing pt-0 flat-animate-tab">
            <div class="container">
                <div class="sect-heading d-block d-md-flex type-2 has-col-right wow fadeInUp">
                    <div>
                        <h3 class="s-title">
                            <?= __('home.bestsellers') ?>
                        </h3>
                        <div class="overflow-auto">
                            <ul class="tab-btn-wrap-v3" role="tablist">
                                <?php foreach ($bestSellersByCategory as $idx => $catData): ?>
                                <?php if ($idx > 0): ?><li class="spread">/</li><?php endif; ?>
                                <li class="nav-tab-item" role="presentation">
                                    <a href="#bs-cat-<?= (int)$catData['id'] ?>" data-bs-toggle="tab"
                                        class="tf-btn-tab<?= $idx === 0 ? ' active' : '' ?>" role="tab">
                                        <span class="fw-medium"><?= htmlspecialchars($catData['category'], ENT_QUOTES) ?></span>
                                    </a>
                                </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    </div>
                    <div class="col-right">
                        <a href="<?= SITE_URL ?>products" class="tf-btn-line-2 py-4 style-primary">
                            <span class="fw-semibold">
                                <?= __('btn.view_all') ?>
                            </span>
                        </a>
                    </div>
                </div>
                <div class="tab-content">
                    <?php foreach ($bestSellersByCategory as $idx => $catData): ?>
                    <div class="tab-pane<?= $idx === 0 ? ' active show' : '' ?>" id="bs-cat-<?= (int)$catData['id'] ?>" role="tabpanel">
                        <div dir="ltr" class="swiper tf-swiper wrap-sw-over" data-preview="4" data-tablet="3"
                            data-mobile-sm="2" data-mobile="2" data-space-lg="30" data-space-md="15" data-space="10"
                            data-pagination="2" data-pagination-sm="2" data-pagination-md="3" data-pagination-lg="4">
                            <div class="swiper-wrapper">
                                <?php foreach ($catData['products'] as $bsIdx => $p):
                                    $image = $p['photo'] ? PHOTOS . $p['photo'] : NO_PHOTO;
                                    $wowDelay = $bsIdx > 0 ? ' data-wow-delay="0.' . $bsIdx . 's"' : '';
                                ?>
                                <div class="swiper-slide">
                                    <div class="card-product wow fadeInUp"<?= $wowDelay ?>>
                                        <div class="card-product_wrapper square">
                                            <a href="<?= SITE_URL . 'viewproduct/' . $p['slug'] ?>" class="product-img">
                                                <img class="img-product" loading="lazy" width="330" height="330"
                                                    src="<?= htmlspecialchars($image, ENT_QUOTES) ?>"
                                                    alt="<?= htmlspecialchars($p['name'], ENT_QUOTES) ?>">
                                            </a>
                                            <ul class="product-action_list">
                                                <li class="wishlist">
                                                    <a href="#wishlist" class="hover-tooltip tooltip-left box-icon wishlist-toggle"
                                                        data-product-id="<?= (int)$p['id'] ?>">
                                                        <span class="icon icon-heart"></span>
                                                        <span class="tooltip"><?= __('btn.add_wishlist') ?></span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#quickView" data-bs-toggle="offcanvas"
                                                        class="hover-tooltip tooltip-left box-icon quick-view-trigger"
                                                        data-product-id="<?= (int)$p['id'] ?>">
                                                        <span class="icon icon-Eye"></span>
                                                        <span class="tooltip"><?= __('btn.quick_view') ?></span>
                                                    </a>
                                                </li>
                                            </ul>
                                            <?php if ($p['has_discount']): ?>
                                            <ul class="product-badge_list">
                                                <li class="product-badge_item text-caption-01 sale">
                                                    <?php
                                                    if ($p['discount_type'] === 'Percentage') {
                                                        echo '-' . number_format($p['discount_value'], 0) . '%';
                                                    } else {
                                                        echo '-' . number_format($p['discount_value'], 2) . ' €';
                                                    }
                                                    ?>
                                                </li>
                                            </ul>
                                            <?php endif; ?>
                                            <div class="product-action_bot">
                                                <a href="#quickAdd" data-bs-toggle="modal"
                                                    class="tf-btn btn-white small w-100"
                                                    data-product-id="<?= (int)$p['id'] ?>"
                                                    data-product-name="<?= htmlspecialchars($p['name'], ENT_QUOTES) ?>"
                                                    data-product-slug="<?= htmlspecialchars($p['slug'], ENT_QUOTES) ?>"
                                                    data-product-image="<?= htmlspecialchars($image, ENT_QUOTES) ?>"
                                                    data-product-price="<?= number_format($p['final_price'], 2) ?>"
                                                    data-product-original-price="<?= number_format($p['original_price'], 2) ?>"
                                                    data-has-discount="<?= (int)$p['has_discount'] ?>"
                                                    data-product-stock="<?= (int)$p['stock'] ?>">
                                                    <?= __('btn.quick_add') ?>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="card-product_info">
                                            <a href="<?= SITE_URL . 'viewproduct/' . $p['slug'] ?>"
                                                class="name-product lh-24 fw-medium link-underline-text">
                                                <?= htmlspecialchars($p['name'], ENT_QUOTES) ?>
                                            </a>
                                            <div class="price-wrap">
                                                <span class="price-new text-primary fw-semibold"><?= number_format($p['final_price'], 2) ?> €</span>
                                                <?php if ($p['has_discount']): ?>
                                                <span class="price-old text-caption-01 cl-text-3"><?= number_format($p['original_price'], 2) ?> €</span>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <?php endforeach; ?>
                            </div>
                            <div class="sw-dot-default tf-sw-pagination"></div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>
        <?php endif; ?>
        <!-- /Best Seller -->
        
        <!-- Product Thumbs -->
        <?php if (!empty($featuredProducts)): ?>
        <section>
            <div class="container">
                <div class="banner-thumbs-product slider-thumb-wrap">
                    <div class="col-left text-center flat-spacing">
                        <div class="sect-heading type-2 wow fadeInUp">
                            <h3 class="s-title">
                                <b><?= __('home.new_items') ?></b> <br class="d-none d-xl-block">
                                <?= __('home.just_arrived') ?>
                            </h3>
                            <p class="s-desc text-body-1 cl-text-2">
                                <?= __('home.new_arrivals_desc') ?>
                            </p>
                        </div>
                        <div class="img-list wow fadeInUp">
                            <?php foreach ($featuredProducts as $fpIdx => $fp): ?>
                            <div class="img_item btn-thumbs cs-pointer<?= $fpIdx === 0 ? ' active' : '' ?>">
                                <img width="120" height="120"
                                    src="<?= $fp['tab_image'] ? ASSETS_URL . htmlspecialchars($fp['tab_image'], ENT_QUOTES) : PHOTOS . htmlspecialchars($fp['main_image'], ENT_QUOTES) ?>"
                                    alt="Image">
                            </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="wow fadeInUp">
                            <a href="<?= SITE_URL ?>products" class="tf-btn animate-btn">
                                <?= __('btn.view_all') ?>
                            </a>
                        </div>
                    </div>
                    <div class="col-right">
                        <div dir="ltr" class="swiper slider-content-thumb swiper-tesimonial">
                            <div class="swiper-wrapper">
                                <?php foreach ($featuredProducts as $fp):
                                    $fpImage  = $fp['main_image'] ? PHOTOS . $fp['main_image'] : NO_PHOTO;
                                    $fpUrl    = SITE_URL . 'viewproduct/' . htmlspecialchars($fp['slug'], ENT_QUOTES);
                                ?>
                                <div class="swiper-slide">
                                    <div class="wg-thumb-v1">
                                        <div class="thumb-image">
                                            <img loading="lazy" width="705" height="546"
                                                src="<?= htmlspecialchars($fpImage, ENT_QUOTES) ?>"
                                                alt="<?= htmlspecialchars($fp['name'], ENT_QUOTES) ?>">
                                        </div>
                                        <div class="thumb-prd">
                                            <div class="prd_image">
                                                <img loading="lazy" width="88" height="88"
                                                    src="<?= htmlspecialchars($fpImage, ENT_QUOTES) ?>" alt="<?= htmlspecialchars($fp['name'], ENT_QUOTES) ?>">
                                            </div>
                                            <div class="prd_info">
                                                <a href="<?= $fpUrl ?>"
                                                    class="name fw-medium link lh-24 text-line-clamp-2">
                                                    <?= htmlspecialchars($fp['name'], ENT_QUOTES) ?>
                                                </a>
                                                <div class="price-wrap">
                                                    <span class="price-new text-primary fw-semibold"><?= number_format($fp['price'], 2) ?> €</span>
                                                </div>
                                            </div>
                                            <a href="<?= $fpUrl ?>" class="btn-action hover-tooltip">
                                                <span class="tooltip"><?= __('btn.view_product') ?></span>
                                                <i class="icon icon-Handbag"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <?php endif; ?>
        <!-- /Product Thumbs -->

        <!-- Banner -->
        <div class="flat-spacing">
            <div class="container">
                <div class="banner-image-text type-abs style-2">
                    <a href="javascript:void(0)" class="bn-image img-style">
                        <img loading="lazy" width="1410" height="460" src="<?= ASSETS_URL ?>images/section/banner-kw.jpg"
                            alt="Image">
                    </a>
                    <div class="bn-content wow fadeInUp">
                        <a href="javascript:void(0)" class="title h1 fw-medium text-white link">
                            <?= __('home.kw_title') ?>
                        </a>
                        <p class="desc text-white text-body-1">
                            <?= __('home.kw_desc') ?>
                        </p>
                        <a href="<?= SITE_URL ?>products/suspensao?cat=suspensao&brand%5B%5D=kw-suspensions" class="btn-action tf-btn btn-white">
                            <?= __('btn.shop') ?>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Banner -->

        <!-- Faq -->
        <section class="flat-spacing">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="sect-heading type-3 wow fadeInUp">
                            <h1 class="s-title font-red_hat fw-semibold letter-space-0">
                                <?= __('home.faq_title') ?>
                            </h1>
                            <p class="s-desc text-body-1 cl-text-2">
                                <?= __('home.faq_desc') ?>
                            </p>
                            <a href="<?= SITE_URL ?>products" class="tf-btn animate-btn">
                                <?= __('home.start_shopping') ?>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="d-grid gap-16" id="faq-accordion">
                            <div class="faq-accordion_item">
                                <div class="accordion-action h5 letter-space-05" data-bs-target="#faq-1"
                                    data-bs-toggle="collapse" aria-expanded="true" aria-controls="faq-1" role="button">
                                    <span><?= __('home.faq_q1') ?></span>
                                    <span class="icon ic-accordion-custom cl-2"></span>
                                </div>
                                <div id="faq-1" class="collapse show" data-bs-parent="#faq-accordion">
                                    <p class="faq-content font-plus_jakarta text-body-1 cl-text-2">
                                        <?= __('home.faq_a1') ?>
                                    </p>
                                </div>
                            </div>
                            <div class="faq-accordion_item">
                                <div class="accordion-action h5 letter-space-05 collapsed"
                                    data-bs-target="#faq-2" data-bs-toggle="collapse" aria-expanded="false"
                                    aria-controls="faq-2" role="button">
                                    <span><?= __('home.faq_q2') ?></span>
                                    <span class="icon ic-accordion-custom cl-2"></span>
                                </div>
                                <div id="faq-2" class="collapse" data-bs-parent="#faq-accordion">
                                    <p class="faq-content font-plus_jakarta text-body-1 cl-text-2">
                                        <?= __('home.faq_a2') ?>
                                    </p>
                                </div>
                            </div>
                            <div class="faq-accordion_item">
                                <div class="accordion-action h5 letter-space-05 collapsed"
                                    data-bs-target="#faq-3" data-bs-toggle="collapse" aria-expanded="false"
                                    aria-controls="faq-3" role="button">
                                    <span><?= __('home.faq_q3') ?></span>
                                    <span class="icon ic-accordion-custom cl-2"></span>
                                </div>
                                <div id="faq-3" class="collapse" data-bs-parent="#faq-accordion">
                                    <p class="faq-content font-plus_jakarta text-body-1 cl-text-2">
                                        <?= __('home.faq_a3') ?>
                                    </p>
                                </div>
                            </div>
                            <div class="faq-accordion_item">
                                <div class="accordion-action h5 letter-space-05 collapsed"
                                    data-bs-target="#faq-4" data-bs-toggle="collapse" aria-expanded="false"
                                    aria-controls="faq-4" role="button">
                                    <span><?= __('home.faq_q4') ?></span>
                                    <span class="icon ic-accordion-custom cl-2"></span>
                                </div>
                                <div id="faq-4" class="collapse" data-bs-parent="#faq-accordion">
                                    <p class="faq-content font-plus_jakarta text-body-1 cl-text-2">
                                        <?= __('home.faq_a4') ?>
                                    </p>
                                </div>
                            </div>
                            <div class="faq-accordion_item">
                                <div class="accordion-action h5 letter-space-05 collapsed"
                                    data-bs-target="#faq-5" data-bs-toggle="collapse" aria-expanded="false"
                                    aria-controls="faq-5" role="button">
                                    <span><?= __('home.faq_q5') ?></span>
                                    <span class="icon ic-accordion-custom cl-2"></span>
                                </div>
                                <div id="faq-5" class="collapse" data-bs-parent="#faq-accordion">
                                    <p class="faq-content font-plus_jakarta text-body-1 cl-text-2">
                                        <?= __('home.faq_a5') ?>
                                    </p>
                                </div>
                            </div>
                            <div class="faq-accordion_item">
                                <div class="accordion-action h5 letter-space-05 collapsed"
                                    data-bs-target="#faq-6" data-bs-toggle="collapse" aria-expanded="false"
                                    aria-controls="faq-6" role="button">
                                    <span><?= __('home.faq_q6') ?></span>
                                    <span class="icon ic-accordion-custom cl-2"></span>
                                </div>
                                <div id="faq-6" class="collapse" data-bs-parent="#faq-accordion">
                                    <p class="faq-content font-plus_jakarta text-body-1 cl-text-2">
                                        <?= __('home.faq_a6') ?>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /Faq -->
        
        <!-- Box Icon -->
        <div class="flat-spacing">
            <div class="container">
                <div class="position-relative flat-spacing pb-0">
                    <div class="br-line fake-class top-0"></div>
                    <div dir="ltr" class="swiper tf-swiper" data-preview="4" data-tablet="3" data-mobile-sm="2"
                        data-mobile="1" data-space-lg="30" data-space-md="20" data-space="10" data-pagination="1"
                        data-pagination-sm="2" data-pagination-md="3" data-pagination-lg="4">
                        <div class="swiper-wrapper">
                            <!-- slide 1 -->
                            <div class="swiper-slide">
                                <div class="box-icon_V01 style-2 wow fadeInLeft">
                                    <span class="icon">
                                        <i class="icon-ArrowUDownLeft"></i>
                                    </span>
                                    <div class="content">
                                        <h5 class="title"><?= __('home.icon_returns_title') ?></h5>
                                        <p class="text cl-text-2"><?= __('home.icon_returns_desc') ?></p>
                                    </div>
                                </div>
                            </div>
                            <!-- slide 2 -->
                            <div class="swiper-slide">
                                <div class="box-icon_V01 style-2 wow fadeInLeft">
                                    <span class="icon">
                                        <i class="icon-Package"></i>
                                    </span>
                                    <div class="content">
                                        <h5 class="title"><?= __('home.icon_delivery_title') ?></h5>
                                        <p class="text cl-text-2"><?= __('home.icon_delivery_desc') ?></p>
                                    </div>
                                </div>
                            </div>
                            <!-- slide 3 -->
                            <div class="swiper-slide">
                                <div class="box-icon_V01 style-2 wow fadeInLeft">
                                    <span class="icon">
                                        <i class="icon-Headset"></i>
                                    </span>
                                    <div class="content">
                                        <h5 class="title"><?= __('home.icon_support_title') ?></h5>
                                        <p class="text cl-text-2"><?= __('home.icon_support_desc') ?></p>
                                    </div>
                                </div>
                            </div>
                            <!-- slide 4 -->
                            <div class="swiper-slide">
                                <div class="box-icon_V01 style-2 wow fadeInLeft">
                                    <span class="icon">
                                        <i class="icon-SealPercent"></i>
                                    </span>
                                    <div class="content">
                                        <h5 class="title"><?= __('home.icon_prices_title') ?></h5>
                                        <p class="text cl-text-2"><?= __('home.icon_prices_desc') ?></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sw-line-default style-2 tf-sw-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Box Icon -->

        <?php require_once __DIR__ . '/includes/footer.php'; ?>
    </main>
    
    <?php require_once __DIR__ . '/includes/mobilemenu.php'; ?>
    <?php require_once __DIR__ . '/includes/toolbar_bottom.php'; ?>
    <?php require_once __DIR__ . '/includes/modals.php'; ?>
    <?php require_once __DIR__ . '/includes/js.php'; ?>
</body>
</html>