@php
    $baseUrl = 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/abt/team/';
    $linkedinIcon = 'https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/ef-about/linkedin.png';
@endphp

<section class="bg-[#f5f5f5] w-full">
    <div class="mx-auto px-6 lg:px-20 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 7) -->
        <h4 class="text-[28px] text-black font-bold mb-10">Core Leaders</h4>

        @php
            $teamWithBio = [
                [
                    'name' => 'Ravikant Banka',
                    'role' => 'Founder & CEO',
                    'image' => '1.jpg',
                    'linkedin' => 'https://www.linkedin.com/in/eggfirst/',
                    'bio' => 'Over two decades of experience and campaigns for 500+ brands, Ravikant Banka has been shaping brand growth across Tier 2, Tier 3, and rural India. His deep understanding of consumer behavior, combined with expertise in advertising and digital marketing, has made him a respected thought leader in rural marketing and branding.',
                ],
                [
                    'name' => 'Hoshi Siganporia',
                    'role' => 'President – Growth & Strategy',
                    'image' => '2.jpg',
                    'linkedin' => 'https://www.linkedin.com/in/hoshi-siganporia-3185a23/',
                    'bio' => 'Bringing over three decades of experience across advertising, technology, and business leadership, Hoshi Siganporia has led transformative growth initiatives in India and the UAE. Today, he drives AI-powered, ROI-focused strategies that help brands unlock opportunities across Tier 2, Tier 3, and rural India.',
                ],
                [
                    'name' => 'Kunal Jamuar',
                    'role' => 'Director – Strategic Alliances',
                    'image' => '3.jpg',
                    'linkedin' => 'https://www.linkedin.com/in/kunaljamuar/',
                    'bio' => 'Over 25 years of experience in media research, strategy, planning, buying, and optimization, Kunal Jamuar has helped brands maximize the impact of their media investments. His expertise lies in building ROI-driven strategies, leading high-performing teams, and delivering measurable business growth.',
                ],
                [
                    'name' => 'Devendra Shirmal',
                    'role' => 'Consulting | Advisory | Mentoring',
                    'image' => '4.jpg',
                    'linkedin' => 'https://www.linkedin.com/in/devendra-shrimal-business-growth-strategist/',
                    'bio' => 'A seasoned business strategist with over 35 years of leadership experience, Devendra Shrimal is known for helping organizations unlock sustainable growth and long-term value. His expertise spans business transformation, governance, and building resilient, future-ready organizations.',
                ],
                [
                    'name' => 'Sanjay Sawant',
                    'role' => 'VP – Brand Growth',
                    'image' => '5.jpg',
                    'linkedin' => 'https://www.linkedin.com/in/sanjay-sawant-b9215612a/',
                    'bio' => 'Combining deep expertise in client servicing, business development, and market intelligence, Sanjay Sawant helps brands translate consumer insights into impactful growth strategies. His research-led approach and strategic thinking have enabled strong client partnerships and long-term business success.',
                ],
                [
                    'name' => 'Samrat Manchekar',
                    'role' => 'Senior VP – Client Services',
                    'image' => '6.jpg',
                    'linkedin' => 'https://www.linkedin.com/in/samratmanchekar',
                    'bio' => 'An extensive experience in integrated marketing and brand communication, Samrat Manchekar leads end-to-end campaigns that seamlessly blend strategy, creativity, production, and content. His passion lies in delivering powerful brand experiences that create measurable business impact.',
                ],
                [
                    'name' => 'Devika Gawde ',
                    'role' => 'Senior VP – Content & Client Services',
                    'image' => '12.jpg',
                    'linkedin' => 'https://www.linkedin.com/in/devika-gawde-8446a617/',
                    'bio' => 'Expertise spanning advertising, OTT, digital, and traditional media, Devika Gawde brings together creative storytelling and strategic execution to build impactful brand experiences. She is passionate about creating content-driven solutions that strengthen client relationships and business outcomes.',
                ],
            ];
        @endphp

        <!-- CORE LEADERS: mobile = 1 col full-width square image, desktop = same 4-col grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-10 lg:gap-y-12 mb-12">
            @foreach ($teamWithBio as $member)
                <div>
                    <img src="{{ $baseUrl . $member['image'] }}" class="w-full aspect-square object-cover mb-5"
                        alt="{{ $member['name'] }}">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <h5 class="font-semibold text-black lg:text-2xl text-[18px] mb-1">{{ $member['name'] }}</h5>
                            <p class="font-semibold lg:font-medium text-[14px] text-black/70">{{ $member['role'] }}</p>
                        </div>
                        <a href="{{ $member['linkedin'] }}" target="_blank" rel="noopener noreferrer"
                            aria-label="{{ $member['name'] }} LinkedIn"
                            class="flex-shrink-0 p-1 mt-1 rounded transition-opacity duration-200 hover:opacity-75">
                            <img src="{{ $linkedinIcon }}" alt="LinkedIn" class="w-[30px] h-[30px] object-contain">
                        </a>
                    </div>
                    <p class="text-black/70 text-[14px] leading-relaxed mt-3">
                        {{ $member['bio'] }}
                    </p>
                </div>
            @endforeach
        </div>

        <!-- CREATIVE LEADERS (8 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',
                    'image' => '7.jpg',
                    'linkedin' => 'https://www.linkedin.com/in/kiran-kamble-b91b4519/',
                    'bio' => 'Backed by over 16 years of experience in advertising, brand strategy, and creative communication, Kiran Kamble develops insight-led campaigns that resonate with audiences. His approach blends strategic thinking, compelling storytelling, and emerging AI technologies to deliver meaningful business results.',
                ],
                [
                    'name' => 'Sushant Chavan',
                    'role' => 'Creative Director',
                    'image' => '8.jpg',
                    'linkedin' => 'https://www.linkedin.com/in/sushant-c-9550b224/',
                    'bio' => 'A creative thinker with expertise in copywriting, storytelling, AI-powered content, and animation, Sushant Chavan has crafted integrated campaigns across digital, print, and film. His work is driven by culturally relevant ideas that connect brands with audiences across India.',
                ],
                [
                    'name' => 'Hindol Bhattacharya',
                    'role' => 'Creative Director – Copy',
                    'image' => '9.jpg',
                    'linkedin' => 'https://www.linkedin.com/in/hindol-bhattacharya-2585b4139/',
                    'bio' => 'Passionate about storytelling and brand communication, Hindol Bhattacharya brings together advertising, digital marketing, and creative strategy to develop impactful campaigns. His strength lies in transforming insights into compelling narratives that engage audiences and drive brand growth.',
                ],
            ];
        @endphp

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-10 lg:gap-y-12">
            @foreach ($teamCreative as $member)
                <div>
                    <img src="{{ $baseUrl . $member['image'] }}" class="w-full aspect-square object-cover mb-5"
                        alt="{{ $member['name'] }}">
                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <h5 class="font-semibold text-black lg:text-2xl text-[18px] mb-1">{{ $member['name'] }}</h5>
                            <p class="font-semibold lg:font-medium text-[14px] text-black/70">{{ $member['role'] }}</p>
                        </div>
                        <a href="{{ $member['linkedin'] }}" target="_blank" rel="noopener noreferrer"
                            aria-label="{{ $member['name'] }} LinkedIn"
                            class="flex-shrink-0 p-1 mt-1 rounded transition-opacity duration-200 hover:opacity-75">
                            <img src="{{ $linkedinIcon }}" alt="LinkedIn" class="w-[30px] h-[30px] object-contain">
                        </a>
                    </div>
                    <p class="text-black/70 text-[14px] leading-relaxed mt-3">
                        {{ $member['bio'] }}
                    </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',
                    'linkedin' => 'https://www.linkedin.com/in/himani-bhatt-745a19162/',
                    'image' => '10.jpg',
                    'bio' => 'Known for her leadership and operational excellence, Himani Bhatt ensures the seamless functioning of people, processes, and workplace operations. Her commitment to efficiency, integrity, and organizational development plays a key role in supporting business growth.',
                ],
                [
    'name' => 'Rajesh Parmar',
    'role' => 'Head of Accounts',
    'linkedin' => 'https://www.linkedin.com/in/rajesh-parmar-2521a7113/',
    'image' => '11.jpg',
    'bio' => 'Expertise in financial operations, accounting, and compliance, Rajesh Parmar plays a vital role in maintaining strong financial discipline and operational efficiency. His focus on accuracy, reporting, and day-to-day finance management helps support the organization\'s long-term business objectives.',
],
            ];
        @endphp

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-10 lg:gap-y-12">
            @foreach ($teamOps as $member)
                <div>
                    <img src="{{ $baseUrl . $member['image'] }}"
                        class="w-full aspect-square object-cover mb-5"
                        alt="{{ $member['name'] }}">

                    <div class="flex items-start justify-between gap-4">
                        <div>
                            <h5 class="font-semibold text-black lg:text-2xl text-[18px] mb-1">
                                {{ $member['name'] }}
                            </h5>
                            <p class="font-semibold lg:font-medium text-[14px] text-black/70">
                                {{ $member['role'] }}
                            </p>
                        </div>

                        <a href="{{ $member['linkedin'] }}"
                            target="_blank"
                            rel="noopener noreferrer"
                            aria-label="{{ $member['name'] }} LinkedIn"
                            class="flex-shrink-0 p-1 mt-1 rounded transition-opacity duration-200 hover:opacity-75">
                            <img src="{{ $linkedinIcon }}"
                                alt="LinkedIn"
                                class="w-[30px] h-[30px] object-contain">
                        </a>
                    </div>
                    <p class="text-black/70 text-[14px] leading-relaxed mt-3">
                        {{ $member['bio'] }}
                    </p>
                </div>
            @endforeach
        </div>

    </div>
</section>