@extends('layouts.app')

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

@push('styles')

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

@endpush


@push('scripts')

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

@endpush


@section('content')

<section class="penx-hero">

    <!-- Full Width Background -->

    <div class="hero-banner">

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

        <div class="hero-overlay">

            <div class="container">

                <div class="hero-content">

                    <img src="{{ asset('images/logos/penx-red-logo.svg') }}"
                         class="hero-logo"
                         alt="PenX">

                    <h1 class="hero-title">

                        <span>From Detection to </span>

                        <strong>AI-Powered Validation</strong>

                    </h1>

                </div>

            </div>

        </div>

    </div>

</section>

<!--=========================================
PenX Intro
==========================================-->

<section class="penx-intro">

    <div class="container">

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

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

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

            </div>

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

                <div class="intro-content">

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

                    <p>

                        Validates real exposure across the CTEM cycle with attack path visibility, AI-driven pentesting, and guided remediation - before attackers find the way in.

                    </p>

                </div>

            </div>

        </div>

    </div>

</section>


@php

$capabilities = [

    [
        'title' => 'Attack Path',
        'subtitle' => 'Graph',
        'icon' => 'penx-keycap-icon-1.svg'
    ],

    [
        'title' => 'Reconnaissance',
        'subtitle' => '& Exploit Validation',
        'icon' => 'penx-keycap-icon-2.svg'
    ],

    [
        'title' => 'Exposure',
        'subtitle' => 'Mapping',
        'icon' => 'penx-keycap-icon-3.svg'
    ],

    [
        'title' => 'Self-Validation',
        'subtitle' => '& Exploitation Steps',
        'icon' => 'penx-keycap-icon-4.svg'
    ],

    /*[
        'title' => 'Continuous',
        'subtitle' => 'Validation',
        'icon' => 'penx-keycap-icon-5.svg'
    ],*/

    [
        'title' => 'AI-Powered',
        'subtitle' => 'Automated Pentesting',
        'icon' => 'penx-keycap-icon-6.svg'
    ],

    [
        'title' => 'Guided Remediation',
        'subtitle' => 'for SOC Acceleration',
        'icon' => 'penx-keycap-icon-7.svg'
    ]

];

@endphp

<!-- ==========================================
Key Capabilities
=========================================== -->

<section class="key-capabilities">

    <div class="container">

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

            <h2>

                Key <span>Capabilities</span>

            </h2>

        </div>

        <div class="row g-4 mt-5">

        @foreach($capabilities as $index => $capability)

            @if($loop->last)

                <div class="col-lg-6 mx-auto">

            @else

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

            @endif

                    <div class="capability-card">

                        <div class="card-content">

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

                            <span>{{ $capability['subtitle'] }}</span>

                        </div>

                        <div class="card-icon">

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

                        </div>

                    </div>

                </div>

        @endforeach

</div>

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

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

                Request Demo

            </a>

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

            </a>

        </div>

    </div>

</section>
 

<!--==================================================
penx Demo
===================================================-->

<section class="penx-demo">

    <div class="container">
        <div class="video-container">

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

        </div>
    </div>

</section>

@endsection