---
import ContactForm from '../ContactForm.astro';
import FormAPreview from '../FormAPreview.astro';
import JotformIframe from '../JotformIframe.astro';
import OpenStreetMap from '../OpenStreetMap.astro';
import { formAPreviewEnabled, formModeForRuntime, resolveFormAIframe, resolveFormMode } from '../../utils/form-integration';

interface Props {
  title: string;
  lang: string;
}

const { title, lang } = Astro.props;
const formConfig = resolveFormMode(import.meta.env.PUBLIC_AIA_FORMS_MODE);
const formPreview = formAPreviewEnabled(import.meta.env.PUBLIC_AIA_FORM_A_PREVIEW, import.meta.env.PUBLIC_ALLOW_INDEXING, formModeForRuntime(formConfig));
const route = lang === 'es' ? '/es/contact' : '/contact';
const formAIframe = resolveFormAIframe({
  rawMode: import.meta.env.PUBLIC_AIA_FORMS_MODE,
  route,
  locale: lang,
});
---

<section class="contact-page">
  <div class="container contact-page__grid">
    <div class="contact-page__copy">
      <slot />
    </div>
    {formAIframe.enabled
      ? <JotformIframe config={formAIframe} heading={title} />
      : formPreview
        ? <FormAPreview lang={lang as 'en' | 'es'} variant="full" submitText={lang === 'es' ? 'Enviar' : 'Submit'} />
        : <ContactForm title={title} lang={lang} />}
  </div>
</section>

<OpenStreetMap lang={lang} />

<style>
  .contact-page {
    background: white;
    padding-block: 100px;
  }

  .contact-page__grid {
    align-items: start;
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-page__copy {
    color: var(--color-primary);
    text-align: left;
  }

  .contact-page__copy :global(h2) {
    margin: 0 0 25px;
  }

  .contact-page__copy :global(p) {
    margin: 0 0 25px;
  }

  .contact-page__copy :global(a:not(.content-button)) {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: .15em;
  }

  .contact-page__copy :global(.content-button) {
    margin-bottom: 40px;
  }

  @media (max-width: 992px) {
    .contact-page {
      padding-block: 50px;
    }
  }

  @media (max-width: 767px) {
    .contact-page__grid {
      grid-template-columns: 1fr;
    }

    .contact-page__copy :global(.content-button) {
      display: table;
      margin-inline: auto;
    }
  }
</style>