@extends('layouts.app')

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

@push('styles')

    @vite('resources/css/pages/cisox.css')
    
@endpush

@push('scripts')

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

@endpush

@section('content')

<!--==================================================
CISOX Hero
===================================================-->

<section class="cisox-hero">

    <div class="cisox-hero-banner">

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

        <div class="cisox-hero-overlay">

            <div class="container">

                <div class="cisox-hero-content">

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

                    <h1 class="cisox-hero-title">

                        <span>Cyber Risk</span>

                        <strong>Quantification</strong>

                    </h1>

                </div>

            </div>

        </div>

    </div>

</section>


<!--==================================================
CISOX Intro
===================================================-->

<section class="cisox-intro">

    <div class="container">

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

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

                <img

                    src="{{ asset('images/products/cisox-intro-icon.svg') }}"

                    class="cisox-intro-icon img-fluid"

                    alt="CISOX">

            </div>

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

                <div class="cisox-intro-content">

                    <img

                        src="{{ asset('images/products/cisox-logo.svg') }}"

                        class="cisox-intro-logo"

                        alt="CISOX">

                    <p>

                        Quantifies real cyber risk across the CTEM cycle in
                        financial terms — translating validated exposure,
                        asset value, and threat intelligence into
                        board-ready risk decisions before they become
                        business losses.

                    </p>

                </div>

            </div>

        </div>

    </div>

</section>


@php

$capabilities = [

    [
        'title' => 'Cyber Risk',
        'subtitle' => 'Quantification in Financial Terms',
        'icon' => 'cisox-keycap-icon-1.svg'
    ],

    [
        'title' => 'CISO',
        'subtitle' => 'Management Dashboard',
        'icon' => 'cisox-keycap-icon-2.svg'
    ],

    [
        'title' => 'Compliance',
        'subtitle' => 'Status',
        'icon' => 'cisox-keycap-icon-3.svg'
    ],

    [
        'title' => 'CTEM-Fed',
        'subtitle' => 'Exposure Intelligence',
        'icon' => 'cisox-keycap-icon-4.svg'
    ],

    [
        'title' => 'AI Governance',
        'subtitle' => '',
        'icon' => 'cisox-keycap-icon-5.svg'
    ],

    [
        'title' => 'Impact-Driven',
        'subtitle' => 'Prioritization',
        'icon' => 'cisox-keycap-icon-6.svg'
    ],

    [
        'title' => 'Board & Compliance',
        'subtitle' => 'Reporting',
        'icon' => 'cisox-keycap-icon-7.svg'
    ]

];

@endphp


<section class="cisox-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 $capability)

                @if($loop->last)

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

                        <div class="d-flex justify-content-center">

                            <div class="cisox-capability-last">

                                @include('partials.cisox-capability-card')

                            </div>

                        </div>

                    </div>

                @else

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

                        @include('partials.cisox-capability-card')

                    </div>

                @endif

            @endforeach

        </div>

        <div class="capability-buttons">

            <a href="#" class="btn-demo">

                Request Demo

            </a>

            <a href="#" class="btn-datasheet">

                Download Datasheet

            </a>

        </div>

    </div>

</section>

<!--==================================================
CISOX Demo
===================================================-->

<section class="cisox-demo">

    <div class="container-fluid px-0">

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

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

        </div>

    </div>

</section>

@endsection