---
import type { Locale } from '@i18n/locales';
import { useDict } from '@i18n/t';
import { homeAnchor } from '@i18n/slugMap';
import { getSkills } from '@lib/content';
import SectionLabel from '@components/ui/SectionLabel.astro';
import Chip from '@components/ui/Chip.astro';

interface Props {
  locale: Locale;
}
const { locale } = Astro.props;
const d = useDict(locale);
const groups = getSkills(locale);
const num = ['01', '02', '03'];
---

<section id={homeAnchor('skills', locale)} class="mx-auto max-w-[--content-max] px-6 pt-24" data-reveal>
  <SectionLabel number="01" text={d.home.skillsLabel} />
  <h2 class="mt-4 text-h2">{d.home.skillsHeading}</h2>
  <p class="mt-3 max-w-[60ch] text-body text-ink-muted">{d.home.skillsIntro}</p>

  <div class="mt-8 grid gap-5 md:grid-cols-3">
    {
      groups.map((group, i) => (
        <div class="rounded-md border border-line bg-surface-1 p-6 transition-colors duration-[--dur-standard] hover:border-line-strong">
          <p class="font-mono text-mono-label font-medium uppercase tracking-[0.08em] text-ink-faint">
            {num[i]} — {group.title}
          </p>
          <p class="mt-3 text-small text-ink-muted">{group.context}</p>
          <ul class="mt-4 flex flex-wrap gap-2">
            {group.skills.map((s) => (
              <li>
                <Chip kind="stack" label={s.name} tooltip={s.tooltip} />
              </li>
            ))}
          </ul>
        </div>
      ))
    }
  </div>
</section>