ResumeSite/site/src/components/pages/ContactPage.astro

---
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';

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

const fieldClass =
  'w-full rounded-sm border border-line-strong bg-surface-1 px-3 py-2.5 text-body text-ink transition-colors focus:border-accent focus:outline-none aria-[invalid=true]:border-danger';
---

<Base locale={locale} pageId="contact" title={m.title} description={m.description}>
  <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.contact} />
      <h1 class="text-h1 mt-4">{profile.contactHeading}</h1>
      <p class="text-body-lg text-ink-muted mt-3">{profile.contactBody}</p>

      <form
        id="contact-form"
        class="mt-8 flex flex-col gap-5"
        data-msg-required={d.form.required}
        data-msg-email={d.form.invalidEmail}
        novalidate
      >
        <div>
          <label for="cf-name" class="text-small text-ink mb-1.5 block font-medium"
            >{d.form.name}</label
          >
          <input id="cf-name" name="name" type="text" autocomplete="name" class={fieldClass} />
          <p data-error-for="name" hidden role="alert" class="text-small text-danger mt-1.5"></p>
        </div>

        <div>
          <label for="cf-email" class="text-small text-ink mb-1.5 block font-medium"
            >{d.form.email}</label
          >
          <input id="cf-email" name="email" type="email" autocomplete="email" class={fieldClass} />
          <p data-error-for="email" hidden role="alert" class="text-small text-danger mt-1.5"></p>
        </div>

        <div>
          <label for="cf-message" class="text-small text-ink mb-1.5 block font-medium"
            >{d.form.message}</label
          >
          <textarea id="cf-message" name="message" rows="5" class={fieldClass}></textarea>
          <p data-error-for="message" hidden role="alert" class="text-small text-danger mt-1.5"></p>
        </div>

        {/* Honeypot — hidden from users and assistive tech */}
        <div class="sr-only" aria-hidden="true">
          <label for="cf-company">Company</label>
          <input id="cf-company" name="company" type="text" tabindex="-1" autocomplete="off" />
        </div>

        <button
          type="submit"
          data-sending={d.form.sending}
          class="bg-accent text-body text-accent-ink inline-flex w-fit items-center justify-center rounded-sm px-5 py-2.5 font-semibold transition-[filter] duration-[--dur-quick] hover:brightness-105"
        >
          <span data-label>{d.form.send}</span>
        </button>
      </form>

      <div
        id="form-success"
        hidden
        class="border-accent/40 bg-surface-2 mt-8 rounded-md border p-6"
      >
        <p class="text-body text-accent flex items-center gap-2 font-semibold">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path
              class="check-path"
              d="M5 12l5 5 9-11"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"></path>
          </svg>
          {d.form.successTitle}
        </p>
        <p class="text-body text-ink-muted mt-2">{d.form.successBody}</p>
      </div>

      <div id="form-error" hidden class="border-danger/40 bg-surface-2 mt-8 rounded-md border p-6">
        <p class="text-body text-danger font-semibold">{d.form.errorTitle}</p>
        <p class="text-body text-ink-muted mt-2">
          {d.form.errorBody}
          <a class="text-accent hover:underline" href={`mailto:${profile.links.email}`}
            >{profile.links.email}</a
          >
        </p>
      </div>
    </div>

    <aside class="lg:col-span-5">
      <p class="mono-label mb-3">{d.form.orEmail}</p>
      <ul class="flex flex-col gap-4">
        <li>
          <a
            href={`mailto:${profile.links.email}`}
            data-copy={profile.links.email}
            data-copied-label={d.form.copied}
            class="text-body text-ink hover:text-accent inline-flex items-center gap-2"
          >
            <span data-copy-label>{profile.links.email}</span>
            <span class="text-ink-faint" aria-hidden="true">⧉</span>
          </a>
        </li>
        <li>
          <a
            href={profile.links.linkedin}
            rel="me noopener"
            class="text-body text-ink hover:text-accent">LinkedIn ↗</a
          >
        </li>
        <li>
          <a href={profile.links.phoneHref} class="text-body text-ink hover:text-accent"
            >{profile.links.phone}</a
          >
        </li>
      </ul>
    </aside>
  </div>

  <script>
    import '@scripts/form';
  </script>
</Base>