@extends('layouts.website')

@section('content')
    <main>
        <section class="bs-banner type-overview typ-glob-accre typ-evt-banner typ-cert-banner typ-cs-banner">
            <div class="swiper main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper set-bg"
                            data-img="{{ asset('assets/images/Cyber/cyber-security-listing-baner.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">
                                    <h1 class="title" data-aos="fade" data-aos-delay="500">Cybersecurity & Digital Transformation 
                                        <span> Solutions Digital Enterprises</span>
                                    </h1>
                                    <p class="subtitle marB42" data-aos="fade" data-aos-delay="500">Delivering advanced cybersecurity, risk management and digital innovation you can depend on.

                                    </p>
                                    <div class="custom-btn-group mb-2" data-aos="fade" data-aos-delay="500">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()">Get a
                                            Quote Now</a>
                                    </div>

                                    <div class="custom-btn-group mb-2" data-aos="fade" data-aos-delay="500">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()">Download Brochure
                                        </a>
                                    </div>
                                 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="lyt-section bs-leaders typ-leaders">
            <div class="container">

                <div class="row d-flex justify-content-center">
                    <div class="col-lg-8 col-12 text-center">
                        <div class="bs-sub-heading typBlack text-uppercase" data-aos="fade" data-aos-delay="500">Your Trusted Cybersecurity & Digital Solutions Partners<span
                                class="ms-1"></span>
                        </div>
                        <h2 class="bs-heading typBlack" data-aos="fade" data-aos-delay="400">
                           Collaborating with Industry Leaders to Safeguard Your Digital Future
                        </h2>
                    </div>

                </div>
                <div class="row g-4 rwo-line">
                    <!-- GlobalLogic Card -->
                    <div class="col-md-6 leader-margin">
                        <div class="service-card" data-aos="fade" data-aos-delay="400">
                            <img src="{{ asset('assets/images/Cyber/Global-logic.svg') }}" alt="GlobalLogic Logo"
                                class="mb-3" style="max-width: 172px; min-height: 40px;">
                            <h5>eProtect360 (Logo) - Next-Gen Cybersecurity for Resilient Enterprises</h5>
                            <p>IRCLASS (IRQS) strengthens cyber resilience through eProtect360 and its proprietary products, GRC 360 Assure and Rakshati 360. The suite delivers governance automation, real-time threat detection, and advanced anti-ransomware protection.
                                Integrated monitoring and endpoint controls ensure secure, uninterrupted business operations.
                            </p>
                            <a
                                href="{{ route('cyber-security.page.show', 'globallogic-innovation-led-cybersecurity-services') }}">Read More
                                </a>
                        </div>
                    </div>
                    <!-- 360 Total Security Card -->
                    <div class="col-md-6 leader-margin">
                        <div class="service-card" data-aos="fade" data-aos-delay="500">
                            <img src="{{ asset('assets/images/Cyber/Total-360.webp') }}" alt="360 Total Security Logo"
                                class="mb-3" style="max-width: 220px; min-height: 40px;">
                            <h5>GlobalLogic (logo) - Accelerate Digital Transformation at Scale</h5>
                            <p>IRClass through a strategic alliance with GlobalLogic co-delivers next-generation, AI-powered solutions for industrial sectors. Backed by the VelocityAI SDLC and flexible co-delivery models, the partnership accelerates secure, large-scale digital transformation.
Combining deep engineering expertise with strong domain knowledge, both teams drive high-impact innovation for complex enterprise needs.
</p>
                            <a
                                href="{{ route('cyber-security.page.show', 'comprehensive-protection-for-evolving-cyber-threats') }}">Read More
                          </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="bs-certification-listing lyt-section">
            <div class="container">
                <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"> Why Choose IRQS Digital Solutions?<span class="ms-1"></span>
                            </div>
                        </div>
                        <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                           Empowering Your Digital Transformation Journey
                        </h2>
                    </div>
                </div>
                <div class="row g-4 align-items-end mt-5">
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div data-aos="fade" data-aos-delay="500" class="custom-card small-card w-100">
                            <div class="card-tag">01</div>
                            <div class="card-text">Audits & Services by Industry Experts</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div data-aos="fade" data-aos-delay="500" class="custom-card tall-card w-100">
                            <div class="card-tag">02</div>
                            <div class="card-text">Strategic Technology Partnerships </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div data-aos="fade" data-aos-delay="500" class="custom-card small-card w-100">
                            <div class="card-tag">03</div>
                            <div class="card-text">Powered by Advanced AI/ML & Proven Security Platforms</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div data-aos="fade" data-aos-delay="500" class="custom-card tall-card w-100">
                            <div class="card-tag">04</div>
                            <div class="card-text">Tailored to Your Business, Every Step of the Way</div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        <section class="lyt-section bs-events set-bg typ-detained-pro typ-cs-acs"
            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 text-uppercase">Take a Closer Look at Our Cybersecurity Services</div>

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

                        <h2 class="bs-heading" data-aos="fade" data-aos-delay="400">
                           Your Digital Assurance & Cybersecurity Advantage
                        </h2>
                        <div class="event-desc bs-para" data-aos="fade" data-aos-delay="500">
                          Looking to protect your business from digital threats and unlock growth through digital transformation? Our comprehensive suite—spanning risk assessment, compliance, SOC, and digital modernization—keeps your enterprise secure, efficient and future-ready.
                        </div>
                        @if(\App\Models\CyberSecurityBrochure::getActive())
                            <div class="custom-btn-group mb-2" data-aos="fade" data-aos-delay="500">
                                <button type="button"
                                    onclick="downloadBrochure('{{ route('cyber-security-service.brochure.download') }}', this)"
                                    class="bs-btn typ-fill">Download Brochure</button>
                            </div>
                        @endif
                    </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()">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>
        @include('components.request-quote-button')
    </main>

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

    <!-- <script src="https://www.google.com/recaptcha/api.js" async defer></script> -->

    {{-- Include enquiry form modal for Cyber Security page --}}
    @include('components.enquiry-form-wrapper', ['pageSource' => 'cyber-security', 'formType' => 'enquiry'])

@endsection