@extends('layout.master')
@section('content')
    <section>
        {{-- <div class="w-full h-[25vh] lg:h-[50vh] relative">
            <div class="absolute z-[1] top-0 w-full left-0 h-full flex items-center justify-center">
              <div class="text-white   text-center w-1/2">
                <h2 class="lg:text-6xl md:text-4xl text-2xl font-extrabold wow animate__animated animate__lightSpeedInLeft">Action committee</h2>
              </div>
            </div>
            <div class="w-full h-full">
              <img class="w-full h-full object-cover object-top brightness-50" src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg" />
            </div>
          </div>
        </div> --}}

        
        
        <div class="px-20 py-10 bg-blue-50">
            @if ($staff)
              
              {{-- <h2 class="text-4xl font-bold underline wow animate__animated animate__fadeInLeft">{{$about->title}}</h2>
              
              <div class="wow animate__animated animate__zoomIn">
                <p class="mt-5 text-justify text-lg text-gray-700 ">
                  {!!$about->description!!}
                </p>
              </div> --}}
              <div class="">
                <div class="md:px-10">
                    {{-- <div class=" relative wow animate__animated animate__fadeInLeft">
                        <div class="flex justify-center relative z-10">
                            <h2 class="bg-blue-50 px-2 text-primary text-lg font-bold ">About Us</h2>
                        </div>
                        <div class="h-0.5 bg-gray-500 absolute left-0 w-full top-1/2">
                        </div>
                    </div> --}}
                    <div class="mt-5">
                        <h2 class="lg:text-4xl md:text-2xl text-lg font-bold wow animate__animated animate__fadeInUp animate__delay-1s">{{$staff->title}}</h2>
                        {{-- <p class="my-5 lg:text-lg md:text-base text-sm text-gray-700 wow animate__animated animate__fadeInUp animate__delay-2s">We strive to provide personalized support and guidance throughout the entire process.</p> --}}
                        <p class="my-5 lg:text-lg md:text-base text-sm text-gray-700 wow animate__animated animate__fadeInUp animate__delay-2s">
                          {!!$staff->description!!}
                        </p>
                       
                        {{-- <div class="relative my-5 py-5 bg-gray-50 wow animate__animated animate__fadeInUp animate__delay-3s">
                            <div class="absolute top-0 -left-1 w-1 h-full bg-red-500 rounded-xl"></div>
                            <ul class="ml-1 flex flex-col gap-2 lg:text-base md:text-sm text-xs">
                              <li class="relative pl-5 before:content-[''] before:absolute before:h-2 before:w-2 before:bg-red-500 before:left-0 before:top-2 before:rounded-full">
                                <span class="font-bold">We commitment </span>to delivering high-quality services and support. 
                              </li>
                              <li class="relative pl-5 before:content-[''] before:absolute before:h-2 before:w-2 before:bg-red-500 before:left-0 before:top-2 before:rounded-full">
                                <span class="font-bold">We work closely </span>We work closely with students to understand their needs and goals.                          </li>
                            </ul>
                          </div> --}}
                    </div>
                </div>
                <div class="relative md:h-[50vh]">
    
                  {{-- <div class="grid md:grid-cols-2 md:h-1/2"> --}}
                  
                </div>
            </div>
            @endif
            <div class="bg-blue-50 py-8 lg:py-16">
                <div class="mx-auto my-8 max-w-screen-sm lg:mb-16 text-center ">
                    <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-primary ">Action comittee</h2>
                    {{-- <p class="font-light text-black sm:text-xl">Explore the Journey, Capture the Moments with
                        {{ config('app.name') }} Gallery. </p> --}}
                </div>
            </div>
            @if (count($teams)>0)
                
            <div class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-4">
                
                @foreach ($teams as $team)
                    <div class=" cursor-pointer profile-card my-16 mx-auto wow animate__animated animate__zoomIn">
                        <div class="h-72 w-60 relative  overflow-hidden rounded-tl-[25%] rounded-br-[25%]">
                            <img class="w-full h-full object-cover object-top " src="{{$team->getFirstMediaUrl('team')}}" alt="">
                            <div class="overlay ">
                            </div>
                            <div class="social-links absolute flex left-0 bottom-0 right-0">
                                <div class="m-auto">
                                    <a class="mx-2 " target="_blank" href="{{$team->facebook}}"><i class="hover:scale-[1.25] duration-200 transition-all ease-linear text-2xl hover:text-[#416ac3]  fab fa-facebook"></i></a>
                                    <a class="mx-2 " target="_blank" href="{{$team->instagram}}"><i class="hover:scale-[1.25] duration-200 transition-all ease-linear text-2xl hover:text-[#ee2a7b] fab fa-instagram"></i></a>
                                    <a class="mx-2 " target="_blank" href="{{$team->linkedin}}"><i class="hover:scale-[1.25] duration-200 transition-all ease-linear text-2xl hover:text-[#0A66C2] fab fa-linkedin"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="w-60 mt-2 relative z-10">
                            <h2 class="text-center font-semibold uppercase text-xl">{{$team->name}}</h2>
                            <h2 class="text-center text-sm capitalize">{{$team->position}}</h2>
                        </div>
                    </div>
                @endforeach
            </div>
            @else
                <div>
                    <h2 class="text-center text-xl text-red-500">No Teams found !</h2>
                </div>
            @endif
        </div>
    </section>
@endsection

@section('css')
    <style>
          @media screen and (min-width:1140px)
    {

        .profile-card .overlay{
            position: absolute;
            top: 80%;
            left: 0;
            width: 100%;
            height: 30%;
            background: transparent;
            opacity: 0.8;
            visibility: hidden;
            border-top-left-radius: 40%;
            transition: all 0.5s ease;
            transform: translateY(20px);
            overflow: hidden;
        }
    
        .profile-card:hover .overlay{
            background-color: white;
            transform: translateY(0px);
            opacity: 0.8;
            visibility: visible;
    
        }
        .profile-card .social-links{
            transition: all 0.5s ease;
            transform: translateY(5px);
            opacity: 0;
            overflow: hidden;
        }
        .profile-card:hover .social-links{
            opacity: 1;
            transform: translateY(-10px);
        }
    }
    @media screen and (max-width:1140px)
    {
    .profile-card .overlay{
            position: absolute;
            top: 80%;
            left: 0;
            width: 100%;
            height: 30%;
            border-top-left-radius: 40%;
            transition: all 0.5s ease;
            overflow: hidden;
            background-color: white;
            transform: translateY(0px);
            opacity: 0.8;
            visibility: visible;
        }
        .profile-card .social-links{
            transform: translateY(-10px);
            opacity: 1;
        }
    }

    </style>
@endsection