@extends('layout')

@section('content')
<main class="container mx-auto px-5">
    <section class="w-full flex xl:flex-row flex-col-reverse xl:justify-between xl:bg-gray-300 relative">
        <article>
            <img class='xl:w-auto w-full' src="{{ asset('images/hero.webp') }}" alt="" loading="lazy">
        </article>
        <article class='bg-white shadow-lg xl:absolute top-1/4 right-16 flex flex-col xl:gap-12 md:gap-5 gap-12 xl:items-start items-center py-16 px-12'>
            <article class="flex flex-col xl:items-start items-center gap-3">
                <h1 class="xl:text-start text-center text-3xl font-bold text-indigo-800">Корочки.есть - самый лучший портал</h1>
                <p class="text-xl xl:text-start text-center">- Для получения знаний!</p>
            </article>
            <a href="{{ route('apps') }}" class='bg-green-600 py-2 px-4 md:text-base text-xl rounded-xl text-white font-medium xl:self-end self-center'>Подать заявку</a>
        </article>
    </section>
    <section class="flex flex-col items-center">
        <h2 class="text-2xl font-bold text-indigo-800 my-12">Наши преимущества:</h2>
        <ul class="flex lg:flex-row flex-col lg:gap-16 gap-10">
            <li class="flex flex-col items-center gap-1 ">
                <img src="{{ asset('images/adv1.webp') }}" alt="adventage1" loading="lazy" class='md:w-32 w-28'>
                <p class='text-xl italic w-48 text-center'>Первые на рынке по предоставлению знаний</p>
            </li>
            <li class="flex flex-col items-center gap-1 ">
                <img src="{{ asset('images/adv2.webp') }}" alt="adventage2" loading="lazy" class='md:w-32 w-28'>
                <p class='text-xl italic w-48 text-center'>Отличные преподаватели</p>
            </li>
            <li class="flex flex-col items-center gap-1 ">
                <img src="{{ asset('images/adv3.webp') }}" alt="adventage3" loading="lazy" class='md:w-32 w-28'>
                <p class='text-xl italic w-48 text-center'>Цена/качество за обучение</p>
            </li>
        </ul>
    </section>
    <section class='flex flex-col items-center gap-1'>
        <h3 class="text-2xl font-bold text-indigo-800 mt-12 mb-4">Наши аудитории:</h3>
        <article class="relative overflow-hidden xl:w-1/2 md:w-2/3 w-full">
            <article class='flex duration-500' id="carousel">
                <img src="{{ asset('images/1.webp') }}" alt="carousel_item1" loading="lazy" class='w-full flex-shrink-0 '>
                <img src="{{ asset('images/2.webp') }}" alt="carousel_item2" loading="lazy" class='w-full flex-shrink-0 '>
                <img src="{{ asset('images/3.webp') }}" alt="carousel_item3" loading="lazy" class='w-full flex-shrink-0 '>
                <img src="{{ asset('images/4.webp') }}" alt="carousel_item4" loading="lazy" class='w-full flex-shrink-0 '>
            </article>
            <button class='w-14 h-14 font-bold bg-gray-800 text-white rounded-full absolute top-1/2 right-0' onclick="next()">></button>
            <button class='w-14 h-14 font-bold bg-gray-800 text-white rounded-full absolute top-1/2 ' onclick="prev()"><</button>
        </article>
    </section>
    <script>
        let index = 1
        function prev() {
            index = (index + 3) % 4
            carouselAction()
        }
        function next() {
            index = (index + 1) % 4
            carouselAction()
        }
        function carouselAction() {
            document.getElementById('carousel').style.transform = `translateX(-${index * 100}%)`
        }
        setInterval(() => {
            next()
        }, 3000);
    </script>
</main>
@endsection