<template>
<div class="relative">
    <div class="hidden lg:block video-bg  pt-12">
        <iframe :src="embedUrl" frameborder="0" allow="autoplay; muted; loop; encrypted-media"></iframe>
        <!-- <div class="absolute top-12 z-40 opacity-30 bg-[green] left-24 right-24 h-[600px] pl-24 pr-24 pt-12">
        </div> -->
    
    <!-- <div class="mask mask-top-left"></div> -->
    <!-- <div class="mask mask-top-right"></div> -->
    <!-- <div class="mask mask-bottom-right"></div> -->

        <div @click="handleFabClick()" class="absolute top-100 left-24 right-24 hover:opacity-80 text-white flex justify-center items-center">
            <div  class="z-50 border pl-3 pr-3 pt-3 pb-3 rounded-sm">
                <strong>KLIK UNTUK RESERVASI</strong>
            </div>
        </div>
    </div>

    <div class="lg:hidden  w-full h-[400px] pt-4">
        <div><img class="h-[400px] w-full object-cover" :src="backImg" alt=""></div>
        <div class="absolute top-4 w-full z-40 opacity-30 bg-[green] h-[400px] pl-24 pr-24 pt-12">
        </div>
        <div class="absolute top-50 w-full hover:opacity-80 text-white flex justify-center items-center">
            <div @click="handleFabClick()" class="z-41 border pl-3 pr-3 pt-3 pb-3 rounded-sm">
                <strong class="hover:opacity-50">KLIK UNTUK RESERVASI</strong>
            </div>
        </div>
    </div>


    <div style="margin-top: -100px;" class=" absolute grid grid-cols-2 left-2.5 right-2.5 lg:left-60 lg:right-60 lg:h-50 rounded-2xl shadow bg-white z-41 lg:flex lg:flex-row lg:justify-between p-2.5">
        <div class="flex items-center flex-col justify-center lg:border-r border-gray-300 lg:w-[25%]">
            <div class="text-[#fcb029] lg:text-[60px] text-[40px] font-bold ">
                <count-to  :startVal="0" :endVal="10" :duration="3000"></count-to>
                <span>K+</span>
            </div>
            <div>Kunjungan Umrah</div>
        </div>
        <div class="flex items-center flex-col justify-center lg:border-r border-gray-300 lg:w-[25%]">
            <div class="text-[#fcb029] lg:text-[60px] text-[40px] font-bold">
                <count-to  :startVal="0" :endVal="99" :duration="3000"></count-to>
                <span>%</span>
            </div>
            <div>Kepuasan Pelanggan</div>
        </div>
        <div class="flex items-center flex-col justify-center lg:border-r border-gray-300 lg:w-[25%]">
            <div class="text-[#fcb029] lg:text-[60px] text-[40px] font-bold">
                <count-to  :startVal="0" :endVal="100" :duration="3000"></count-to>
                <span>+</span>
            </div>
            <div>Program Umrah</div>
        </div>
        <div class="flex items-center flex-col justify-center lg:w-[25%]">
            <div class="text-[#fcb029] lg:text-[60px] text-[40px] font-bold">
                <count-to  :startVal="0" :endVal="15" :duration="3000"></count-to>
                <span>+</span>
            </div>
            <div>Tahun Pengalaman</div>
        </div>
    </div>

    <div class="flex flex-col mt-40 lg:mt-50 font-bold text-[30px] lg:text-[50px] w-full justify-center items-center"><span>Paket Premium</span> <span>Umraza</span></div>

    <div class="flex justify-center items-center">
        <div class="lg:w-[1300px] flex flex-col lg:flex-row justify-center pb-20 pl-4 pr-4 lg:pl-10 lg:pr-10 mt-2.5">
            <div class="bg-[#00322FE6] rounded-2xl rounded-l-2xl rounded-bl-2xl lg:rounded-r-none  p-5 flex flex-col items-center lg:mt-24 lg:mb-24">
                <strong><span class="text-white text-[40px]">Rp 24.000.000</span></strong>
                <strong><span class="text-[#fcb029] text-[20px]">Harga kamar ganda per orang</span></strong>
                <strong><span class="text-white text-[18px] mt-5">{{tpTit1}}</span></strong>
                <strong><span class="text-white text-[18px]">{{tpTit2}}</span></strong>
                <div v-for="(value,index) in lTitList" class="w-full text-white border-b border-white flex flex-row items-center h-11">
                    <span class=" font-bold text-[20px] w-5">{{index<9 ? "✓":"☆"}}</span>
                    <span class="text-[16px] ml-2.5">{{value}}</span>
                </div>
                <div class="p-3 text-white text-[16px] text-center bg-[#fcb029] rounded-2xl mt-5">{{btnTit}}</div>
                <div class="text-white text-[16px] mt-5 text-center">{{btmTit1}}</div>
                <!-- <div class=" text-white text-[16px]">{{btmTit2}}</div> -->
            </div>
            <!--  -->
            <div class="bg-[#fcb029] rounded-2xl p-5 flex flex-col items-center mt-5 pb-10">
                <strong><span class="text-white text-[40px]">Rp</span></strong>
                <strong><span class="text-white text-[40px]">55.000.000</span></strong>
                <strong><span class="text-[#00322FE6] text-[20px]">Paket Haji Selama Musim Haji</span></strong>
                <strong><span class="text-white text-[18px]">{{tpTit1}}</span></strong>
                <strong><span class="text-white text-[18px]">{{tpTit2}}</span></strong>
                <div v-for="(value,index) in mdTitList" class="w-full text-white border-b border-black flex flex-row items-center h-11">
                    <span class=" font-bold text-[16px] text-white w-5">{{index<9 ? "✓":"☆"}}</span>
                    <span class="text-[18px] ml-2.5">{{value}}</span>
                </div>
                <div class="p-3 text-white text-[16px] text-center bg-[#00322FE6] rounded-2xl mt-5">{{btnTit}}</div>
                <div class="text-white text-[16px]  mt-5 text-center">{{btmTit1}}</div>
                <!-- <div class=" text-white text-[16px]">{{btmTit2}}</div> -->
            </div>
            <!--  -->
            <div class="bg-[#00322FE6] rounded-2xl rounded-r-2xl rounded-br-2xl lg:rounded-l-none p-5 flex flex-col items-center mt-5 lg:mt-24 lg:mb-24">
                <strong><span class="text-white text-[40px]">Rp 30.000.000</span></strong>
                <strong><span class="text-[#fcb029] text-[20px]">Paket Umrah Ramadan</span></strong>
                <strong><span class="text-white text-[18px] mt-5">{{tpTit1}}</span></strong>
                <strong><span class="text-white text-[18px]">{{tpTit2}}</span></strong>
                <div v-for="(value,index) in rTitList" class="w-full text-white border-b border-white flex flex-row items-center h-11">
                    <span class=" font-bold text-[20px] w-5">{{index<9 ? "✓":"☆"}}</span>
                    <span class="text-[16px] ml-2.5">{{value}}</span>
                </div>
                <div class="p-3 text-white text-[16px] text-center bg-[#fcb029] rounded-2xl mt-5">{{btnTit}}</div>
                <div class="text-white text-[16px] mt-5 text-center">{{btmTit1}}</div>
                <!-- <div class=" text-white text-[16px]">{{btmTit2}}</div> -->
            </div>
        </div>
    </div>

    <div class="flex text-center w-fulll justify-center text-3xl lg:text-6xl lg:mt-30 mb-15 font-bold text-black">JENIS KEHIDUPAN</div>
    <div class=" flex justify-center items-center">
        <div class="flex flex-col lg:grid lg:grid-cols-3 lg:gap-8 pl-4 pr-4 lg:pl-0 lg:pr-0">
            <div class="flex flex-col" v-for="(item,index) in imgList">
                <img class="w-full h-[250px] mt-8 lg:mt-0 rounded-t-2xl" :src="item.img" alt="">
                <strong><span class="text-[16px] leading-14">{{ item.tit1 }}</span></strong>
                <div class="flex text-[14px] w-full justify-center h-[50px] items-center border-t border-dashed border-black"><span>{{ item.tit2 }}</span></div>
                <div class="flex text-[14px] w-full justify-center h-[50px] items-center border-t border-gray-300"><span>{{ item.tit3 }}</span></div>
                <div class="flex text-[14px] w-full justify-center h-[50px] items-center border-t border-gray-300"><span>{{ item.tit4 }}</span></div>
                <div class="flex justify-center">
                    <div @click="chatAction" class="bg-[#69727D] rounded-sm justify-center items-center text-white text-[13px] p-4">untuk informasi lebih rinci</div>
                </div>
            </div>
        </div>
    </div>

    <div class="flex justify-center mt-20 lg:mt-50">
        <div class="lg:w-[1200px] flex-col lg:flex-row flex">
            <div class="lg:w-[33%] flex flex-col justify-evenly mr-4 p-4">
                <span class="text-[#3D3D3D] text-[14px]">Tentang Kami</span>
                <strong><span class="text-[#242424] text-2xl mt-5">Agen Perjalanan Umraza</span></strong>
                <span class="text-[#3D3D3D] text-[14px] mt-5">Agen Perjalanan Umraza adalah perusahaan pariwisata yang menawarkan layanan haji dan umrah terpercaya, mengutamakan kepuasan pelanggan dengan pendekatan layanan profesional. Menawarkan panduan profesional, akomodasi yang nyaman, transportasi pribadi, dan dukungan bimbingan keagamaan, Agen Perjalanan Umraza mengutamakan kepuasan pelanggan, merencanakan setiap detail dengan cermat.</span>
                <img class="w-full rounded-2xl mt-5" :src="homeMiddle1" alt=""></img>
                <img class="w-full rounded-2xl mt-5" :src="homeMiddle2" alt=""></img>
            </div>

            <div class="lg:w-[66%] grid grid-cols-1 lg:grid-cols-2 gap-8 p-4">
                <div class="flex flex-col rounded-2xl bg-[#7A7A7A]  text-white p-4" v-for="value in middleList">
                    <div class="bg-black h-px w-full mb-4 mt-4"></div>
                    <strong><span class="text-[24px]">{{value.tit}}</span></strong>
                    <span class="text-[14px] whitespace-pre-line">{{ value.con }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="flex justify-center">
        <div class="lg:w-[1200px] flex flex-col lg:flex-row mt-20 lg:mt-40 justify-evenly mb-20">
            <div :class="index < 2 ? 'lg:border-r border-gray-300' : ''" class="flex flex-col items-center p-4" v-for="(value,index) in bottomList">
                <strong><span class="text-xl leading-12">{{value.tit}}</span></strong>
                <span class="text-[14px] text-[#242424] leading-6">{{value.con}}</span>
            </div>
        </div>
    </div>

    <div class="lg:w-full bg-black flex flex-col lg:flex-row justify-between items-center pt-20 pb-20 pl-4 pr-4">
        <img class="lg:w-[300px] w-[200px]" :src="bottomLeft" alt="">
        <div class="flex flex-col items-center text-white">
            <div class="mt-2.5"><strong><span class="text-[18px] text-[#ffffffd1]">Agen Perjalanan Umraza</span></strong></div>
            <div class="mt-2.5"><strong><span class="text-[22px] leading-8">Pesan Perjalanan Suci Anda</span></strong></div>
            <strong><span class="text-[22px] leading-8">Sekarang!</span></strong>
            <div class="mt-2.5 text-center w-full lg:w-[500px]"><span class="text-[14px] leading-6 text-center text-[#ffffffcc]">Hubungi kami sekarang untuk mempelajari lebih lanjut tentang paket umrah kami dan melakukan reservasi. Nikmati pengalaman umrah yang tak terlupakan dengan pemandu berpengalaman dan layanan yang nyaman.</span></div>
            <div @click="handleFabClick()" class="p-3 border rounded-sm border-white text-[13px] mt-10">
                KLIK UNTUK RESERVASI
            </div>
            <div class="flex flex-row h-10 mt-5">
                <img @click="clickChat(index)" class="w-10 ml-1.5 hover:opacity-40" v-for="(value,index) in chatsImg" :src="value" alt="">
            </div>
        </div>
        <img class="lg:w-[400px] w-[300px]" :src="bottomRight" alt="">
    </div>

</div>

</template>

<script setup>
import { CountTo } from 'vue3-count-to';
import img1 from "@/assets/img1.jpg"
import img2 from "@/assets/img2.jpg"
import img3 from "@/assets/img3.jpg"
import img4 from "@/assets/img4.jpg"
import img5 from "@/assets/img5.jpg"
import img6 from "@/assets/img6.jpg"
import homeMiddle1 from "@/assets/homeMiddle1.png"
import homeMiddle2 from "@/assets/homeMiddle2.png"
import bottomLeft from "@/assets/bottomLeft.png"
import bottomRight from "@/assets/bottomRight.png"
import backImg from "@/assets/backImg.jpg"
import facebook from "@/assets/social/f.jpg"
import ins from "@/assets/social/ins.jpg"
import x from "@/assets/social/x.jpg"
import whats from "@/assets/social/whats.jpg"
import you from "@/assets/social/you.jpg"
import { handleFabClick } from '../utils/util';

const id = 'L-YyR1oN66w'
const embedUrl =
    `https://www.youtube.com/embed/${id}?autoplay=1&mute=1&controls=0&loop=1&playlist=${id}&playsinline=1&rel=0&modestbranding=1`

const mdTitList = [
    "TIKET PESAWAT",
    "Visa Haji",
    "Asuransi Perjalanan",
    "25 Hari 24 Malam",
    "Mekkah: 21 Hari 21 Malam",
    "Madinah: 4 Hari 3 Malam",
    "Tiga kali makan ala Indonesia",
    // "KUNJUNGAN KE MEKAH DAN MADINAH",
    "Kunjungan ke melah dan madinah",
    "LAYANAN KESEHATAN",
    "Ditemani pemandu pria dan wanita",
    "Kartu Haji Disediakan",
    "Paket Haji Lengkap"
]
const lTitList = [
    "Tiket pesawat",
    "Visa Haji",
    "Asuransi Perjalanan",
    "8 Hari 7 Malam",
    "Mekkah: 6 Hari 6 Malam",
    "Madinah: 2 Hari 1 Malam",
    "Tiga kali makan ala Indonesia",
    "Kunjungan ke Mekkah dan Madinah",
    "Layanan Kesehatan",
    "Ditemani pemandu pria dan wanita",
    "Kartu Haji Disediakan"
]
const rTitList = [
    "Tiket pesawat",
    "Visa Haji",
    "Asuransi Perjalanan",
    "11 Hari 10 Malam",
    "Mekkah: 9 Hari 9 Malam",
    "Madinah: 2 Hari 1 Malam",
    "Tiga kali makan ala Indonesia",
    "Kunjungan ke Mekkah dan Madinah",
    "Layanan Kesehatan",
    "Ditemani pemandu pria dan wanita",
    "Kartu Haji Disediakan",
]
const chatsImg = [
    facebook,
    x,
    ins,
    you,
    whats
]


const btnTit = "KLIK UNTUK INFORMASI LEBIH LANJUT"
const btmTit1 = "Hotel Kami Terletak Di Jabal Omar, Hanya 3 Menit Berjalan Kaki Dari Ka'bah."
// const btmTit2 = "Berjalan Kaki Dari Ka'bah."
const tpTit1 = "LAYANAN KAMI TERMASUK DALAM"
const tpTit2 = "HARGA"

const imgList = [
    {
        img:img1,
        tit1:"Paket Umrah 8 Hari",
        tit2:"Mekah 6 Hari, Madinah 2 Hari",
        tit3:"Saudi Arabian Airlines - Lion Air",
        tit4:"Rp 24.000.000"
    },
    {
        img:img2,
        tit1:"Paket Umrah 11 Hari",
        tit2:"Mekah 8 Hari, Madinah 3 Hari",
        tit3:"Saudi Arabian Airlines - Lion Air",
        tit4:"Rp 28.000.000"
    },
    {
        img:img3,
        tit1:"Paket Umrah Ramadan",
        tit2:"Mekah 9 Hari, Madinah 2 Hari",
        tit3:"Saudi Arabian Airlines - Lion Air",
        tit4:"Rp 30.000.000"
    },
    {
        img:img4,
        tit1:"Paket Haji Mewah 25 Hari",
        tit2:"Mekah 11 Hari, Madinah 9 Hari",
        tit3:"Saudi Arabian Airlines - Lion Air",
        tit4:"Rp 55.000.000"
    },
    {
        img:img5,
        tit1:"Paket Haji Furoda 25 Hari",
        tit2:"Mekah 21 Hari, Madinah 4 Hari",
        tit3:"Saudi Arabian Airlines - Lion Air",
        tit4:"Rp 142.000.000"
    },
    {
        img:img6,
        tit1:"Paket Haji Mewah 35 Hari",
        tit2:"Mekah 30 Hari, Madinah 5 Hari",
        tit3:"Saudi Arabian Airlines - Lion Air",
        tit4:"Rp 300.000.000+"
    },
]
const middleList = [
    {
        tit:"",
        con:`Umrah adalah perjalanan spiritual yang memiliki tempat khusus di hati setiap Muslim. Namun, ada satu faktor penting yang perlu dipertimbangkan ketika merencanakan perjalanan suci ini. Harga umrah dapat bervariasi tergantung pada ruang lingkup tur, pilihan akomodasi, pilihan transportasi dan layanan tambahan.
        \nDalam konten ini, kami menawarkan panduan tentang faktor-faktor yang memengaruhi harga umrah, berbagai jenis paket, dan memilih tur yang sesuai dengan anggaran Anda.`
    },
    {
        tit:"Kepuasan Mutlak",
        con:`\nPerusahaan kami, yang berkomitmen pada kepuasan tamu di sektor layanan, berupaya memastikan kualitas yang konsisten dengan tim profesionalnya. Kami menyesuaikan rencana wisata budaya haji dan umrah kami untuk memenuhi harapan tamu kami.`
    },
    {
        tit:"Mengapa Kami?",
        con:`\n“Dengan Pengalaman Masa Lalu dan Harapan Masa Depan”
        \nSebagai Agen Perjalanan Umraza, kami telah menyediakan layanan bagi tamu berharga kami di sektor wisata religi sejak tahun 2010, selain organisasi haji dan umrah, kami juga menjual tiket pesawat (hanya haji dan umrah) dan menyediakan layanan untuk perjalanan domestik dan internasional.`
    },
    {
        tit:"Misi Kami",
        con:`\nDengan pengalaman kami selama 15 tahun, kami ingin memberikan kepada Anda, sahabat kami yang berharga, layanan bintang 5 di berbagai bidang seperti penyelenggaraan haji dan umrah, wisata religi, wisata budaya domestik dan internasional, dan lain sebagainya, serta menyediakan hotel terbaik, transportasi tercepat dan teraman, hidangan terlezat, dan layanan yang ramah sehingga Anda dapat menjalankan kewajiban agama dengan tenang, dan memastikan keberlanjutan layanan ini di tahun-tahun mendatang.`
    }
]

const bottomList = [
    {
        tit:"Harga Umrah",
        con:"Setiap bulan sepanjang tahun Tur umrah Kami menyelenggarakan wisata umroh maulid al-nabi, umrah libur semester, umrah syawal, umrah ramadhan, dan wisata umrah hari raya. Klik untuk melihat harga umrah kami. "
    },
    {
        tit:"Harga Haji 2026",
        con:"Tanpa menggambar dan Haji tanpa undianTahukah Anda bahwa Anda bisa pergi ke sana? Haji Mewah, Tur Haji VIP25 hari haji atau 35 hari haji Tur HajiJika Anda ingin melihat kami klik disini."
    },
    {
        tit:"Pengalaman Pelanggan",
        con:"Kepuasan pelanggan adalah prioritas utama kami. Kami merencanakan setiap detail dengan cermat untuk memastikan para tamu kami memiliki pengalaman beribadah yang nyaman dan tenang."
    }
]

//聊天了
const chatAction = () => {
    handleFabClick()
}
const clickChat = (index) => {
    if(index == 0){
        window.open('https://www.facebook.com/PTUmraza/')
    }
}

</script>

<style scoped>
/* .video-bg {
    background: #fff;
}
.video-bg iframe {
    width: 100%;
    height: 600px;
} */

.video-bg {
    left: 5%;
    position: relative;
    width: 90%;
    height: 100vh; /* 视频占满整屏 */
    overflow: hidden;
}

.video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vw; /* 16:9 比例 */
    min-height: 100vh;
    min-width: 177.78vh; /* 为保持比例铺满屏幕 */
    transform: translate(-50%, -50%);
}


.mask {
    position: absolute;
    background: rgba(0, 0, 0, 0.2); /* 可用透明渐变 */
    z-index: 20;
}

.mask-top-left {
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
}

.mask-top-right {
    top: 0;
    right: 0;
    width: 200px;
    height: 80px;
}

.mask-bottom-right {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 70px;
    background-color: black;
}


</style>