<!doctype html>
<html lang="vi">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BESTPC - Trang chủ</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        violet: {
                            50: "#f5f3ff",
                            900: "#4c1d95",
                        },
                    },
                },
            },
        };
    </script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="stylesheet" media="screen" href="{{ 'style.css' | asset_url }}" />
</head>

<body>
<main class="flex overflow-hidden flex-col items-center bg-white">

    {% include shared/header %}

    {{ page_content }}

    {% include shared/footer %}

</main>

{% include javascript/index %}


<script>
    var swiper = new Swiper("#js-banner-slider", {
        slidesPerView: 1,
        navigation: {
            nextEl: "#js-banner-slider .swiper-button-next",
            prevEl: "#js-banner-slider .swiper-button-prev",
        },
    });

    var swiper_product = new Swiper("#js-product-best", {
        slidesPerView: 5,
        spaceBetween: 15,
        loop: false,
        rewind: false,
        lazy: true,
        navigation: {
            nextEl: "#js-product-best-btn .swiper-button-next",
            prevEl: "#js-product-best-btn .swiper-button-prev",
        },
    });

    var swiper_businesses = new Swiper("#list-businesses", {
        slidesPerView: 7,
        spaceBetween: 20,
        loop: false,
        rewind: false,
        lazy: true,
    });

    runVideo("#js-video");


    function runVideo(holder) {
        $(holder).on("click", function () {
            $(this).addClass("active");
            let url = $(holder).attr("data-url");
            let width = $(holder).width();
            let height = $(holder).height();
            const videoUrl = getEmbedVideoUrl(url);
            if (videoUrl) {
                $(holder).html(`<iframe width="${width}" height="${height}" src="${videoUrl}?mute=1&autoplay=1" frameborder="0" allowfullscreen></iframe>`);
            }
        });
    }


    function getEmbedVideoUrl(url) {
        const youtubeRegex = /(?:youtube\.com\/(?:shorts\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/(?:shorts\/)?)([a-zA-Z0-9_-]{11})/;
        const tiktokRegex = /(?:tiktok\.com\/@[^\/]+\/video\/)(\d+)/;

        const youtubeMatch = url.match(youtubeRegex);
        if (youtubeMatch) return 'https://www.youtube.com/embed/' + youtubeMatch[1];

        const tiktokMatch = url.match(tiktokRegex);
        if (tiktokMatch) return 'https://www.tiktok.com/player/v1/' + tiktokMatch[1];

        return null;
    }

</script>

</body>

</html>
