@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/services/service-listing-banner.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">
                                    <h1 class="title">Responsible <span>Steel</span></h1>
                                    <p class="subtitle marB42">Ensuring sustainable and responsible steel production
                                        practices.</p>
                                    <div class="custom-btn-group mb-2">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()"
                                            data-page-source="responsiblesteel">Get a Quote Now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA 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="responsiblesteel">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>
        <script>
            function initStepper() {
                const steps = document.querySelectorAll(".progress-step");
                const track = document.getElementById("progressTrack");
                const fill = document.getElementById("progressFill");
                const cards = document.querySelectorAll(".step-card");
                const contents = document.getElementById("stepContents");
                const prevBtn = document.getElementById("prev");
                const nextBtn = document.getElementById("next");

                let currentIndex = 0;
                const totalSteps = steps.length;

                function updateView() {
                    steps.forEach((s, i) => s.classList.toggle("active", i <= currentIndex));

                    let visible = 3.5;
                    if (window.innerWidth <= 1024) visible = 2;
                    if (window.innerWidth <= 600) visible = 1;

                    let offset = -(currentIndex * (100 / visible));
                    const maxOffset = -((totalSteps - visible) * (100 / visible));
                    if (offset < maxOffset) offset = maxOffset;

                    track.style.transform = `translateX(${offset}%)`;
                    contents.style.transform = `translateX(${offset}%)`;

                    const icons = document.querySelectorAll(".progress-step .icon");
                    if (icons.length > 0) {
                        const firstRect = icons[0].getBoundingClientRect();
                        const activeRect = icons[currentIndex].getBoundingClientRect();
                        const containerRect = document.querySelector(".stepper-container").getBoundingClientRect();
                        const fillWidth = (activeRect.left + activeRect.width / 2) - containerRect.left;
                        fill.style.width = fillWidth + "px";
                    }

                    prevBtn.disabled = currentIndex === 0;
                    nextBtn.disabled = currentIndex >= totalSteps - 1;
                }

                nextBtn.addEventListener("click", () => {
                    if (currentIndex < totalSteps - 1) {
                        currentIndex++;
                        updateView();
                    }
                });

                prevBtn.addEventListener("click", () => {
                    if (currentIndex > 0) {
                        currentIndex--;
                        updateView();
                    }
                });

                window.addEventListener("resize", updateView);
                setTimeout(updateView, 200);
            }
            document.addEventListener("DOMContentLoaded", initStepper);
        </script>
        <!-- back to top  -->
        <a href="#" class="back-to-top">
            <span class="icon icon-drop-icon"></span>
        </a>
        {{-- Request a Quote Button Component --}}
        @include('components.request-quote-button')
    </main>

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