@props(['data'])
@php
    $parent = reset($data);
    $child = array_values(array_slice($data, 1));
@endphp


<section class="py-16">
    <div
      class="2xl:container 2xl:mx-auto flex flex-col gap-12 px-2 py-10 md:flex-row md:items-center md:px-[20px] lg:px-[60px]">
      <!-- left -->
      <section class="md:w-[50%]">
        <section class="flex flex-col gap-12 md:flex-row md:items-center py-4">
    
          <iframe
              src="{{$parent['location_url']}}"
              width="100%" height="450" style="border: 0" allowfullscreen="" loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"></iframe>
        
          </section>
      </section>
      <!-- right -->
      <section class="text-[#2F2B2B] md:w-[50%] space-y-4">
        <h1 class="text-4xl font-bold text-[#113a5e]">{{$parent['title']}}</h1>
        <div class="w-10 h-1 bg-[#0298c0] rounded-full"></div>
        <div class="space-y-10">

            <!-- address  -->
          @if (!empty($child))
          @foreach ($child as $value )
          <div class="space-y-2">
            <h1 class="text-2xl font-bold text-[#113a5e]">{{$value['office']}}</h1>
            <ul class="max-w-[300px] space-y-2">
              <li>{{$value['office_location']}}</li>
              <li>{{$value['office_number']}}</li>
              <li>{{$value['office_email']}}</li>
            </ul>
          </div>   
          @endforeach
          @endif
          
        </div>
      </section>
    </div>
  </section>