<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { INSTALL_COMMAND } from '../composables/useCopy';
import { REPO } from '../lib/links';
import IconGitea from './icons/IconGitea.vue';
import CopyButton from './CopyButton.vue';

const { t } = useI18n();
</script>

<template>
  <section class="mx-auto max-w-[1200px] px-6 pb-[100px]">
    <div
      v-reveal
      class="rounded-[20px] border border-border px-6 py-[clamp(36px,5vw,64px)] text-center"
      style="background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 60%), var(--color-surface-0)"
    >
      <img
        src="/assets/arboretum-mark.png"
        alt=""
        width="52"
        height="52"
        class="mx-auto mb-5 block h-[52px] w-[52px] object-contain"
      />
      <h2 class="m-0 mb-3.5 text-[clamp(30px,4vw,46px)] font-bold leading-[1.08] tracking-[-0.03em] text-fg">
        {{ t('ctaTitle') }}
      </h2>
      <p class="mx-auto mb-7 max-w-[480px] text-[17px] text-fg-muted">{{ t('ctaBody') }}</p>

      <div
        class="mx-auto flex max-w-[460px] items-stretch overflow-hidden rounded-[10px] border border-border bg-surface-0"
      >
        <div class="flex min-w-0 flex-1 items-center gap-2.5 overflow-x-auto whitespace-nowrap px-4 font-mono text-sm">
          <span class="text-accent">$</span><span class="text-fg">{{ INSTALL_COMMAND }}</span>
        </div>
        <CopyButton variant="bar" :text="INSTALL_COMMAND" :label="t('copyCommand')" bar-class="px-4" />
      </div>

      <div class="mt-[18px]">
        <a
          :href="REPO"
          target="_blank"
          rel="noopener"
          class="inline-flex items-center gap-2 text-[14.5px] text-fg-muted no-underline transition-colors hover:text-accent"
        >
          <IconGitea :size="16" />
          {{ t('ctaSource') }}
        </a>
      </div>
    </div>
  </section>
</template>
