<template>
  <div class="bottom">
    <div class="bottom-top">
        <div class="bottom-top-content">
            <div style="display: flex; align-items: center;">
                <img :src="witourLogo" alt="witour-logo" />
                <div class="witour">WiTour</div>
            </div>

            <div class="right-content">
                <span>24/7 support</span>
                <span class="divider"></span>
                <span>Quickly Customer service</span>
                <span class="divider"></span>
                <span>Secure and compliant</span>
                <span class="divider"></span>
                <span>99.9% uptime</span>
            </div>
        </div>
    </div>
    <div class="bottom-center">
        <div class="buttom-center-grid">
            <div class="footer-col">
                <div class="footer-title">WiTour</div>
                <div class="footer-item">Download</div>
                <div class="footer-item">About Us</div>
                <div class="footer-item">Partner</div>
                <div class="footer-item">Reviews</div>
            </div>
            <div class="footer-col">
                <div class="footer-title">Products</div>
                <div class="footer-item">eSIM</div>
                <div class="footer-item">SIM Card</div>
            </div>
            <div class="footer-col">
                <div class="footer-title">Resources</div>
                <div class="footer-item">Blog</div>
                <div class="footer-item">Supported Devices</div>
                <div class="footer-item">Refer a Friend</div>
                <div class="footer-item">Promote</div>
                <div class="footer-item">Activites</div>
            </div>
            <div class="footer-col">
                <div class="footer-title">Help Center</div>
                <div class="footer-item">Help Center</div>
                <div class="footer-item">Getting Started</div>
                <div class="footer-item">Payments</div>
                <div class="footer-item">Troubleshooting</div>
                <div class="footer-item">FAQ</div>
            </div>
            <div class="footer-col footer-col-social">
                <div class="footer-title">Follow Us</div>
                <div class="footer-social">
                    <div class="footer-social-item"><img :src="Facebook" /> Facebook</div>
                    <div class="footer-social-item"><img :src="Twitter" /> Twitter（X）</div>
                    <div class="footer-social-item"><img :src="YouTube" /> YouTube</div>
                    <div class="footer-social-item"><img :src="TikTok" /> TikTok</div>
                    <div class="footer-social-item"><img :src="Instagram" /> Instagram</div>
                </div>
            </div>:
        </div>
    </div>
    <div class="bottom-bottom">
        <div class="bottom-bottom-content">
            <div class="bottom-bottom-left">
                <img class="store-btn" :src="AppStore" alt="App Store" />
                <img class="store-btn" :src="GooglePlay" alt="Google Play" />
                <img class="store-btn" :src="AppStoreMac" alt="Mac App Store" />
                <img class="store-btn" :src="MacAppStore" alt="Microsoft" />
            </div>
            <div class="bottom-bottom-right">
                <span>© 2025 WiTour All rights reserved</span>
                <span class="divider"></span>
                <span>Security</span>
                <span class="divider"></span>
                <span>Privacy Policy</span>
                <span class="divider"></span>
                <span>Terms of Services</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script setup>
import witourLogo from '@/assets/images/main-bottom/witour-logo.svg'
import Facebook from '@/assets/images/main-bottom/facebook.svg'
import Twitter from '@/assets/images/main-bottom/twitter.svg'
import YouTube from '@/assets/images/main-bottom/youtube.svg'
import TikTok from '@/assets/images/main-bottom/tiktok.svg'
import Instagram from '@/assets/images/main-bottom/instgram.svg'
import AppStore from '@/assets/images/main-bottom/app-store-badge-black.svg'
import GooglePlay from '@/assets/images/main-bottom/google-play-badge-black.svg'
import AppStoreMac from '@/assets/images/main-bottom/app-store-mac-badge-black.svg'
import MacAppStore from '@/assets/images/main-bottom/app-store-microsoft-badge-black.svg'
</script>

<style scoped lang="scss">
.bottom {
  width: 100%;
  height: 448px;
  background: rgba(29, 33, 48, 1);

  .bottom-top {
    width: 100%;
    height: 69px;
    padding: 10px 75.5px 9px 74.5px;

    .bottom-top-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 4px 35px 5px 35px;

        .witour {
            width: 126px;
            height: 41px;
            line-height: 41px;
            color: rgba(255, 255, 255, 1);
            font-size: 34px;
            font-weight: 600;
            text-align: left;
            display: inline-block;
            margin-left: 4px;
            font-style: italic;
        }

        .right-content {
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 12px;
            font-weight: 400;
            white-space: nowrap;
            text-align: right;

            span:not(.divider) {
                width: 160px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .divider {
                display: inline-block;
                width: 1px;
                height: 18px;
                background: #fff;
                margin: 0 18px;
                opacity: 0.4;
            }
        }
    }    
  }

  .bottom-center {
    width: 100%;
    height: 290px;
    border-bottom: 1px solid rgba(124, 124, 124, 1);
    border-top: 1px solid rgba(124, 124, 124, 1);
    padding: 0 93.5px;

    .buttom-center-grid {
        display: flex;
        justify-content: space-between;
        padding: 36px 38.5px 32px 34.5px;

        .footer-col {
            width: 236px;
            .footer-title {
                color: #fff;
                font-weight: 600;
                font-size: 17px;
                margin-bottom: 18px;
            }
            .footer-item {
                color: #bfc2cc;
                font-size: 15px;
                margin-bottom: 14px;
                cursor: pointer;
                transition: color 0.2s;
                &:hover {
                    color: #fff;
                }
            }
            &.footer-col-social {
                min-width: 170px;
                .footer-social-item {
                    display: flex;
                    align-items: center;
                    color: #bfc2cc;
                    font-size: 15px;
                    margin-bottom: 16px;
                    img {
                        width: 22px;
                        height: 22px;
                        margin-right: 10px;
                        border-radius: 6px;
                        object-fit: cover;
                        background: none;
                    }
                }
            }
        }
    }
  }

  .bottom-bottom {
    width: 100%;
    height: 89px;
    padding: 0 110px 10px 110px;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;

    .bottom-bottom-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .bottom-bottom-left {
        display: flex;
        align-items: flex-end;
        gap: 18px;
        .store-btn {
            height: 43px;
            width: auto;
            border-radius: 10px;
            background: #181b28;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            object-fit: contain;
        }
    }

    .bottom-bottom-right {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 12px;
        gap: 16px;
        .divider {
            width: 1px;
            height: 16px;
            background: #fff;
            opacity: 0.4;
            margin: 0 10px;
            display: inline-block;
            vertical-align: middle;
        }
        span {
            display: inline-block;
            white-space: nowrap;
        }
    }
  }
}
</style>