aia-website/www/src/components/pages/FaqPage.astro

---
import Button from '../Button.astro';
import FAQAccordion from '../FAQAccordion.astro';
const sourceHtml = await Astro.slots.render('default');
---

<article class="faq-page">
  <div id="faq-page-source" class="faq-source container source-page" set:html={sourceHtml} />

  <section class="faq-search container-narrow">
    <div class="hs-search-field hs-search-field--initialized">
      <div class="hs-search-field__bar hs-search-field__bar--button-inline">
        <form class="hs-search-field__form" action="/search">
          <label class="sr-only" for="faq-search-input">Search FAQs</label>
          <input
            id="faq-search-input"
            type="search"
            class="hs-search-field__input"
            name="q"
            autocomplete="off"
            placeholder="Search"
            data-faq-search
          />
          <button class="hs-search-field__button" type="button" aria-label="Search">
            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" width="18" height="18">
              <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" fill="#254080" />
            </svg>
          </button>
        </form>
      </div>
    </div>
  </section>

  <FAQAccordion
    heading="Questions & Answers"
    variant="page"
    sourceSelector="#faq-page-source"
    sourceHtml={sourceHtml}
    searchSelector="#faq-search-input"
  />

  <section class="faq-cta faq-cta-primary">
    <div class="container-narrow">
      <p class="eyebrow">Still have questions?</p>
      <h2>Reach Out to Learn More</h2>
      <p>We hope this FAQ gives you a clear picture of how Applied Behavior Analysis (ABA) therapy at the Arizona Institute for Autism can support your child’s growth. If you have more questions or would like to <a href="/client-consultation">schedule an assessment</a>, please reach out. Our team is here to guide you and your learner every step of the way!</p>
    </div>
  </section>

  <section class="faq-cta faq-cta-secondary">
    <div class="container-narrow">
      <h2>Need Support in Getting an Autism Diagnosis?</h2>
      <p>To meet diagnostic criteria for ASD, a child must have persistent deficits in each of three areas of social communication and interaction plus at least two of four types of restricted repetitive behaviors. Consult with a Client Advocate today to receive individual and family support!</p>
      <Button href="/client-consultation" center>Request an Appointment</Button>
    </div>
  </section>
</article>

<style>
  .faq-page {
    padding-bottom: 0;
  }

  .faq-source {
    padding-block: 4rem 1rem;
  }

  .faq-search {
    margin-bottom: 1.5rem;
    padding-block: 1rem .75rem;
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .hs-search-field {
    margin-inline: auto;
    width: min(780px, 100%);
  }

  .hs-search-field--initialized {
    display: block;
  }

  .hs-search-field__bar {
    display: block;
    width: 100%;
  }

  .hs-search-field__form {
    display: flex;
    margin: 0;
    width: 100%;
  }

  .hs-search-field__input {
    appearance: none;
    background: #fff;
    border: 2px solid rgba(37, 64, 128, .2);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(37, 64, 128, .06);
    color: var(--color-primary);
    flex: 1;
    font: inherit;
    line-height: 1.5;
    min-height: 3.125rem;
    min-width: 0;
    padding: .9rem 1.25rem;
  }

  .hs-search-field__input::placeholder {
    color: var(--color-muted);
    opacity: 1;
  }

  .hs-search-field__input:focus {
    border-color: var(--color-accent);
    outline: none;
  }

  .hs-search-field__button {
    align-items: center;
    background: #fff;
    border: 2px solid rgba(37, 64, 128, .2);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(37, 64, 128, .06);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    margin-left: 2px;
    min-height: 3.125rem;
    opacity: .85;
    padding-inline: 1rem;
  }

  .hs-search-field__button:hover {
    opacity: 1;
  }

  .faq-cta-primary {
    background: var(--color-primary);
    color: #fff;
    padding-block: 3.5rem;
  }

  .faq-cta-primary .eyebrow {
    color: #f9b34d;
  }

  .faq-cta-primary h2,
  .faq-cta-primary p {
    color: #fff;
  }

  .faq-cta-primary h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: .75rem;
  }

  .faq-cta-secondary {
    background: #fff;
    padding-block: 3.5rem 4rem;
  }

  .faq-cta-secondary h2 {
    color: var(--color-primary);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: .75rem;
  }

  .faq-cta-secondary :global(.content-button) {
    margin-top: 1.5rem;
  }

  @media (min-width: 768px) {
    .faq-source {
      padding-top: 4.5rem;
    }

    .faq-search {
      margin-bottom: 2rem;
      padding-block-end: 1rem;
    }
  }
</style>