---
import type { Locale } from '@i18n/locales';
import { useDict } from '@i18n/t';
import Base from '@layouts/Base.astro';
import { getProfile, getMeta } from '@lib/content';
import SectionLabel from '@components/ui/SectionLabel.astro';
import Portrait from '@components/ui/Portrait.astro';

interface Props {
  locale: Locale;
}
const { locale } = Astro.props;
const d = useDict(locale);
const profile = getProfile(locale);
const m = getMeta('about', locale);
---

<Base locale={locale} pageId="about" title={m.title} description={m.description} ogType="profile">
  <div class="mx-auto grid max-w-[--content-max] gap-12 px-6 py-14 lg:grid-cols-12">
    <div class="lg:col-span-7">
      <SectionLabel text={d.nav.about} />
      <h1 class="text-h1 mt-4">{profile.aboutHeading}</h1>
      <div class="mt-6 flex flex-col gap-4">
        {
          profile.aboutParagraphs.map((para) => (
            <p class="text-body-lg text-ink-muted max-w-[64ch]">{para}</p>
          ))
        }
      </div>
      <p class="mt-8">
        <span class="mono-label mb-2 block">{d.about.interests}</span>
        <span class="text-body text-ink-muted">{profile.interestsLine}</span>
      </p>
    </div>

    <aside class="lg:col-span-5">
      <Portrait src={profile.photo.src} alt={profile.photo.alt} caption={profile.photo.caption} />
      <div class="mt-8">
        <p class="mono-label mb-3">{d.about.languages}</p>
        <ul class="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>
    </aside>
  </div>
</Base>