@props(['mapData'])

<section class="mb-5" data-aos="fade-up" data-aos-duration="1000">
    <div class="container-fluid p-0">
        <div class="title-area position-relative d-flex align-items-center justify-content-center" style="z-index: 2; height: 120px; background: white;">
            <h2 class="text-center fw-bold mb-0 text-black" data-aos="fade-down" data-aos-delay="100" style="font-family: 'Poppins', sans-serif;">
                Address
            </h2>
        </div>

        <div class="map-wrapper position-relative text-center">
            <img src="{{ asset($mapData['image']) }}" alt="Map Infrastructure Layout" class="img-fluid map-image">
            
            <div class="map-pin" style="top: {{ $mapData['boys']['top'] }}; left: {{ $mapData['boys']['left'] }};">
                <a href="{{ $mapData['boys']['link'] }}" target="_blank" rel="noopener noreferrer">
                    <img src="{{ asset($mapData['pin_icon']) }}" alt="Boys Campus Pin Icon" class="pin-icon">
                </a>
                <span style="font-family: 'Poppins', sans-serif;">
                    {{ $mapData['boys']['name'] }}
                </span>
            </div>

            <div class="map-pin" style="top: {{ $mapData['girls']['top'] }}; left: {{ $mapData['girls']['left'] }};">
                <a href="{{ $mapData['girls']['link'] }}" target="_blank" rel="noopener noreferrer">
                    <img src="{{ asset($mapData['pin_icon']) }}" alt="Girls Campus Pin Icon" class="pin-icon">
                </a>
                <span style="font-family: 'Poppins', sans-serif;">
                    {{ $mapData['girls']['name'] }}
                </span>
            </div>
        </div>
    </div>
</section>