{{-- resources/views/page/agency/themes/default/footer.blade.php --}}
<footer class="site-footer">
    {{-- Decorative Background Elements --}}
    <div class="footer-bg-decoration">
        <div class="decoration-circle decoration-circle-1"></div>
        <div class="decoration-circle decoration-circle-2"></div>
        <div class="decoration-circle decoration-circle-3"></div>
    </div>

    <div class="container">
        {{-- Main Footer Content --}}
        <div class="footer-content">
            {{-- Company Info --}}
            <div class="footer-col footer-about">
                <div class="footer-logo">
                    @if($agency->logo)
                        <img src="{{ asset('storage/' . $agency->logo) }}" alt="{{ $agency->name }}" class="logo-image">
                    @else
                        <h3 class="logo-text">{{ $agency->name }}</h3>
                    @endif
                </div>
                <p class="footer-description">
                    {{ $agency->description ?? 'Güvenilir ve profesyonel turizm hizmetleri ile unutulmaz deneyimler sunuyoruz.' }}
                </p>

                {{-- Social Media Links --}}
                @if($agency->facebook_url || $agency->instagram_url || $agency->twitter_url || $agency->youtube_url)
                    <div class="social-links">
                        @if($agency->facebook_url)
                            <a href="{{ $agency->facebook_url }}" target="_blank" rel="noopener" class="social-link social-facebook" aria-label="Facebook">
                                <i class="fab fa-facebook-f"></i>
                                <span class="social-shine"></span>
                            </a>
                        @endif
                        @if($agency->instagram_url)
                            <a href="{{ $agency->instagram_url }}" target="_blank" rel="noopener" class="social-link social-instagram" aria-label="Instagram">
                                <i class="fab fa-instagram"></i>
                                <span class="social-shine"></span>
                            </a>
                        @endif
                        @if($agency->twitter_url)
                            <a href="{{ $agency->twitter_url }}" target="_blank" rel="noopener" class="social-link social-twitter" aria-label="Twitter">
                                <i class="fab fa-twitter"></i>
                                <span class="social-shine"></span>
                            </a>
                        @endif
                        @if($agency->youtube_url)
                            <a href="{{ $agency->youtube_url }}" target="_blank" rel="noopener" class="social-link social-youtube" aria-label="YouTube">
                                <i class="fab fa-youtube"></i>
                                <span class="social-shine"></span>
                            </a>
                        @endif
                    </div>
                @endif
            </div>

            {{-- Quick Links --}}
            <div class="footer-col">
                <h4 class="footer-title">Hızlı Linkler</h4>
                <ul class="footer-links">
                    <li><a href="{{ route('customer.agency.show', $agency->slug) }}" class="footer-link">
                        <i class="fas fa-home"></i>
                        <span>Ana Sayfa</span>
                    </a></li>
                    <li><a href="#about" class="footer-link">
                        <i class="fas fa-info-circle"></i>
                        <span>Hakkımızda</span>
                    </a></li>
                    <li><a href="#tours" class="footer-link">
                        <i class="fas fa-map-marked-alt"></i>
                        <span>Turlarımız</span>
                    </a></li>
                    <li><a href="#contact" class="footer-link">
                        <i class="fas fa-envelope"></i>
                        <span>İletişim</span>
                    </a></li>
                </ul>
            </div>

            {{-- Services --}}
            @if(isset($productTypes) && $productTypes->isNotEmpty())
                <div class="footer-col">
                    <h4 class="footer-title">Hizmetlerimiz</h4>
                    <ul class="footer-links">
                        @foreach($productTypes->take(5) as $productType)
                            <li><a href="{{ route('customer.agency.show', $agency->slug) }}#{{ $productType->slug }}" class="footer-link">
                                @if($productType->icon)
                                    <i class="{{ $productType->icon }}"></i>
                                @endif
                                <span>{{ $productType->name }}</span>
                            </a></li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- Contact Info --}}
            <div class="footer-col footer-contact">
                <h4 class="footer-title">İletişim</h4>
                <ul class="contact-list">
                    @if($agency->contact_phone)
                        <li class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="contact-details">
                                <span class="contact-label">Telefon</span>
                                <a href="tel:{{ $agency->contact_phone }}" class="contact-value">
                                    {{ $agency->contact_phone }}
                                </a>
                            </div>
                        </li>
                    @endif
                    @if($agency->contact_email)
                        <li class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="contact-details">
                                <span class="contact-label">E-posta</span>
                                <a href="mailto:{{ $agency->contact_email }}" class="contact-value">
                                    {{ $agency->contact_email }}
                                </a>
                            </div>
                        </li>
                    @endif
                    @if($agency->contact_address)
                        <li class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="contact-details">
                                <span class="contact-label">Adres</span>
                                <span class="contact-value">{{ $agency->contact_address }}</span>
                            </div>
                        </li>
                    @endif
                </ul>
            </div>
        </div>

        {{-- Footer Bottom --}}
        <div class="footer-bottom">
            <div class="footer-bottom-content">
                <p class="copyright">
                    © {{ date('Y') }} <span class="company-name">{{ $agency->name }}</span>. Tüm hakları saklıdır.
                </p>
                <div class="footer-legal">
                    <a href="#" class="legal-link">Gizlilik Politikası</a>
                    <span class="legal-divider">•</span>
                    <a href="#" class="legal-link">Kullanım Şartları</a>
                </div>
            </div>
        </div>
    </div>

    {{-- Back to Top Button --}}
    <button id="backToTop" class="back-to-top" aria-label="Yukarı Çık">
        <i class="fas fa-arrow-up"></i>
    </button>
