---
import Base from '../layouts/Base.astro';
import { localePath, t, type Lang } from '../i18n/ui';
interface Props { lang: Lang; outcome: 'sent' | 'error' }
const { lang, outcome } = Astro.props;
const r = t(lang).contact.result[outcome];
// After an error the way forward is the form again; after sending it is the rest of the site.
const href = outcome === 'sent' ? localePath(lang, '/') : `${localePath(lang, '/')}#contact`;
---
<Base lang={lang} title={r.title} description={r.body} noindex>
  <section class="section">
    <div class="container grid">
      <h1 class="display result__title">{r.title}</h1>
      <div class="result__body">
        <p class="muted">{r.body}</p>
        <a class="link" href={href}>{r.link}</a>
      </div>
    </div>
  </section>
</Base>

<style>
  .result__title { grid-column: 1 / -1; }
  .result__body { grid-column: 1 / -1; display: grid; gap: var(--space-5); max-width: var(--measure); }
  @media (min-width: 48rem) {
    .result__title { grid-column: 1 / span 8; }
    .result__body { grid-column: 1 / span 5; }
  }
</style>