<template>
    <div class=" p-6 lg:p-10 bg-[#313453] w-full flex items-center justify-center flex-col">
        <div class="flex flex-col lg:flex-row items-center">
            <div class=" lg:mr-10">
                <h1 class="text-[#d3d7e8] text-xl mt-2.5 text-center">Trust</h1>
                <img class="w-[120px] lg:w-[120px] rounded-[10px] mt-2.5" :src="bussines" alt="">
            </div>

            <div>
                <h1 class="text-[#d3d7e8] text-xl text-center mt-2.5">Connect with us</h1>
                <div class=" flex flex-row mt-2.5 ">
                    <img class="w-[40px] lg:w-[40px] ml-1" v-for="value in imgList" :src="value" alt="">
                </div>
            </div>
        </div>

        <span class=" text-[#d3d7e8] mt-3.5 lg:mt-10">@2025 Survey Junkie</span>
        <div class="w-[80%] flex items-center justify-center text-center mt-2.5">
            <span class=" text-[#d3d7e8]">Trademarks including "Survey Junkie" are the property of Survey Junkie, all rights reserved. All non-Survey Junkie owned trademarks appearing on this site are property of their respective owners.</span>
        </div>
    </div>
</template>

<script setup>
import bussines from '@/assets/register/business.jpg'
import ins from '@/assets/register/instagram.png'
import pin from '@/assets/register/pinterest.png'
import twitter from '@/assets/register/twitter.png'
import fb from '@/assets/register/facebook.png' 

const imgList = [ins,pin,twitter,fb]

</script>