<template>
  <div class="grid-container">
    <div
      class="grid-container-10 my-[50px] border-2 px-4 sm:px-[116px] sm:py-[100px]"
    >
      <div
        class="flex flex-col items-stretch justify-between sm:flex-row-reverse"
      >
        <div class="content-center">
          {{ contact?.name }} <br />
          <template v-if="contact?.jobTitle">
            {{ contact?.jobTitle }} <br />
          </template>
        </div>
        <div class="content-center">
          <div class="mt-10 inline-block">
            <a
              class="flex items-center gap-2 rounded-2xl border-2 px-4 py-3 font-bold text-primary-600"
              :href="`mailto:${contact?.mail}`"
            >
              {{ $texts('contact_button', 'Kontakt') }}
              <SpriteSymbol name="paperplane" class="size-6 md:size-5" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { NodePressReleaseFragment } from '#graphql-operations'

defineProps<{
  contact: NodePressReleaseFragment['contact']
}>()

const { $texts } = useNuxtApp()
</script>
