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

interface Props {
  locale: Locale;
  profile: ProfileVM;
}
const { locale, profile } = Astro.props;
const d = useDict(locale);
---

<section id={homeAnchor('about', locale)} class="mx-auto max-w-[--content-max] px-6 pt-24" data-reveal>
  <SectionLabel number="04" text={d.home.aboutLabel} />
  <div class="mt-4 grid gap-8 lg:grid-cols-12">
    <div class="lg:col-span-8">
      <h2 class="text-h2">{profile.aboutHeading}</h2>
      <p class="mt-4 max-w-[64ch] text-body-lg text-ink-muted">{profile.aboutParagraphs[0]}</p>
      <a
        href={pathFor('about', locale)}
        class="mt-6 inline-flex items-center gap-2 text-body text-accent hover:underline"
      >
        {profile.aboutHeading} →
      </a>
    </div>
    <div class="lg:col-span-4">
      <p class="font-mono text-mono-label font-medium uppercase tracking-[0.08em] text-ink-faint">
        {d.about.languages}
      </p>
      <ul class="mt-3 flex flex-col gap-2">
        {
          profile.languages.map((lang) => (
            <li class="text-body text-ink">
              {lang.label} <span class="text-ink-muted">— {lang.level}</span>
            </li>
          ))
        }
      </ul>
    </div>
  </div>
</section>
