@extends('layouts.website')

@section('content')
<style>
.bs-banner .main .swiper-wrapper .swiper-slide .background-wrapper {
   background-position: right !important;
}
@media (max-width: 768px) {
   .bs-banner .main .swiper-wrapper .swiper-slide .background-wrapper {
      background-position: 0 !important;
   }
}
</style>

<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="#" class="bs-btn typ-fill">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 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="Smita More" class="team-img" />
                        </div>
                        <div class="team-content d-flex align-items-end justify-content-between">
                            <div class="">
                                <h5>Mrs. Smita More</h5>
                                <p class="team-role">Principal Assessor & Technical <br> Accreditation Team Member
                                </p>
                            </div>
                            <span class="arrow1">→</span>
                        </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>
                            <span class="arrow1">→</span>
                        </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>
                            <span class="arrow1">→</span>
                        </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>
                            <span class="arrow1">→</span>
                        </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>
                            <span class="arrow1">→</span>
                        </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>
                            <span class="arrow1">→</span>
                        </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="#" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400">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-sec-popup">
        <!-- Popup -->
        <div id="popup" class="popup-overlay" onclick="closePopup(event)">
            <div class="popup-content">
                <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>

    <!-- 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>
    <div class="sticky-btn">
        <a href="">
            <img src="{{ asset('assets/images/btn.svg') }}" class="img-fluid" alt="button">
        </a>
    </div>
</main>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<script>
    function closePopup(e) {
        if (
            e.target.classList.contains("popup-overlay") ||
            e.target.classList.contains("close-btn")
        ) {
            document.getElementById("popup").style.display = "none";
        }
    }

    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>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const swiper = new Swiper(".teamSwiper", {
    slidesPerView: 3.5,
    spaceBetween: 0,
    loop: false,
    grabCursor: true,
    speed: 600,
    navigation: {
      nextEl: ".industry-next",
      prevEl: ".industry-prev",
    },
    breakpoints: {
      0: { slidesPerView: 1 },
      600: { slidesPerView: 2 },
      1024: { slidesPerView: 3.5 },
    },
  });
});
</script>
@endsection