@extends('frontend.layouts.app-index')

@section('title')

@endsection

@section('seo')
<title>Welcome | JRS</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Welcome | JRS" />
<meta property="og:description" content="Trust our expert security guards for your peace of mind. Protecting what matters most." />
<meta property="og:site_name" content="Welcome | JRS" />
<meta property="og:image" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:keywords" content="Security Guards, Security Services, Professional Security, Guard Services, Trained Guards, Security Personnel, Security Solutions, On-Site Security, Security Company, Guarding Services, Security Patrol, Site Protection, Event Security, Asset Protection, Business Security, Residential Security, VIP Protection, Crowd Control, Emergency Response, Security Management, Residential Guard Services, Commercial Security Guards, Retail Loss Prevention, Construction Site Guards, Event Crowd Control, Hotel Security Services, School Campus Safety, Industrial Plant Security, VIP Personal Protection, Access Control Solutions, Emergency Security Response, Armed and Unarmed Guards, Facility Access Management, Security Risk Assessment, Business Alarm Monitoring, Bank Security Officers, Security Guard Training, Security Patrol Services, Private Property Protection, Security Guard Companies">
@endsection

@section('content')

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


    <div class="overflow-hidden mb-5">
      <div class="position-relative">

        <video loop autoplay src="{{ asset('images/jrs-3d.mp4') }}" play="true" muted type="video/mp4" class="media">

        </video>
        <style>
          .media {
            width: 100%;
            height: 100svh;
            object-fit: cover;
            object-position: center;
          }
        </style>

        <div class="position-absolute translate-middle start-50 " style="top: 90%;">
          <div class="d-flex justify-content-center w-100">
            <a href="{{ url('home') }}">
              <button id="myButton" class="btn index px-5 py-4 text-white fs-3 hidden show-delay">ENTER</button>
            </a>
          </div>
        </div>
      </div>
    </div>
    @endsection

    @section('css')
    <!-- <style>
    .hidden {
        opacity: 0;
        pointer-events: none;
        /* To prevent interactions with the hidden button */
    }

    /* Animation to slowly show the button */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Apply the animation after the initial delay */
    .show-delay {
        animation: fadeIn 1s ease-in-out 3s;
    }

    #myButton {
        font-family: 'Open Sans', sans-serif;
    }

    /* CSS styles for faded bottom effect */
    .faded {
        position: relative;
        display: inline-block;
        color: white;
    }

    .faded:after {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-collapse: separate;
    }

    .faded.faded-bottom:after {
        box-shadow: inset 0 -40px 40px -16px;
    }
</style> -->

    <style>
      .hidden {
        opacity: 0;
        pointer-events: none;
        /* To prevent interactions with the hidden button */
      }

      /* Animation to slowly show the button */
      @keyframes fadeIn {
        from {
          opacity: 0;
        }

        to {
          opacity: 1;
        }
      }

      /* Apply the animation after the initial delay */
      .show-delay {
        animation: fadeIn 5s ease-in-out 3s;
      }
    </style>
    @endsection

    @section('js')
    <script>
      // Function to remove the .hidden class after the animation is complete
      function showButton() {
        const button = document.getElementById('myButton');
        button.classList.remove('hidden');
      }

      // Show the button after 4 seconds
      setTimeout(showButton, 4000);
    </script>
    @endsection