@extends('layouts.app')

@section('title', 'AI Ecosystem | ' . config('app.name'))

@push('styles')

    @vite('resources/css/pages/ai-ecosystem.css')
    
@endpush

@push('scripts')

@vite('resources/js/ai-ecosystem.js')

@endpush

@section('content')

 <style>

    .tabs{
    position: relative;
    z-index: 9999 !important;
    isolation: isolate;
}

.tab{
    position: relative;
    z-index: 10000 !important;
    pointer-events: auto !important;
}


 </style> 

<x-page-video-header
    page="ai_ecosystem"
    title="AI EcoSystem"
    subtitle="An Intuitive AI-Powered Platform"
/>


<!--==================================================
AI Ecosystem Intro
===================================================-->

<section class="ai-ecosystem-intro">

    <!-- Left Mesh -->
    <img
        src="{{ asset('images/mesh/left-bottom-common-mesh.png') }}"
        class="ai-ecosystem-mesh-left"
        alt="">

    <div class="container">

        <div class="row justify-content-center">

            <div class="col-xl-12">

                <div class="ai-ecosystem-intro-content">

                    <p>

                        Our AI-powered CTEM ecosystem brings together intelligent capabilities to create a proactive, automated, and continuously adaptive security framework. The AI components work together to enhance visibility, accelerate risk analysis, automate decision-making, and strengthen cyber resilience across the enterprise.

                    </p>

                    <p>

                        In an era where cyber threats are becoming more sophisticated and AI-driven, an AI-powered CTEM ecosystem enables organizations to move beyond reactive defense - continuously anticipating threats, adapting to changing risks, and building a proactive security posture designed for the digital future.

                    </p>

                </div>

            </div>

        </div>

    </div>

</section>

<!--==================================================
AI Assistant Section
===================================================-->

<section class="ai-ecosystem-assistant">

    <div class="container">

        <div class="ai-ecosystem-assistant-box">

            <!-- LEFT -->
            <div class="ai-ecosystem-assistant-video">

                <iframe
                    src="{{ asset('html-video/AI-Assistant.html') }}"
                    class="ai-ecosystem-assistant-iframe"
                    loading="lazy"
                    allowfullscreen>
                </iframe>

            </div>


            <!-- RIGHT -->
            <div class="ai-ecosystem-assistant-content">

            <div class="row">
                <div class="col-xl-6 vertical-center pt-5  order-2 order-xl-1" >
                    <h2 class="pt-4">

                    AI

                    <span>Assistant</span>

                </h2>
            </div>
            <div class="col-xl-6  order-1 order-xl-2">
                <img
                        src="{{ asset('images/icons/ai-assistant-icon.svg') }}"
                        alt="AI Assistant">
            </div>
                    
            </div>
                
 
                <p class="pt-4">

                    Users can converse naturally with the cybersecurity system,
                    request data, and make informed decisions faster through
                    live interaction.

                </p>

                <p>

                    Automates case creation by allowing users to assign incidents,
                    set due times.

                </p>

            </div>

        </div>

    </div>

</section>



<!--==================================================
AI Ecosystem - PenX360
===================================================-->

