<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
</script>

<template>
  <section class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 py-[92px]">
    <div
      v-reveal
      class="flex flex-wrap items-center gap-12 rounded-[18px] border border-zinc-800 p-[clamp(28px,4vw,52px)]"
      style="background: linear-gradient(180deg, rgba(24, 24, 27, 0.55), rgba(12, 12, 14, 0.55))"
    >
      <div class="min-w-[280px] flex-[1_1_360px]">
        <div class="mb-3 font-mono text-xs uppercase tracking-[0.12em] text-emerald-400">{{ t('grpKicker') }}</div>
        <h2 class="m-0 mb-4 text-[clamp(26px,3vw,36px)] font-semibold leading-[1.15] tracking-[-0.025em] text-zinc-50">
          {{ t('grpTitle') }}
        </h2>
        <p class="m-0 text-[16.5px] leading-[1.6] text-zinc-400">{{ t('grpBody') }}</p>
      </div>
      <div class="flex min-w-[280px] flex-[1_1_360px] justify-center">
        <div class="flex w-full max-w-[380px] items-center">
          <div class="flex flex-none flex-col items-center gap-2">
            <div
              class="inline-flex h-[62px] w-[62px] items-center justify-center rounded-[15px] border border-emerald-500/35 bg-emerald-500/[0.12] text-emerald-400"
            >
              <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" /><path d="M7 16.5 12 13.5" /><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" /><path d="m17 16.5 4.74-2.85" /><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0z" /></svg>
            </div>
            <span class="font-mono text-[11px] text-zinc-300">{{ t('grpHub') }}</span>
          </div>
          <div class="relative h-[96px] flex-1">
            <svg width="100%" height="100%" viewBox="0 0 100 96" preserveAspectRatio="none" class="absolute inset-0" aria-hidden="true">
              <path d="M0 48 H40 V14 H100" fill="none" stroke="rgba(16,185,129,.45)" stroke-width="1.4" />
              <path d="M0 48 H40 V48 H100" fill="none" stroke="rgba(16,185,129,.45)" stroke-width="1.4" />
              <path d="M0 48 H40 V82 H100" fill="none" stroke="rgba(16,185,129,.45)" stroke-width="1.4" />
            </svg>
          </div>
          <div class="flex flex-none flex-col gap-2.5">
            <div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-[#0c0c0e] px-3 py-2">
              <span class="h-1.5 w-1.5 rounded-full bg-sky-300"></span>
              <span class="font-mono text-[11px] text-zinc-300">api</span>
            </div>
            <div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-[#0c0c0e] px-3 py-2">
              <span class="h-1.5 w-1.5 rounded-full bg-sky-300"></span>
              <span class="font-mono text-[11px] text-zinc-300">web</span>
            </div>
            <div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-[#0c0c0e] px-3 py-2">
              <span class="h-1.5 w-1.5 rounded-full bg-sky-300"></span>
              <span class="font-mono text-[11px] text-zinc-300">sdk</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
