<script setup lang="ts">
const { l } = useContentInjected()
</script>

<template>
  <XScaffoldContent>
    <template #background>
      <div class="w-full h-full bg-neutral-100 border-t border-neutral-200" />
    </template>

    <div class="flex flex-col fgap-2 rpy-1.5">
      <XContainerHeroContentButtons
        hero="left"
        buttons="right"
        break="sm"
        buttons-break="lg"
        :ux="{ grid: 'fgap-2' }"
      >
        <template #hero>
          <div class="w-full h-full flex justify-center items-center">
            <NuxtImg class="self-center object-cover rounded-full w-20" :src="l.avatar" />
          </div>
        </template>

        <template #buttons>
          <XContainerButtons axis="row" break="lg" :stretch="true">
            <AppButton type="contact" color="primary" />
            <AppButton type="book" color="primary" />
          </XContainerButtons>
        </template>

        <div class="flex flex-col fgap-2">
          <div class="flex flex-col">
            <XText as="paragraph" visual="label" :text="l.questions" />
            <XText as="paragraph" visual="detail" :text="l.prompt" :margin="true" />
          </div>

          <XContactDetailGroup :names="['phone', 'email', 'location']" />
        </div>
      </XContainerHeroContentButtons>

      <USeparator class="w-full" orientation="horizontal" color="neutral" />
      <XFooterCopyrightLegal />
    </div>
  </XScaffoldContent>
</template>
