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

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

<Base locale={locale} pageId="projects" title={m.title} description={m.description}>
  <div class="mx-auto max-w-[--content-max] px-6 pt-14">
    <SectionLabel text={d.home.projectsLabel} />
    <h1 class="mt-4 text-h1">{d.home.projectsHeading}</h1>
    <p class="mt-4 max-w-[62ch] text-body-lg text-ink-muted">{m.description}</p>
  </div>
  <div class="mt-10">
    <ProjectCards locale={locale} header={false} />
  </div>
</Base>