@props([
    'city' => 'North Palm Beach',
    'communities' => [],
    'class' => 'container'
])

<div class="{{ $class }}">
  <div class="mb-8 text-center">
    <h2 class="title-section-blue-variant mb-6">Premier Pool Builder for Top Communities in {{ $city }}, Florida
    </h2>
    <div class="bg-primary mx-auto mb-8 h-1 w-24"></div>
    <p class="mx-auto mb-14 max-w-3xl text-xl italic text-gray-700 md:text-[22px]">
      As the top pool contractor for {{ $city }}, we craft exquisite pools that embody the sophistication and
      waterfront elegance of the area's most prestigious neighborhoods.
    </p>
  </div>

  {{-- Community Text Columns --}}
  <div class="mb-8 columns-1 gap-8 space-y-8 md:columns-2 lg:mb-20">
    @foreach ($communities as $community)
      <div class="break-inside-avoid">
        <h3 class="text-primary inline text-xl font-bold">{{ $community['name'] }}.</h3>
        <p class="inline text-lg leading-relaxed text-gray-700">
          {{ $community['description'] }}
        </p>
      </div>
    @endforeach
  </div>

  <x-services.schedule-button-section />
</div>