@props([
    'page',
    'title',
    'subtitle' => null,
    'description' => null,
    'button' => null,
    'buttonLink' => '#demoModal',
    'logo' => null,
    'height' => 550
])

<!-- {{ asset('videos/header/'.$page.'_video.mp4') }} -->
  <!-- {{ asset('videos/header/'.$page.'_video_mobile.mp4') }} -->
<section class="securex-video-header">

    <div class="securex-video-banner" >

        <!-- Desktop -->
        <video class="header-video desktop-video" autoplay muted loop playsinline preload="auto">
            <source src="https://campaign.securelinkme.net/securex360/header/new/{{ $page }}_video.mp4?" type="video/mp4">
        </video>

        <!-- Mobile -->
        <video class="header-video mobile-video" autoplay muted loop playsinline preload="auto">
            <source src="https://campaign.securelinkme.net/securex360/header/new/{{ $page }}_video_mobile.mp4" type="video/mp4">
        </video>

        <!-- Desktop Content -->

        <div class="securex-video-overlay">

            <div class="container">

                <div class="securex-video-content">

                @if($logo)

                <div class="securex-video-logo">

                    <img
                        src="{{ asset($logo) }}"
                        alt="Logo">

                </div>

                @endif

                    <h1 >{!! $title !!}</h1>

                    @if($subtitle)
                        <h2 >{!! $subtitle !!}</h2>
                    @endif

                    

                    @if($description)
                        <p >{!! $description !!}</p>
                    @endif

                    @if($button)
                        <a href="{{ $buttonLink }}"
                           class="btn-demo btn-demo animate-up"
                           data-bs-toggle="modal"
                           data-bs-target="#demoModal">

                            {{ $button }}

                        </a>
                    @endif

                </div>

            </div>

        </div>

    </div>

    <!-- Mobile Content -->

    <div class="securex-mobile-content">

        <div class="container">
            @if($logo)

                <div class="securex-video-logo">

                    <img
                        src="{{ asset($logo) }}"
                        alt="Logo">

                </div>

                @endif
                
            <h1>{!! $title !!}</h1>
            @if($subtitle)
                <span>{!! $subtitle !!}</span>
            @endif

            

            @if($description)
                <p>{!! $description !!}</p>
            @endif

            @if($button)
                <a href="{{ $buttonLink }}"
                   class="btn-demo"
                   data-bs-toggle="modal"
                   data-bs-target="#demoModal">

                    {{ $button }}

                </a>
            @endif

        </div>

    </div>

</section>