---
import Icon from './Icon.astro';
import FormAPreview from '../FormAPreview.astro';
import JotformIframe from '../JotformIframe.astro';
import { formAPreviewEnabled, formModeForRuntime, resolveFormAIframe, resolveFormMode } from '../../utils/form-integration';
interface Props {
  sourcePage: 'general' | 'commercial' | 'ahcccs' | 'private_pay';
  title: string;
  intro: string;
  buttonText: string;
}
const { sourcePage, title, intro, buttonText } = Astro.props;
const phone = import.meta.env.PUBLIC_AIA_PHONE || '480-687-7099';
const tel = phone.replace(/[^0-9+]/g, '');
const formConfig = resolveFormMode(import.meta.env.PUBLIC_AIA_FORMS_MODE, import.meta.env.PUBLIC_AIA_FORMS_LIVE_APPROVED);
const formPreview = formAPreviewEnabled(import.meta.env.PUBLIC_AIA_FORM_A_PREVIEW, import.meta.env.PUBLIC_ALLOW_INDEXING, formModeForRuntime(formConfig));
const campaignRoute = sourcePage === 'general'
  ? '/lp/aba-therapy'
  : sourcePage === 'commercial'
    ? '/lp/aba-insurance'
    : sourcePage === 'ahcccs'
      ? '/lp/aba-ahcccs'
      : '/lp/aba-private-pay';
const iframeDescription = 'Use this form to request a conversation. An AIA team member can explain the next steps for your family.';
const formAIframe = resolveFormAIframe({
  rawMode: import.meta.env.PUBLIC_AIA_FORMS_MODE,
  liveApproved: import.meta.env.PUBLIC_AIA_FORMS_LIVE_APPROVED,
  isolatedTestApproved: import.meta.env.PUBLIC_AIA_FORMS_ISOLATED_TEST_APPROVED,
  consultationTestApproved: import.meta.env.PUBLIC_AIA_FORMS_CONSULTATION_TEST_APPROVED,
  productionApproved: import.meta.env.PUBLIC_AIA_FORM_A_PRODUCTION_APPROVED,
  environmentRole: import.meta.env.PUBLIC_AIA_FORMS_ENVIRONMENT,
  allowIndexing: import.meta.env.PUBLIC_ALLOW_INDEXING,
  route: campaignRoute,
  locale: 'en',
});
---
<section class="section consultation" id="consultation" aria-labelledby="consultation-heading">
  <div class="container consultation__panel grid-2">
    <div class="consultation__copy">
      <div class="eyebrow">Talk with AIA</div>
      <h2 id="consultation-heading">{title}</h2>
      <p class="lede">{intro}</p>
    </div>
    <div class="form-wrap">
      {formAIframe.enabled
        ? <JotformIframe config={formAIframe} heading="Start with your contact details" description={iframeDescription} variant="embedded" />
        : formPreview ? <FormAPreview lang="en" variant="compact" submitText={buttonText} /> : <div id="lead-form" role="group" aria-labelledby="campaign-form-heading" data-forms-mode="off">
        <!-- TODO: Replace this inactive presentation with the approved Jotform integration under P9-03. -->
        <!-- TODO: Verify privacy, spam protection and notifications before production activation. -->
        <h3 id="campaign-form-heading">Start with your contact details</h3>
        <p class="form-note form-intro">Use this form to request a conversation. An AIA team member can explain the next steps for your family.</p>
        <input disabled type="hidden" name="sourcePage" value={sourcePage} />
        <div class="form-grid">
          <div class="field field--full">
            <label for="name">Parent or caregiver name</label>
            <input disabled id="name" name="name" autocomplete="name" required maxlength="160" />
          </div>
          <div class="field">
            <label for="phone">Phone</label>
            <input disabled id="phone" name="phone" type="tel" autocomplete="tel" required maxlength="80" />
          </div>
          <div class="field field--website" aria-hidden="true" inert>
            <label for="website">Website</label>
            <input disabled id="website" name="website" type="text" tabindex="-1" autocomplete="off" data-1p-ignore />
          </div>
          <div class="field">
            <label for="email">Email <span id="email-requirement" class="form-note">(optional)</span></label>
            <input disabled id="email" name="email" type="email" autocomplete="email" maxlength="320" />
          </div>
          <div class="field field--full">
            <label for="preferredContact">Preferred contact method</label>
            <select disabled id="preferredContact" name="preferredContact" required>
              <option value="">Choose one</option>
              <option value="phone">Phone</option>
              <option value="email">Email</option>
            </select>
          </div>
        </div>
        <div id="form-error" class="form-error" role="alert" tabindex="-1"></div>
        <button class="button" type="button" disabled>{buttonText}<Icon name="arrow" /></button>
        <p class="form-note">Questions? <a href={`tel:${tel}`}>Call AIA at {phone}</a>. Review AIA's <a href="/privacy-policy">privacy policy</a>.</p>
      </div>}
    </div>
    <div class="consultation__details">
      <div class="consultation__contact">
        <h3><a href={`tel:${tel}`}><Icon name="phone" />Call AIA at {phone}</a></h3>
        <p>Mon–Fri, 8:00 AM–6:00 PM</p>
      </div>
      <div class="clinic-location" aria-labelledby="clinic-location-heading">
        <span class="icon-circle"><Icon name="pin" /></span>
        <div class="clinic-location__body">
          <h3 id="clinic-location-heading">Scottsdale clinic location</h3>
          <address>8901 E Raintree Dr, Ste 160<br />Scottsdale, AZ 85260</address>
          <a class="clinic-location__directions" href="https://www.google.com/maps/search/?api=1&query=8901+E+Raintree+Dr+Ste+160+Scottsdale+AZ+85260" target="_blank" rel="noopener noreferrer">Get directions <Icon name="arrow" /></a>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  .field--website { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
</style>