@extends ('web.layouts-v2.master')

@section ('title')
@lang('messages.menu_about') | @lang('messages.title')
@endsection
@section ('description')
<meta name="description" content="@lang('messages.desc_about')">
@endsection

@section ('seoNotation')
@include('web.partials.seo-notation')
@endsection

@section ('content')

<section class="g-pos-rel g-pt-80">
    <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll loaded dzsprx-readyall" data-options='{direction: "fromtop", animation_duration: 25, direction: "reverse"}'>
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 u-bg-overlay g-bg-white-opacity-0_2--after" style="height: 130%; background-image: url({{ asset('../resources/assets/img/inline/about_fullscaleexercise.jpg') }});"></div>
        <!-- End Parallax Image -->

        <!-- Content -->
        <div class="container g-color-white text-center g-pos-rel g-z-index-1 g-py-120 hidden-md-down">
            <h1 class="g-font-weight-700 g-font-size-65 text-uppercase">@lang('messages.footer_about')</h1>
            <h2 class="h4 g-color-white">
                <span class="g-bg-black-opacity-0_6 g-px-5">@lang('messages.label_about_description')</span>
            </h2>
        </div>

        <div class="container g-color-white text-center g-pos-rel g-z-index-1 g-pt-80 g-pb-70 hidden-lg-up">
            <h2 class="g-font-weight-700 g-font-size-40 text-uppercase">@lang('messages.footer_about')</h2>
            <h3 class="h5 g-color-white">
                <span class="g-bg-black-opacity-0_6 g-px-5">@lang('messages.label_about_description')</span>
            </h3>
        </div>
        <!-- Content -->
    </div>
</section>

<!-- Counters -->
@if (isset($counters))
<section class="g-bg-gray-light-v5 g-pt-20 g-pt-30--md g-pb-10--md">
    <div class="container">
        <div class="row text-center text-uppercase g-color-primary">
            <div class="col-md-3 col-6 g-mb-20">
                <i class="et-icon-beaker display-5 mb-3"></i>
                <div class="js-counter g-font-size-20 g-font-size-32--md mb-2">{{ $counters['instructors'] }}</div> <!-- /*+ 20*/ -->
                <h4 class="h5 g-font-weight-300 mb-0">@lang('messages.label_instructors')</h4>
            </div>

            <div class="col-md-3 col-6 g-mb-20">
                <i class="et-icon-clock display-5 mb-3"></i>
                <div class="js-counter g-font-size-20 g-font-size-32--md mb-2">{{ $counters['classes'] }}</div>  <!-- /*+ 40*/ -->
                <h4 class="h5 g-font-weight-300 mb-0">@lang('messages.label_classes_delivered')</h4>
            </div>

            <div class="col-md-3 col-6 g-mb-20">
                <i class="et-icon-chat display-5 mb-3"></i>
                <div class="js-counter g-font-size-20 g-font-size-32--md mb-2">{{ $counters['students'] }}</div>  <!-- /*+ 1850*/ -->
                <h4 class="h5 g-font-weight-300 mb-0">@lang('messages.label_responders_trained')</h4>
            </div>

            <div class="col-md-3 col-6 g-mb-20">
                <i class="et-icon-lightbulb display-5 mb-3"></i>
                <div class="js-counter g-font-size-20 g-font-size-32--md mb-2">{{ $counters['hours'] }}</div>  <!-- /*+ 1200) * 24*/ -->
                <h4 class="h5 g-font-weight-300 mb-0">@lang('messages.label_training_hours')</h4>
            </div>
        </div>
    </div>
</section>
@endif
<!-- End Counters -->

<section class="container u-ns-bg-v1-bottom g-bg-white g-py-20 g-pt-40--lg">
    <div class="row justify-content-between g-mb-20">
        <div class="col-lg-8 col-md-12 g-pa-50">
            <div class="text-justify">
                <h2>About C3 Pathways</h2>
                <h3 class="h5 g-pt-20"> 
                    Most active shooter training focuses on tactics to stop the shooter. This leaves responders struggling 
                    to manage the scene and the clock trying to rescue victims before they bleed to death &mdash; a critical 
                    training gap. 
                </h3>
                <h3 class="h5 g-pt-20">
                    C3 Pathways developed a response process that integrates Police, Fire, and EMS so the 
                    shooter is stopped quickly, and victims are rescued quickly, which results in saving more lives. 
                    C3 Pathways provides the process, curricula, and training so you can close the gap.
                </h3>
                <h3 class="h5 g-pt-20">
                    For more information on how we can help you, please call us at <a href="tel: +{{ $company->phone }}" target="_blank">{{ $company->phone }}</a>
                </h3>
            </div>
        </div>
		
		{{-- @ include ('web.layouts-v2.section-twitter') --}}
    </div>
</section>

@include ('web.partials-v2.team-block')

@endsection

@section ('javascript')
<!-- JS Implementing Plugins -->
<script src="{{ asset('../resources/assets/vendor/cubeportfolio-full/cubeportfolio/js/jquery.cubeportfolio.min.js') }}"></script>

<!-- JS Unify -->
<script src="{{ asset('../resources/assets/js/components/hs.cubeportfolio.js') }}"></script>
<script src="{{ asset('../resources/assets/js/components/hs.counter.js') }}"></script>
<script src="{{ asset('../resources/assets/js/components/hs.modal-window.js') }}"></script>

<!-- JS Plugins Init: Modal for Team Members -->
<script >
  $(document).on('ready', function () {
    // initialization of counters
    $.HSCore.components.HSCounter.init('[class*="js-counter"]');
    
    // initialization of autonomous popups
    $.HSCore.components.HSModalWindow.init('[data-modal-target]');
    
    // initialization of cubeportfolio
    $.HSCore.components.HSCubeportfolio.init('.cbp');
  });
</script>
@endsection