<script>

    // import Facebook from "svelte-material-icons/Facebook.svelte"
    // import Twitter from "svelte-material-icons/Twitter.svelte"
    // import Instagram from "svelte-material-icons/Instagram.svelte"
    // import Youtube from "svelte-material-icons/Youtube.svelte"
    // import { Facebook, Twitter, Instagram, Youtube } from "@iconify/svelte";
    import {t, locale} from "$lib/translations.js";



</script>
<section class="social-media pt-2 bg-blue-900">

    <div class="max-w-6xl m-auto flex flex-row items-center justify-center h-8  text-white space-x-2 ">
        <h3 class="uppercase text-xl font-bold mx-6">{$t('common.follow-us')}</h3>

        <!-- <Facebook color="white" size="26"/>
        <Twitter color="white" size="26"/>
        <Instagram color="white" size="26"/>
        <Youtube color="white" size="26"/> -->

    </div>
</section>
<footer class="footer   pt-2 bg-[#33418E] lg:h-80 px-4 lg:px-0">
    <div class="max-w-6xl m-auto grid grid-cols-1 lg:grid-cols-5   text-gray-200 text-md gap-2 mt-4  py-12 lg:py-0">
        <div class="col-1 ">
            <img src="/favicon.png" class="h-24 " alt="">
            <h3 class="text-white mt-2 text-lg font-bold uppercase">{$t('common.contact-us')}</h3>

            <div class="text-left mt-2 flex flex-row space-x-4 items-center">

                <span class=" text-gray-300 text-justify">
                     {$t('common.address')}
                </span>

            </div>


            <p class="text-left flex flex-row items-center space-x-4 ">


                <a href="mailto:info@afghancricket.af" class="text-sm text-gray-300" style="direction: ltr;">
                    <span class="font-bold">E-mail:</span> info@afghancricket.af
                </a>

            </p>

        </div>
        <div class="col-1 lg:pl-8">
            <h3 class="text-white mt-2 text-lg font-bold uppercase mb-4">{$t('common.matches')}</h3>
            <ul class="flex flex-col space-y-1">
                <li class="text-sm">{$t('common.domestic')}</li>
                <li class="text-sm">{$t('common.international')}</li>
            </ul>
        </div>
        <div class="col-1">
            <h3 class="text-white mt-2 text-lg font-bold uppercase mb-4">{$t('common.videos')}</h3>
            <ul class="flex flex-col space-y-1">
                <li class="text-sm">{$t('common.latest')}</li>
                <li class="text-sm">{$t('common.highlights')}</li>
                <li class="text-sm">{$t('common.features')}</li>
                <li class="text-sm">{$t('common.interviews')}</li>
            </ul>
        </div>
        <div class="col-1">
            <h3 class="text-white mt-2 text-lg font-bold uppercase mb-4">{$t('common.media')}</h3>
            <ul class="flex flex-col space-y-1">
                <li class="text-sm">{$t('common.news')}</li>
                <li class="text-sm">{$t('common.articles')}</li>
                <li class="text-sm">{$t('common.press-release')}</li>
                <li class="text-sm">{$t('common.conferences')}</li>
            </ul>
        </div>
        <div class="col-1">
            <h3 class="text-white mt-2 text-lg font-bold uppercase mb-4">{$t('common.about-acb')}</h3>
            <ul class="flex flex-col space-y-1">
                <li class="text-sm">{$t('common.history')}</li>
                <li class="text-sm">{$t('common.anti-corruption')}</li>
                <li class="text-sm">{$t('common.anti-doping')}</li>

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

</footer>
<div class="h-8 bg-sky-500">
    <div class="max-w-6xl m-auto flex flex-row items-center justify-center h-8  text-white gap-4">

        <div class="text-sm font-bold">
            &copy; Copyright ACB
        </div>

        <div class="hidden lg:flex">
            <ul class="flex flex-row  text-sm font-bold gap-4">
                <li>
                    <a href="/">
                        {$t('common.history')}
                    </a>
                </li>
                <li>
                    <a href="/">
                        {$t('common.chairman-office')}
                    </a>
                </li>
                <li>
                    <a href="/">
                        {$t('common.ceo-office')}
                    </a>

                </li>
                <li>
                    <a href="/">
                        {$t('common.management-board')}
                    </a>

                </li>
                <li>
                    <a href="/">
                        {$t('common.terms-and-conditions')}
                    </a>

                </li>

                <li>
                    <a href="/">
                        {$t('common.privacy-policy')}
                    </a>

                </li>
            </ul>
        </div>
    </div>
</div>