<template>
  <UiContainer class="space-y-[45px]">
    <div class="xl:w-[70%] space-y-[25px]">
      <h1 class="h1">
        {{ component.front_section_lang[0].data.title }}
      </h1>
      <p v-html="component.front_section_lang[0].data.description" />
    </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-button 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-button 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-button 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: {
    id: number
    name: string
    img: string[]
    component_name: string
    is_no_lang: boolean
    page_name: string
    front_section_lang: {
      data: {
        title: string
        description: string
      }
      id_front_section: number
      id_lang: number
    }[]
  }
}>()
</script>
