<footer class="site-footer">
    <div class="footer-container">

        <!-- TOP ROW -->
        <div class="footer-top">
            <a href="{{ route('index') }}" class="footer-logo" title="footer-logo">BuzzStream</a>

            <div class="footer-social">
                <a href="#" title="twitter">
                    <img src="{{ asset('assets/images/twitter.webp') }}" alt="X" class="icon">
                </a>

                <a href="#" title="facebook">
                    <img src="{{ asset('assets/images/facebook.webp') }}" alt="facebook" class="icon">
                </a>

                <a href="#" title="reddit">
                    <img src="{{ asset('assets/images/reddit.webp') }}" alt="reddit" class="icon">
                </a>

                <a href="#" title="Medium">
                    <img src="{{ asset('assets/images/medium.webp') }}" alt="Medium" class="icon">
                </a>
            </div>

        </div>

        <!-- <hr class="custom-line b"> -->

        <!-- BOTTOM ROW -->
        <div class="footer-columns">

            <!-- COLUMN 1 -->
            <div class="footer-col">
                <h4>About BuzzStream</h4>
                <p>
                    BuzzStream delivers accurate, timely, and engaging news from around
                    the world, keeping readers informed and empowered.
                </p>
            </div>

            <!-- COLUMN 2 -->
            <div class="footer-col">
                <h4>Top Categories</h4>
                @foreach($navCategories as $category)
                    <ul>
                        <li><a href="{{ route('category.show', $category->slug) }}" title="{{ $category->category_name }}">
                                {{ $category->category_name }}
                            </a></li>
                    </ul>
                @endforeach
            </div>

            <!-- COLUMN 3 -->
            <div class="footer-col">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="{{ route('about') }}" title="about">About Us</a></li>
                    <li><a href="#" title="contact">Contact</a></li>
                    <li><a href="{{ route('privacyPolicy') }}" title="privacy">Privacy Policy</a></li>
                    <li><a href="#" title="terms">Terms & Conditions</a></li>
                </ul>
            </div>

        </div>

    </div>
    <div class="footer-bottom">
        <p>©Foxiz.com.All rights reserved</p>
    </div>
</footer>
