'use client';
import { useState, useEffect } from "react";
import { StoreList } from "@/data/store"
import Feature from "./Feature"

export default function HeThongCuaHang() {
    console.log('StoreList: ', StoreList)

    const [ id, setId ] = useState(1);

    useEffect( ()=>{
        console.log(id)
    }, [id]);

    const storeHandle = (e: number | string) => {
        const id = Number(e)
        setId(id);

        

    }

    return (
        <>
            <div className="showroom text-16 color-black">
                <div className="showroom-header section-hero">
                    <div className="container">
                        <div className="text-box d-flex align-items-start justify-content-center flex-column font-weight-bold text-white">
                            <h2 className="text-28 mb-2">HỆ THỐNG SHOWROOM HOÀNG HÀ PC</h2>
                            <p className="mb-3">
                                Địa điểm trải nghiệm và mua sắm thiết bị công nghệ.
                            </p>
                            <button type="button" className="btn btn-white"><span>Khám phá ngay</span></button>
                        </div>
                    </div>
                </div>

                <div className="showroom-region container py-4x">
                    <h2 className="text-28 text-center pb-3x font-weight-600">CHỌN KHU VỰC CỦA BẠN</h2>

                    <div className="showroom-region-box font-weight-bold">
                        <ul className="grid grid--3-cols">
                            <li className={ id === 1 ? "active" : '' }
                                onClick={()=>storeHandle(1)}
                            >
                                <i className="static-icons static-icon-region-hn" />
                                <span className="text-28 text-center title">
                                    Khu vực <span className="color-primary">Miền Bắc</span>
                                </span>
                            </li>

                            <li className={ id === 2 ? "active" : '' }
                                onClick={()=>storeHandle(2)}
                            >
                                <i className="static-icons static-icon-region-central" style={{ backgroundImage: 'url(/images/showroom-central.png)', backgroundRepeat: 'no-repeat', backgroundSize: 'contain', backgroundPosition: 'center' }} />
                                <span className="text-28 text-center title">
                                    Khu vực <span className="color-primary">Miền Trung</span>
                                </span>
                            </li>

                            <li className={ id === 3 ? "active" : '' }
                                onClick={()=>storeHandle(3)}
                            >
                                <i className="static-icons static-icon-region-hcm" />
                                <span className="text-28 text-center title">
                                    Khu vực <span className="color-primary">Miền Nam</span>
                                </span>
                            </li>

                            <li className={ id === 4 ? "active" : '' }
                                onClick={()=>storeHandle(4)}
                            >
                                <i className="static-icons static-icon-region-ttbh" />
                                <span className="text-28 text-center title">
                                    Trung Tâm <span className="color-primary">Bảo hành</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                {/* KHU VỰC MIỀN BẮC */}
                <div className="showroom-content active" id="js-showroom-north">
                    <h3 className="text-28 d-flex flex-column align-items-center color-primary font-weight-600">
                        <i className="static-icons static-icon-location" />
                        KHU VỰC MIỀN BẮC
                    </h3>

                    {/* SHOWROOM LIST */}
                    <div className="showroom-list">
                        <div className="showroom-item">
                            <div className="container grid grid--content-1">
                                {/* SHOWROOM CONTACT */}
                                <div className="showroom-contact p-4">
                                    <p className="font-weight-bold color-primary mb-1">Showroom bán hàng</p>
                                    <h4 className="text-28 font-weight-bold mb-3">PHƯỜNG CẦU GIẤY, HÀ NỘI</h4>
                                    <ul className="contact-list d-flex flex-column mb-3">
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-phone" />
                                            <a className="text-14" href="tel:0969.123.666">Điện thoại: 0969.123.666</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-mail" />
                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-clock" />
                                            <a className="text-14" href="#">Thời gian làm việc: 8h00 - 18h30</a>
                                        </li>
                                    </ul>

                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14895.88175394404!2d105.7839668!3d21.0338688!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135abd416877447%3A0xdfce989c77925c71!2zSG_DoG5nIEjDoCBQQw!5e0!3m2!1svi!2s!4v1665992223153!5m2!1svi!2s">
                                        <img src="/images/footer-showroom-cg.png" alt="showroom cầu giấy" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
                                    </div>
                                </div>

                                {/* SHOWROOM IMAGES */}
                                <div className="showroom-image p-4">
                                    <div className="showroom-image-content">
                                        {/* SWIPER SLIDER */}
                                        <div className="swiper showroom-swiper">
                                            <div className="swiper-wrapper">
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-cau-giay.png" alt="Showroom Hoàng Hà PC cầu giấy" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-cau-giay-6.jpg" alt="Showroom Hoàng Hà PC cầu giấy" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-cau-giay-7.jpg" alt="Showroom Hoàng Hà PC cầu giấy" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-cau-giay-8.jpg" alt="Showroom Hoàng Hà PC cầu giấy" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-cau-giay-9.jpg" alt="Showroom Hoàng Hà PC cầu giấy" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/static-showroom-pc-1.png" alt="Showroom Hoàng Hà PC cầu giấy" />
                                                </div>
                                            </div>
                                            <div className="swiper-pagination" />
                                            <div className="swiper-button-next" />
                                            <div className="swiper-button-prev" />
                                        </div>

                                        <div className="showroom-image-bottom d-flex align-items-center">
                                            <div className="showroom-image-bottom-logo">
                                                <i className="static-icons static-icon-logo-small" />
                                            </div>
                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
                                                <i className="static-icons static-icon-location-small" />
                                                <span>Số 41 Khúc Thừa Dụ, Phường Cầu Giấy, Thành phố Hà Nội</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="showroom-item">
                            <div className="container grid grid--content-1">
                                {/* SHOWROOM CONTACT */}
                                <div className="showroom-contact p-4">
                                    <p className="font-weight-bold color-primary mb-1">Showroom bán hàng</p>
                                    <h4 className="text-28 font-weight-bold mb-3">PHƯỜNG ĐỐNG ĐA, HÀ NỘI</h4>
                                    <ul className="contact-list d-flex flex-column mb-3">
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-phone" />
                                            <a className="text-14" href="tel:0969.123.666">Điện thoại: 0969.123.666</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-mail" />
                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-clock" />
                                            <a className="text-14" href="#">Thời gian làm việc: 8h00 - 18h30</a>
                                        </li>
                                    </ul>
                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3724.7069099501123!2d105.8183181!3d21.0043826!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135adb26e178fc3%3A0x18f812bf0be1c328!2zSG_DoG5nIEjDoCBQQyAtIE3DoXkgVMOtbmggQ2h1ecOqbiBE4bulbmcgQ2hvIMSQ4buTIEjhu41h!5e0!3m2!1svi!2s!4v1665992568314!5m2!1svi!2s">
                                        <img src="/images/footer-showroom-dd.png" alt="showroom ĐỐNG ĐA" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
                                    </div>
                                </div>
                                
                                {/* SHOWROOM IMAGES */}
                                <div className="showroom-image p-4">
                                    <div className="showroom-image-content">
                                        {/* SWIPER SLIDER */}
                                        <div className="swiper showroom-swiper">
                                            <div className="swiper-wrapper">
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-dong-da-5.jpg" alt="Showroom Hoàng Hà PC Đống Đa" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-dong-da-1.jpg" alt="Showroom Hoàng Hà PC Đống Đa" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-dong-da-2.jpg" alt="Showroom Hoàng Hà PC Đống Đa" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-dong-da-3.jpg" alt="Showroom Hoàng Hà PC Đống Đa" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-dong-da-4.jpg" alt="Showroom Hoàng Hà PC Đống Đa" />
                                                </div>
                                            </div>
                                            <div className="swiper-pagination" />
                                            <div className="swiper-button-next" />
                                            <div className="swiper-button-prev" />
                                        </div>
                                        <div className="showroom-image-bottom d-flex align-items-center">
                                            <div className="showroom-image-bottom-logo">
                                                <i className="static-icons static-icon-logo-small" />
                                            </div>
                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
                                                <i className="static-icons static-icon-location-small" />
                                                <span>
                                                    Số 94E-94F Đường Láng, Phường Đống Đa, Thành phố Hà Nội
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* KHU VỰC MIỀN Trung */}
                <div className="showroom-content" id="js-showroom-central">
                    <h3 className="text-28 d-flex flex-column align-items-center color-primary font-weight-600">
                        <i className="static-icons static-icon-location" />
                        KHU VỰC MIỀN TRUNG
                    </h3>
                    {/* SHOWROOM LIST */}
                    <div className="showroom-list">
                        <div className="showroom-item">
                            <div className="container grid grid--content-1">
                                {/* SHOWROOM CONTACT */}
                                <div className="showroom-contact p-4">
                                    <p className="font-weight-bold color-primary mb-1"> Showroom bán hàng </p>
                                    <h4 className="text-28 font-weight-bold mb-3">PHƯỜNG THÀNH VINH, NGHỆ AN</h4>
                                    <ul className="contact-list d-flex flex-column mb-3">
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-phone" />
                                            <a className="text-14" href="tel:0988.163.666">Điện thoại: 0988.163.666</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-mail" />
                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-clock" />
                                            <a className="text-14" href="#">Thời gian làm việc: 8h30 - 18h30</a>
                                        </li>
                                    </ul>
                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3779.5322054356734!2d105.67231487475244!3d18.68497646413254!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3139cfef9f96ca75%3A0xff0d17989684e4c0!2zSG_DoG5nIEjDoCBQQyBWaW5oIE5naOG7hyBBbg!5e0!3m2!1svi!2s!4v1683532168493!5m2!1svi!2s">
                                        <img src="/images/footer-showroom-hcm.png" alt="showroom Vinh, Nghệ An" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
                                    </div>
                                </div>
                                {/* SHOWROOM IMAGES */}
                                <div className="showroom-image p-4">
                                    <div className="showroom-image-content">
                                        {/* SWIPER SLIDER */}
                                        <div className="swiper showroom-swiper">
                                            <div className="swiper-wrapper">
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang_ha_pc_vinh.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang_ha_pc_vinh_1.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang_ha_pc_vinh_2.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang_ha_pc_vinh_3.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang_ha_pc_vinh_4.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang_ha_pc_vinh_10.jpg" alt="Showroom Hoàng Hà PC Vinh, Nghệ An" />
                                                </div>
                                            </div>
                                            <div className="swiper-pagination" />
                                            <div className="swiper-button-next" />
                                            <div className="swiper-button-prev" />
                                        </div>
                                        <div className="showroom-image-bottom d-flex align-items-center">
                                            <div className="showroom-image-bottom-logo">
                                                <i className="static-icons static-icon-logo-small" />
                                            </div>
                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
                                                <i className="static-icons static-icon-location-small" />
                                                <span>Số 72 Lê Lợi, Phường Thành Vinh, Nghệ An</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* KHU VỰC MIỀN NAM */}
                <div className="showroom-content" id="js-showroom-south">
                    <h3 className="text-28 d-flex flex-column align-items-center color-primary font-weight-600">
                        <i className="static-icons static-icon-location" />
                        KHU VỰC MIỀN NAM
                    </h3>
                    {/* SHOWROOM LIST */}
                    <div className="showroom-list">
                        <div className="showroom-item">
                            <div className="container grid grid--content-1">
                                {/* SHOWROOM CONTACT */}
                                <div className="showroom-contact p-4">
                                    <p className="font-weight-bold color-primary mb-1">
                                        Showroom bán hàng
                                    </p>
                                    <h4 className="text-28 font-weight-bold mb-3">PHƯỜNG HÒA HƯNG, HỒ CHÍ MINH</h4>
                                    <ul className="contact-list d-flex flex-column mb-3">
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-phone" />
                                            <a className="text-14" href="tel:0968.123.666">Điện thoại: 0968.123.666</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-mail" />
                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-clock" />
                                            <a className="text-14" href="#">Thời gian làm việc: 8h00 - 18h30</a>
                                        </li>
                                    </ul>
                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.5694598705045!2d106.65907779999999!3d10.7676269!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752f2967d5137f%3A0xe796f763bd2f650b!2zSG_DoG5nIEjDoCBQQyBI4buTIENow60gTWluaA!5e0!3m2!1svi!2s!4v1665992598210!5m2!1svi!2s">
                                        <img src="/images/footer-showroom-hcm.png" alt="showroom Hồ Chí Minh" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
                                    </div>
                                </div>
                                {/* SHOWROOM IMAGES */}
                                <div className="showroom-image p-4">
                                    <div className="showroom-image-content">
                                        {/* SWIPER SLIDER */}
                                        <div className="swiper showroom-swiper">
                                            <div className="swiper-wrapper">
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm-1.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm-2.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm-3.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm-4.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm-5.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                            </div>
                                            <div className="swiper-pagination" />
                                            <div className="swiper-button-next" />
                                            <div className="swiper-button-prev" />
                                        </div>
                                        <div className="showroom-image-bottom d-flex align-items-center">
                                            <div className="showroom-image-bottom-logo">
                                                <i className="static-icons static-icon-logo-small" />
                                            </div>
                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
                                                <i className="static-icons static-icon-location-small" />
                                                <span>K8bis Bửu Long, Phường Hoà Hưng, Thành phố Hồ Chí Minh</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* Trung Tâm Bảo hành */}
                <div className="showroom-content" id="js-showroom-warranty">
                    <h3 className="text-28 d-flex flex-column align-items-center color-primary font-weight-600">
                        <i className="static-icons static-icon-location" />
                        TRUNG TÂM BẢO HÀNH
                    </h3>
                    {/* SHOWROOM LIST */}
                    <div className="showroom-list">
                        <div className="showroom-item">
                            <div className="container grid grid--content-1">
                                {/* SHOWROOM CONTACT */}
                                <div className="showroom-contact p-4">
                                    <p className="font-weight-bold color-primary mb-1"> Trung Tâm Bảo Hành </p>
                                    <h4 className="text-28 font-weight-bold mb-3"> PHƯỜNG CẦU GIẤY, HÀ NỘI </h4>
                                    <ul className="contact-list d-flex flex-column mb-3">
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-phone" />
                                            <a className="text-14" href="tel:0969.123.666">Điện thoại: 0969.123.666</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-mail" />
                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-clock" />
                                            <a className="text-14" href="#">Thời gian làm việc: 8h00 - 18h30</a>
                                        </li>
                                    </ul>
                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14895.88175394404!2d105.7839668!3d21.0338688!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135abd416877447%3A0xdfce989c77925c71!2zSG_DoG5nIEjDoCBQQw!5e0!3m2!1svi!2s!4v1665992223153!5m2!1svi!2s">
                                        <img src="/images/footer-showroom-cg.png" alt="showroom cầu giấy" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
                                    </div>
                                </div>
                                {/* SHOWROOM IMAGES */}
                                <div className="showroom-image p-4">
                                    <div className="showroom-image-content">
                                        {/* SWIPER SLIDER */}
                                        <div className="swiper showroom-swiper">
                                            <div className="swiper-wrapper">
                                                <div className="swiper-slide">
                                                    <img src="/images/phong-bao-hanh-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/phong-bao-hanh-2-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/phong-bao-hanh-3-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/phong-bao-hanh-4-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/phong-bao-hanh-5-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/phong-bao-hanh-6-min.jpg" alt="Showroom Hoàng Hà PC Cầu Giấy" />
                                                </div>
                                            </div>
                                            <div className="swiper-pagination" />
                                            <div className="swiper-button-next" />
                                            <div className="swiper-button-prev" />
                                        </div>
                                        <div className="showroom-image-bottom d-flex align-items-center">
                                            <div className="showroom-image-bottom-logo">
                                                <i className="static-icons static-icon-logo-small" />
                                            </div>
                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
                                                <i className="static-icons static-icon-location-small" />
                                                <span>
                                                    Số 41 Khúc Thừa Dụ, Phường Cầu Giấy, Hà Nội
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="showroom-item">
                            <div className="container grid grid--content-1">
                                {/* SHOWROOM CONTACT */}
                                <div className="showroom-contact p-4">
                                    <p className="font-weight-bold color-primary mb-1">
                                        Trung Tâm Bảo Hành
                                    </p>
                                    <h4 className="text-28 font-weight-bold mb-3">PHƯỜNG HÒA HƯNG, HỒ CHÍ MINH</h4>
                                    <ul className="contact-list d-flex flex-column mb-3">
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-phone" />
                                            <a className="text-14" href="tel:0968.123.666">Điện thoại: 0968.123.666</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-mail" />
                                            <a className="text-14" href="mailto:hoanghapcws@gmail.com">Email: hoanghapcws@gmail.com</a>
                                        </li>
                                        <li className="d-flex align-items-center">
                                            <i className="static-icons static-icon-clock" />
                                            <a className="text-14" href="#">Thời gian làm việc: 8h00 - 18h30</a>
                                        </li>
                                    </ul>
                                    <div className="js-footer-map-item my-4 relative" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.5694598705045!2d106.65907779999999!3d10.7676269!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752f2967d5137f%3A0xe796f763bd2f650b!2zSG_DoG5nIEjDoCBQQyBI4buTIENow60gTWluaA!5e0!3m2!1svi!2s!4v1665992598210!5m2!1svi!2s">
                                        <img src="/images/footer-showroom-hcm.png" alt="showroom Hồ Chí Minh" className="lazy d-block m-auto w-100" style={{ position: 'relative' }} />
                                    </div>
                                </div>
                                {/* SHOWROOM IMAGES */}
                                <div className="showroom-image p-4">
                                    <div className="showroom-image-content">
                                        {/* SWIPER SLIDER */}
                                        <div className="swiper showroom-swiper">
                                            <div className="swiper-wrapper">
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm-1.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm-2.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm-3.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm-4.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                                <div className="swiper-slide">
                                                    <img src="/images/hoang-ha-pc-hcm-5.jpg" alt="Showroom Hoàng Hà PC Hồ Chí Minh" />
                                                </div>
                                            </div>
                                            <div className="swiper-pagination" />
                                            <div className="swiper-button-next" />
                                            <div className="swiper-button-prev" />
                                        </div>
                                        <div className="showroom-image-bottom d-flex align-items-center">
                                            <div className="showroom-image-bottom-logo">
                                                <i className="static-icons static-icon-logo-small" />
                                            </div>
                                            <p className="showroom-image-bottom-text d-flex text-20 font-weight-600">
                                                <i className="static-icons static-icon-location-small" />
                                                <span>K8bis Bửu Long, Phường Hoà Hưng, Thành phố Hồ Chí Minh</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                {/* SHOWROOM FEATURES */}
                <Feature />
            </div>
        </>
    )
}