<main>
    <section class="relative aspect-video ">
        <video src="{{ asset('storage/video/finca_monteverde.mp4') }}"
            class="absolute top-0 left-0 w-full h-full" autoplay controls muted></video>
    </section>  
    <section class="3xl:mx-36">
        <div class="flex flex-col items-center justify-center h-full p-3 md:p-10 mt-8 lg:mt-14">
            <h1 class="text-2xl font-semibold xl:mt-20 md:text-5xl dark:text-white font-aleo">DE LA FINCA HASTA TU TAZA
            </h1>
            <div class="grid grid-cols-1 gap-3 lg:gap-0 xl:grid-cols-3">
                <div class="grid grid-cols-1">
                    <div
                        class="flex flex-col items-center justify-start my-3 bg-white h-auto lg:h-32 xl:h-56 lg:my-20 gap-5">
                        <img class="w-10 mr-2 md:w-auto" src="{{ asset('storage/index/grano_cafe.png') }}"
                            alt="grano image">
                        <h3 class="md:w-[60%] font-normal  md:text-2xl font-sarabun text-center">
                            Café recolectado artesanalmente en las montañas de Chiapas
                        </h3>
                    </div>
                    <div class="flex flex-row xl:flex-col ">
                        <div class="relative flex items-center justify-center p-10 text-2xl font-normal text-white bg-cover rounded-xl xl:hidden xl:bg-none md:h-80"
                            style="background-image: url({{ asset('storage/index/marco1.jpg') }})">
                            <div class="absolute inset-0 bg-black bg-opacity-50"></div>
                            <div class="relative z-10 text-center font-sarabun">
                                Nuestro café se distingue desde el origen, contando con una región
                                privilegiada que por sí sola ofrece condiciones naturales excepcionales.
                                Por lo que realmente marca la diferencia es el cuidado personal que ponemos en cada
                                etapa del proceso.
                            </div>
                        </div>
                        <div class="hidden xl:inline-block xl:h-[29rem] ">
                            <img class="w-full h-full" src="{{ asset('storage/index/marco1.jpg') }}" alt="marco">
                        </div>
                        <div
                            class="text-2xl  items-center object-cover xl:flex flex-col hidden justify-center text-center p-10 font-light bg-secondary font-sarabun xl:h-[29rem] text-white">
                            Nuestro cafe se
                            distingue desde el origen, contando con una
                            region
                            privilegiada que por si sola ofrece condiciones naturales excepcionales.
                            <br><br>
                            Por lo que realmente marca la diferencia es el cuidado personal que ponemos en cada etapa
                            del proceso.
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 ">
                    <div
                        class="flex flex-col items-center justify-start my-3 bg-white h-auto lg:h-32 xl:h-56 lg:my-20 gap-5">
                        <img class="w-10 mr-2 md:w-auto" src="{{ asset('storage/index/grano.png') }}" alt="grano">
                        <h3 class="md:w-[60%] font-normal  md:text-2xl font-sarabunn text-center">Grano recien tostado
                            con
                            estandares de calidad
                            para la exportación</h3>
                    </div>
                    <div class="flex flex-row xl:flex-col ">
                        <div class="relative flex items-center justify-center p-10 text-2xl font-normal text-white bg-cover rounded-xl xl:hidden xl:bg-none md:h-80"
                            style="background-image: url({{ asset('storage/index/marco3.jpg') }})">
                            <div class="absolute inset-0 bg-black bg-opacity-50"></div>
                            <div class="relative z-10 text-center font-sarabun">
                                <b class="font-bold">FINCA MONTEVERDE</b> es un legado familiar, representado por tres
                                generaciones
                                dedicadas al café.
                                <br><br>
                                Esta ubicada en <b class="font-bold">Jaltenango la Paz en Chiapas.</b> Donde trabajamos
                                en familia junto
                                con un equipo comprometido que forma parte de este proyecto desde hace años.
                            </div>
                        </div>
                        <h4
                            class="text-2xl items-center xl:inline-block text-center hidden justify-center p-10 font-light bg-secondary font-sarabun xl:h-[29rem] text-white">
                            <b class="font-bold">FINCA MONTEVERDE</b> es un legado familiar, representado por tres
                            generaciones dedicadas
                            al café.
                            <br><br>
                            Esta ubicada en <b class="font-bold">Jaltenango la Paz en Chiapas.</b> Donde trabajamos en
                            familia junto con
                            un equipo comprometido que
                            forma parte de este proyecto desde hace años.
                        </h4>
                        <div class="hidden xl:inline-block xl:h-[29rem] ">
                            <img class="w-full h-full" src="{{ asset('storage/index/marco3.jpg') }}" alt="marco">
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1">
                    <div
                        class="flex flex-col items-center justify-start my-3 bg-white h-auto lg:h-32 xl:h-56 gap-5 lg:my-20">
                        <img class="w-10 mr-2 md:w-auto" src="{{ asset('storage/index/cafe.png') }}" alt="cafe">
                        <h3 class="md:w-[60%] font-normal  md:text-2xl font-sarabunn text-center">El mejor café de grano
                            y molido
                        </h3>
                    </div>
                    <div class="flex flex-row xl:flex-col ">
                        <div class="relative flex items-center justify-center p-10 text-2xl font-normal text-white bg-cover rounded-xl xl:hidden xl:bg-none md:h-80"
                            style="background-image: url({{ asset('storage/index/marco2.jpg') }})">
                            <div class="absolute inset-0 bg-black bg-opacity-50"></div>
                            <div class="relative z-10 text-center font-sarabun">
                                Ofrecemos a nuestros clientes un <b class="font-bold">café selecto,</b> proveniente de
                                un solo lote que
                                asegura uniformidad y una de las mejores calidades en taza.
                            </div>
                        </div>
                        <img class="hidden xl:inline-block xl:h-[29rem] " src="{{ asset('storage/index/marco2.jpg') }}"
                            alt="marco">
                        <h4
                            class="text-2xl font-aleo items-center xl:flex flex-col hidden text-center justify-center p-10 font-light bg-secondary font-sarabun xl:h-[29rem] text-white">
                            Nuestro cafe se
                            distingue desde el origen, contando con una
                            region
                            privilegiada que por si sola ofrece condiciones naturales excepcionales.
                            Por lo que realmente marca la diferencia es el cuidado personal que ponemos en cada etapa
                            del proceso.
                        </h4>
                    </div>
                </div>
            </div>
            <h2 class="my-5 text-xl font-bold text-center xl:my-20 md:text-4xl dark:text-white font-aleo pt-4 lg:pt-14">
                EL
                TRATO
                CERCANO CON NUESTROS CLIENTES Y EL COMPROMISO CON LA EXCELENCIA SON PARTE ESENCIAL DE LO QUE SOMOS.</h2>
            <div class="grid my-5 text-base text-center lg:my-10 md:text-3xl md:text-start xl:gap-10 xl:grid-cols-3">
                <div>
                    Nos involucramos en la parte agrícola y en los procesos del beneficio húmedo y seco. <br><br>
                </div>
                <div>
                    En el tostado se realiza de manera semanal para garantizar frescura, aroma y sabor excepcional.
                </div>
                <div>
                    Cultivamos con profundo respeto por la tierra y por las personas que hacen posible esta labor.
                </div>
            </div>
    </section>
    <div class="flex justify-center bg-contain xl:items-center bg-principal mt-8 lg:mt-14 py-10 lg:py-16"
        style="background-image: url({{ asset('storage/plecas/bg_patron_verde_02.svg') }});">
        <div
            class="flex flex-col items-center justify-center p-5 text-center text-white w-[90%] lg:w-[70%] bg-principal">
            <div class="grid grid-cols-3 mb-6 xl:gap-28">
                <img class="h-10 xl:h-36" src="{{ asset('storage/index/iconos certificaciones-01.svg') }}"
                    alt="certificacion 1">
                <img class="h-10 xl:h-36" src="{{ asset('storage/index/iconos certificaciones-02.svg') }}"
                    alt="certificacion 2">
                <img class="h-10 xl:h-36" src="{{ asset('storage/index/iconos certificaciones-03.svg') }}"
                    alt="certificacion 3">
            </div>
            <h2 class="text-xs font-bold xl:text-1xl">
                Certificado por: OC-130819-20-CPAA-004 | Código del Operador: ID: MX-5-E-116 NO OGM
            </h2>
        </div>
    </div>
</main>
