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

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

<section
  id={homeAnchor('contact', locale)}
  class="mx-auto max-w-[--content-max] px-6 pt-24"
  data-reveal
>
  <div class="border-line bg-surface-2 rounded-lg border p-8 md:p-12">
    <h2 class="text-h2 max-w-[24ch]">{profile.contactHeading}</h2>
    <p class="text-body-lg text-ink-muted mt-3">{profile.contactBody}</p>
    <div class="mt-7 flex flex-wrap items-center gap-4">
      <a
        href={`mailto:${profile.links.email}`}
        data-copy={profile.links.email}
        data-copied-label={d.form.copied}
        class="bg-accent text-body text-accent-ink inline-flex items-center gap-2 rounded-sm px-5 py-3 font-semibold transition-[filter] duration-[--dur-quick] hover:brightness-105"
      >
        <span data-copy-label>{profile.links.email}</span>
        <span aria-hidden="true">⧉</span>
      </a>
      <a
        href={pathFor('contact', locale)}
        class="text-body text-ink-muted hover:text-ink inline-flex items-center gap-2"
      >
        {d.nav.contact} →
      </a>
    </div>
  </div>
</section>
