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

useSeoMeta({
  title: () => l.value.meta.title,
  description: () => l.value.meta.description,
})

useHead({
  script: [
    {
      src: 'https://mainframe.capcorn.net/ressourcen/newUI/js/jquery.js',
      defer: true,
    },
    {
      src: 'https://mainframe.capcorn.net/ressourcen/newUI/js/capcorn.js',
      defer: true,
    },
  ],
  link: [
    {
      rel: 'stylesheet',
      href: 'https://mainframe.capcorn.net/ressourcen/newUI/css/capcorn.css',
    },
  ],
})

const route = useRoute()

const src = computed(() => {
  const lg = route.params.locale === 'de' ? 0 : 1
  return `https://www.capcorn.net/MasterReq?FT=9&MB=1487&FL=17&LG=${lg}`
})
</script>

<template>
  <XScaffoldGridPage>
    <AppSection mode="flat">
      <XContainerPair break="2xl">
        <template #left>
          <div class="flex flex-col">
            <XText as="section" :text="l.title" />

            <div class="flex flex-col fgap-2 fmb-2">
              <XText as="paragraph" :text="l.description" :margin="false" />

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

              <XText as="paragraph" :margin="false">
                {{ l.online1 }}
                <AppButton type="here" variant="outline" />
                {{ l.online2 }}
              </XText>
            </div>
          </div>
        </template>

        <template #right>
          <div id="hosts" class="w-full h-full flex">
            <div class="flex flex-col">
              <XText as="section">{{ l.heroes.title }}</XText>

              <div class="flex flex-col rgap-2">
                <div class="flex flex-row items-center rgap-1.5">
                  <NuxtImg
                    class="self-center object-cover rounded-full w-30"
                    :src="l.heroes.parents.image"
                  />

                  <div>
                    <XText class="text-left" as="label" :text="l.heroes.parents.title" />
                    <XText
                      class="text-left"
                      as="paragraph"
                      :text="l.heroes.parents.description"
                      :margin="false"
                    />
                  </div>
                </div>

                <div class="flex flex-row items-center rgap-1.5">
                  <div>
                    <XText class="text-right" as="label" :text="l.heroes.children.title" />
                    <XText
                      class="text-right"
                      as="paragraph"
                      :text="l.heroes.children.description"
                      :margin="false"
                    />
                  </div>

                  <NuxtImg
                    class="self-center object-cover rounded-full w-30"
                    :src="l.heroes.children.image"
                  />
                </div>
              </div>
            </div>
          </div>
        </template>
      </XContainerPair>
    </AppSection>

    <AppSection mode="card">
      <ClientOnly>
        <iframe
          id="iframeCapCorn"
          :src="src"
          frameborder="0"
          width="100%"
          scrolling="auto"
          class="min-h-[30rem]"
        />
      </ClientOnly>
    </AppSection>
  </XScaffoldGridPage>
</template>
