@extends('layouts.app')
@section('title', '¿Qué es el parche DD?')
@section('content')
    <div class="justify-items-center pt-4 md:pt-20 md:mx-16">
        <div class="bg-dark-cream-custom flex flex-col md:flex-row px-20 pb-10 rounded-3xl relative">
            <div class="flex-1">
                <img src="{{ asset('/img-2025/ABOUT.png') }}" class="md:absolute bottom-0 left-20 md:max-w-lg">
            </div>
            <div class="flex-1 py-7 md:pl-10 space-y-6">
                <h3 class="font-dunkin-sans-display text-purple-custom text-2xl">¿Qué es El Parche DD?</h3>
                <p class="font-dunkin-sans-book text-justify">
                    El programa de recompensas y educación creado especialmente para nuestros colaboradores Dunkin’,
                    donde podrás acumular puntos y redimirlos por grandiosos premios.
                </p>
                <p class="font-dunkin-sans-medium text-justify">
                    Pero eso no es todo, pues podrás hacer parte de diversas actividades y seguir ganando.
                </p>
            </div>
        </div>
        <div class="bg-cream-custom rounded-3xl w-2/3 transform -translate-y-6 p-4 relative hidden">
            <button class="bg-purple-custom rounded-full px-2 text-3xl">x</button>
            <button class="bg-purple-custom rounded-full px-2 text-3xl">x</button>
        </div>


        <div
            class="bg-cream-custom rounded-3xl w-full md:w-2/3 transform -translate-y-8 relative flex justify-between items-center">
            <button id="prev"
                class="bg-purple-custom text-white rounded-full cursor-pointer text-5xl px-4 pb-3 transform -translate-x-3">
                &lt;
            </button>
            <div class="overflow-hidden w-full">
                <div class="font-dunkin-sans-book text-sm flex transition-transform duration-500" id="carousel-items">
                    <div class="flex-none w-full my-auto">
                        <div class="flex flex-col md:flex-row p-4 items-center space-x-2">
                            <h3 class="w-full md:w-1/3 font-dunkin-sans-display text-purple-custom text-xl">
                                ¿Cómo puedes acumular puntos?
                            </h3>
                            <p class="w-2/3">
                                Esto depende de los indicadores de tu área como, asistencia puntual a
                                tu lugar de trabajo, acumulación del menor número de ausencias laborales
                                y participación en nuestras trivias y actividades.
                            </p>
                        </div>
                    </div>
                    <div class="flex-none w-full my-auto">
                        <div class="flex flex-col md:flex-row p-4 items-center space-x-2">
                            <h3 class="w-full md:w-1/3 font-dunkin-sans-display text-purple-custom text-xl">
                                Área comercial
                            </h3>
                            <p>
                                Acumulas por tus ventas de donuts y café por unidades, y por registros en La Rosca.Área
                                comercial.
                            </p>
                        </div>
                    </div>
                    <div class="flex-none w-full my-auto">
                        <div class="flex flex-col md:flex-row p-4 items-center space-x-2">
                            <h3 class="w-full md:w-1/3 font-dunkin-sans-display text-purple-custom text-xl">
                                Área <br> de producción
                            </h3>
                            <p>
                                Acumulas por la calificación de desperdicio. Área de producción
                            </p>
                        </div>
                    </div>
                    <div class="flex-none w-full my-auto">
                        <div class="flex flex-col md:flex-row p-4 items-center space-x-2">
                            <h3 class="w-full md:w-1/3 font-dunkin-sans-display text-purple-custom text-xl">
                                Área administrativa
                            </h3>
                            <p>
                                Acumulas por orden y aseo junto
                                con la participación en las actividades internas de la compañía
                            </p>
                        </div>
                    </div>
                    <div class="flex-none w-full my-auto">
                        <div class="flex flex-col md:flex-row p-4 items-center space-x-2">
                            <h3 class="w-full md:w-2/5 font-dunkin-sans-display text-purple-custom text-xl">
                                ¿Cómo puedes redimir tus puntos?
                            </h3>
                            <p class="">
                                <b>¡Fácil! Ve a la sección Premios, </b> y redime los puntos que tengas
                                disponibles en el catálogo de productos.
                                <br>
                                Conoce el modelo de entrega en los Términos y Condiciones
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <button id="next"
                class="bg-purple-custom text-white rounded-full cursor-pointer text-5xl px-4 pb-3 transform translate-x-3">
                &gt;
            </button>
        </div>
    </div>
@endsection