@props([
    'eyebrow',
    'lead' => null,
    'emph' => null,
    'title' => null,
    'ctaLabel' => 'Schedule A Free Estimate',
    'checklistHeading',
    'checklistItems' => [],
    'background' => 'bg-deep-2',
])

<section {{ $attributes }} class="relative grid grid-cols-1 items-stretch md:grid-cols-2 {{ $background }}">
  <div class="absolute bottom-0 left-1/2 right-0 top-0 bg-[#284250] hidden md:block">
  </div>
  <div class="container relative z-10 col-span-2 col-start-1 row-start-1 mx-auto flex max-w-7xl justify-start flex-col md:flex-row py-12 lg:py-0">
    <div class="flex w-full flex-1 flex-col justify-center py-0 md:pr-12 lg:py-20">
      @if ($title)
        <x-home.section-header :eyebrow="$eyebrow" :hasHyphen="false">{!! $title !!}</x-home.section-header>
      @else
        <x-home.section-header :eyebrow="$eyebrow" :lead="$lead" :emph="$emph" :hasHyphen="false" />
      @endif
      {{ $slot }}
      <x-home.cta-buttons :cta-label="$ctaLabel"  variant="row" color="warm" class="flex-wrap md:flex-wrap lg:flex-wrap md:gap-4! lg:gap-6 w-full hidden md:flex justify-start"  />
    </div>
    <div class="relative z-20 flex-1 px-0 md:pl-12">
      <div class="item-center flex h-full w-full flex-col justify-center py-6 lg:py-20">
        <x-home.checklist-grid :heading="$checklistHeading" :items="$checklistItems" :columns="2" />
      </div>
    </div>
    <x-home.cta-buttons :cta-label="$ctaLabel"  variant="row" color="warm" class="flex-wrap md:flex-wrap lg:flex-wrap md:gap-4! lg:gap-6 w-full flex md:hidden"  />
  </div>
</section>