@extends('layouts.website')

@section('content')

    <main>
        <section class="bs-banner type-overview typ-glob-accre">
            <div class="swiper main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper set-bg"
                            data-img="{{ asset('assets/images/accreditations/accreditations-banner.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">

                                    <h1 class="title">Empowering<span> Excellence in,<br> Certifications</span>
                                    </h1>
                                    <p class="subtitle marB42">Your trusted partner in quality, safety, and
                                        sustainability standards.</p>
                                    <div class="custom-btn-group">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()"
                                            data-page-source="about-management">Get a Quote Now</a>
                                        <!-- <a href="#" class="bs-btn">Accreditations</a> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="lyt-section typUpskill p-0 typBlack typ-accre-recog typ-member-slide typ-mission-sec2">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="common-heading" data-aos="fade" data-aos-delay="300">
                            <div class="line">
                                <img src="{{ asset('assets/images/blue-bg-line.svg') }}" class="img-fluid" alt="line-img">
                            </div>
                            <div class="bs-sub-heading typWhite text-uppercase">Leadership Team</div>
                        </div>
                        <div class="row mb-lg-5 mb-4" data-aos="fade" data-aos-delay="400">
                            <div class="col-12">
                                <h2 class="bs-heading typWhite maxw600">
                                    Steering IRQS with Vision and Expertise
                                </h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex align-items-center">
                        <p class="bs-para typ-member-para pb-2" style="color:#fff;">Our leadership team comprises seasoned professionals
                            dedicated to guiding IRQS towards delivering unparalleled certification services.
                        </p>
                    </div>
                </div>
            </div>

            <div class="container">
                <div class="outer-border">
                    <div class="swiper teamSwiper">
                        <div class="swiper-wrapper ">

                            <div class="swiper-slide">
                                <div class="team-card">
                                    <div class="team-img">
                                        <img src="{{ asset('assets/images/member/shashi-nath.webp') }}"
                                            alt="Shashi Nath Mishra" />
                                    </div>
                                    <div class="team-name-initial">Mr. Shashi Nath Mishra</div>
                                    <div class="team-info">
                                        <h3 class="">Mr. Shashi Nath Mishra</h3>
                                        <p class="bs-para">Chief Operating Officer & Global Head, IRQS</p>
                                        <p class="desc">Mr. Mishra leads IRQS with a focus on excellence across multiple
                                            sectors, ensuring the organization's commitment to quality and innovation.
                                        </p>
                                        <span class="arrow">→</span>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="team-card">
                                    <div class="team-img">
                                        <img src="{{ asset('assets/images/member/arun1.webp') }}" alt="Arun Sharma" />
                                    </div>
                                    <div class="team-name-initial">Mr. Arun Sharma</div>
                                    <div class="team-info">
                                        <h3>Mr. Arun Sharma</h3>
                                        <p class="bs-para">Technology Consultant</p>
                                        <p class="desc">Lead Developer moere</p>
                                        <span class="arrow">→</span>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="team-card">
                                    <div class="team-img">
                                        <img src="{{ asset('assets/images/member/arun2.webp') }}" alt="Arun Sharma" />
                                    </div>
                                    <div class="team-name-initial">Mr. Arun Sharma</div>
                                    <div class="team-info">
                                        <h3 class="bs-para">Mr. Arun Sharma</h3>
                                        <p class="bs-para">Technology Consultant</p>
                                        <p class="desc">Lead Developer</p>

                                        <span class="arrow">→</span>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="team-card">
                                    <div class="team-img">
                                        <img src="{{ asset('assets/images/member/arun3.webp') }}" alt="Arun Sharma" />
                                    </div>
                                    <div class="team-name-initial">Mr. Arun Sharma</div>
                                    <div class="team-info">
                                        <h3>Mr. Arun Sharma</h3>
                                        <p class="bs-para">Creative Director</p>
                                        <p class="desc">Lead Developer moere</p>
                                        <span class="arrow">→</span>
                                    </div>
                                </div>
                            </div>

                            <div class="swiper-slide">
                                <div class="team-card">
                                    <div class="team-img">
                                        <img src="{{ asset('assets/images/member/shashi-nath.webp') }}"
                                            alt="Shashi Nath Mishra" />
                                    </div>
                                    <div class="team-name-initial">Mr. Shashi Nath Mishra</div>
                                    <div class="team-info">
                                        <h3 class="">Mr. Shashi Nath Mishra</h3>
                                        <p class="bs-para">Chief Operating Officer & Global Head, IRQS</p>
                                        <p class="desc">Mr. Mishra leads IRQS with a focus on excellence across multiple
                                            sectors, ensuring the organization's commitment to quality and innovation.
                                        </p>
                                        <span class="arrow">→</span>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="team-card">
                                    <div class="team-img">
                                        <img src="{{ asset('assets/images/member/arun1.webp') }}" alt="Arun Sharma" />
                                    </div>
                                    <div class="team-name-initial">Mr. Arun Sharma</div>
                                    <div class="team-info">
                                        <h3>Mr. Arun Sharma</h3>
                                        <p class="bs-para">Technology Consultant</p>
                                        <p class="desc">Lead Developer moere</p>
                                        <span class="arrow">→</span>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="team-card">
                                    <div class="team-img">
                                        <img src="{{ asset('assets/images/member/arun2.webp') }}" alt="Arun Sharma" />
                                    </div>
                                    <div class="team-name-initial">Mr. Arun Sharma</div>
                                    <div class="team-info">
                                        <h3 class="bs-para">Mr. Arun Sharma</h3>
                                        <p class="bs-para">Technology Consultant</p>
                                        <p class="desc">Lead Developer</p>

                                        <span class="arrow">→</span>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="team-card">
                                    <div class="team-img">
                                        <img src="{{ asset('assets/images/member/arun3.webp') }}" alt="Arun Sharma" />
                                    </div>
                                    <div class="team-name-initial">Mr. Arun Sharma</div>
                                    <div class="team-info">
                                        <h3>Mr. Arun Sharma</h3>
                                        <p class="bs-para">Creative Director</p>
                                        <p class="desc">Lead Developer moere</p>
                                        <span class="arrow">→</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="bs-swipper-icons pt-4">
                    <div class="swiper-button-prev industry-prev">
                        <span class="icon icon-link-arrow"></span>
                    </div>
                    <div class="swiper-button-next industry-next">
                        <span class="icon icon-link-arrow"></span>
                    </div>
                </div>
            </div>

            </div>
        </section>
        <section class="lyt-section typ-mission-sec5 typ-member-sec3">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-12 mt-lg-0 mt-4">
                        <div class="content ps-lg-5 p-0 text-center" data-aos="fade" data-aos-delay="400">
                            <div class="common-heading d-flex justify-content-center" data-aos="fade" data-aos-delay="300">
                                <div class="bs-sub-heading  text-uppercase">Core Committee <span class="ms-1">Members</span>
                                </div>
                            </div>
                            <h2 class="bs-heading mb-3" data-aos="fade" data-aos-delay="400">
                                Driving Operational Excellence
                            </h2>
                            <p class="bs-para pb-3">Our core committee members are integral to IRQS's operations,
                                ensuring<br>
                                that our services meet the highest standards of quality and efficiency.</p>
                        </div>
                    </div>

                </div>

            </div>
            <div class="container py-4">
                <div class="row g-0">
                    <!-- Card 1 -->
                    <div class="col-12 col-md-4">
                        <div class="team-card">
                            <div class="image-container">
                                <img src="{{ asset('assets/images/member/smita.webp') }}" alt="Image"
                                    class="team-img" />
                            </div>
                            <div class="team-content d-flex align-items-end justify-content-between">
                                <div class="">
                                    <h5>Mrs. Image</h5>
                                    <p class="team-role">Principal Assessor & Technical <br> Accreditation Team Member
                                    </p>
                                </div>
                                
                            </div>
                        </div>
                    </div>

                    <!-- Card 2 (Middle Column) -->
                    <div class="col-12 col-md-4">
                        <div class="team-card middle-col">
                            <div class="image-container">
                                <img src="{{ asset('assets/images/member/nilesh.webp') }}" alt="Nilesh Nakar"
                                    class="team-img" />
                            </div>
                            <div class="team-content d-flex align-items-end justify-content-between">
                                <div class="">
                                    <h5>Mr. Nilesh Nakar</h5>
                                    <p class="team-role">Principal Assessor & Technical <br> Accreditation Team Member
                                    </p>
                                </div>
                             
                            </div>
                        </div>
                    </div>

                    <!-- Card 3 -->
                    <div class="col-12 col-md-4">
                        <div class="team-card">
                            <div class="image-container">
                                <img src="{{ asset('assets/images/member/priya.webp') }}" alt="Priya Sharma"
                                    class="team-img" />
                            </div>
                            <div class="team-content d-flex align-items-end justify-content-between">
                                <div class="">
                                    <h5>Ms. Priya Sharma</h5>
                                    <p class="team-role">QA Specialist</p>
                                </div>
                           
                            </div>
                        </div>
                    </div>

                    <!-- Card 4 -->
                    <div class="col-12 col-md-4">
                        <div class="team-card">
                            <div class="image-container">
                                <img src="{{ asset('assets/images/member/rajesh.webp') }}" alt="Rajesh Kumar"
                                    class="team-img" />
                            </div>
                            <div class="team-content d-flex align-items-end justify-content-between">
                                <div class="">
                                    <h5>Mr. Rajesh Kumar</h5>
                                    <p class="team-role">Product Manager</p>
                                </div>
                             
                            </div>
                        </div>
                    </div>

                    <!-- Card 5 (Middle Column) -->
                    <div class="col-12 col-md-4">
                        <div class="team-card middle-col">
                            <div class="image-container">
                                <img src="{{ asset('assets/images/member/amit.webp') }}" alt="Amit Ketkar"
                                    class="team-img" />
                            </div>
                            <div class="team-content d-flex align-items-end justify-content-between">
                                <div class="">
                                    <h5>Mr. Amit Ketkar</h5>
                                    <p class="team-role">Software Engineer</p>
                                </div>
                            
                            </div>
                        </div>
                    </div>

                    <!-- Card 6 -->
                    <div class="col-12 col-md-4">
                        <div class="team-card">
                            <div class="image-container">
                                <img src="{{ asset('assets/images/member/arjit.webp') }}" alt="Arijit Kumar Basu"
                                    class="team-img" />
                            </div>
                            <div class="team-content d-flex align-items-end justify-content-between">
                                <div class="">
                                    <h5>Mr. Arijit Kumar Basu</h5>
                                    <p class="team-role">Data Analyst</p>
                                </div>
                           
                            </div>
                        </div>
                    </div>
                </div>
                <div class="custom-btn-group d-flex justify-content-center mt-4">
                    <a href="#" class="bs-btn  my-3">View all</a>
                </div>
            </div>


        </section>
        <!-- <section class="lyt-section typ-certified p-0">
            <div class="container-padding-left-create">
                <div class="certified-wrapper">
                    <div class="leftBox lyt-section">
                        <div class="maxw400">
                            <h2 class="bs-heading mb-4" data-aos="fade" data-aos-delay="200">
                                Let's get you certified-Start your journey <span>today!</span>

                            </h2>
                            <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                                Connect with our experts for a seamless and hassle-free certification process.
                            </p>
                            <a href="javascript:void(0)" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400" onclick="openPopupTC()" data-page-source="management">Get Certified</a>
                        </div>
                    </div>
                    <div class="rightBox">
                        <div class="box-img" data-aos="fade" data-aos-delay="300">
                            <img src="{{ asset('assets/images/certified-bg.jpg') }}" class="img-fluid" alt="background-img">
                        </div>
                        <div class="middle-img" data-aos="fade" data-aos-delay="500">
                            <img src="{{ asset('assets/images/certified-img.png') }}" class="img-fluid" alt="man-img">
                        </div>
                    </div>
                </div>
            </div>
        </section> -->
        <section class="lyt-section typ-certified p-0">
            <div class="container-padding-left-create">
                <div class="certified-wrapper">
                    <div class="leftBox lyt-section">
                        <div class="maxw500o">
                            <h2 class="bs-heading mb-4" data-aos="fade" data-aos-delay="200">
                                Let's get you certified-Start your journey <span>today!</span>
                            </h2>
                            <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                                Connect with our experts for a seamless and hassle-free certification process.
                            </p>
                            <a href="javascript:void(0)" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400"
                                onclick="openPopupTC()" data-page-source="about-management">Get Certified</a>
                        </div>
                    </div>
                    <div class="rightBox">
                        <div class="box-img" data-aos="fade" data-aos-delay="300">
                            <img src="{{ asset('assets/images/certified-bg.jpg') }}" class="img-fluid" alt="background-img">
                        </div>

                        <div class="middle-img" data-aos="fade" data-aos-delay="500">
                            <img src="{{ asset('assets/images/certified-img.png') }}" class="img-fluid" alt="man-img">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="typ-sec-popup">
            <!-- Popup -->
           <div id="popup" class="popup-overlay" onclick="closePopup(event)">
    <div class="popup-content" onclick="event.stopPropagation()">
        <span class="close-btn" onclick="closePopup(event)">
            &times; <span class="clo-w">CLOSE</span>
        </span>
        <img id="popup-img" src="" alt="" />
        <div class="popup-details">
            <h3 id="popup-name"></h3>
            <p id="popup-title" class="title"></p>
            <p id="popup-desc" class="desc"></p>
        </div>
    </div>
