<!--
  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
  Read the documentation to get started: https://tailwindui.com/documentation
-->

{%- set section = get_section(path="_index.md") %}

{% set subsections_str = section.subsections | join(sep=" ") %}

<footer class="bottom-0">
    {% if "footer/_index.md" in subsections_str %}
        {%- set section = get_section(path="footer/_index.md") %}
        {{ section.content | safe }}
    {% else %}
        {% set footer_class = config.extra.footer_class | default(value='') %}
        <div class="{{ footer_class }}">
            <div class="py-4 px-4 sm:px-6">
                <div class="lg:flex lg:gap-4">
                  <div class="space-y-8 lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
                    <img class="w-1/2 lg:mx-4 mb-4" src="/images/logo_black.png" alt="incubaid Logo" />
                    </div>
                    <div class="lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
                        <p class="subheader text-xl">Location</p>
                        <p class="mt-0">
                            Mbweni Ruins - Unguja Urban West<br>
                            Zanzibar - Republic of Tanzania<br>
                            <a href="https://www.google.com/maps/place/Jungle+Paradise+Beach+Resort+%26+Spa/@-6.2103755,39.1995418,16z/data=!4m9!3m8!1s0x185cdbdfdb5b2215:0x4a79d84b9b2ea768!5m2!4m1!1i2!8m2!3d-6.2103759!4d39.2018475!16s%2Fg%2F11q956rnn4" target="_blank">Find us here on Google maps</a>
                        </p> 
                    </div>
                    <div class="lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
                        <p class="subheader text-xl">CONTACT</p>
                        <p class="mt-0">
                            +255 778 242424 (WhatsApp)<br>
                            info@jungleparadise.tf
                        </p> 
                    </div>
                    <div class="lg:max-w-sm lg:mr-8 lg:mb-2 lg:col-span-1">
                        <p class="subheader text-xl">HOURS</p>
                        <p class="mt-0">
                            Reception: 24 Hours<br>
                            Check-in: after 3pm <br>
                            Check-out: before 11am
                        </p> 
                    </div>
                </div>
            </div>
            {# <img src="{{get_url(path='images/')}}" class="w-60" alt=""> #}
            <hr class="my-4 border-y-0 w-1/2 border-blue-500/50">
            <div class="mx-4 text-center">
            <p class="text-base pt-4 my-0">&#169; 2022 Jungle Paradise Beach Resort & SPA <a href="https://threefold.io/" target="_blank" class="hard_blue my-0 text-base">Terms & Conditions</a></p>
            
            </div>
        </div>
    {% endif %}
</footer>


<style>

    .subheader {
        font-family: 'Lato', sans-serif;
        font-weight: 400;
        color: #4173a1;
        margin: 0;
    }
</style>

