<footer class="bd-footer">
    {{-- Top info blocks --}}
    <div class="bd-footer-top">
        <div class="container">
            <div class="row g-4">
                {{-- Block 1 --}}
                <div class="col-md-4">
                    <h5 class="bd-footer-title">
                        {{ getOption('footer_block1_title') ?: 'Digital Trade Fair' }}
                    </h5>
                    <p class="bd-footer-text mb-0">
                        {!! nl2br(e(getOption('footer_block1_text')
                            ?: 'এই সাইট থেকে আপনি অনলাইনে নানান ব্র্যান্ডের পণ্য এক জায়গায় দেখে, তুলনা করে, অফার সহকারে অর্ডার করতে পারবেন।')) !!}
                    </p>
                </div>

                {{-- Block 2 --}}
                <div class="col-md-4">
                    <h5 class="bd-footer-title">
                        {{ getOption('footer_block2_title') ?: 'Buyers' }}
                    </h5>
                    <p class="bd-footer-text mb-0">
                        {!! nl2br(e(getOption('footer_block2_text')
                            ?: 'ক্রেতারা এখানে নিরাপদে অর্ডার করতে পারবেন, হটলাইন ও সাপোর্ট টিম থেকে প্রয়োজনীয় সাহায্যও পাবেন।')) !!}
                    </p>
                </div>

                {{-- Block 3 --}}
                <div class="col-md-4">
                    <h5 class="bd-footer-title">
                        {{ getOption('footer_block3_title') ?: 'Sellers' }}
                    </h5>
                    <p class="bd-footer-text mb-0">
                        {!! nl2br(e(getOption('footer_block3_text')
                            ?: 'আপনার পণ্য অনলাইনে বিক্রি করতে চাইলে আমাদের সাথে যোগাযোগ করুন – সহজেই নিজের স্টোর খুলে নিন।')) !!}
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- Bottom bar --}}
    <div class="bd-footer-bottom">
        <div class="container">

            {{-- Links + App badges --}}
            <div class="row gy-3 align-items-start">
                <div class="col-md-8">
                    <div class="row">
                        {{-- Important --}}
                        <div class="col-6">
                            <h6 class="bd-footer-links-title mb-2">Important</h6>
                            <div class="bd-footer-link-list">
                                <a href="{{ route('about-us') }}">About</a>
                                <a href="{{ route('contact-us') }}">Contact Us</a>
                                <a href="{{ route('faq') }}">FAQ</a>
                            </div>
                        </div>

                        {{-- Legal --}}
                        <div class="col-6">
                            <h6 class="bd-footer-links-title mb-2">Legal</h6>
                            <div class="bd-footer-link-list">
                                <a href="{{ route('terms-and-condition') }}">Terms</a>
                                <a href="{{ route('privacy-policy') }}">Privacy</a>
                                <a href="{{ route('exchange-return') }}">Exchange Return Policy</a>
                                <a href="{{ route('loyality-program') }}">Loyality Program</a>
                                <a href="{{ route('delivary-policy') }}">Delivary-Policy</a>
                                <a href="{{ route('payment-policy') }}">Payment Policy</a>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- App badges --}}
                <div class="col-md-4 text-md-end">
                    <span class="me-2">Get our app:</span>
                    <span class="badge bg-dark me-2">Google Play</span>
                    <span class="badge bg-dark">App Store</span>
                </div>
            </div>

            {{-- Copyright bottom line --}}
            <div class="row mt-3">
                <div class="col-12 text-center">
                    <span>
                        {{ getOption('copyright_text')
                            ?: ('© ' . date('Y') . ' MyCommerce. All rights reserved.') }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</footer>

{{-- Footer link styles --}}
<style>
    .bd-footer-links-title {
        font-weight: 600;
        color: #ffffff;
        font-size: 0.95rem;
    }

    .bd-footer-link-list a {
        display: block;            /* প্রতিটা লিংক আলাদা লাইনে */
        margin-bottom: 4px;
        font-size: 0.9rem;
        color: #ffffff;
        text-decoration: none;     /* underline নেই */
    }

    .bd-footer-link-list a:hover {
        color: #ffffff;
        text-decoration: none;     /* hover এও underline নেই */
    }

    @media (max-width: 767.98px) {
        .bd-footer-link-list a {
            margin-bottom: 2px;
        }
    }
</style>
