<template>
    <div class="w-full h-full flex flex-col justify-center items-center">
        <div class="flex w-full items-center justify-center bg-[#f9f9f9] h-60 lg:p-0 pl-2.5">
            <div class="w-full flex flex-col justify-center items-center">
            <span class="text-[#003366] text-[14px]">Tentang Kami</span>
            <strong><span class="lg:text-[36px] text-[20px] text-[#242424]">Agen Perjalanan Umraza Bersiaplah untuk Perjalanan Suci</span></strong>
            </div>
        </div>
        <div class="lg:w-[1200px]">

            <div class="flex w-full flex-col lg:flex-row items-center lg:mt-20">
                <div class="lg:w-[50%] flex justify-center lg:mt-5 lg:mb-20 mb-10 pl-4 pr-4 lg:p-0">
                    <img class="lg:w-[85%] rounded-2xl mt-5" :src="tentang" alt="">
                </div>
                
                <div class="lg:w-[50%] flex justify-center pl-4 pr-4 lg:p-0">
                    <div class="flex flex-col lg:w-[70%]">
                        <div class="text-[#242424] lg:text-4xl text-[20px] font-bold">Mengapa Agen Perjalanan Umraza?</div>
                        <div class="text-[16px] text-[#0000004D] mt-10">Kami membawa ribuan Muslim ke Tanah Suci dalam tur umrah kami. Kami berkomitmen untuk memberikan layanan terbaik bagi para jamaah kami di setiap kunjungan umrah.</div>
                        <div class="text-[16px] text-[#3D3D3D] mt-10">Dengan program-program yang sarat spiritualitas dan dipandu oleh instruktur kami yang berpengalaman dan berkualifikasi, tur umrah 2025 menanti Anda, menawarkan akomodasi di hotel bintang empat atau lima yang paling dekat dengan Masjidil Haram di Mekah dan Masjid Nabawi di Madinah. Di hotel-hotel mitra kami, kami menggunakan daging segar yang disembelih secara Islami dalam hidangan kami, alih-alih daging impor beku.</div>
                        <div class="text-[16px] text-[#3D3D3D] mt-10">Tur umrah 2025 menanti Anda dengan program yang penuh dengan spiritualitas di setiap menitnya, ditemani oleh guru-guru kami yang berkualitas dan berpengalaman, dan akomodasi di hotel bintang 4 atau 5 yang paling dekat dengan Masjid Nabawi di Madinah dan Masjidil Haram di Mekkah. </div>
                        <div class="h-px bg-gray-300 w-full mt-5"></div>
                        <div class="flex justify-between mt-5">
                            <span>Ikuti Kami</span>
                            <!-- <div class="lg:w-[100px] w-0 bg-red-600 h-5"></div> -->
                            <div class="flex flex-row items-center h-full">
                                <img @click="clickChat(index)" class="h-5 bg-black hover:opacity-50 ml-1.5" v-for="(value,index) in imgList" :src="value" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lg:p-8 p-4 mt-20 flex flex-col">
                <strong><span class="text-2xl text-[#242424] ">Misi Kami</span></strong>
                <span class="text-[#3D3D3D] text-[16px] whitespace-pre-line leading-8 mt-8">Agen Perjalanan Umraza didirikan dengan tujuan menyelenggarakan setiap acara yang memungkinkan untuk membantu Anda meraih keutamaan dan berkah yang diberikan haji dan umrah, serta membantu Anda memahami dan menghayati makna dan arti penting jalan kebenaran. Haji dan umrah, yang memiliki dampak mendalam bagi kehidupan manusia, hanya dapat terlaksana melalui pengorganisasian yang cermat dan teliti. Tim yang berpengalaman sangat penting untuk mendampingi Anda dalam perjalanan ini dan memastikan Anda mendapatkan pengalaman terbaik.

                    <br><br>Keberhasilan nasional dan internasional para mitra pendiri kami berkontribusi besar terhadap kepercayaan yang diberikan kepada Agen Perjalanan Umraza. Bersuci di hadapan Dia yang menciptakan waktu dan manusia, menurunkan wahyu, dan memuliakan waktu dan manusia dengan wahyu tentu sangat berharga bagi kita umat beriman.

                    <br><br>Kita semua berhak menunaikan ibadah haji dan umrah tanpa rasa khawatir dan cemas. Menjalankan kewajiban-kewajiban ini dalam perjalanan spiritual yang jernih dan dengan aura kekhidmatan, terlepas dari urusan duniawi, membutuhkan pikiran yang jernih.

                    <br><br>Sebagai Agen Perjalanan Umraza, tugas utama kami adalah memenuhi semua kebutuhan perjalanan Anda selama kunjungan haji dan umrah Anda, memastikan bahwa Anda dapat fokus hanya pada apa yang suci.</span>
            </div>

            <div class="p-4 mt-20 flex flex-col">
                <strong><span class="text-2xl text-[#242424] ">Visi kami</span></strong>
                <span class="text-[#3D3D3D] text-[16px] whitespace-pre-line leading-8 mt-8">Organisasi kami, yang didirikan untuk menghadirkan inovasi dan inovasi terbaik dan berkualitas tinggi di negara kami dan internasional, akan tumbuh jauh lebih cepat berkat dukungan Anda. Infrastruktur kami yang kokoh dan berakar kuat, pengalaman, pengetahuan, keandalan, dan rasa tanggung jawab adalah jaminan keberlangsungan kami.

                    <br><br>Tujuan kami adalah membawa pemahaman baru tentang perjalanan haji dan umrah dan senantiasa berada di jalan Allah, bersama umat manusia. Merupakan kebahagiaan tersendiri bagi kami untuk dapat menyediakan layanan yang memadukan sumber daya material dan spiritual untuk berkontribusi pada tujuan penciptaan manusia.

                    <br><br>Kami senantiasa bersama Anda untuk menemukan jawaban atas segala harapan Anda dalam perjalanan yang menuntun Anda menuju kebaikan dan kebenaran.</span>
            </div>

            <div class="flex flex-col justify-center items-center text-center mt-20">
                <div class="text-[14px] text-[#003366]">Agen Perjalanan Umraza</div>
                <div class="text-[22px] text-[#242424] leading-10"><strong>Nilai-nilai kami</strong></div>
                <div class="text-[14px] text-[#3D3D3D] lg:w-[75%]">Di Agen Perjalanan Umraza, nilai-nilai inti yang kami anut sambil memberikan layanan terbaik kepada pelanggan menjadikan kami merek terkemuka di industri ini. Berikut nilai-nilai kami:</div>
            </div>

            <div class="flex w-full flex-col lg:flex-row justify-between mt-20 mb-10 pl-4 pr-4 lg:p-0">
                <div class="lg:w-[33%] text-center lg:mt-0 mt-5">
                    <div class="text-[22px] text-[#242424]"><strong>Memercayai</strong></div>
                    <div class="text-[14px] text-[#3D3D3D]">Kami berusaha menjaga kepercayaan jamaah haji pada level tertinggi.</div>
                </div>
                <div class="lg:w-[33%] text-center lg:mt-0 mt-5">
                    <div class="text-[22px] text-[#242424]"><strong>Kualitas</strong></div>
                    <div class="text-[14px] text-[#3D3D3D]">Kami menerapkan standar kualitas tinggi dalam semua layanan kami.</div>
                </div>
                <div class="lg:w-[33%] text-center lg:mt-0 mt-5">
                    <div class="text-[22px] text-[#242424]"><strong>Kejujuran</strong></div>
                    <div class="text-[14px] text-[#3D3D3D]">Kami memberikan informasi yang paling akurat kepada tamu kami melalui komunikasi yang transparan dan terbuka.</div>
                </div>
            </div>
        </div>
        <div class="w-full bg-black flex justify-center items-center pt-20 pb-20">
                <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 lg:w-[500px] w-[90%]"><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="w-[100px] bg-red-700 h-10 mt-5"></div> -->
                    <div class="flex flex-row items-center h-full mt-4">
                        <img @click="clickChat(index)" class="h-5 bg-black hover:opacity-50 ml-1.5" v-for="(value,index) in imgList" :src="value" alt="">
                    </div>
                </div>
        </div>
    </div>
</template>

<script setup>
import tentang from "@/assets/tentang.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 imgList = [
    facebook,
    x,
    ins,
    you,
    whats
]

const clickChat = (index) => {
    if(index == 0){
        window.open('https://www.facebook.com/PTUmraza/')
    }
}
</script>
