<template>
    <div class=" w-full flex items-center justify-center">
        <div class="w-full lg:w-[70%] flex flex-col items-center">
            <img class="hidden lg:block w-full" :src="surfTop" alt="">
            <img class="lg:hidden w-full" :src="earnPhone1" alt="">
            
            <div @click="SignUpToSurveyJunkie" class="popup-social popup-surf">
                    Sign up to Survey Junkie
            </div>

            <div class="  mt-20 ml-2.5 mr-2.5">
                <el-carousel autoplay :height="isMobile ? '150px' : ''"  indicator-position="outside" @change="imgChange">
                    <el-carousel-item v-for="item in imgList1" :key="item">
                        <div class=" flex items-center justify-center">
                            <img  :src="item" class=" w-full" alt="">
                        </div>
                    </el-carousel-item>
                </el-carousel>
                <div v-if="!isMobile" class="flex flex-row">
                    <div v-for="(value,index) in imgContent" 
                        :style="{ backgroundColor: index == imgIndex ? 'rgb(192, 255, 247)' : '' }"
                        class=" p-8 rounded-2xl flex flex-col">
                        <div class=" font-bold text-[24px]">{{ value.tit }}</div>
                        <div class=" text-[14px] text-[#6c6c6c]">{{ value.con }}</div>
                    </div>
                </div>
                <div v-else class=" ml-2.5 mr-2.5">
                    <div v-show="index === imgIndex" v-for="(value,index) in imgContent" 
                        :style="{ backgroundColor: index == imgIndex ? 'rgb(192, 255, 247)' : '' }"
                        class=" p-5 rounded-2xl flex flex-col">
                        <div class=" font-bold text-[20px]">{{ value.tit }}</div>
                        <div class=" text-[14px] text-[#6c6c6c]">{{ value.con }}</div>
                    </div>
                </div>
            </div>

            <div class=" bg-gray-50 lg:bg-white flex w-full mt-20 p-5 flex-col lg:flex-row items-center">
                <div class="w-full lg:w-[50%]">
                    <el-carousel autoplay :height="isMobile ? '200px':''"  indicator-position="outside">
                        <el-carousel-item v-for="item in imgList2" :key="item">
                            <div class=" flex items-center justify-center">
                                <img  :src="item" class=" w-full" alt="">
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <div class="lg:ml-20 w-full lg:w-[40%]">
                    <h1 class=" text-[36px] font-bold">Things you search for</h1>
                    <span class=" text-[#6c6c6c] text-[20px]">you're searching for a grocery store <br>near you to stock up on some food.</span>
                </div>
            </div>

            <img class="lg:hidden w-full" :src="earnPhone2" alt="">
            <img class=" w-full mt-10" :src="isMobile ? earnPhone3 : surfMiddle" alt="">
            <img class=" w-full" :src="isMobile ? earnPhone4 : surfBottom" alt="">
            <img class="lg:hidden w-full" :src="earnPhone5" alt="">
        </div>
    </div>

</template>

<script setup>
import surf1 from '@/assets/surf/surfEarn1.png'
import surf2 from '@/assets/surf/surfEarn2.png'
import surf3 from '@/assets/surf/surfEarn3.png'
import surf4 from '@/assets/surf/surfEarn4.png'
import surf5 from '@/assets/surf/surfEarn5.png'
import surf6 from '@/assets/surf/surfEarn6.png'
import surf7 from '@/assets/surf/surfEarn7.png'
import surf8 from '@/assets/surf/surfEarn8.png'
import earnPhone1 from '@/assets/surf/earnPhone1.png'
import earnPhone2 from '@/assets/surf/earnPhone2.png'
import earnPhone3 from '@/assets/surf/earnPhone3.png'
import earnPhone4 from '@/assets/surf/earnPhone4.png'
import earnPhone5 from '@/assets/surf/earnPhone5.png'
import surfTop from '@/assets/surf/surfEarnTop.png'
import surfMiddle from '@/assets/surf/surfEarnMiddle.png'
import surfBottom from '@/assets/surf/surfEarnBottom.png'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import useWindowSize from '@/utils/useWindowSize.js'

const { isMobile } = useWindowSize()
const router = useRouter()
 
const imgList1 = [surf1,surf2,surf3]
const imgList2 = [surf4,surf5,surf6,surf7,surf8]
const imgContent = [
    {
        tit:"Automatic earnings",
        con:"Earn points automatically each month from data you choose to share while browsing and shopping online."
    },
    {
        tit:"Connect with brands",
        con:"Get access to exclusive surveys personalized to you from the brands and sites you visit."
    },
    {
        tit:"Learn about you",
        con:"Get insights on where you spend time surfing and how it compares with members like you."
    }
]
const imgIndex = ref(1)

const SignUpToSurveyJunkie = () => {
    router.back()
}

const imgChange = (index) => {
    imgIndex.value = index
}

</script>


<style scoped>

.popup-surf{
    background: #fff url('@/assets/icon.jpg') no-repeat 10px center;
    background-size: 35px 30px;
    color:#666;
    border: solid 1px #ccc;
}
.popup-social {
    text-align: center;
    font-size: 13.8px;
    font-family: 'Lato', sans-serif;
    margin: 15px 0 0;
    cursor: pointer;
    font-weight: 400;
    border-radius: 25px;
    line-height: 47px;
    width: 300px;
}
</style>