</footer>

<style>
    /* ============================================
       FOOTER BASE STYLES
    ============================================ */
    .site-footer {
        position: relative;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
        color: white;
        padding: 5rem 0 0;
        overflow: hidden;
        margin-top: 5rem;
    }

    .site-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg,
            transparent,
            rgba(59, 130, 246, 0.5),
            transparent);
    }

    /* ============================================
       DECORATIVE BACKGROUND
    ============================================ */
    .footer-bg-decoration {
        position: absolute;
        inset: 0;
        opacity: 0.15;
        pointer-events: none;
    }

    .decoration-circle {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle,
            rgba(59, 130, 246, 0.3) 0%,
            transparent 70%);
        filter: blur(60px);
        animation: float 20s infinite ease-in-out;
    }

    .decoration-circle-1 {
        width: 600px;
        height: 600px;
        top: -300px;
        right: -200px;
        animation-delay: 0s;
    }

    .decoration-circle-2 {
        width: 400px;
        height: 400px;
        bottom: -200px;
        left: -100px;
        animation-delay: 7s;
    }

    .decoration-circle-3 {
        width: 500px;
        height: 500px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation-delay: 14s;
    }

    @keyframes float {
        0%, 100% {
            transform: translate(0, 0) scale(1);
        }
        33% {
            transform: translate(30px, -30px) scale(1.1);
        }
        66% {
            transform: translate(-20px, 20px) scale(0.9);
        }
    }

    /* ============================================
       FOOTER CONTENT GRID
    ============================================ */
    .footer-content {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 3rem;
        margin-bottom: 4rem;
    }

    .footer-col {
        position: relative;
    }

    /* ============================================
       COMPANY INFO / ABOUT SECTION
    ============================================ */
    .footer-about {
        max-width: 380px;
    }

    .footer-logo {
        margin-bottom: 1.25rem;
    }

    .logo-image {
        height: 52px;
        width: auto;
        filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(59, 130, 246, 0.3));
        transition: all 0.3s ease;
    }

    .logo-image:hover {
        filter: brightness(0) invert(1) drop-shadow(0 4px 16px rgba(59, 130, 246, 0.5));
        transform: scale(1.02);
    }

    .logo-text {
        font-size: 1.75rem;
        font-weight: 800;
        background: linear-gradient(135deg, #ffffff, #60a5fa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        font-family: var(--heading-font);
        letter-spacing: -0.02em;
    }

    .footer-description {
        color: rgba(255, 255, 255, 0.65);
        line-height: 1.8;
        font-size: 0.938rem;
        margin-bottom: 1.75rem;
    }

    /* ============================================
       SOCIAL LINKS
    ============================================ */
    .social-links {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .social-link {
        position: relative;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        color: white;
        font-size: 1.063rem;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        overflow: hidden;
        text-decoration: none;
    }

    .social-link::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .social-link i {
        position: relative;
        z-index: 1;
    }

    .social-link:hover::before {
        opacity: 1;
    }

    .social-link:hover {
        transform: translateY(-4px) scale(1.1);
        border-color: transparent;
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
    }

    .social-shine {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
        transition: left 0.6s ease;
    }

    .social-link:hover .social-shine {
        left: 100%;
    }

    /* Social platform specific hovers */
    .social-facebook:hover {
        box-shadow: 0 8px 24px rgba(24, 119, 242, 0.5);
    }

    .social-instagram:hover {
        box-shadow: 0 8px 24px rgba(233, 89, 144, 0.5);
    }

    .social-twitter:hover {
        box-shadow: 0 8px 24px rgba(29, 161, 242, 0.5);
    }

    .social-youtube:hover {
        box-shadow: 0 8px 24px rgba(255, 0, 0, 0.5);
    }

    /* ============================================
       FOOTER TITLES
    ============================================ */
    .footer-title {
        font-size: 1.125rem;
        font-weight: 700;
        color: white;
        margin-bottom: 1.5rem;
        position: relative;
        padding-bottom: 0.75rem;
    }

    .footer-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 3px;
        background: linear-gradient(90deg, var(--primary), var(--secondary));
        border-radius: 2px;
    }

    /* ============================================
       FOOTER LINKS
    ============================================ */
    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-links li {
        margin-bottom: 0.75rem;
    }

    .footer-link {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        color: rgba(255, 255, 255, 0.65);
        text-decoration: none;
        font-size: 0.938rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        padding: 0.375rem 0;
    }

    .footer-link i {
        font-size: 0.875rem;
        transition: transform 0.3s ease;
        color: rgba(255, 255, 255, 0.4);
    }

    .footer-link:hover {
        color: var(--primary);
        transform: translateX(4px);
    }

    .footer-link:hover i {
        color: var(--primary);
        transform: scale(1.2);
    }

    /* ============================================
       CONTACT LIST
    ============================================ */
    .contact-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .contact-item {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
        align-items: flex-start;
    }

    .contact-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: 10px;
        color: var(--primary);
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    .contact-item:hover .contact-icon {
        background: rgba(59, 130, 246, 0.2);
        border-color: var(--primary);
        transform: scale(1.1) rotate(5deg);
    }

    .contact-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .contact-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .contact-value {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.938rem;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    a.contact-value:hover {
        color: var(--primary);
    }

    /* ============================================
       FOOTER BOTTOM
    ============================================ */
    .footer-bottom {
        position: relative;
        z-index: 1;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 2rem 0;
    }

    .footer-bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .copyright {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.875rem;
        margin: 0;
    }

    .company-name {
        color: rgba(255, 255, 255, 0.75);
        font-weight: 600;
    }

    .footer-legal {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .legal-link {
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        font-size: 0.875rem;
        transition: color 0.2s ease;
    }

    .legal-link:hover {
        color: var(--primary);
    }

    .legal-divider {
        color: rgba(255, 255, 255, 0.3);
    }

    /* ============================================
       BACK TO TOP BUTTON
    ============================================ */
    .back-to-top {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
        border: none;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        z-index: 9999;
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
    }

    .back-to-top.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .back-to-top:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 12px 32px rgba(59, 130, 246, 0.5);
    }

    .back-to-top:active {
        transform: translateY(-2px) scale(1.02);
    }

    /* ============================================
       RESPONSIVE STYLES
    ============================================ */
    @media (max-width: 1024px) {
        .footer-content {
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 2.5rem;
        }

        .footer-about {
            max-width: 100%;
        }
    }

    @media (max-width: 768px) {
        .site-footer {
            padding: 3.5rem 0 0;
        }

        .footer-content {
            grid-template-columns: 1fr;
            gap: 2.5rem;
            margin-bottom: 3rem;
        }

        .footer-bottom-content {
            flex-direction: column;
            text-align: center;
            gap: 1.25rem;
        }

        .back-to-top {
            bottom: 1.5rem;
            right: 1.5rem;
            width: 48px;
            height: 48px;
        }
    }

    @media (max-width: 480px) {
        .site-footer {
            padding: 3rem 0 0;
        }

        .footer-title {
            font-size: 1rem;
        }

        .social-links {
            gap: 0.625rem;
        }

        .social-link {
            width: 40px;
            height: 40px;
            font-size: 0.938rem;
        }

        .back-to-top {
            bottom: 1rem;
            right: 1rem;
            width: 44px;
            height: 44px;
            font-size: 1.125rem;
        }
    }

    /* ============================================
       ACCESSIBILITY
    ============================================ */
    @media (prefers-reduced-motion: reduce) {
        .decoration-circle {
            animation: none;
        }
    }
</style>

<script>
    // Back to Top Button
    const backToTopBtn = document.getElementById('backToTop');

    window.addEventListener('scroll', () => {
        if (window.pageYOffset > 300) {
            backToTopBtn.classList.add('visible');
        } else {
            backToTopBtn.classList.remove('visible');
        }
    });

    backToTopBtn.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // Add smooth scroll to all footer links
    document.querySelectorAll('.footer-link[href^="#"]').forEach(link => {
        link.addEventListener('click', (e) => {
            const href = link.getAttribute('href');
            if (href !== '#') {
                e.preventDefault();
                const target = document.querySelector(href);
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth' });
                }
            }
        });
    });
</script>