<?php

use Banyo\CustomHomePage\ViewModel\ThirdParty;
use Magento\Framework\Escaper;

/** @var ThirdParty $viewModel */
/** @var Escaper $escaper */

$viewModel = $block->getData('viewModel');
$div1Text = $viewModel->getConfigValue('usp_section/usp_section_div1_text');
$div2Text = $viewModel->getConfigValue('usp_section/usp_section_div2_text');

?>

<section class="3xl:max-w-screen-2xl mx-auto ">
    <!-- Desktop view -->
    <div class="hidden lg:flex justify-between pt-2 2xl:container">
        <!-- Fast Delivery -->
        <a href="\delivery" class="w-30p bg-primary-darker flex gap-4 rounded-lg items-center justify-center text-white p-3">
            <img src="<?= $this->getViewFileUrl('images/delivery_icon.svg') ?>" alt="Delivery">
            <span class="text-2xl font-bold font-inter"><?= $div1Text ?></span>
        </a>

        <!-- Trustpilot -->
        <a href="\trustpilot" class="w-30p bg-primary-darker flex flex-col rounded-lg items-center justify-between text-white p-3">
           <div class="flex gap-4 justify-center items-center">
               <img src="<?= $this->getViewFileUrl('images/Trustpilot.svg') ?>" alt="trustpilot">
               <img src="<?= $this->getViewFileUrl('images/stars.svg') ?>" alt="rating">
           </div>

            <span class="text-xs font-normal">Trust Score 4.9 | 659 Reviews </span>
        </a>

        <!-- Price Match Promise -->
        <a href="\price-match" class="w-30p bg-primary-darker  rounded-lg flex gap-4 items-center justify-center text-white p-3">
            <img src="<?= $this->getViewFileUrl('images/promise.svg') ?>" alt="Promise Prices">
            <span class="text-2xl font-bold font-inter"><?= $div2Text ?></span>
        </a>
    </div>

    <!-- Mobile Slider view -->
    <div x-data="mobileSlider" class="lg:hidden bg-white mobile-slider">
        <div class="relative overflow-hidden">
            <template x-for="(slide, index) in slides" :key="index">
                <div x-show="currentSlide === index" class="bg-primary-darker flex flex-col items-center justify-between text-white p-3">
                    <a href="\slide.url">

                        <img :src="slide.src" :alt="slide.alt" class="mx-auto">
                        <span x-text="slide.caption" class="block text-base font-semibold"></span>

                    </a>
                </div>
            </template>
        </div>
    </div>
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('mobileSlider', () => ({
                currentSlide: 0,
                slides: [{
                    src: '<?= $this->getViewFileUrl('images/delivery_icon.svg') ?>',
                    alt: 'Fast Delivery',
                    caption: 'Fast Delivery',
                    url: 'delivery'
                },
                    {
                        src: '<?= $this->getViewFileUrl('images/trust_icon.png') ?>',
                        alt: 'Trust Score',
                        caption: 'Trust Score 4.9 | 659 Reviews',
                        url: 'trustpilot'
                    },
                    {
                        src: '<?= $this->getViewFileUrl('images/promise.svg') ?>',
                        alt: 'Price Match Promise',
                        caption: 'Price Match Promise',
                        url: 'price-match'
                    },
                ],
                init() {
                    this.startAutoScroll();
                },
                startAutoScroll() {
                    setInterval(() => {
                        this.currentSlide = (this.currentSlide + 1) % this.slides.length;
                    }, 3000); // Change slide every 3 seconds
                }
            }));
        });
    </script>
</section>
