<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
</script>

<template>
    <footer class="main-footer">
        <div class="bg-grid"></div>
        <div class="footer-content">
            <div class="footer-top">
                <div class="footer-section about">
                    <h3 class="footer-title">Beti<span class="highlight">X</span></h3>
                    <p>The ultimate crypto gaming protocol. Experience fair play, instant withdrawals, and exclusive rewards. Join the revolution of decentralized gambling.</p>
                </div>
                <div class="footer-section links">
                    <h3 class="footer-title">Quick Links</h3>
                    <Link href="/vip-levels">VIP Club</Link>
                    <Link href="/bonuses">Promotions</Link>
                    <Link href="/guilds">Guilds</Link>
                    <Link href="/trophy">Trophy Room</Link>
                </div>
                <div class="footer-section links">
                    <h3 class="footer-title">Help & Support</h3>
                    <Link href="/faq">Help Center</Link>
                    <Link href="/self-exclusion">Responsible Gaming</Link>
                    <Link href="/legal/aml">Fairness & AML</Link>
                    <Link href="/legal/disputes">Disputes</Link>
                </div>
                <div class="footer-section links">
                    <h3 class="footer-title">Legal</h3>
                    <Link href="/legal/terms">{{ $t('footer.legal.terms') }}</Link>
                    <Link href="/legal/cookies">{{ $t('footer.legal.cookies') }}</Link>
                    <Link href="/legal/privacy">{{ $t('footer.legal.privacy') }}</Link>
                    <Link href="/legal/bonus-policy">{{ $t('footer.legal.bonusPolicy') }}</Link>
                    <Link href="/legal/disputes">{{ $t('footer.legal.disputes') }}</Link>
                    <Link href="/legal/responsible-gaming">{{ $t('footer.legal.responsible') }}</Link>
                    <Link href="/legal/aml">{{ $t('footer.legal.aml') }}</Link>
                    <Link href="/legal/risk-warnings">{{ $t('footer.legal.risks') }}</Link>
                </div>
            </div>

            <div class="footer-middle">
                <h3 class="footer-title text-center">Our Partners & Providers</h3>
                <div class="partner-logos">
                    <div class="logo-item">Pragmatic Play</div>
                    <div class="logo-item">Nolimit City</div>
                    <div class="logo-item">Hacksaw</div>
                    <div class="logo-item">Push Gaming</div>
                    <div class="logo-item">Evolution</div>
                    <div class="logo-item">Play'n GO</div>
                </div>
                <div class="crypto-logos">
                    <span class="crypto-icon">₿</span>
                    <span class="crypto-icon">Ξ</span>
                    <span class="crypto-icon">Ł</span>
                    <span class="crypto-icon">₮</span>
                </div>
            </div>

            <div class="footer-bottom">
                <div class="licenses">
                    <div class="license-badge">18+</div>
                    <div class="license-badge">GC</div>
                    <div class="license-badge">RNG Certified</div>
                    <div class="license-text">
                        Betix.io is operated by Betix Group N.V., registered under No. 123456, Curacao. Licensed and regulated by the Government of Curacao.
                        <br>Gambling can be addictive. Please play responsibly. <a href="#" class="text-link">BeGambleAware.org</a>
                    </div>
                </div>
                <div class="copyright">
                    &copy; {{ new Date().getFullYear() }} Betix Protocol. All rights reserved.
                </div>
            </div>
        </div>
    </footer>
</template>

<style scoped>
.main-footer {
    background: #050505;
    border-top: 1px solid #151515;
    padding: 60px 30px 30px;
    margin-top: 80px;
    font-size: 13px;
    color: #888;
    position: relative;
    overflow: hidden;
}

.bg-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    pointer-events: none;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-title {
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.highlight { color: #ff007a; }

.footer-section p {
    line-height: 1.6;
    max-width: 300px;
}

.footer-section a {
    display: block;
    color: #888;
    text-decoration: none;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.footer-section a:hover {
    color: #00f2ff;
    transform: translateX(5px);
}

.footer-middle {
    border-top: 1px solid #151515;
    border-bottom: 1px solid #151515;
    padding: 40px 0;
    margin-bottom: 40px;
    text-align: center;
}

.partner-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}

.logo-item {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 16px;
    color: #555;
    cursor: pointer;
    transition: all 0.3s;
}

.logo-item:hover {
    color: #fff;
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.crypto-logos {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.crypto-icon {
    font-size: 20px;
    color: #fff;
    opacity: 0.5;
    transition: all 0.3s;
    cursor: pointer;
}

.crypto-icon:hover {
    opacity: 1;
    transform: translateY(-3px);
    text-shadow: 0 0 10px #fff;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.licenses {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.license-badge {
    display: inline-block;
    border: 1px solid #333;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    color: #666;
    margin: 0 5px;
    transition: all 0.3s;
    cursor: default;
}

.license-badge:hover {
    border-color: #666;
    color: #fff;
}

.license-text {
    font-size: 11px;
    color: #555;
    line-height: 1.5;
    max-width: 600px;
}

.text-link {
    color: #888;
    text-decoration: underline;
}

.copyright {
    font-size: 11px;
    color: #333;
}

@media (max-width: 1000px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-top {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-section p {
        margin: 0 auto 20px;
    }
}
</style>
