@extends('layouts.app')

@section('title', 'CTEM | SecurX360')

@push('styles')

    @vite('resources/css/pages/products-ctem.css')

@endpush

@push('scripts')

@vite('resources/js/products-ctem.js')

@endpush

@section('content')


<!--==================================================
CTEM HERO
===================================================-->

<section class="ctem-hero">

    <div class="container">

        <div class="row align-items-center">

            <!--==================================
            Left Content
            ===================================-->

            <div class="col-lg-7">

                <div class="ctem-content">

                    <img
                        src="{{ asset('images/logos/ctem-logo.svg') }}"
                        class="ctem-logo"
                        alt="CTEM">

                    <h1 class="ctem-title">

                        AI Driven Continuous

                    </h1>

                    <h2 class="ctem-subtitle">

                        Threat Exposure Management

                    </h2>

                </div>

            </div>


            <!--==================================
            Right Wheel
            ===================================-->

            <div class="col-lg-5">

                <div class="ctem-wheel">

                    <!-- Flow Ring -->

                    <img
                        class="ctem-wheel-ring"
                        src="{{ asset('images/products/wheel/arrows_speed_tuned_flow.svg') }}"
                        alt="">


                    <!--==========================
                    Discovery
                    ==========================-->

                    <button class="ctem-seg ctem-discovery">

                        <img
                            class="base"
                            src="{{ asset('images/products/wheel/Discovery.svg') }}"
                            alt="Discovery">

                        <img
                            class="hover"
                            src="{{ asset('images/products/wheel/Discovery Mouse.svg') }}"
                            alt="">

                    </button>


                    <!--==========================
                    Assessment
                    ==========================-->

                    <button class="ctem-seg ctem-assessment">

                        <img
                            class="base"
                            src="{{ asset('images/products/wheel/Assessment.svg') }}"
                            alt="Assessment">

                        <img
                            class="hover"
                            src="{{ asset('images/products/wheel/Assessment mouse.svg') }}"
                            alt="">

                    </button>


                    <!--==========================
                    Prioritization
                    ==========================-->

                    <button class="ctem-seg ctem-prioritization">

                        <img
                            class="base"
                            src="{{ asset('images/products/wheel/Prioritization.svg') }}"
                            alt="Prioritization">

                        <img
                            class="hover"
                            src="{{ asset('images/products/wheel/Prioritization mouse.svg') }}"
                            alt="">

                    </button>


                    <!--==========================
                    Validation
                    ==========================-->

                    <button class="ctem-seg ctem-validation">

                        <img
                            class="base"
                            src="{{ asset('images/products/wheel/validation.svg') }}"
                            alt="Validation">

                        <img
                            class="hover"
                            src="{{ asset('images/products/wheel/validation mouse.svg') }}"
                            alt="">

                    </button>


                    <!--==========================
                    Remediation
                    ==========================-->

                    <button class="ctem-seg ctem-remediation">

                        <img
                            class="base"
                            src="{{ asset('images/products/wheel/remediation.svg') }}"
                            alt="Remediation">

                        <img
                            class="hover"
                            src="{{ asset('images/products/wheel/remediationmouse.svg') }}"
                            alt="">

                    </button>


                    <!--==========================
                    Center
                    ==========================-->

                    <button class="ctem-center">

                        <img
                            class="ctem-center-bg"
                            src="{{ asset('images/products/wheel/center logo placeholder_4.svg') }}"
                            alt="">

                        <img
                            class="ctem-center-logo"
                            src="{{ asset('images//securex360-white-logo.svg') }}"
                            alt="SecurX360">

                    </button>

                </div>

            </div>

        </div>

    </div>

</section>


<!--==================================================
About CTEM
===================================================-->

