@extends('layouts.app')

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

@push('styles')
    @vite('resources/css/pages/services.css')
@endpush

@push('scripts')
    @vite('resources/js/services.js')
@endpush

@section('content')
 
 
<style>
 
</style>
 <x-page-video-header
        page="services"
        title="SecureX360"
        subtitle="Services"
        description="From a platform you run to a fully managed CTEM programme, our cybersecurity experts help you discover, validate, prioritise and remediate real exposure across your digital estate throughout the MENA region."
         
    />

 @php

/*==================================================
SECURITY TESTING
==================================================*/

$securityTesting = [

    [
        'icon'      => 'services-security-testing-icon-1.svg',
        'title'     => 'AI Penetration Testing',
        'content'   => 'Continuous AI-assisted penetration testing across applications, APIs, cloud infrastructure and enterprise environments to identify exploitable weaknesses before attackers do.',
        'longcontent' => 'Continuous AI-driven penetration testing across web applications, APIs, cloud infrastructure, enterprise environments and AI estates. Testing combines automated discovery with expert validation to identify exploitable weaknesses, validate real attack paths and provide evidence-backed remediation guidance.',
        'active'    => true,
    ],

    [
        'icon'      => 'services-security-testing-icon-2.svg',
        'title'     => 'Red Team & Security Validation',
        'content'   => 'Adversary emulation validating people, process and technology through realistic cyber attack simulations to measure your security readiness.',
        'longcontent' => 'Realistic adversary emulation designed to test your people, processes and technology against realistic attack scenarios. Red team exercises validate detection, response and resilience while identifying gaps that traditional security assessments may miss.',
        'active'    => false,
    ],

    [
        'icon'      => 'services-security-testing-icon-3.svg',
        'title'     => 'AI & LLM Security',
        'content'   => 'Security assessments for LLMs, GenAI applications, AI agents and machine learning environments including prompt injection, jailbreak and model abuse testing.',
        'longcontent' => 'Security testing for LLMs, GenAI applications, autonomous AI agents and machine learning environments. Assessments cover prompt injection, jailbreaks, model abuse, data leakage, insecure integrations and other emerging AI attack paths.',
        'active'    => false,
    ],

];


/*==================================================
ADVISORY & ENABLEMENT
==================================================*/

$advisoryEnablement = [

    [
        'icon'      => 'advisory-security-testing-icon-1.svg',
        'title'     => 'Compliance & Cyber Advisory',
        'content'   => 'CTEM advisory, regulatory readiness, vCISO and executive cyber-risk services.',
        'longcontent' => 'Beyond the platform, SecureX360 helps organisations build, operate, and continuously mature their exposure management programmes while staying ahead of evolving cybersecurity regulations and compliance requirements worldwide. SecureX360 maps validated findings to leading global frameworks and standards, including NIST, ISO 27001, CIS Controls, PCI DSS, GDPR, DORA, and more.',
        'active'    => true,
    ],

    [
        'icon'      => 'advisory-security-testing-icon-2.svg',
        'title'     => 'Training & Enablement',
        'content'   => 'CTEM, PenX360, AI security and partner / customer enablement.',
        'longcontent' => 'Enablement for customer security teams and channel partners — building the regional skills base around continuous exposure management. From platform and CTEM methodology training to hands-on PenX360 and AI-security enablement and partner certification, we make sure teams and partners can deliver real value from SecureX360.',
        'active'    => false,
    ],

];


/*==================================================
MANAGED & SUPPORT
==================================================*/

$managedSupport = [

    [
        'icon'      => 'managed-security-testing-icon-1.svg',
        'title'     => 'Managed Exposure Management',
        'content'   => 'Continuous discovery, validation, prioritization and remediation delivered as a managed CTEM service.',
        'longcontent' => 'SecureX360 is a fully managed Continuous Threat Exposure Management service — running discovery, validation, prioritisation and remediation around the clock. Your attack surface is continuously assessed, exploitable exposures are proven and prioritised, and your team receives clear, evidence-backed remediation guidance instead of raw findings.',
        'active'    => true,
    ],

];

@endphp


<!--==================================================
SECUREX360 SERVICES
==================================================-->

