@extends('layouts.app')

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


@push('styles')

    @vite('resources/css/pages/exposurex.css')

@endpush


@push('scripts')

@vite('resources/js/exposurex.js')

@endpush

@section('content')

<section class="exposurex-hero">

    <!-- Full Width Background -->

    <div class="hero-banner">

        <img src="{{ asset('images/products/exposurex_page_header_img.jpg') }}"
             alt="ExposureX"
             class="hero-bg">

        <div class="hero-overlay">

            <div class="container">

                <div class="hero-content">

                    <img src="{{ asset('images/products/exposurex-logo.svg') }}"
                         class="hero-logo"
                         alt="ExposureX">

                    <h1 class="hero-title">

                        <span>Smarter Scanning.</span>

                        <strong>Deeper Visibility.</strong>

                    </h1>

                </div>

            </div>

        </div>

    </div>

</section>

<!--=========================================
ExposureX Intro
==========================================-->

<section class="exposurex-intro">

    <div class="container">

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

            <div class="col-lg-3 text-center">

                <img src="{{ asset('images/products/chat-bot.svg') }}"
                     class="exposurex-intro-icon img-fluid"
                     alt="ExposureX">

            </div>

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

                <div class="intro-content">

                    <img src="{{ asset('images/products/exposurex-logo.svg') }}"
                         class="intro-logo"
                         alt="ExposureX">

                    <p>

                        Turn AI into Your Security Advantage. Uncover the security gaps
                        others miss with focused scanners and an AI-powered rule builder
                        designed for deeper, context-aware assessments.

                    </p>

                </div>

            </div>

        </div>

    </div>

</section>


 

<!-- ==========================================
Key Capabilities
=========================================== -->
 
@php

$capabilities = [

    [
        'title' => 'ArmorX Scanner',
        'content' => 'Discovers exposed hosts, operating systems, open ports, CVEs, missing patches and infrastructure vulnerabilities across your attack surface.',
        'icon' => 'exposurex-keycap-icon-1.svg',
        'active' => true
    ],

    [
        'title' => 'Mobile AppX Scanner',
        'content' => 'Analyzes Android and iOS applications for insecure storage, permissions, vulnerabilities and mobile security risks.',
        'icon' => 'exposurex-keycap-icon-2.svg',
        'active' => false
    ],

    [
        'title' => 'WifiX Scanner',
        'content' => 'Tests wireless environments for weak encryption, rogue access points, authentication flaws and unsafe Wi-Fi configurations.',
        'icon' => 'exposurex-keycap-icon-3.svg',
        'active' => false
    ],

    [
        'title' => 'ContainerX Scanner',
        'content' => 'Continuously scans Docker and Kubernetes workloads to identify misconfigurations, exposed services and container vulnerabilities.',
        'icon' => 'exposurex-keycap-icon-4.svg',
        'active' => false
    ],

    [
        'title' => 'LLMX Scanner',
        'content' => 'Evaluates AI models and LLM integrations against prompt injection, data leakage and insecure AI implementations & more',
        'icon' => 'exposurex-keycap-icon-5.svg',
        'active' => false
    ]

];

@endphp


<section class="key-capabilities">

    <div class="container">

        <div class="section-heading text-center mb-5">

            <h2>

                Key <span>Capabilities</span>

            </h2>

        </div>


        <div class="capability-accordion">

            @foreach($capabilities as $item)

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

                <div class="capability-header">

                    <div class="left-area">

                        <div class="icon">

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

                        </div>

                        <h3>

                            {{ $item['title'] }}

                        </h3>

                    </div>


                    <button class="toggle-btn">

                        <span></span>

                        <span></span>

                    </button>

                </div>


                <div class="capability-body">

                    <div class="body-inner">

                        <p>

                            {{ $item['content'] }}

                        </p>

                    </div>

                </div>

            </div>

            @endforeach

        </div>


        <div class="capability-buttons d-none">

            <a href="#" class="btn-demo" data-bs-toggle="modal" data-bs-target="#demoModal" data-product="ExposureX">

                Request Demo

            </a>

            <a href="#" class="btn-datasheet open-datasheet-modal" data-product="ExposureX" data-page="ExposureX" 
            data-bs-toggle="modal"
               data-bs-target="#datasheetModal"
               data-pdf="{{ asset('downloads/datasheets/ExposureX-DataSheet.pdf') }}"
            >

                Download Datasheet

            </a>

        </div>

    </div>

</section>

<!--==================================================
ExposureX Demo
===================================================-->

<section class="exposurex-demo">
    
    <div class="container">
        <div class="video-container">

            <iframe
                src="{{ asset('html-video/exposurex/ExposureX-Video.html') }}"
                class="exposurex-iframe"
                loading="lazy"
                allowfullscreen>
            </iframe>

        </div>
    </div>

</section>

@endsection