</div>


        </section>

        <script>
            function closePopup(event) {
    event.stopPropagation(); // prevent bubbling
    document.getElementById("popup").style.display = "none";
}

            </script>
        <!-- back to top  -->
        <a href="#" class="back-to-top">
            <span class="icon icon-drop-icon"></span>
            <!-- <p class="back-text">Back to Top</p> -->
        </a>
        @include('components.request-quote-button')
    </main>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const cards = document.querySelectorAll(".swiper-wrapper .team-card");

            cards.forEach((card) => {
                card.addEventListener("click", function () {
                    const img = card.querySelector(".team-img img")?.src || '';
                    const name = card.querySelector(".team-name-initial")?.textContent || '';
                    const title = card.querySelector(".team-info .bs-para")?.textContent || '';
                    const desc = card.querySelector(".team-info .desc")?.textContent || '';

                    document.getElementById("popup-img").src = img;
                    document.getElementById("popup-name").textContent = name;
                    document.getElementById("popup-title").textContent = title;
                    document.getElementById("popup-desc").textContent = desc;

                    document.getElementById("popup").style.display = "flex";
                });
            });

            document.getElementById("popup").addEventListener("click", function (e) {
                if (
                    e.target.classList.contains("popup-overlay") ||
                    e.target.classList.contains("close-btn")
                ) {
                    document.getElementById("popup").style.display = "none";
                }
            });
        });
    </script>

    {{-- Include enquiry form modal for Management page --}}
    @include('components.enquiry-form-wrapper', ['pageSource' => 'about-management', 'formType' => 'enquiry'])
@endsection