@extends('layouts.website')

@section('content')
    <main>
        <section class="bs-banner type-overview typ-glob-accre typ-evt-banner typ-cert-banner">
            <div class="swiper main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper set-bg"
                            data-img="{{ asset('assets/images/certification/certificate-banner1.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">
                                    <h1 class="title">Single-Use Plastic Free <br><span>Certified for a Cleaner
                                            Future</span>
                                    </h1>
                                    <p class="subtitle marB42">Ensure your products align with environmental regulations
                                        by eliminating harmful single-use plastics.</p>
                                    <div class="custom-btn-group mb-2">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()">Certification</a>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="lyt-section bs-events">
            <div class="container typ-abt-events">

                <div class="row align-items-start">
                    <div class="common-heading" data-aos="fade" data-aos-delay="300">
                        <div class="line">
                            <img src="{{ asset('assets/images/white-bg-line.svg') }}" class="img-fluid" alt="line-img">
                        </div>
                        <div class="bs-sub-heading">Overview</div>

                    </div>
                    <div class="col-md-5">

                        <h2 class="bs-heading" data-aos="fade" data-aos-delay="400">
                            Why Single-Use Plastics Must Go
                        </h2>
                    </div>
                    <div class="col-md-7 common-event">
                        <div class="event-desc bs-para mb-3">
                            Single-use plastics are disposable items designed for a single application before being
                            thrown away. These include everyday products like plastic bags, straws, food wrappers,
                            disposable cutlery, and beverage cups. Although they offer convenience, their use is
                            fleeting while their environmental impact is long-lasting. Most of these plastics are made
                            from fossil fuel-based chemicals and are not biodegradable, making them a major contributor
                            to global plastic pollution.
                        </div>
                        <div class="event-desc bs-para">
                            Once discarded, single-use plastics often end up in landfills, water bodies, and natural
                            ecosystems. Over time, they break down into microplastics, which contaminate soil, water,
                            and food chains—harming wildlife and potentially human health. Reducing our use of these
                            materials is crucial for protecting the planet. By choosing reusable alternatives and
                            supporting sustainable practices, individuals and organizations can significantly reduce
                            their environmental footprint.
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="lyt-section bs-certification typBlack typ-certificate-plastic">
            <div class="container">
                <div class="row">
                    <div class="col-md-7">
                        <h2 class="bs-heading typWhite mb-4">Why Avoid Single-Use Plastics?</h2>
                        <div class="mb-5">
                            <p class="bs-para typWhite">
                                Reducing single-use plastics isn't just an environmental step—it's a commitment to
                                health,
                                responsibility, and long-term sustainability.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-5 d-flex justify-content-end align-items-center">
                        <div class="">
                            <div class="d-flex gap-2 bio1">
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper mySwiperCT mt-4">
                    <div class="swiper-wrapper">

                        <div class="swiper-slide"
                            style="background-image:url('{{ asset('assets/images/certification/non-biodigrable.webp') }}')">
                            <div class="card-content">
                                <h3 class="card-title">Non-Biodegradability</h3>
                                <p class="card-text">Single-use plastics take hundreds of years to degrade. As they
                                    break down into smaller pieces, they continue to pollute and harm wildlife.</p>
                            </div>
                        </div>

                        <div class="swiper-slide"
                            style="background-image:url('{{ asset('assets/images/certification/resource-intense.webp') }}')">
                            <div class="card-content">
                                <h3 class="card-title">Resource Intensive</h3>
                                <p class="card-text">The production of single-use plastics consumes significant amounts
                                    of fossil fuels and energy, leading to further environmental damage.</p>
                            </div>
                        </div>

                        <div class="swiper-slide"
                            style="background-image:url('{{ asset('assets/images/certification/health-risk.webp') }}')">
                            <div class="card-content">
                                <h3 class="card-title">Health Risks</h3>
                                <p class="card-text">Microplastics from degraded single-use plastics enter food chains
                                    and water supplies, posing risks to human and animal health.</p>
                            </div>
                        </div>

                        <div class="swiper-slide"
                            style="background-image:url('{{ asset('assets/images/certification/littering.webp') }}')">
                            <div class="card-content">
                                <h3 class="card-title">Littering</h3>
                                <p class="card-text">Plastic litter damages landscapes, clogs drainage systems, and
                                    creates unsafe environments in both urban and natural settings.</p>
                            </div>
                        </div>
                        <div class="swiper-slide"
                            style="background-image:url('{{ asset('assets/images/certification/health-risk.webp') }}')">
                            <div class="card-content">
                                <h3 class="card-title">Health Risks</h3>
                                <p class="card-text">Microplastics from degraded single-use plastics enter food chains
                                    and water supplies, posing risks to human and animal health.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="lyt-section bs-certification typ-goi">
            <div class="wrap">
                <div class="container">
                    <div class="row justify-content-start">
                        <div class="col-lg-12 col-md-10">
                            <h2 class="bs-heading mb-4">Government of India Regulations</h2>

                            <p class="bs-para mb-4">
                                The Plastic Waste Management Amendment Rules, 2021, effective July 1, 2022, aim to curb
                                plastic pollution by prohibiting the manufacture, sale, distribution, and use of certain
                                single-use plastic (SUP) items.
                            </p>
                            <div class="section-title">Items Affected by the Ban:</div>
                            <div class="card-plain">
                                <ul class="checklist">
                                    <li>Plastic Cutlery (spoons, forks, knives)</li>
                                    <li>Plastic Straws and Stirrers</li>
                                    <li>Carry Bags below 75 microns (increasing to 120 microns)</li>
                                    <li>Plastic Wrapping for items such as candy, ice creams, and cigarette packets</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section
            class="lyt-section typUpskill p-0 bs-tabs typ-accre-recog typ-certificate-list typ-certi-li-acc typ-certification-plastic"
            style="background: #01090F;">
            <div class="container">
                <div class="row mb-5">
                    <div class="col-lg-7">
                        <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">Why Go Plastic-Free? </div>
                        </div>
                        <h2 class="bs-heading typWhite maxw600">
                            Rethink Plastics, Restore the Planet
                        </h2>

                    </div>
                    <div class="col-lg-5 d-flex align-items-end">
                        <p class="bs-para typWhite ps-lg-5"> Reduce harm, restore balance, and drive change with plastic-free
                            practices.</p>

                    </div>
                </div>
                <div class="bs-grid-box">
                    <div class="leftBox ">
                        <div class="bs-tabs typ-cert-tab" data-aos="fade" data-aos-delay="500">
                            <ul class="nav nav-pills mb-3 flex-column" id="pills-tab" role="tablist">
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link active w-100 text-start" id="pills-Quality-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Quality" type="button"
                                            role="tab" aria-controls="pills-Quality" aria-selected="true">Protect the
                                            Environment</button>
                                        <span
                                            class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span>

                                    </div>
                                    <div class="tab-inner-detail w-100"
                                        style="display: block; color: white; margin-left: 15px; margin-bottom: 10px;">
                                        Extra content for Quality</div>
                                </li>
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link w-100 text-start" id="pills-Environmental-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Environmental" type="button"
                                            role="tab" aria-controls="pills-Environmental" aria-selected="false">Enhance
                                            Brand Image</button>
                                        <span
                                            class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span>
                                    </div>
                                    <div class="tab-inner-detail w-100"
                                        style="display: none; color: white; margin-left: 15px; margin-bottom: 10px;">
                                        Extra content for Environmental</div>
                                </li>
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link w-100 text-start" id="pills-Health-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Health" type="button"
                                            role="tab" aria-controls="pills-Health" aria-selected="false">Regulatory
                                            Compliance</button>
                                        <span
                                            class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span>
                                    </div>
                                    <div class="tab-inner-detail w-100"
                                        style="display: none; color: white; margin-left: 15px; margin-bottom: 10px;">
                                        India's strict regulations on single-use plastics promote corporate
                                        responsibility and compliance. Adhering to these rules helps avoid penalties and
                                        ensures smooth, legal business operations.</div>
                                </li>
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link w-100 text-start" id="pills-Security-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Security" type="button"
                                            role="tab" aria-controls="pills-Security" aria-selected="false">Attract
                                            Conscious Consumers</button>
                                        <span
                                            class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span>
                                    </div>
                                    <div class="tab-inner-detail w-100"
                                        style="display: none; color: white; margin-left: 15px; margin-bottom: 10px;">
                                        Extra content for Security</div>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="rightBox" data-aos="fade" data-aos-delay="500">
                        <div class="bs-tabs">
                            <div class="tab-content" id="pills-tabContent">
                                <div class="rightBox" data-aos="fade" data-aos-delay="500">
                                    <div class="bs-tabs">
                                        <div class="tab-content" id="pills-tabContent">
                                            <div class="tab-pane fade show active" id="pills-Quality" role="tabpanel"
                                                aria-labelledby="pills-Quality-tab">
                                                <div class="bg-img">
                                                    <img src="{{ asset('assets/images/certification/plastic.webp') }}"
                                                        class="img-fluid" alt="big-img">
                                                </div>

                                            </div>
                                            <div class="tab-pane fade" id="pills-Environmental" role="tabpanel"
                                                aria-labelledby="pills-Environmental-tab">
                                                <div class="bg-img">
                                                    <img src="{{ asset('assets/images/certification/plastic.webp') }}"
                                                        class="img-fluid" alt="big-img">
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="pills-Health" role="tabpanel"
                                                aria-labelledby="pills-Health-tab">
                                                <div class="bg-img">
                                                    <img src="{{ asset('assets/images/certification/plastic.webp') }}"
                                                        class="img-fluid" alt="big-img">
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="pills-Security" role="tabpanel"
                                                aria-labelledby="pills-Security-tab">
                                                <div class="bg-img">
                                                    <img src="{{ asset('assets/images/certification/plastic.webp') }}"
                                                        class="img-fluid" alt="big-img">
                                                </div>

                                            </div>
                                            <div class="tab-pane fade" id="pills-Business" role="tabpanel"
                                                aria-labelledby="pills-Business-tab">
                                                <div class="bg-img">
                                                    <img src="{{ asset('assets/images/certification/plastic.webp') }}"
                                                        class="img-fluid" alt="big-img">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>>
                </div>
            </div>
            </div>
        </section>
        <section class="lyt-section bs-events set-bg typ-detained-pro"
            data-img="{{ asset('assets/images/certification/isotrop.webp') }}">
            <div class="container typ-abt-events">

                <div class="row align-items-start">
                    <div class="common-heading" data-aos="fade" data-aos-delay="300">
                        <div class="line">
                            <img src="{{ asset('assets/images/white-bg-line.svg') }}" class="img-fluid" alt="line-img">
                        </div>
                        <div class="bs-sub-heading">Download Our Sustainability Training & Assurance Brochures</div>

                    </div>
                    <div class="col-md-6">

                        <h2 class="bs-heading mb-5" data-aos="fade" data-aos-delay="400">
                            Access Detailed Program <br>Information
                        </h2>
                        <div class="event-desc bs-para mb-5">
                            Explore the inner dimensions of ethics, purpose, and leadership in this insightful 30-minute
                            Learn how our expert-led sustainability services—covering ESG compliance, BRSR audits, and
                            reporting assurance—can support your organization's responsible growth. These brochures
                            provide a comprehensive overview of objectives, methodologies, key benefits, and industry
                            relevance.
                        </div>
                        @if(isset($brochure) && $brochure->status === 'active')
                            <div class="custom-btn-group mb-2">
                                <button type="button" onclick="downloadBrochure('{{ route('sustainability.certification.brochure.download') }}', this)" class="bs-btn typ-fill">Download Brochure</button>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
        <section class="bs-certification-listing lyt-section">
            <div class="container py-5">
                <div class="row">
                    <div class="col-lg-8 col-12">
                        <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">Key <span class="ms-1">benefits</span>
                            </div>
                        </div>
                        <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                            Certification Benefits
                        </h2>
                    </div>
                </div>
                <div class="row g-4 align-items-end mt-5">
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card small-card w-100">
                            <div class="card-tag">01</div>
                            <div class="card-text">Regulatory Compliance</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card tall-card w-100">
                            <div class="card-tag">02</div>
                            <div class="card-text">Enhanced Sustainability Credentials</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card small-card w-100">
                            <div class="card-tag">03</div>
                            <div class="card-text">Increased Market Competitiveness</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card tall-card w-100">
                            <div class="card-tag">04</div>
                            <div class="card-text">Contribution to Circular Economy</div>
                        </div>
                    </div>

                </div>
            </div>
        </section>


        <section class="lyt-section bs-certification typ-certification">

            <div class="steps-wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="common-heading" data-aos="fade" data-aos-delay="300">
                                <div class="line">
                                    <img src="{{ asset('assets/images/white-bg-line.svg') }}" class="img-fluid" alt="line-img">
                                </div>
                                <div class="bs-sub-heading">Overview</div>

                            </div>

                            <h2 class="bs-heading" data-aos="fade" data-aos-delay="400">
                                Why Single-Use Plastics Must Go
                            </h2>

                        </div>
                        <div class="col-md-6 d-flex justify-content-end align-items-end">
                            <div class="swiper-nav d-flex">
                                <div class="swiper-button-custom swiper-button-prev"></div>
                                <div class="swiper-button-custom swiper-button-next"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="step">
                                <div class="step-icon"><img src="{{ asset('assets/images/certification/icon1.svg') }}" alt="icon">
                                </div>
                                <h5>Step 1 – Application Process</h5>
                                <p>Apply easily as a new or existing client to kickstart your certification with IRQS.
                                </p>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="step">
                                <div class="step-icon"><img src="{{ asset('assets/images/certification/icon2.svg') }}" alt="icon">
                                </div>
                                <h5>Step 2 –Audit Planning and preparation</h5>
                                <p>Prepare your audit plan with expert guidance to ensure a smooth certification
                                    process.</p>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="step">
                                <div class="step-icon"><img src="{{ asset('assets/images/certification/icon3.svg') }}" alt="icon">
                                </div>
                                <h5>Step 3 –Assurance Audit</h5>
                                <p>Carry out a thorough assurance audit to ensure your processes meet certification
                                    standards</p>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="step">
                                <div class="step-icon"><img src="{{ asset('assets/images/certification/icon4.svg') }}" alt="icon">
                                </div>
                                <h5>Step 4 -Report Submission</h5>
                                <p>Conduct of Initial Certification audit – (Stage 1 + Stage 2) for new (Fresh) clients
                                    / Re-Certification audit (For existing clients).</p>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="step">
                                <div class="step-icon"><img src="{{ asset('assets/images/certification/icon1.svg') }}" alt="icon">
                                </div>
                                <h5>Step 5 –Assurance Audit</h5>
                                <p>Carry out a thorough assurance audit to ensure your processes meet certification
                                    standards</p>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="step">
                                <div class="step-icon"><img src="{{ asset('assets/images/certification/icon1.svg') }}" alt="icon">
                                </div>
                                <h5>Step 6 –Assurance Audit</h5>
                                <p>Carry out a thorough assurance audit to ensure your processes meet certification
                                    standards</p>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="step">
                                <div class="step-icon"><img src="{{ asset('assets/images/certification/icon1.svg') }}" alt="icon">
                                </div>
                                <h5>Step 7 –Assurance Audit</h5>
                                <p>Carry out a thorough assurance audit to ensure your processes meet certification
                                    standards</p>
                            </div>
                        </div>
                    </div>
                    <div class="step-line"></div>
                    <div class="progress-line" id="progressLine"></div>
                </div>
            </div>
        </section>
        <section class="lyt-section typWhite typ-overview-discover typ-credi typ-green-move">
            <div class="container">
                <div class="common-heading" data-aos="fade" data-aos-delay="300">
                    <div class="line">
                        <img src="{{ asset('assets/images/white-bg-line.svg') }}" class="img-fluid" alt="line-img">
                    </div>
                    <div class="bs-sub-heading"> Earth Day 2025 Initiative</div>
                </div>
                <div class="row mb-4 align-items-end">
                    <div class="col-lg-7 col-12">
                        <h2 class="bs-heading" data-aos="fade" data-aos-delay="400">
                            Join the Green Movement Today!
                        </h2>
                    </div>
                </div>
            </div>
            <div class="container typ-excell">
                <div class="accre-excell">
                    <div class="accre-excell-img">
                        <img src="{{ asset('assets/images/certification/green.webp') }}" class="img-fluid" alt="acree-excellance">
                    </div>
                    <div class="accre-excell-para">
                        <p class="bs-para">
                            Step forward and lead the way in sustainability by obtaining the IRClass – IRQS Single-Use
                            Plastic Free Certification. This certification demonstrates your commitment to reducing
                            environmental harm and promoting responsible practices. By eliminating single-use plastics
                            from your operations, your organization plays an active role in protecting ecosystems,
                            preserving resources, and supporting a cleaner, healthier planet. It also enhances your
                            brand image and aligns your business with global sustainability goals. Together, we can
                            reduce plastic waste and drive meaningful change. Join the movement toward a greener
                            future—take action today and inspire others to follow your lead.
                        </p>
                    </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="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()">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>

        <!-- 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>

    {{-- Include enquiry form modal for Certification page --}}
    @include('components.enquiry-form-wrapper', ['pageSource' => 'sustainability-certification', 'formType' => 'enquiry'])

    @include('website.partials.include_js')

    <script>
        function downloadBrochure(downloadUrl, button) {
            // Store original content
            const originalContent = button.innerHTML;
            const originalText = button.textContent.trim();
            
            // Show spinner and disable button
            button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Downloading...';
            button.disabled = true;
            
            // Create a temporary link for download
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.style.display = 'none';
            document.body.appendChild(link);
            
            // Trigger download
            link.click();
            
            // Clean up temporary link
            document.body.removeChild(link);
            
            // Simulate download completion (since we can't detect actual download completion)
            setTimeout(() => {
                // Update button to show downloaded state
                button.innerHTML = '<i class="fas fa-check me-2"></i>Downloaded';
                button.disabled = true;
                
                // Reset button after 3 seconds
                setTimeout(() => {
                    button.innerHTML = originalContent;
                    button.disabled = false;
                }, 3000);
            }, 1000);
        }
    </script>
@endsection