@extends('front.layouts.front')
@section('content')
    <section class="section mt-5">
        <div class="container pt-4">
            <div class="d-flex justify-content-between mt-5 mt-sm-0">
                <a href="{{ route('front.friends-audience.index') }}" class="studio-elem position-static d-block text-center">
                    <img src="{{ url('assets/img/Audience-Friends.png') }}" class="img-fluid" alt="icon" />
                    <h5>Friends / Adience</h5>
                </a>
                <a href="{{ route('front.index') }}" class="studio-elem position-static d-block text-center  ">
                    <img src="{{ url('assets/img/cinema.png') }}" class="img-fluid" alt="icon" />
                    <h5>Screening room</h5>
                </a>
            </div>
            <div class="studio-block">
                <img src="{{ url('assets/img/studio.png') }}" class="img-fluid star-img" alt="">
                <a href="{{ route('front.credits.index') }}" class="studio-elem elm1">
                    <img src="{{ url('assets/img/trophy.png') }}" class="img-fluid" alt="icon" />
                    <h5>Credits</h5>
                </a>
                <a href="{{ route('front.development.index') }}" class="studio-elem elm2">
                    <img src="{{ url('assets/img/ticket.png') }}" class="img-fluid" alt="icon" />
                    <h5>In Development</h5>
                </a>

                <a href="{{ route('front.press.index') }}" class="studio-elem elm3">
                    <img src="{{ url('assets/img/newspaper.png') }}" class="img-fluid" alt="icon" />
                    <h5>Press</h5>
                </a>

                <a href="{{ route('front.custom-channel.index') }}" class="studio-elem elm4">
                    <img src="{{ url('assets/img/channel.png') }}" class="img-fluid" alt="icon" />
                    <h5>Custom channels</h5>
                </a>
                <a href="{{ route('front.film-festival.index') }}" class="studio-elem elm5">
                    <img src="{{ url('assets/img/gift.png') }}" class="img-fluid" alt="icon" />
                    <h5>Film festival</h5>
                </a>
                <a href="{{ route('front.cuttingroom.index') }}" class="studio-elem position-static d-sm-none text-center">
                    <img src="{{ url('assets/img/Cuttingroomfloor.png') }}" class="img-fluid" alt="icon" />
                    <h5>Cutting room floor</h5>
                </a>
            </div>
            {{-- <div class="d-sm-flex d-none justify-content-end mt-5 mt-lg-0">
                <a href="{{ route('front.cuttingroom.index') }}" class="studio-elem position-static d-block text-center">
                    <img src="{{ url('assets/img/Cuttingroomfloor.png') }}" class="img-fluid" alt="icon" />
                    <h5>Cutting room floor</h5>
                </a>
            </div> --}}
            <div class="d-flex justify-content-between mt-5 mt-sm-0">
                <a href="{{ route('front.professional-reel.index') }}" class="studio-elem position-static d-block text-center">
                    <img src="{{ url('assets/img/gift.png') }}" class="img-fluid" alt="icon" />
                    <h5>Professional Reels</h5>
                </a>
                <a href="{{ route('front.cuttingroom.index') }}" class="studio-elem position-static d-block text-center  ">
                    <img src="{{ url('assets/img/Cuttingroomfloor.png') }}" class="img-fluid" alt="icon" />
                    <h5>Cutting room floor</h5>
                </a>
            </div>
        </div>

    </section>
    {{-- <section class="section">
            <video
        id="vid1"
        controls
        preload="auto"
        poster="//vjs.zencdn.net/v/oceans.png"
        class="video-js vjs-default-skin mt-3"
        width="640" height="264"
        data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=40hHA9n4C2o"}]}'
        >
        </video>
    </section> --}}
@endsection

@section('script')
    {{-- <script>
    var myPlayer = videojs('vid1');
    myPlayer.ready(function () {
        setTimeout(function(){
            //myPlayer.play();
            myPlayer.pause()
        }, 10000)
    });
</script> --}}
@endsection