@extends('layouts.app')

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

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



@section('content')

<section class="resources-hero">

    <div class="resources-bg">
        <img src="{{ asset('images/pages/resources-header.jpg') }}">
    </div>

    <!-- <div class="resources-overlay"></div> -->

    <div class="container">

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

            <h1>Resources</h1>

        </div>

    </div>

</section>


<section class="datasheets-section">

    <div class="mesh-left"></div>
    <div class="mesh-right"></div>

    <div class="container">

        <div class="section-heading">
            <h2>Datasheets</h2>
        </div>

        <div class="resources-grid">

            <div class="resource-card green">

                <div class="resource-image">
                    <img src="{{ asset('images/resources/ctem-datasheet.png') }}">
                </div>

                <div class="resource-content">

                    <h4>
                        SecX360
                    </h4>

                </div>

                <a href="#" class="resource-download">
                    Download the datasheet
                </a>

            </div>


            <div class="resource-card blue">

                <div class="resource-image">
                    <img src="{{ asset('images/resources/ctem-datasheet.png') }}">
                </div>

                <div class="resource-content">

                    <h4>PenX360</h4>

                </div>

                <a href="#" class="resource-download">
                    Download the datasheet
                </a>

            </div>


            <div class="resource-card green">

                <div class="resource-image">
                    <img src="{{ asset('images/resources/ctem-datasheet.png') }}">
                </div>

                <div class="resource-content">

                    <h4>
                        EXPOSUREX
                    </h4>

                </div>

                <a href="#" class="resource-download">
                    Download the datasheet
                </a>

            </div>


            <div class="resource-card blue">

                <div class="resource-image">
                    <img src="{{ asset('images/resources/ctem-datasheet.png') }}">
                </div>

                <div class="resource-content">

                    <h4>
                        CISOX
                    </h4>

                </div>

                <a href="#" class="resource-download">
                    Download the datasheet
                </a>

            </div>

        </div>

    </div>

</section>



<section class="videos-section">

    <div class="container">

        <div class="section-heading">
            <h2>Videos</h2>
        </div>
        
        <div class="video-card">

            <img src="{{ asset('images/resources/resources-video-thumbnail.png') }}">

            <div class="video-overlay">

                <div class="video-play-btn">
                     <img
                        src="{{ asset('images/icons/video-icon.svg') }}"
                        alt="Play">

                </div>

                <span>Watch the Video</span>

            </div>

        </div>

    </div>

</section>

<!-- video popup -->
 <div class="modal fade"
     id="videoModal"
     tabindex="-1">

    <div class="modal-dialog modal-xl modal-dialog-centered">

        <div class="modal-content bg-black border-0">

            <button
                type="button"
                class="btn-close btn-close-white position-absolute end-0 top-0 m-3 z-3"
                data-bs-dismiss="modal">
            </button>

            <video
                id="videoModal"
                controls
                preload="metadata"
                width="100%"
                class="rounded-4">

                <source
                    src="{{ asset('videos/Securx360-Corporate-Video-2026.m4v') }}"
                    type="video/mp4">

            </video>

        </div>

    </div>

</div>
 

@endsection

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