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

const { t } = useI18n();
// Port par défaut réel du daemon (cf. packages/server/src/config.ts).
const LOCAL_URL = 'http://localhost:7317';
</script>

<template>
  <section id="how" class="mx-auto max-w-[1200px] scroll-mt-[84px] px-6 pb-[100px]">
    <div v-reveal class="mb-[46px] text-center">
      <div class="mb-3.5 font-mono text-xs uppercase tracking-[0.14em] text-emerald-400">{{ t('howKicker') }}</div>
      <h2 class="m-0 text-[clamp(28px,3.4vw,40px)] font-semibold tracking-[-0.025em] text-zinc-50">{{ t('howTitle') }}</h2>
    </div>

    <div v-reveal class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-4">
      <div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
        <div class="mb-[18px] font-mono text-[13px] text-emerald-400">01</div>
        <h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step1Title') }}</h3>
        <p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step1Desc') }}</p>
        <div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-[11px]">
          <code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-zinc-200">
            <span class="text-emerald-400">$ </span>{{ INSTALL_COMMAND }}
          </code>
          <CopyButton variant="icon" :text="INSTALL_COMMAND" :label="t('copyCommand')" />
        </div>
      </div>
      <div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
        <div class="mb-[18px] font-mono text-[13px] text-emerald-400">02</div>
        <h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step2Title') }}</h3>
        <p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step2Desc') }}</p>
        <div class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-[11px]">
          <code class="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[12.5px] text-sky-300">
            → {{ LOCAL_URL }}
          </code>
          <CopyButton variant="icon" :text="LOCAL_URL" :label="t('copyUrl')" />
        </div>
      </div>
      <div class="rounded-xl border border-zinc-800 bg-zinc-900/50 p-[26px]">
        <div class="mb-[18px] font-mono text-[13px] text-emerald-400">03</div>
        <h3 class="m-0 mb-2.5 text-lg font-semibold text-zinc-50">{{ t('step3Title') }}</h3>
        <p class="m-0 mb-4 text-[14.5px] leading-[1.55] text-zinc-400">{{ t('step3Desc') }}</p>
        <div class="flex flex-wrap gap-1.5">
          <span class="rounded-md bg-emerald-500/10 px-[9px] py-1 font-mono text-[11px] text-emerald-400">{{ t('idle') }}</span>
          <span class="rounded-md bg-[rgba(8,47,73,0.7)] px-[9px] py-1 font-mono text-[11px] text-sky-300">{{ t('busy') }}</span>
          <span class="rounded-md bg-[rgba(69,26,3,0.6)] px-[9px] py-1 font-mono text-[11px] text-amber-300">{{ t('waiting') }}</span>
        </div>
      </div>
    </div>
  </section>
</template>
