{% extends 'layouts/base' %}

{% block content %}
	{% embed 'skeletons/internalPage' %}

    {% block internal %}
    {% import "macros" as macros %}
    {% import "macros/images" as imageMacros %}

  <section class="flex flex-col-reverse gap-12 py-16 container lg:grid lg:grid-cols-[4fr_3fr] lg:gap-16 lg:py-20 xl:gap-24 xl:py-24">
    <article class="flex flex-col items-stretch">
      <h4 class="heading-3">{{entry.aboutIntroHeading}}</h4>
      <div class="copy-lg mt-8 xl:mt-12"> 
        {{entry.aboutDescription}} 
      </div>
    </article>
    <article class="relative">
      {% if entry.aboutFeatureImage|default %}
          <div class="relative mb-12 overflow-hidden pb-2/5">
              {{ imageMacros.imagerSrcset(
                  entry.aboutFeatureImage[0],
                  'card',
                  { classes: "object-cover object-center w-full aspect-square childFull", isBackground: false })
              }}
          </div>
      {% endif %}
    </article>
  </section>
  <!-- Meet the Team -->
  <section class="container py-16 xl:py-24">
    <h1 class="heading-1 text-blue">{{entry.peopleIntroHeading}}</h1>
    <div class="mt-12 space-y-12 xl:mt-16 xl:space-y-16">
      <!-- Repeat -->
      {% for item in entry.peoplesBio.all() %}
        <article class="gap-8 md:flex md:flex-row md:items-start md:gap-12 xl:gap-16 aos-init aos-animate" data-aos="fade-up">
            <div class="max-w-xs shrink-0">
                {% if item.profileImage|default %}
                    {{ imageMacros.imagerSrcset(
                        item.profileImage[0],
                        'card',
                        { classes: "aspect-[3/4] w-full object-cover object-center childFull", isBackground: false })
                    }}
                {% endif %}
            </div>
            <!-- About -->
            <div class="flex-1 w-full">
            <h6 class="heading-4 text-imperial">{{item.peopleFullName}}</h6>
            <div class="mt-12 copy"> {{item.peopleSummaryBio|nl2br}} </div>
            {% if item.peopleFunFacts %}
                <div class="flex items-start gap-4 mt-6">
                    <div class="shrink-0">
                        {{ macros.icon("custom/toothBulb","object-contain type-5xl") }}
                    </div>
                    <div class="flex-1 font-light type-xl">
                      <span class="font-semibold"> Fun Fact : </span> {{item.peopleFunFacts}}
                    </div>
                </div>
            {% endif %}
            </div>
        </article>
      {% endfor %}
      </article>
    </div>
  </section>
  <!-- Image - Pattern -->
  <section class="container py-16 gap-x-20 lg:grid lg:grid-cols-3 xl:py-24 xxl:grid-cols-4 aos-init aos-animate" data-aos="fade-up">
    <article class="grid items-center grid-cols-1">
      <img class="invisible hidden object-contain w-full grayscale opacity-20 lg:visible lg:block" src="{{ assetManifest('/dist/images/rootCanal.svg') }}" alt="" />
    </article>
    <article class="w-full lg:col-span-2 xxl:col-span-3">
       {% if entry.image|default %}
            {{ imageMacros.imagerSrcset(
                entry.image[0],
                'card',
                { classes: "aspect-[4/3] w-full object-cover object-center childFull", isBackground: false })
            }}
        {% endif %}
    </article>
  </section>
 
    <div class="container">
      {% include "blocks/global/testimonials" %}
    </div>
    {% include "blocks/global/callToAction" %}

  	{% endblock %}

	{% endembed %}

{% endblock content %}