<section class="ctem-about">

    <!-- Left Mesh -->
    <img
        src="{{ asset('images/products/mesh-left.png') }}"
        class="ctem-about-mesh-left"
        alt="">

    <!-- Right Mesh -->
    <img
        src="{{ asset('images/products/mesh-right.png') }}"
        class="ctem-about-mesh-right"
        alt="">

    <div class="container">

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

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

                <div class="ctem-about-content">

                    <h2 class="ctem-about-title d-none">

                        About Continuous<br>

                        Threat Exposure
                        <span>Defense.</span>

                    </h2>

                    <p>

                        Continuous Threat Exposure Management is a proactive
                        approach that emphasizes ongoing evaluation of threats
                        rather than relying solely on periodic assessments.
                        It enables organizations to adapt quickly to the
                        ever-changing threat landscape, ensuring better
                        protection of sensitive data and systems.

                    </p>

                    <p>

                        The importance of CTEM lies in its ability to provide
                        organizations with a comprehensive understanding of
                        their risk exposure. By maintaining an ongoing
                        evaluation, organizations can improve response times
                        and reduce the likelihood of successful attacks.

                    </p>

                </div>

            </div>

        </div>

    </div>

</section>


<!--==================================================
CTEM Threat Exposure Management
===================================================-->

<section class="ctem-threat-section">

    <div class="container">

        <div class="ctem-threat-heading">

            <h2>

                Threat Exposure

                <span>Management</span>

            </h2>

        </div>

        <div class="ctem-threat-diagram">

            <object

                class="ctem-threat-svg"

                type="image/svg+xml"

                data="{{ asset('images/products/threat-exposure-management.svg') }}">

            </object>

        </div>

    </div>

</section>


<!--==================================================
CTEM Management
===================================================-->

@php

$ctemManagement = [

[
'title'=>'Discovery',
'icon'=>'ctem-discovery.svg',
'content'=>'Identify external attack surface, assets, exposed services and vulnerabilities across the organization.',
'active'=>false
],

[
'title'=>'Assessment',
'icon'=>'ctem-assessment.svg',
'content'=>'Continuously evaluate endpoint, servers, network devices, cloud, applications and identities to understand current exposure.',
'active'=>false
],

[
'title'=>'Prioritization',
'icon'=>'ctem-prioritization.svg',
'content'=>'Prioritize vulnerabilities with the Advanced VPT framework, dynamically adapting to evolving threat landscapes.',
'active'=>true
],

[
'title'=>'Validation',
'icon'=>'ctem-validation.svg',
'content'=>'Validate exploitable attack paths using automated pen testing and real-world attack scenarios.',
'active'=>false
],

[
'title'=>'Remediation',
'icon'=>'ctem-remediation.svg',
'content'=>'Provide actionable remediation guidance and continuously verify fixes across the environment.',
'active'=>false
]

];

@endphp

<section class="ctem-management">

    <div class="container">

        <div class="ctem-management-heading text-center">

            <h2>

                CTEM

                <span>Cycle </span>

            </h2>

        </div>

        <div class="row align-items-center g-5">

            <!-- Left -->

            <div class="col-lg-5">

                <div class="ctem-management-left">

                    <img
                        src="{{ asset('images/products/ctem_page_ctem_mang_mesh.svg') }}"
                        class="ctem-management-mesh"
                        alt="">

                    <img
                        src="{{ asset('images/products/ctem_managment_secx_img.svg') }}"
                        class="ctem-management-center"
                        alt="SecurX360">

                </div>

            </div>

            <!-- Right -->

            <div class="col-lg-7">

                <div class="ctem-management-accordion">

                   @foreach($ctemManagement as $item)

                    <div class="ctem-management-item {{ $item['active'] ? 'active' : '' }}">

                        <div class="ctem-management-header">

                            <div class="ctem-management-info">

                                <img
                                    src="{{ asset('images/icons/'.$item['icon']) }}"
                                    alt="">

                                <h3>{{ $item['title'] }}</h3>

                            </div>

                            <button class="ctem-management-toggle">

                                <span></span>

                                <span></span>

                            </button>

                        </div>

                        <div class="ctem-management-body">

                            <p>{{ $item['content'] }}</p>

                        </div>

                    </div>

                    @endforeach

                </div>

            </div>

        </div>

    </div>

</section>

<section class="ctem-video-section">

    <!-- Ambient Glow -->
    <div class="video-glow"></div>

    <div class="container">

         

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

            <div class="col-lg-10">

                <div class="ctem-video-player">

                    <video
                        autoplay
                        muted
                        loop
                        playsinline
                        controls>

                        <source
                            src="{{ asset('videos/SecurX360-GITEX2025.m4v') }}"
                            type="video/mp4">

                    </video>

                </div>

            </div>

        </div>

    </div>

</section>
@endsection