<!-- Footer -->
<footer class="f-bg-dark  text-white pt-5 pb-4 ">
    <div class="container">
        <div class="row ">
            <!-- Column 1: Logo -->
            <div class="col-md-2 col-lg-2 col-xl-2 mx-auto me-5">
                <div class="bg-light d-md-flex align-items-center justify-content-center p-1">
                    <?= $this->Html->image($appSettings['SITE-LOGO'], ['class' => "img-fluid f-nav-logo mb-2"]) ?>
                </div>
                <?php foreach ($menus as $menu) { ?>
                    <?php if ($menu->slug == 'about-us') { ?>
                        <p><?= $this->Text->truncate(strip_tags($menu->content??''), 150, ['ellipsis' => '', 'exact' => false]) ?>
                        </p>
                    <?php } ?>
                <?php } ?>
            </div>

            <!-- Column 2: Quick Links -->
            <?php foreach ($footerMenus as $footerMenu) { ?>
                <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mb-4">
                    <h6 class="text-uppercase font-weight-bold"> <?= h($footerMenu->name) ?></h6>
                    <hr class="mb-2 mt-0 d-inline-block mx-auto hr-1">

                    <?php foreach ($footerMenu->child_menus as $footerChildMenu) { ?>
                        <p><a href="<?= $this->Url->build(['controller' => $footerMenu->slug, 'action' => $footerChildMenu->slug]) ?>"
                                class="text-white">
                                <?= h($footerChildMenu->name) ?>
                            </a>
                        </p>

                    <?php } ?>

                </div>
            <?php } ?>

            <!-- Column 4: Contact Info and Social Links -->
            <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mb-4">
                <h6 class="text-uppercase font-weight-bold">Contact</h6>
                <hr class="mb-2 mt-0 d-inline-block mx-auto hr-1">

                <!-- Contact with Icons inside circles -->
                <div class="row mb-3">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-xl-2 col-xxl-2 pt-2">
                        <span class="contact-icon home-icon"><i class="bi bi-house-fill fs-5"></i></span>
                    </div>
                    <div class="col-xs-10 col-sm-10 col-md-10 col-xl-10 col-xxl-10 mt-2">
                        <?= $contacts->address1 ?> <br /> <?= $contacts->address2 ?>
                    </div>
                </div>

       
                <div class="row mb-3">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-xl-2 col-xxl-2 pt-2">
                        <span class="contact-icon email-icon"><i class="bi bi-envelope-fill fs-5"></i></span>
                    </div>
                    <div class="col-xs-10 col-sm-10 col-md-10 col-xl-10 col-xxl-10 mt-2">
                        <?= h($contacts->email1) ?>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-xl-2 col-xxl-2 pt-2">
                        <span class="contact-icon phone-icon"><i class="bi-phone-fill fs-5"></i></span>

                    </div>
                    <div class="col-xs-10 col-sm-10 col-md-10 col-xl-10 col-xxl-10 mt-2">
                        <?= h($contacts->phone1) ?>
                    </div>
                </div>
                <hr class="mb-2 mt-0 d-inline-block mx-auto hr-1">

                <!-- Social Links below contact info -->
                <h6 class="text-uppercase font-weight-bold mt-4">Follow us</h6>
                <a href="<?=$contacts->facebook?>" class="text-white me-4 fs-5 social-icon facebook"><i class="bi bi-meta"></i></a>
                <a href="<?=$contacts->twitter?>" class="text-white me-4 fs-5 social-icon twitter"><i class="bi bi-twitter-x"></i></a>
                <a href="javascript:void(0)" class="text-white me-4 fs-5 social-icon instagram"><i class="bi bi-instagram"></i></a>
                
                 <div class="row">
                    <div class="col-xs-1 col-sm-1 col-md-1 col-xl-1 col-xxl-1 me-3" >
                        <a id="whatsapp-link" target="_blank" aria-label="Chat on WhatsApp" href="https://wa.me/<?= $contacts->whatsapp ?>">
                        <?= $this->Html->image('WhatsAppButtonGreenSmall.jpg');?>
                        </a>
                      
                    </div>
                </div>
                
            </div>
        </div>
    </div>


</footer>

<div class="bg-black p-3">
    <div class="container text-white">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-xl-12 col-xxl-12 d-flex justify-content-center">
                <p class="mb-0">&copy; <?php echo date("Y"); ?> <?= $appSettings['SITE-NAME']; ?>. All rights reserved.
                </p>
            </div>

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