@extends('menu')
@section('content')
    <style>
        $margin: 30px;

        ul {
            padding: 0;
        }

        li {
            list-style: none;
        }


        main {

            margin: 0 auto;
            padding: 50px 0;

        }

        .wrapper {
            position: relative;

            // Gradient side fade

            &:before,
            &:after {
                position: absolute;
                top: 0;
                z-index: 1;

                content: "";
                display: block;
                width: $margin;
                height: 100%;
            }

            &:before {
                left: 0;
                background: linear-gradient(90deg, $bg-color, transparent);
            }

            &:after {
                right: 0;
                background: linear-gradient(-90deg, $bg-color, transparent);
            }
        }

        .items {
            position: relative;
            width: 100%;
            height: 650px;
            overflow: hidden;
            white-space: nowrap;
            font-size: 0;
            cursor: pointer;

            &.active {
                cursor: grab;
            }
        }

        .item {
            display: inline-block;
            margin-left: $margin;
            user-select: none;

            background: #ffff;
            width: 80%;
            height: auto;
            font-size: 33px;
            font-weight: bold;

            &:last-child {
                margin-right: $margin;
            }
        }

        @media screen and (min-width: 500px) {

            .item {
                width: 33%;
            }
        }

        @media screen and (min-width: 800px) {

            .item {
                width: 25%;
            }
        }

        @media screen and (min-width: 1200px) {

            .wrapper {
                margin-left: -$margin;
            }

            .item {
                width: 28%;
            }
        }

        @media screen and (min-width: 1536px) {

            .wrapper {
                margin-left: -$margin;
            }

            .item {
                width: 20%;
            }
        }
    </style>
    <section class="mt-32">
        <div class="w-full">
            <div class="text-center">
                <h1 class="text-4xl md:text-6xl text-[#0098D8]"
                    style="font-family: acumin-pro, sans-serif; font-weight: 700;
            font-style: normal;">Agentes
                    <br> <span class="text-7xl md:text-9xl text-[#0098D8]"
                        style="font-family: acumin-pro, sans-serif; font-weight: 700; font-style: normal;">SERSE</span>
                </h1>
                <p class="text-2xl md:text-4xl w-full md:w-1/2 text-center mt-8 text-[#00468A] mx-auto"
                    style="font-family: acumin-pro, sans-serif; font-weight: 200; font-style: normal;">Contacta a
                    nuestros <span style="font-family: acumin-pro, sans-serif; font-weight: 700; font-style: normal;">agentes
                        más
                        destacados</span>
                    de cada <br> ramo, por su <span class="text-[#ECA923]"
                        style="font-family: acumin-pro, sans-serif; font-weight: 700; font-style: normal;">compromiso,
                        constancia y liderazgo.</span></p>
                <hr class="w-[80px] h-[4px] bg-[#00468A] mt-16 mx-auto">
            </div>
        </div>

        <main>
            <div class="wrapper">
                <ul class="items">
                    <li class="item mr-4 ml-4 rounded-[50px] border border-[#00468A]">
                        <div class="flex w-full relative mt-16">
                            <svg width="19" height="18" version="1.1" id="Capa_1"
                                class="w-4 ml-[20%] md:ml-[22%] mt-[1.5%] absolute" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 25"
                                style="enable-background:new 0 0 25 25;" xml:space="preserve">
                                <style type="text/css">
                                    .st0 {
                                        fill: #ECA923;
                                    }
                                </style>
                                <g>
                                    <path class="st0"
                                        d="M14.6,2.2l1.9,5.9h6.2c2.2,0,3.1,2.8,1.3,4l-5,3.7l1.9,5.9c0.7,2-1.7,3.8-3.4,2.5l-5-3.7l-5,3.7
		c-1.7,1.3-4.1-0.4-3.4-2.5L6,15.8l-5-3.7c-1.7-1.3-0.8-4,1.3-4h6.2l1.9-5.9C11.1,0.2,13.9,0.2,14.6,2.2z" />
                                </g>
                            </svg>
                            <span class="text-sm md:text-xl mx-auto ml-[30%] md:ml-28 text-[#ECA923]"
                                style="font-family: acumin-pro, sans-serif; font-weight: 200; font-style: normal">
                                TOP CRECIMIENTO</span>
                        </div>
                        <img src="/img/agentes/agente-serse-seguro-vida.jpeg" alt=""
                            class="w-[65%] h-[32] md:w-[72%] md:h-[40%]  p-8 mx-auto mt-4 md:mt-4 rounded-full">
                        <center>
                            <p class="h-auto text-3xl md:text-4xl text-[#00468A] mb-2">Jorge Ramos
                                <br>
                            </p>
                            <span
                                class="w-full mb-16 text-sm md:text-xl text-[#00468A] bg-[#F5F5F5] py-2 px-[10%] rounded-full">AUTOMÓVILES</span>
                            <img src="/WhatsApp-agentes-serse.png" alt="" class="h-20 w-20 mb-8 mt-8">
                        </center>
                    </li>

                    <li class="item mr-4 ml-4 rounded-[50px] border border-[#00468A]">
                        <div class="flex w-full relative mt-16">
                            <svg width="19" height="18" version="1.1" id="Capa_1"
                                class="w-4 ml-[20%] md:ml-[22%] mt-[1.5%] absolute" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 25"
                                style="enable-background:new 0 0 25 25;" xml:space="preserve">
                                <style type="text/css">
                                    .st0 {
                                        fill: #ECA923;
                                    }
                                </style>
                                <g>
                                    <path class="st0"
                                        d="M14.6,2.2l1.9,5.9h6.2c2.2,0,3.1,2.8,1.3,4l-5,3.7l1.9,5.9c0.7,2-1.7,3.8-3.4,2.5l-5-3.7l-5,3.7
    c-1.7,1.3-4.1-0.4-3.4-2.5L6,15.8l-5-3.7c-1.7-1.3-0.8-4,1.3-4h6.2l1.9-5.9C11.1,0.2,13.9,0.2,14.6,2.2z" />
                                </g>
                            </svg>
                            <span class="text-sm md:text-xl mx-auto ml-[30%] md:ml-28 text-[#ECA923]"
                                style="font-family: acumin-pro, sans-serif; font-weight: 200; font-style: normal">
                                TOP CRECIMIENTO</span>
                        </div>
                        <img src="/img/agentes/agente-serse-seguro-vida.jpeg" alt=""
                            class="w-[65%] h-[32] md:w-[72%] md:h-[40%]  p-8 mx-auto mt-4 md:mt-4 rounded-full">
                        <center>
                            <p class="h-auto text-3xl md:text-4xl text-[#00468A] mb-2">Jorge Ramos
                                <br>
                            </p>
                            <span
                                class="w-full mb-16 text-sm md:text-xl text-[#00468A] bg-[#F5F5F5] py-2 px-[10%] rounded-full">AUTOMÓVILES</span>
                            <img src="/WhatsApp-agentes-serse.png" alt="" class="h-20 w-20 mb-8 mt-8">
                        </center>
                    </li>

                    <li class="item mr-4 ml-4 rounded-[50px] border border-[#00468A]">
                        <div class="flex w-full relative mt-16">
                            <svg width="19" height="18" version="1.1" id="Capa_1"
                                class="w-4 ml-[20%] md:ml-[22%] mt-[1.5%] absolute" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 25"
                                style="enable-background:new 0 0 25 25;" xml:space="preserve">
                                <style type="text/css">
                                    .st0 {
                                        fill: #ECA923;
                                    }
                                </style>
                                <g>
                                    <path class="st0"
                                        d="M14.6,2.2l1.9,5.9h6.2c2.2,0,3.1,2.8,1.3,4l-5,3.7l1.9,5.9c0.7,2-1.7,3.8-3.4,2.5l-5-3.7l-5,3.7
    c-1.7,1.3-4.1-0.4-3.4-2.5L6,15.8l-5-3.7c-1.7-1.3-0.8-4,1.3-4h6.2l1.9-5.9C11.1,0.2,13.9,0.2,14.6,2.2z" />
                                </g>
                            </svg>
                            <span class="text-sm md:text-xl mx-auto ml-[30%] md:ml-28 text-[#ECA923]"
                                style="font-family: acumin-pro, sans-serif; font-weight: 200; font-style: normal">
                                TOP CRECIMIENTO</span>
                        </div>
                        <img src="/img/agentes/agente-serse-seguro-vida.jpeg" alt=""
                            class="w-[65%] h-[32] md:w-[72%] md:h-[40%]  p-8 mx-auto mt-4 md:mt-4 rounded-full">
                        <center>
                            <p class="h-auto text-3xl md:text-4xl text-[#00468A] mb-2">Jorge Ramos
                                <br>
                            </p>
                            <span
                                class="w-full mb-16 text-sm md:text-xl text-[#00468A] bg-[#F5F5F5] py-2 px-[10%] rounded-full">AUTOMÓVILES</span>
                            <img src="/WhatsApp-agentes-serse.png" alt="" class="h-20 w-20 mb-8 mt-8">
                        </center>
                    </li>

                    <li class="item mr-4 ml-4 rounded-[50px] border border-[#00468A]">
                        <div class="flex w-full relative mt-16">
                            <svg width="19" height="18" version="1.1" id="Capa_1"
                                class="w-4 ml-[20%] md:ml-[22%] mt-[1.5%] absolute" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                viewBox="0 0 25 25" style="enable-background:new 0 0 25 25;" xml:space="preserve">
                                <style type="text/css">
                                    .st0 {
                                        fill: #ECA923;
                                    }
                                </style>
                                <g>
                                    <path class="st0"
                                        d="M14.6,2.2l1.9,5.9h6.2c2.2,0,3.1,2.8,1.3,4l-5,3.7l1.9,5.9c0.7,2-1.7,3.8-3.4,2.5l-5-3.7l-5,3.7
    c-1.7,1.3-4.1-0.4-3.4-2.5L6,15.8l-5-3.7c-1.7-1.3-0.8-4,1.3-4h6.2l1.9-5.9C11.1,0.2,13.9,0.2,14.6,2.2z" />
                                </g>
                            </svg>
                            <span class="text-sm md:text-xl mx-auto ml-[30%] md:ml-28 text-[#ECA923]"
                                style="font-family: acumin-pro, sans-serif; font-weight: 200; font-style: normal">
                                TOP CRECIMIENTO</span>
                        </div>
                        <img src="/img/agentes/agente-serse-seguro-vida.jpeg" alt=""
                            class="w-[65%] h-[32] md:w-[72%] md:h-[40%]  p-8 mx-auto mt-4 md:mt-4 rounded-full">
                        <center>
                            <p class="h-auto text-3xl md:text-4xl text-[#00468A] mb-2">Jorge Ramos
                                <br>
                            </p>
                            <span
                                class="w-full mb-16 text-sm md:text-xl text-[#00468A] bg-[#F5F5F5] py-2 px-[10%] rounded-full">AUTOMÓVILES</span>
                            <img src="/WhatsApp-agentes-serse.png" alt="" class="h-20 w-20 mb-8 mt-8">
                        </center>
                    </li>

                    <li class="item mr-4 ml-4 rounded-[50px] border border-[#00468A]">
                        <div class="flex w-full relative mt-16">
                            <svg width="19" height="18" version="1.1" id="Capa_1"
                                class="w-4 ml-[20%] md:ml-[22%] mt-[1.5%] absolute" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                viewBox="0 0 25 25" style="enable-background:new 0 0 25 25;" xml:space="preserve">
                                <style type="text/css">
                                    .st0 {
                                        fill: #ECA923;
                                    }
                                </style>
                                <g>
                                    <path class="st0"
                                        d="M14.6,2.2l1.9,5.9h6.2c2.2,0,3.1,2.8,1.3,4l-5,3.7l1.9,5.9c0.7,2-1.7,3.8-3.4,2.5l-5-3.7l-5,3.7
    c-1.7,1.3-4.1-0.4-3.4-2.5L6,15.8l-5-3.7c-1.7-1.3-0.8-4,1.3-4h6.2l1.9-5.9C11.1,0.2,13.9,0.2,14.6,2.2z" />
                                </g>
                            </svg>
                            <span class="text-sm md:text-xl mx-auto ml-[30%] md:ml-28 text-[#ECA923]"
                                style="font-family: acumin-pro, sans-serif; font-weight: 200; font-style: normal">
                                TOP CRECIMIENTO</span>
                        </div>
                        <img src="/img/agentes/agente-serse-seguro-vida.jpeg" alt=""
                            class="w-[65%] h-[32] md:w-[72%] md:h-[40%]  p-8 mx-auto mt-4 md:mt-4 rounded-full">
                        <center>
                            <p class="h-auto text-3xl md:text-4xl text-[#00468A] mb-2">Jorge Ramos
                                <br>
                            </p>
                            <span
                                class="w-full mb-16 text-sm md:text-xl text-[#00468A] bg-[#F5F5F5] py-2 px-[10%] rounded-full">AUTOMÓVILES</span>
                            <img src="/WhatsApp-agentes-serse.png" alt="" class="h-20 w-20 mb-8 mt-8">
                        </center>
                    </li>

                </ul>
            </div>
        </main>
    </section>

    <script>
        let isDown = false;
        let startX;
        let scrollLeft;
        const slider = document.querySelector('.items');

        const end = () => {
            isDown = false;
            slider.classList.remove('active');
        }

        const start = (e) => {
            isDown = true;
            slider.classList.add('active');
            startX = e.pageX || e.touches[0].pageX - slider.offsetLeft;
            scrollLeft = slider.scrollLeft;
        }

        const move = (e) => {
            if (!isDown) return;

            e.preventDefault();
            const x = e.pageX || e.touches[0].pageX - slider.offsetLeft;
            const dist = (x - startX);
            slider.scrollLeft = scrollLeft - dist;
        }

        (() => {
            slider.addEventListener('mousedown', start);
            slider.addEventListener('touchstart', start);

            slider.addEventListener('mousemove', move);
            slider.addEventListener('touchmove', move);

            slider.addEventListener('mouseleave', end);
            slider.addEventListener('mouseup', end);
            slider.addEventListener('touchend', end);
        })();
    </script>

    @include('footer')
@endsection