<section class="ai-ecosystem-penx">

    <img
        src="{{ asset('images/mesh/mesh-left-red.png') }}"
        class="ai-ecosystem-penx-mesh-left"
        alt="">

    <img
        src="{{ asset('images/mesh/mesh-right-red.png') }}"
        class="ai-ecosystem-penx-mesh-right"
        alt="">


    <div class="container">

        <div class="ai-ecosystem-penx-box">

            <!-- LEFT -->

            <div class="ai-ecosystem-penx-content">

                <div class="ai-ecosystem-penx-heading">

                    <img
                        src="{{ asset('images/icons/penx-360-icon.svg') }}"
                        alt="PenX360">

                    <h2>

                        <!-- PenX  -->
                        <!-- PenX<span>360</span> -->
                     <img
                        src="{{ asset('images/logos/penx-white-logo.svg') }}"
                        alt="PenX360">   

                    </h2>

                </div>

                <div class="ai-ecosystem-penx-text">

                    <p>

                        <strong>
                            Vulnerability Remediation Guidance:
                        </strong>

                        Provides actionable recommendations for
                        identified and unpatched vulnerabilities,
                        including vendor-specific mitigation and
                        remediation steps.

                    </p>

                    <p>

                        <strong>
                            Guided Penetration Testing:
                        </strong>

                        Delivers step-by-step instructions to
                        perform penetration testing on identified
                        vulnerabilities aligned with industry
                        best practices.

                    </p>

                    <p>

                        <strong>
                            Automated Scanning & Exploitation:
                        </strong>

                        Automates vulnerability scanning and
                        penetration testing across assets,
                        Web Applications and Large Language Models.

                    </p>

                </div>

            </div>


            <!-- RIGHT -->

            <div class="ai-ecosystem-penx-video">

                <iframe
                    src="{{ asset('html-video/PenX-Pentest-Simulation-Video.html') }}"
                    class="ai-ecosystem-penx-iframe"
                    loading="lazy"
                    allowfullscreen>
                </iframe>

            </div>

        </div>

    </div>

</section>





<section class="ai-ecosystem-cards">

  

    <div class="container">

        <div class="row g-5">

             <div class="page">
                 

                <nav class="tabs" role="tablist">

                    <button
                        type="button"
                        class="tab active"
                        data-tab="engine"
                        role="tab"
                        aria-selected="true">
                        AI Engine
                    </button>

                    <button
                        type="button"
                        class="tab"
                        data-tab="scanner"
                        role="tab"
                        aria-selected="false">
                        AI Scanner
                    </button>

                    <button
                        type="button"
                        class="tab"
                        data-tab="rules"
                        role="tab"
                        aria-selected="false">
                        AI Rule Builder
                    </button>

                </nav>

                <main class="panels">
                    <section class="panel panel-engine active ai-engine-card" data-panel="engine" role="tabpanel">
                     <div class="ai-card-heading">

                        <img
                            src="{{ asset('images/icons/ai-engine-icon.svg') }}"
                            alt="">

                        <div>

                            <h2>

                                AI

                                <span>Engine</span>

                            </h2>

                        </div>

                    </div>
                     <div class="copy">
                        <p>AI-powered intelligence engine that transforms billions of security signals into predictive detection rules automatically.</p>
                        <p>Learning continuously from every scan across all scanners, it builds and refines detection logic in real time, delivers predictive risk analytics, and provides a unified intelligence layer that enables faster, smarter, and more proactive threat detection.</p>
                    </div>
                    </section>

                    <section class="panel panel-scanner ai-scanner-card" data-panel="scanner" role="tabpanel">
                    <div class="ai-card-heading">

                        <img
                            src="{{ asset('images/icons/ai-scanner-icon.svg') }}"
                            alt="">

                        <div>

                            <h2>

                                AI

                                <span>Scanner</span>

                            </h2>

                        </div>

                    </div>
                    <div class="copy">
                        <p>AI Scanner is an integrated SecureX360 capability that automatically scans assets to detect deployed LLM models and assess their security posture. It identifies configuration and implementation vulnerabilities, including unsafe integrations and exposed endpoints.</p>
                        <p>Performs controlled prompt injection attempts against both endpoint-hosted and internet-facing LLM models to validate their resilience against real-world attacks.</p>
                    </div>
                    </section>

                    <section class="panel panel-rules ai-builder-card" data-panel="rules" role="tabpanel">
                     
                    <div class="ai-card-heading">

                        <img
                            src="{{ asset('images/icons/ai-rule-builder-icon.svg') }}"
                            alt="">

                        <div>

                            <h2>

                                AI Rule

                                <span>Builder</span>

                            </h2>

                        </div>

                    </div>

                    <div class="copy">
                         <p>Create an AI-powered intelligent security use case and continuously evaluate the environment, notifying the stakeholders immediately via notifications and email when a matching use case is detected.</p>
                    </div>
                    </section>
                </main>
                </div>

        </div>

    </div>

</section>
@endsection