<footer  id="siteFooter" class="bg-[#020617] text-white">

    <div class="max-w-7xl mx-auto px-6 py-16">

        <div class="grid grid-cols-1 md:grid-cols-4 gap-12">

            <!-- BRAND -->
            <div class="md:col-span-1">

                <a href="/driftly/public/" data-link class="flex items-center gap-3 mb-6">

                    <img src="/driftly/public/assets/img/general/<?= htmlspecialchars(setting('site_footer_logo', 'logo-footer.png')) ?>"
                        alt="<?= htmlspecialchars(setting('site_name', 'Driftly')) ?>" class="h-10 w-auto">

                </a>

                <p class="text-slate-400 leading-7 mb-6">
                    <?= htmlspecialchars(setting(
                        'footer_about',
                        'A modern ride sharing marketplace for riders, drivers and communities.'
                    )) ?>
                </p>
                <div class="flex items-center gap-4">

                    <a href="<?= htmlspecialchars(setting('facebook_url', '#')) ?>" target="_blank"
                        class="w-11 h-11 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center hover:bg-[#06B6D4]/20 hover:border-[#06B6D4]/30 transition duration-300 group">
                        <i class="fa-brands fa-facebook-f text-slate-300 group-hover:text-white transition"></i>
                    </a>

                    <a href="<?= htmlspecialchars(setting('instagram_url', '#')) ?>" target="_blank"
                        class="w-11 h-11 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center hover:bg-[#06B6D4]/20 hover:border-[#06B6D4]/30 transition duration-300 group">
                        <i class="fa-brands fa-instagram text-slate-300 group-hover:text-white transition"></i>
                    </a>

                    <a href="<?= htmlspecialchars(setting('linkedin_url', '#')) ?>" target="_blank"
                        class="w-11 h-11 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center hover:bg-[#06B6D4]/20 hover:border-[#06B6D4]/30 transition duration-300 group">
                        <i class="fa-brands fa-linkedin-in text-slate-300 group-hover:text-white transition"></i>
                    </a>

                </div>

            </div>

            <!-- PRODUCT -->
            <div>

                <h4 class="font-bold text-lg mb-6">
                    Product
                </h4>

                <div class="space-y-4 text-slate-400">

                    <a href="/driftly/public/" data-link class="block hover:text-white transition">
                        Find a ride
                    </a>

                    <a href="/driftly/public/register" data-link class="block hover:text-white transition">
                        Become a driver
                    </a>

                    <a href="/driftly/public/login" data-link class="block hover:text-white transition">
                        Login
                    </a>

                </div>

            </div>

            <!-- COMPANY -->
            <div>

                <h4 class="font-bold text-lg mb-6">
                    Company
                </h4>

                <div class="space-y-4 text-slate-400">

                    <a href="#" class="block hover:text-white transition">
                        About
                    </a>

                    <a href="#" class="block hover:text-white transition">
                        Contact
                    </a>

                    <a href="#" class="block hover:text-white transition">
                        Support
                    </a>

                </div>

            </div>

            <!-- CONTACT -->
            <div>

                <h4 class="font-bold text-lg mb-6">
                    Contact
                </h4>

                <div class="space-y-5 text-slate-400">

                    <div class="flex items-start gap-3">

                        <div
                            class="w-10 h-10 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center shrink-0">
                            <i data-lucide="mail" class="w-5 h-5 text-[#06B6D4]"></i>
                        </div>

                        <div>
                            <div class="text-sm text-slate-500 mb-1">
                                Support email
                            </div>

                            <a href="mailto:<?= htmlspecialchars(setting('support_email', 'support@driftly.com')) ?>"
                                class="hover:text-white transition">
                                <?= htmlspecialchars(setting('support_email', 'support@driftly.com')) ?>
                            </a>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- BOTTOM -->
        <div class="border-t border-white/10 mt-16 pt-8 flex flex-col md:flex-row items-center justify-between gap-5">

            <div class="text-slate-500 text-sm text-center md:text-left">

                ©
                <?= date('Y') ?>
                <?= htmlspecialchars(setting('site_name', 'Driftly')) ?>.

                <?= htmlspecialchars(setting(
                    'footer_copyright',
                    'All rights reserved.'
                )) ?>

            </div>

            <div class="flex items-center gap-4 text-slate-500 text-sm">

                <span>
                    Built for modern ride sharing
                </span>

                <span class="w-1.5 h-1.5 bg-[#06B6D4] rounded-full"></span>

                <span>
                    Powered by
                    <?= htmlspecialchars(setting('site_name', 'Driftly')) ?>
                </span>

            </div>

        </div>

    </div>
</footer>