@php
  $baseUrl = 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/team/about-us/';
@endphp

<section class="bg-[#f5f5f5] w-full">
  <div class="mx-auto px-6 lg:px-16 py-16 lg:py-24">

    <div class="flex flex-col lg:flex-row justify-between items-start gap-6 mb-12">
      <h5 class="text-[34px] text-black font-bold max-w-xs">Empowering Creator Economy</h5>
      <p class="text-black text-[16px] md:text-[17px] lg:text-[18px] max-w-xl">
        From hyperlocal influencers to regional storytellers, we activate creators who speak the language of Bharat, command trust in their communities and drive influence.
      </p>
    </div>

    <h2 class="text-black font-extrabold uppercase text-[36px] sm:text-[48px] lg:text-[70px] mb-10">
      Our Team
    </h2>

    <!-- CORE LEADERS (1 to 6) -->
    <h4 class="text-[28px] text-black font-bold mb-10">Core Leaders</h4>

    @php
      $team = [
        ['name' => 'Ravikant Banka', 'role' => 'Founder & CEO'],
        ['name' => 'Hoshi Siganporia', 'role' => 'President – Growth & Strategy'],
        ['name' => 'Kunal Jamuar', 'role' => 'Director – Strategic Alliances'],
        ['name' => 'Devendra Shirmal', 'role' => 'Consulting | Advisory | Mentoring'],
        ['name' => 'Sanjay Sawant', 'role' => 'VP – Brand Growth'],
        ['name' => 'Samrat Manchekar', 'role' => 'Senior VP – Client Services'],
      ];
    @endphp

    <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
      @foreach ($team as $index => $member)
        <div>
          <img
            src="{{ $baseUrl . ($index + 1) . '.jpg' }}"
            class="w-full aspect-square object-cover mb-4"
            alt="{{ $member['name'] }}"
          >
          <h5 class="font-semibold text-black lg:text-2xl text-[18px]">{{ $member['name'] }}</h5>
          <p class="font-semibold lg:font-medium text-[14px]">{{ $member['role'] }}</p>
        </div>
      @endforeach
    </div>

    <!-- CREATIVE LEADERS (7 to 10) -->
    <h4 class="text-[28px] text-black font-bold mt-20 mb-10">Creative Leaders</h4>

    @php
      $teamCreative = [
        ['name' => 'Kiran Kamble', 'role' => 'Assoc. Creative Director'],
        ['name' => 'Sushant Chavan', 'role' => 'Creative Director'],
        ['name' => 'Hindol Bhattacharya', 'role' => 'Creative Director – Copy'],
        ['name' => 'Pratik Mistry', 'role' => 'Art Director'],
      ];
    @endphp

    <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
      @foreach ($teamCreative as $index => $member)
        <div>
          <img
            src="{{ $baseUrl . ($index + 7) . '.jpg' }}"
            class="w-full aspect-square object-cover mb-4"
            alt="{{ $member['name'] }}"
          >
          <h5 class="font-semibold text-black lg:text-2xl text-[18px]">{{ $member['name'] }}</h5>
          <p class="font-semibold lg:font-medium text-[14px]">{{ $member['role'] }}</p>
        </div>
      @endforeach
    </div>

    <!-- ORGANISATIONAL LEADERS (11 to 12) -->
    <h4 class="text-[28px] text-black font-bold mt-20 mb-10">Organisational Leaders</h4>

    @php
      $teamOps = [
        ['name' => 'Himani Bhatt', 'role' => 'Manager – HR'],
        ['name' => 'Rajesh Parmar', 'role' => 'Head Accounts'],
      ];
    @endphp

    <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
      @foreach ($teamOps as $index => $member)
        <div>
          <img
            src="{{ $baseUrl . ($index + 11) . '.jpg' }}"
            class="w-full aspect-square object-cover mb-4"
            alt="{{ $member['name'] }}"
          >
          <h5 class="font-semibold text-black lg:text-2xl text-[18px]">{{ $member['name'] }}</h5>
          <p class="font-semibold lg:font-medium text-[14px]">{{ $member['role'] }}</p>
        </div>
      @endforeach
    </div>

  </div>
</section>