---
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 ExperienceTimeline from '@components/home/ExperienceTimeline.astro';

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

<Base locale={locale} pageId="experience" title={m.title} description={m.description}>
  <div class="mx-auto max-w-[--content-max] px-6 pt-14">
    <SectionLabel text={d.home.experienceLabel} />
    <h1 class="text-h1 mt-4">{d.home.experienceHeading}</h1>
    <p class="text-body-lg text-ink-muted mt-4 max-w-[62ch]">{m.description}</p>
  </div>
  <div class="mt-8">
    <ExperienceTimeline locale={locale} eyebrow={false} />
  </div>
</Base>
