---
import { getLangFromUrl, useTranslations } from '../i18n/utils';

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<main>
        <div class="bg-neutral-300 text-black text-left">
            <div class="container mx-auto py-4 px-3">
                <div class="grid items-start grid-cols-1 md:grid-cols-6 lg:grid-cols-8 gap-4 container mx-auto">
                    <div class="md:col-span-2">
                        <img src="/img/logo.svg" class="mb-3" alt="La Gran Carpa Catedral, Corp." />
                        <p>Carretera No.1 Km 54.5<br />
                            Barrio Monte Llano<br />
                            Cayey, Puerto Rico<br />
                            00736</p>
                        <p><i class="fa fa-phone mr-2"></i>+1 787 738 2651</p>
                        <div class="flex gap-3 pt-2">
                            <!-- <span v-for="network in networks">
                                <div class="tooltip" :data-tip="network.title">
                                <a href="network.url" :title="network.title" target="_blank">
                                    <Icon :name="network.icon" class="text-2xl" :class="network.color" />
                                </a>
                                </div>
                            </span> -->
                        </div>
                    </div>
                    <div class="md:col-span-4">
                        <div class="grid grid-cols-3 sm:grid-cols-2 lg:grid-cols-3 gap-3 mb-3">
                            <div class="bg-carpablue rounded-lg overflow-hidden shadow-lg aspect-video object-cover">
                                <img
                                    src="https://actividadeswp.carpa.com/wp-content/uploads/2021/07/GCC_Mont-0521-scaled-1.jpg" alt="La Gran Carpa Catedral, Corp." />
                            </div>
                            <div class="bg-carpablue rounded-lg shadow-lg overflow-hidden aspect-video object-cover">
                                <img
                                    src="https://actividadeswp.carpa.com/wp-content/uploads/2021/07/gran_carpa_catedral_domingo_27_de_octubre.jpg" alt="La Gran Carpa Catedral, Corp."/>
                            </div>
                            <div class="bg-carpablue rounded-lg shadow-lg overflow-hidden aspect-video object-cover">
                                <img src="https://actividadeswp.carpa.com/wp-content/uploads/2021/07/15-scaled-2.jpg" alt="La Gran Carpa Catedral, Corp." />
                            </div>
                        </div>
                        <div class="text-right">
                            <!-- <RouterLink :to="{ name: 'galleries' }"><v-btn variant="tonal">
                                    { t('footer.more_galleries') }
                                </v-btn></RouterLink> -->
                        </div>
                    </div>
                    <div class="md:col-span-2">
                        
                        <ul class="menu hidden lg:block rounded-box [&_li>*]:rounded-none p-0">
                            <li>
                                <div class="tooltip" :data-tip="t('nav.home')">
                                    <a class="uppercase mx-2" :to="localePath('/')" :title="t('nav.home')">{ t("nav.home") }</a>
                                </div>
                                
                            </li>
                            <li>
                                <div class="tooltip" :data-tip="t('nav.activities')">
                                    <a class="uppercase mx-2" :to="localePath('/activities')" :title="t('nav.activities')">{ t("nav.activities")}</a>
                                </div>
                            </li>
                            <li>
                                <div class="tooltip" :data-tip="t('nav.conferences')">
                                    <a class="uppercase mx-2" :to="localePath('/conferences')" :title="t('nav.conferences')">{
                                    t("nav.conferences") }</a>
                                </div>
                            </li>
                            <li>
                                <div class="tooltip" :data-tip="t('nav.print')">
                                    <a class="uppercase mx-2" href="https://imprenta.carpa.com"
                                        target="_blank" :title="t('nav.print')">{ t('nav.print') }</a>
                                </div>
                            </li>
                            <li>
                                <div class="tooltip" :data-tip="t('nav.donations')">
                                    <a class="uppercase mx-2" href="https://donacionlgccc.com/"
                                        target="_blank" :title="t('nav.donations')">{ t('nav.donations') }</a>
                                </div>
                            </li>
                            <li>
                                <div class="tooltip" :data-tip="t('nav.bibleschool')">
                                    <a class="uppercase mx-2" href="https://escuelabiblicadeninos.com/"
                                        target="_blank" :title="t('nav.bibleschool')">{ t('nav.bibleschool') }</a>
                                </div>
                            </li>
                            <li>
                                <div class="tooltip" :data-tip="t('nav.live')">
                                    <a class="uppercase mx-2" :to="localePath('/live')" title="live">{ t("nav.live") }
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="tooltip" :data-tip="t('nav.search')">
                                    <a class="uppercase mx-2" :to="localePath('/search')" title="Search">{ t("nav.search") }
                                    </a>
                                </div>
                            </li>
                            
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-neutral-400 text-black text-center py-2">
            &copy; La Gran Carpa Catedral, Corp. 2024
        </div>
    </main>