<template>
    <UiContainer class="space-y-[45px]">
        <div class="xl:w-[70%] space-y-[25px]">
            <h1 class="h1">{{ component.section_lang_data.title }}</h1>
            <p v-html="component.section_lang_data.description"></p>
        </div>
        <div class="flex flex-col md:flex-row gap-8 md:gap-[30px] xl:gap-0">
            <div class="p-[25px] md:p-[50px] bg-block rounded-2xl space-y-[30px] xl:ml-40 xl:w-[65%]">
                <div class="flex gap-[30px]">
                    <input :placeholder="$t('first_name')" type="text"
                        class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
                    <input :placeholder="$t('email')" type="text"
                        class="border border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
                </div>
                <textarea :placeholder="$t('form_question')"
                    class="border h-[276px] border-text-dark placeholder:text-button rounded-lg px-3 py-1.5 w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />

                <div class="w-full flex justify-center sm:justify-start">
                    <UiButtonArrow type="border">{{
                        $t("submit_form")
                        }}</UiButtonArrow>
                </div>
            </div>
            <div class="space-y-[30px] xl:px-[50px] sm:px-10">
                <h4 class="h4-uppercase-bold-inter">
                    {{ $t('contact_info') }}
                </h4>
                <div
                    class="flex flex-col sm:flex-row items-center sm:items-start md:flex-col justify-between gap-[15px] sm:gap-[30px]">
                    <div>
                        <p class="text-gray">{{ $t("phone") }}</p>
                        <p>+420 608 428 782</p>
                    </div>
                    <div>
                        <p class="text-gray">{{ $t("email") }}</p>
                        <p>web@yourgold.cz</p>
                    </div>
                    <div>
                        <p class="text-gray">{{ $t("office_address") }}</p>
                        <p>
                            Floriána Nováka 3 <br />
                            796 01 Prostějov <br />
                            Czech Republic <br />
                            CZ 08435456
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </UiContainer>
</template>
<script setup lang="ts">
defineProps<{ component: Component }>();
type Component = {
    image_collection: string;
    section_id: string;
    section_img: string;
    section_lang_data: {
        title: string;
        description: string;
    };
};
</script>