<% 
    const tabs = {
        cards: [
            {
                img: "/img/icons/acute_FILL0_wght400_GRAD0_opsz48.svg",
                title: "Emergency",
                dataHash: "emergency",
                highlighted: true,
            }, {
                img: "/img/icons/key_FILL0_wght400_GRAD0_opsz48.svg",
                title: "Lost keys",
                dataHash: "lost-keys",
            }, {
                img: "/img/icons/lock_open_FILL0_wght400_GRAD0_opsz48.svg",
                title: "Locksmith",
                dataHash: "locksmith",
            }, {
                img: "/img/icons/door_open_FILL0_wght400_GRAD0_opsz48.svg",
                title: "UPVC Door Repair",
                dataHash: "upvc-door-repair",
            }, {
                img: "/img/icons/construction_FILL0_wght400_GRAD0_opsz48.svg",
                title: "Maintenance",
                dataHash: "maintenance",
            }, {
                img: "/img/icons/shield_FILL0_wght400_GRAD0_opsz48.svg",
                title: "Safety",
                dataHash: "safety",
            }, {
                img: "/img/icons/business_center_FILL0_wght400_GRAD0_opsz48.svg",
                title: "Business services",
                dataHash: "business-services",
            }
    ]};
%>
<div class="container-fluid d-md-none di_m_t_20px">
    <div class="row">
        <div class="col-12 di_o_x_scroll">
            <div class="di_m_l_-10px di_p_r_20px" style="width: max-content;">
                <% for (var i = 0; i < tabs.cards.length; i++) { %>
                    <a class="keys_a_non_active" onClick="changeActiveHomeHash('<%- tabs.cards[i].dataHash %>')" href="#<%- tabs.cards[i].dataHash %>">
                        <div data-menu-hash="<%- tabs.cards[i].dataHash %>" class="di_t_center di_f_left di_m_l_20px <% if(tabs.cards[i].highlighted === true){ %>k_slider_active<% } %>">
                            <img class="di_size_30px" style="" src ="<%- tabs.cards[i].img %>"/>
                            <p class="di_m_b_10px di_f_s_14px"><%- tabs.cards[i].title %></p>
                        </div>
                    </a>
                <% } %>
            </div>
        </div>
    </div>
</div>
<div class="container d-none d-md-block di_m_t_20px">
    <div class="row">
        <div class="col-12 di_t_center">
                <% for (var i = 0; i < tabs.cards.length; i++) { %>
                    <a class="keys_a_non_active" onClick="changeActiveHomeHash('<%- tabs.cards[i].dataHash %>')" href="#<%- tabs.cards[i].dataHash %>">
                        <div data-menu-hash="<%- tabs.cards[i].dataHash %>" class="di_t_center d-inline-block di_m_l_20px <% if(tabs.cards[i].highlighted === true){ %>k_slider_active<% } %>">
                            <img class="di_size_30px" style="" src ="<%- tabs.cards[i].img %>"/>
                            <p class="di_m_b_10px di_f_s_14px"><%- tabs.cards[i].title %></p>
                        </div>
                    </a>
                <% } %>
        </div>
    </div>
</div>

<% 
    if(typeof(newPhone) !== "undefined" && newPhone){
        phoneNr = newPhone;
    } else {
        phoneNr = process.env.WEB_PHONE;
    }

    const slides = {
        cards: [
            {
                img: "/img/media/keys_home_1.png",
                title: "Emergency locksmith needed?",
                subTitle1: "Say no more. We'll be there in a blink.",
                <!-- subTitle2: "24/7. Reliable and affordable.", -->
                dataHash: "emergency",
                ctaText: "Call us now",
                ctaImg: "/img/icons/phone_w.svg",
                ctaUrl: "tel:" + phoneNr,
            }, {
                img: "/uploads/img/media/locksmith_success_3.png",
                title: "Keys missing? No problem.",
                subTitle1: "Our expert locksmiths can help you get back in your home without any damage.",
                dataHash: "lost-keys",
                ctaText: "Call us now",
                ctaImg: "/img/icons/phone_w.svg",
                ctaUrl: "tel:" + phoneNr,
            }, {
                img: "/uploads/img/media/locksmith.png",
                title: "Locksmith",
                subTitle1: "Professional locksmith solutions for residential and commercial needs.",
                dataHash: "locksmith",
                ctaText: "Call us now",
                ctaImg: "/img/icons/phone_w.svg",
                ctaUrl: "tel:" + phoneNr,
            }, {
                img: "/uploads/img/media/locksmith_upvc_door_repair.jpg",
                title: "UPVC Door Repair",
                subTitle1: "Trust the experts at 24hrs Locksmith for professional UPVC door repair services. We specialize in restoring and securing your UPVC doors to ensure your property remains safe and protected.",
                dataHash: "upvc-door-repair",
                ctaText: "Call us now",
                ctaImg: "/img/icons/phone_w.svg",
                ctaUrl: "tel:" + phoneNr,
            }, {
                img: "/uploads/img/media/maintenance.png",
                title: "Maintenance",
                subTitle1: "Keep your locks in top condition with our maintenance services for long-lasting security.",
                dataHash: "maintenance",
                ctaText: "Call us now",
                ctaImg: "/img/icons/phone_w.svg",
                ctaUrl: "tel:" + phoneNr,
            }, {
                img: "/uploads/img/media/locksmith_safety.png",
                title: "Safety",
                subTitle1: "Protect your property with our comprehensive security solutions and advanced lock systems.",
                dataHash: "safety",
                ctaText: "Call us now",
                ctaImg: "/img/icons/phone_w.svg",
                ctaUrl: "tel:" + phoneNr,
            }, {
                img: "/uploads/img/media/business_services.png",
                title: "Business Services",
                subTitle1: "Trusted locksmith services tailored for businesses, including access control and master key systems.",
                dataHash: "business-services",
                ctaText: "Call us now",
                ctaImg: "/img/icons/phone_w.svg",
                ctaUrl: "tel:" + phoneNr,
            }
    ]};
%>

<div class="container di_m_t_20px dip_p_0_10px owl-carousel owl-carousel-home-1">
    <% for (var i = 0; i < slides.cards.length; i++) { %>
        <div class="row di_m_t_40px di_m_b_20px" data-hash="<%- slides.cards[i].dataHash %>">
            <div class="col-12 col-lg-6 rc_center_both order-2 order-lg-1">
                <div class="di_t_center">
                <h2><%- slides.cards[i].title %></h2>
                <p class="di_m_t_20px"><%- slides.cards[i].subTitle1 %></p>
                <% if(typeof slides.cards[i].subTitle2 !== "undefined" && slides.cards[i].subTitle2) { %>
                    <p><%- slides.cards[i].subTitle2 %></p>
                <% } %>

                <a class="lock_mbl_call_btn" href="<%- slides.cards[i].ctaUrl %>" onClick="saveCallBtnClick('in_page');">
                    <button class="btn di_bg_b di_clr_w">
                        <span class="di_f_left"><%- slides.cards[i].ctaText %></span> 
                        <img class="di_size_25px di_f_left di_m_l_5px di_mirror_horiz di_w_auto" style="" src ="<%- slides.cards[i].ctaImg %>"/>
                    </button>
                </a>
                </div>
            </div>
            <div class="col-12 col-lg-6 order-1 order-lg-2">
                <img class="" style="margin-top: -5px; max-width: 100%;" src ="<%- slides.cards[i].img %>"/>
            </div>
        </div>
    <% } %>
</div>