<section class="services-page">


    <!--==================================================
    SECTION 1
    SECURITY TESTING & VALIDATION
    ==================================================-->

    <section class="service-area service-area-testing">

        <div class="container">

            

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


                <!-- LEFT IMAGE -->

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

                    <div class="service-visual">

                        <img
                            src="{{ asset('images/pages/services-tab-1.png') }}"
                            class="service-main-image"
                            alt="Security Testing & Validation">

                    </div>

                </div>


                <!-- RIGHT SERVICES -->

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

                <!-- Heading -->

                <div class="service-area-heading">

                    <h2>
                        Security Testing &
                        <span>Validation</span>
                    </h2>

                    <p>
                        Continuous, AI-driven penetration testing and red teaming
                        that validates real risk across your web, API, cloud,
                        infrastructure and AI estate.
                    </p>

                </div>

                    <div class="services-accordion">

                        @foreach($securityTesting as $item)

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

                                <div class="service-header">

                                    <div class="service-info">

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

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

                                    </div>


                                    <button
                                        type="button"
                                        class="service-toggle"
                                        aria-label="Toggle service">

                                        <span></span>
                                        <span></span>

                                    </button>

                                </div>


                                <div class="service-body">

                                    <div class="service-body-content">

                                        <p class="service-short-content">
                                            {{ $item['content'] }}
                                        </p>

                                        <p class="service-long-content">
                                            {{ $item['longcontent'] }}
                                        </p>


                                        <a
                                            href="#"
                                            class="service-readmore">

                                            <span>Read More</span>

                                            <svg
                                                width="18"
                                                height="18"
                                                viewBox="0 0 24 24"
                                                fill="none">

                                                <path
                                                    d="M5 12H19"
                                                    stroke="currentColor"
                                                    stroke-width="2"/>

                                                <path
                                                    d="M13 6L19 12L13 18"
                                                    stroke="currentColor"
                                                    stroke-width="2"/>

                                            </svg>

                                        </a>

                                    </div>

                                </div>

                            </div>

                        @endforeach

                    </div>

                </div>

            </div>

        </div>

    </section>



    <!--==================================================
    SECTION 2
    ADVISORY & ENABLEMENT
    ==================================================-->

    <section class="service-area service-area-advisory">

        <div class="container">
  
             <div class="row align-items-center service-area-row">


                <!-- LEFT SERVICES -->

                <div class="col-lg-7 order-2 order-lg-1">

                <!-- Heading -->

                    <div class="service-area-heading">

                        <h2>
                            Advisory &
                            <span>Enablement</span>
                        </h2>

                        <p>
                            Expert CTEM strategy, compliance and cyber-risk advisory,
                            together with hands-on enablement, translating technical
                            exposures into measurable risk reduction and lasting
                            organisational resilience.
                        </p>

                    </div>

                    <div class="services-accordion">

                        @foreach($advisoryEnablement as $item)

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

                                <div class="service-header">

                                    <div class="service-info">

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

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

                                    </div>


                                    <button
                                        type="button"
                                        class="service-toggle"
                                        aria-label="Toggle service">

                                        <span></span>
                                        <span></span>

                                    </button>

                                </div>


                                <div class="service-body">

                                    <div class="service-body-content">

                                        <p class="service-short-content">
                                            {{ $item['content'] }}
                                        </p>

                                        <p class="service-long-content">
                                            {{ $item['longcontent'] }}
                                        </p>


                                        <a
                                            href="#"
                                            class="service-readmore">

                                            <span>Read More</span>

                                            <svg
                                                width="18"
                                                height="18"
                                                viewBox="0 0 24 24"
                                                fill="none">

                                                <path
                                                    d="M5 12H19"
                                                    stroke="currentColor"
                                                    stroke-width="2"/>

                                                <path
                                                    d="M13 6L19 12L13 18"
                                                    stroke="currentColor"
                                                    stroke-width="2"/>

                                            </svg>

                                        </a>

                                    </div>

                                </div>

                            </div>

                        @endforeach

                    </div>

                </div>


                <!-- RIGHT IMAGE -->

                <div class="col-lg-5 order-1 order-lg-2">

                    <div class="service-visual service-visual-right">

                        <img
                            src="{{ asset('images/pages/services-tab-2.png') }}"
                            class="service-main-image"
                            alt="Advisory & Enablement">

                    </div>

                </div>

            </div>

        </div>

    </section>



    <!--==================================================
    SECTION 3
    MANAGED & SUPPORT SERVICES
    ==================================================-->

    <section class="service-area service-area-managed">

        <div class="container">

            


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


                <!-- LEFT IMAGE -->

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

                    <div class="service-visual">

                        <img
                            src="{{ asset('images/pages/services-tab-3.png') }}"
                            class="service-main-image service-main-image-managed"
                            alt="Managed & Support Services">

                    </div>

                </div>


                <!-- RIGHT SERVICES -->

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

                <!-- Heading -->

            <div class="service-area-heading">

                <h2>
                    Managed &
                    <span>Support Services</span>
                </h2>

                <p>
                    From proactive technical support that sustains performance
                    to a fully managed CTEM programme delivered on your behalf —
                    structured around your organisation's operating model.
                </p>

            </div>
                    <div class="services-accordion">

                        @foreach($managedSupport as $item)

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

                                <div class="service-header">

                                    <div class="service-info">

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

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

                                    </div>


                                    <button
                                        type="button"
                                        class="service-toggle"
                                        aria-label="Toggle service">

                                        <span></span>
                                        <span></span>

                                    </button>

                                </div>


                                <div class="service-body">

                                    <div class="service-body-content">

                                        <p class="service-short-content">
                                            {{ $item['content'] }}
                                        </p>

                                        <p class="service-long-content">
                                            {{ $item['longcontent'] }}
                                        </p>


                                        <a
                                            href="#"
                                            class="service-readmore">

                                            <span>Read More</span>

                                            <svg
                                                width="18"
                                                height="18"
                                                viewBox="0 0 24 24"
                                                fill="none">

                                                <path
                                                    d="M5 12H19"
                                                    stroke="currentColor"
                                                    stroke-width="2"/>

                                                <path
                                                    d="M13 6L19 12L13 18"
                                                    stroke="currentColor"
                                                    stroke-width="2"/>

                                            </svg>

                                        </a>

                                    </div>

                                </div>

                            </div>

                        @endforeach

                    </div>

                </div>

            </div>

        </div>

    </section>


