<template>
    <div>
        <div class="mb-10 text-center">
            <h2 class="text-6xl font-semibold text-gray-300 mb-3">
                {{ content["why_header_" + $i18n.locale] }}
            </h2>
            <h4 class="text-lg font-medium text-blue-300">
                {{ content["why_subtitle_" + $i18n.locale] }}
            </h4>
        </div>
        <div
            class="grid grid-cols-1 gap-4 my-10 lg:grid-cols-3 place-items-center max-w-7xl"
        >
            <FeatureCard
                :title="{
                    en: 'Verified Engineers & Firms',
                    ar: 'المهندسين و الشركات المعتمدين',
                }"
                :subTitle="{
                    en: 'Global community for top certified on demand engineers',
                    ar: 'مجتمع عالمي لأفضل المهندسين المعتمدين عند الطلب',
                }"
                imgUrl="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/why-muhandisin-1.png"
                icon="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/icons/verified.svg"
            />
            <FeatureCard
                :title="{ en: '100% Money Guarantee', ar: '100٪ ضمان لأموالك' }"
                :subTitle="{
                    en: 'Your project and finance are 100% safe with us.',
                    ar: 'مشروعك وتمويلك آمنان 100٪ معنا.',
                }"
                imgUrl="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/why-muhandisin-2.png"
                icon="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/icons/coins.svg"
            ></FeatureCard>
            <FeatureCard
                :title="{ en: 'Cost Savings', ar: 'توفير للتكاليف ' }"
                :subTitle="{
                    en: 'Find the right partner with our smooth matching process',
                    ar: 'ابحث عن الشريك المناسب من خلال عملية المطابقة السلسة لدينا',
                }"
                imgUrl="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/why-muhandisin-3.png"
                icon="https://muhandisin.s3.eu-central-1.amazonaws.com/assets/icons/savings.svg"
            ></FeatureCard>
        </div>
    </div>
</template>

<script>
import FeatureCard from "./FeatureCard.vue";
export default {
    props: {
        content: Object,
    },
    components: {
        FeatureCard,
    },
};
</script>

<style></style>
