{{-- ================= FOOTER ================= --}}
<footer class="site-footer">
    <div class="site-inner">
        <div class="row">


            <div class="col-md-3 footer-col">
                <img src="{{ asset('uploads/art-logo.png') }}" class="footer-logo">
            </div>

            <div class="col-md-3 footer-col">
                <h5>Artist</h5>
                <ul>
                    <li><a href="{{ \App\Models\SeoPage::url('artists', '/artists') }}">All Artists</a></li>
                    <li><a href="#">Featured Artists</a></li>
                </ul>
            </div>

            <div class="col-md-3 footer-col">
                <h5>Info</h5>
                <ul>
                    <li><a href="{{ \App\Models\SeoPage::url('about', '/about') }}">About</a></li>
                    <li><a href="{{ \App\Models\SeoPage::url('blog', '/blogs') }}">Blogs</a></li>
                    <li><a href="{{ \App\Models\SeoPage::url('contact', '/contact') }}">Contact</a></li>
                </ul>
            </div>

            <div class="col-md-3 footer-col">
                <h5>Contact</h5>
                <p>{!! nl2br(e($footerSetting->address)) !!}</p>
                <p><strong>Email:</strong><br>{{ $footerSetting->email }}</p>
                <p><strong>Phone:</strong><br>{{ $footerSetting->phone }}</p>
            </div>

        </div>
    </div>
</footer>

{{-- ================= POPULAR SEARCHES ================= --}}
@if(isset($popularSearches) && $popularSearches->count())
<section class="popular-searches">
    <div class="site-inner">

        <h6 class="popular-title">POPULAR SEARCHES</h6>
        <p class="popular-links">
            @foreach($popularSearches as $search)
                <a href="{{ $search->url ?? '#' }}">{{ $search->title }}</a>
                @if(!$loop->last) | @endif
            @endforeach
        </p>
    </div>
</section>
@endif

{{-- ================= FOOTER CMS CONTENT (FROM ADMIN) ================= --}}
@if(!empty($footerSetting?->top_content))
<section class="footer-extra-content">
    <div class="site-inner">

        {!! $footerSetting->top_content !!}
    </div>
</section>
@endif



<style>
    /* FIX BOOTSTRAP ROW OFFSET */
.site-footer .row,
.popular-searches .row,
.footer-extra-content .row {
    margin-left: 0;
    margin-right: 0;
}

/* OPTIONAL: cleaner column edges */
.site-footer [class^="col-"] {
    padding-left: 12px;
    padding-right: 12px;
}

    /* ALREADY USED SYSTEM */
.site-inner{
    padding-left: var(--desktop-padding);
    padding-right: var(--desktop-padding);
}

@media (max-width: 768px){
    .site-inner{
        padding-left: var(--mobile-padding);
        padding-right: var(--mobile-padding);
    }
}

/* ================= FOOTER ================= */
.site-footer {
    background: #8fa9a0;
    padding: 60px 0;
    color: #ffffff;
}

.footer-logo {
    max-width: 160px;
}

.footer-col h5 {
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 600;
    color: #ffffff;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.9;
}

.footer-col ul li a:hover {
    opacity: 1;
    text-decoration: underline;
}

.footer-col p {
    font-size: 14px;
    line-height: 1.6;
    color: #ffffff;
}

/* ================= FOOTER CMS CONTENT ================= */
.footer-extra-content {
    background: #8fa9a0; /* SAME AS FOOTER */
    padding: 40px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.footer-extra-content p,
.footer-extra-content li,
.footer-extra-content span,
.footer-extra-content a,
.footer-extra-content h1,
.footer-extra-content h2,
.footer-extra-content h3,
.footer-extra-content h4,
.footer-extra-content h5,
.footer-extra-content h6 {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    line-height: 1.8;
}

.footer-extra-content a {
    text-decoration: underline;
}

.footer-extra-content a:hover {
    color: #ffffff;
}

/* ================= POPULAR SEARCHES ================= */
.popular-searches {
    background: #8fa9a0;
    padding: 25px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.popular-title {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.popular-links {
    font-size: 13px;
    line-height: 1.8;
    color: #ffffff;
}

.popular-links a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.9;
    margin: 0 4px;
}

.popular-links a:hover {
    opacity: 1;
    text-decoration: underline;
}
</style>