@php
$assetPath = 'frontend_assets';
@endphp

<footer>
    <div class="container-fluid px-0">

        <!-- Frame 1101: Top Row (Logo & Download Our App) -->
        <div class="footer-top-row d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-4 mb-4">
            <div>
                <img src="{{ asset($assetPath . '/images/logo-froned.svg') }}" class="footer-logo" alt="Majarat Logo">
            </div>

            <div class="download-app-col d-flex flex-column align-items-start gap-2 ms-md-auto">
                <span class="download-app-title">DOWNLOAD OUR APP</span>
                <div class="d-flex gap-2 align-items-center flex-wrap">
                    <a href="https://apps.apple.com/in/app/majarat/id6451000309" target="_blank" rel="noopener noreferrer" class="footer-store-btn">
                        <img src="{{ asset($assetPath . '/icons/apple-logo.svg') }}" alt="App Store Icon" width="11" height="13">
                        <span>App Store</span>
                    </a>
                    <a href="https://play.google.com/store/apps/details?id=com.majarat.app" target="_blank" rel="noopener noreferrer" class="footer-store-btn">
                        <img src="{{ asset($assetPath . '/icons/android-logo.svg') }}" alt="Play Store Icon" width="11" height="12">
                        <span>Play Store</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Frame 1102: Middle Section -->
        <div class="footer-links-section">
            <div class="row g-0 footer-links-row">

                @if ($customerSupport)
                <div class="col-6 col-lg-3 footer-col">
                    <h5 class="footer-heading">{{ webTrans('customer_support', 'footer') }}</h5>
                    <ul class="list-unstyled footer-list mb-0">
                        @if ($customerSupport->whatsapp_number)
                        <li>
                            <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $customerSupport->whatsapp_number) }}"
                                target="_blank" rel="noopener noreferrer">
                                {{ webTrans('whatsapp_label', 'footer') }}: {{ $customerSupport->whatsapp_number }}
                            </a>
                        </li>
                        @endif
                        @if ($customerSupport->support_number)
                        <li>
                            <a href="tel:{{ preg_replace('/\s+/', '', $customerSupport->support_number) }}"
                                target="_blank" rel="noopener noreferrer">
                                {{ webTrans('support_label', 'footer') }}: {{ $customerSupport->support_number }}
                            </a>
                        </li>
                        @endif
                        <li>
                            <a href="mailto:{{ $customerSupport->email }}" target="_blank" rel="noopener noreferrer">
                                {{ webTrans('email_label', 'footer') }}: {{ $customerSupport->email }}
                            </a>
                        </li>
                    </ul>
                </div>
                @endif

                <div class="col-6 col-lg-3 footer-col">
                    <h5 class="footer-heading">{{ webTrans('links', 'footer') }}</h5>
                    <ul class="list-unstyled footer-list">
                        <li><a href="{{ route('frontend.privacy') }}" target="_blank">{{ webTrans('privacy_policy', 'footer') }}</a></li>
                        <li><a href="{{ route('frontend.terms') }}" target="_blank">{{ webTrans('terms_conditions', 'footer') }}</a></li>
                        <li><a href="{{ route('frontend.refund') }}" target="_blank">{{ webTrans('refund_policy', 'footer') }}</a></li>
                    </ul>
                </div>

                <div class="col-6 col-lg-3 footer-col">
                    <h5 class="footer-heading">{{ webTrans('account', 'footer') }}</h5>
                    <ul class="list-unstyled footer-list">
                        @auth('web')
                        <li><a href="{{ route('frontend.profile') }}">{{ webTrans('my_orders', 'footer') }}</a></li>
                        <li><a href="{{ route('frontend.profile') }}">{{ webTrans('track_my_order', 'footer') }}</a></li>
                        <li><a href="{{ route('frontend.profile') }}">{{ webTrans('my_returns', 'footer') }}</a></li>
                        @else
                        <li><a href="javascript:void(0)" onclick="new bootstrap.Modal(document.getElementById('mobileModal')).show()">{{ webTrans('my_orders', 'footer') }}</a></li>
                        <li><a href="javascript:void(0)" onclick="new bootstrap.Modal(document.getElementById('mobileModal')).show()">{{ webTrans('track_my_product', 'footer') }}</a></li>
                        <li><a href="javascript:void(0)" onclick="new bootstrap.Modal(document.getElementById('mobileModal')).show()">{{ webTrans('my_returns', 'footer') }}</a></li>
                        @endauth
                    </ul>
                </div>

                <div class="col-6 col-lg-3 footer-col">
                    <h5 class="footer-heading">{{ webTrans('help_contact', 'footer') }}</h5>
                    <ul class="list-unstyled footer-list">
                        <li><a href="{{ route('frontend.help') }}">{{ webTrans('help_topics', 'footer') }}</a></li>
                        <li><a href="{{ route('frontend.contact') }}">{{ webTrans('contact_us', 'footer') }}</a></li>
                        <li><a href="{{ route('frontend.faq') }}">{{ webTrans('faq', 'footer') }}</a></li>
                    </ul>
                </div>

            </div>

            <!-- Social Icons (after all 4 menu columns) -->
            <div class="social-icons-wrapper footer-social-row">
                @forelse ($socialLinks as $socialLink)
                <a href="{{ $socialLink->url }}" class="social-icon" target="_blank" rel="noopener noreferrer">
                    <img src="{{ asset($socialLink->icon_path) }}" alt="{{ $socialLink->platform }}">
                </a>
                @empty
                <a href="#" class="social-icon"><i class="fab fa-facebook-f text-white"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-twitter text-white"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-instagram text-white"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-youtube text-white"></i></a>
                <a href="#" class="social-icon"><i class="fab fa-tiktok text-white"></i></a>
                @endforelse
            </div>
        </div>

        <!-- Copyright Section -->
        <div class="copyright-container text-center">
            <p class="copyright-text mb-0">
                {{ webTrans('copyright', 'footer') }} {{ date('Y') }} Majarat Shop Inc.
                {{ webTrans('all_rights_reserved', 'footer') }}
                <a href="#" class="copyright-link">{{ webTrans('user_agreement', 'footer') }}</a>,
                <a href="#" class="copyright-link">{{ webTrans('privacy', 'footer') }}</a>
                {{ webTrans('and', 'footer') }}
                <a href="#" class="copyright-link">{{ webTrans('cookies', 'footer') }}</a>.
            </p>
        </div>

    </div>
</footer>