@inject('SectionService', 'App\Services\SectionService')
@inject('Service', 'App\Services\Service')
@php
$productsData = $SectionService->get('products');
$servicesData = $SectionService->get('services');
$resources = $Service->get('resources_a');
$engage = $Service->get('resources_c');
@endphp

<!-- Footer -->
<hr>
<footer class="footer container">
    <!-- First Row -->
    <div class="row">
        <!-- Column: Why Polisplexity (12 columns on all screen sizes, but full width on small screens) -->
        <div class="col-12 col-md-4 mb-4">
            <ul class="list-unstyled">
                <li>Why Polisplexity</li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Our Mission</a></li>
                <li><a href="#">Success Stories</a></li>
            </ul>
        </div>

        <!-- Column: Products and Pricing (12 columns on all screen sizes, but full width on small screens) -->
        <div class="col-12 col-md-2 mb-4">
            <ul class="list-unstyled">
                <li>Products and Pricing</li>
                @if (!empty($productsData['techClasses']))
                    @foreach ($productsData['techClasses'] as $tech)
                        @if (isset($tech['name']))
                            <li>
                                <a href="#">
                                    <small class="mb-1">{{ $tech['name'] }}</small>
                                </a>
                            </li>
                        @endif
                    @endforeach
                @else
                    <li>No products available.</li>
                @endif
            </ul>
        </div>

        <!-- Column: Solutions (12 columns on all screen sizes, but full width on small screens) -->
        <div class="col-12 col-md-2 mb-4">
            <ul class="list-unstyled">
                <li>Solutions</li>
                @if (!empty($servicesData['serviceClasses']))
                    @foreach ($servicesData['serviceClasses'] as $service)
                        @if (isset($service['name']))
                            <li>
                                <a href="#">
                                    <small class="mb-1">{{ $service['name'] }}</small>
                                </a>
                            </li>
                        @endif
                    @endforeach
                @else
                    <li>No services available.</li>
                @endif
            </ul>
        </div>

        <!-- Column: Resources (12 columns on all screen sizes, but full width on small screens) -->
        <div class="col-12 col-md-2 mb-4">
            <ul class="list-unstyled">
                <li>Resources</li>
                @if (!empty($resources['group1']))
                    @foreach ($resources['group1'] as $resource)
                        @if (isset($resource['title']))
                            <li>
                                <a href="#">
                                    <small class="mb-1">{{ $resource['title'] }}</small>
                                </a>
                            </li>
                        @endif
                    @endforeach
                @else
                    <li>No resources available.</li>
                @endif
            </ul>
        </div>

        <!-- Column: Engage (12 columns on all screen sizes, but full width on small screens) -->
        <div class="col-12 col-md-2 mb-4">
            <ul class="list-unstyled">
                <li>Engage</li>
                @if (!empty($engage))
                    @foreach ($engage as $item)
                        @if (isset($item['title']))
                            <li>
                                <a href="#">
                                    <small class="mb-1">{{ $item['title'] }}</small>
                                </a>
                            </li>
                        @endif
                    @endforeach
                @else
                    <li>No engagement opportunities available.</li>
                @endif
            </ul>
        </div>
    </div>

    <!-- Second Row -->
    <div class="row">
        <!-- Links related to About, Privacy, Terms, Sustainability (12 columns on all screen sizes, but full width on small screens) -->
        <div class="col-12 col-md-3 mb-4">
            <div class="container">
                <a href="#">About Polisplexity</a> |
                <a href="/privacy">Privacy</a> |
                <a href="/site-terms">Site Terms</a> |
                <a href="/hadox-terms">Polisplexity Terms</a>
            </div>
        </div>

        <!-- Links related to Our Sustainability Stand (12 columns on all screen sizes, but full width on small screens) -->
        <div class="col-12 col-md-3 mb-4 text-end">
            <div class="container">
                <a href="#"><span class="material-symbols-outlined">eco</span>Our Sustainability Stand</a>
            </div>
        </div>
    </div>

    <!-- Third Row as Navbar: Newsletter Subscription and Language Selection (12 columns on all screen sizes, but full width on small screens) -->
    <div class="container">
        <ul class="nav justify-content-end mr-auto">
            <li class="nav-item">
                Sign up for our Newsletter
            </li>
            <li class="nav-item">
                <a class="btn btn-outline-dark">Subscribe</a>
            </li>
            <li class="nav-item">
                <label for="language" class="navbar-text">Language:</label>
            </li>
            <li class="nav-item">
                <select id="language" class="form-select">
                    <option>English</option>
                    <option>Spanish</option>
                </select>
            </li>
        </ul>
    </div>
</footer>