</section>

@php

$carePlans = [

[
    'title' => 'CARE <span>Essential</span>',
    'subtitle' => 'Reliable support for everyday operations.',
    'for' => 'Teams operating SecureX360 with their own security and IT staff.',
    'includes' => 'Includes',
    'active' => false,
	'classname' => 'care-essential',

    'features' => [

        'Platform technical support',
        'Troubleshooting',
        'Software updates',
        'Knowledge-base access',
        'Remote assistance',
        'Standard escalation'

    ]

],

[
    'title' => 'CARE <span>Advanced</span>',
    'subtitle' => 'Priority support for enterprise environments.',
    'for' => 'Organisations where SecureX360 plays an important role in continuous security operations.',
    'includes' => 'Essential, plus',
    'active' => false,
	'classname' => 'care-advanced',

    'features' => [

        '24×7 critical-issue support',
        'Priority case handling',
        'Enhanced SLAs',
        'Periodic health checks',
        'Configuration reviews',
        'Upgrade planning',
        'Service reviews'

    ]

],

[
    'title' => 'CARE <span>Elite</span>',
    'subtitle' => 'Mission-critical support and proactive expertise.',
    'for' => 'Large enterprise, government, financial institutions and critical infrastructure.',
    'includes' => 'Advanced, plus',
    'active' => true,
    'classname' => 'care-elite',

    'features' => [

        'Dedicated Technical Account Manager',
        'Proactive health & configuration reviews',
        'Architecture guidance',
        'Priority engineering escalation',
        'Lifecycle planning',
        'Regular executive service reviews'

    ]

]

];

@endphp



<section class="care-section">

    <div class="container">

        <!--=========================
        Heading
        ==========================-->

        <div class="care-heading text-center">

            <h2>

                <span>SecureX360</span>
                CARE

            </h2>

            <h4>

                Technical support, proactive optimisation and lifecycle services for the SecureX360 platform.

            </h4>

            <p>

               SecureX360 Care is a comprehensive services and support program designed to help you maximise the value of your SecureX360 investment. It combines expert technical support, platform health and optimisation, best-practice guidance, enablement, and ongoing advisory services to ensure your deployment remains effective, up to date, and aligned with your security objectives.

            </p>

        </div>



        <!--=========================
        Comparison
        ==========================-->

        <div class="care-compare">

            <div class="compare-box">

                <h5>

                    SecureX360 Platform

                </h5>

                <span>

                    You operate it.

                </span>

            </div>


            <div class="compare-box">

                <h5>

                    SecureX360 + CARE

                </h5>

                <span>

                    You operate it,
                    with our experts<br>supporting you.

                </span>

            </div>


            <div class="compare-box">

                <h5>

                    Managed SecureX360 / CTEM

                </h5>

                <span>

                    We operate it for you.

                </span>

            </div>

        </div>
    


        <div class="care-intro">

            Three flexible Care tiers provide increasing levels of expertise, support, responsiveness, and advisory services-allowing you to select the level of Care that best fits your organisation's operational needs and business priorities.

        </div>



        <!--=========================
        Cards
        ==========================-->

            <div class="row g-4">

                @foreach($carePlans as $plan)

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

                    <div class="care-card {{ $plan['active'] ? 'active' : '' }}  {{ $plan['classname'] }}">

                        



                        <div class="care-top">
                            <h3>{!! $plan['title'] !!}</h3>
                            
                            <p class="care-small">

                                {{ $plan['subtitle'] }}

                            </p>

                            

                        </div>



                        <div class="care-for">

                            <span>

                                {{ $plan['for'] }}

                            </span>

                            <p class="d-none">

                                {{ $plan['for'] }}

                            </p>

                        </div>



                        <div class="care-divider"></div>



                        <div class="care-features">

                            <h6>

                                {{ $plan['includes'] }}

                            </h6>

                            <ul>

                                @foreach($plan['features'] as $feature)

                                <li>

                                    <i class="bi bi-chevron-right dropdown-arrow"></i>

                                    {{ $feature }}

                                </li>

                                @endforeach

                            </ul>

                        </div>



                        <a href="#" class="care-btn d-none">

                            Learn More

                            <i class="fa-solid fa-arrow-right-long"></i>

                        </a>

                    </div>

                </div>

                @endforeach

            </div>

    </div>

</section>

<script>

</script>
@endsection