@extends("pages.layouts.app-diputadas")
@section("content")
    <div class="container-xl">
        <div class="py-32">
            <div class="row justify-content-center">
                <div class="col-12 col-md-9">
                    <div id="lottieMobileHero" class="d-lg-none"></div>
                    <div id="lottieHero" class="d-none d-lg-block"></div>
                    <p class="fs-16 fs-lg-24 text-center">Estás a punto de conocer a las <strong>37 diputadas</strong>
                        que trabajan para ti en la LXI Legislatura del Estado de México.</p>
                    <div class="d-none d-lg-flex justify-content-center align-items-center">
                        <svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M31 56.8334C41.6692 56.8334 50.375 48.1276 50.375 37.4584V24.5417C50.375 13.8726 41.6692 5.16675 31 5.16675C20.3308 5.16675 11.625 13.8726 11.625 24.5417V37.4584C11.625 48.1276 20.3308 56.8334 31 56.8334Z"
                                  stroke="#8D4FDF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M31 15.5001C28.8558 15.5001 27.125 17.2309 27.125 19.3751V24.5417C27.125 26.6859 28.8558 28.4167 31 28.4167C33.1183 28.4167 34.875 26.6859 34.875 24.5417V19.3751C34.875 17.2309 33.1183 15.5001 31 15.5001ZM31 15.5001V5.16675"
                                  stroke="#8D4FDF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <div class="d-flex d-lg-none justify-content-center align-items-center"><a href="#ellas-por-todas"
                                                                                               class="btn gradient rounded-pill py-16 px-60 d-block fw-bold text-white">Comenzar</a>
                    </div>
                </div>
            </div>
        </div>
        <div id="ellas-por-todas" class="py-32 py-lg-60">
            <div class="row justify-content-center align-items-center g-0">
                <div class="col-12 col-md-7 order-md-last">
                    <div id="lottieImage1" class="w-100 w-lg-80 mx-lg-auto"></div>
                </div>
                <div class="col-12 col-md-5 order-md-first">
                    <div class="text-center text-md-end fs-16 fs-lg-24"><h2
                            class="fs-32 fs-lg-48 text-diputadas-lila fw-bold">Ellas por todas</h2>
                        <p>Sin embargo, antes de comenzar tienes que conocer <strong>la historia de Clara del
                                Moral</strong>.</p>
                        <p>Una de las mujeres pioneras en participar en la vida política del país.</p></div>
                </div>
            </div>
        </div>
        <div class="py-32 py-lg-60">
            <div class="row justify-content-center align-items-center g-0">
                <div class="col-12 col-md-7">
                    <div id="lottieImage2" class="w-100 w-lg-80 mx-lg-auto"></div>
                </div>
                <div class="col-12 col-md-5">
                    <div class="text-center text-md-start fs-16 fs-lg-24"><h2
                            class="fs-32 fs-lg-48 text-diputadas-lila fw-bold">La primera diputada mexiquense</h2>
                        <p><strong>Clara del Moral</strong> rompió la hegemonía de representación masculina que duró
                            <strong>140 años </strong>en el Estado de México</p></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-diputadas-azul text-white py-60">
        <div class="container-xl">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-9"><h1 class="fs-24 fs-lg-48 text-center"><strong>De 1814 a 1954 el Congreso
                            mexiquense legisló únicamente con representantes hombres.</strong></h1></div>
            </div>
        </div>
    </div>
    <div class="container-xl">
        <div class="py-32 py-lg-60">
            <div class="row justify-content-center align-items-center g-0">
                <div class="col-12 col-md-7 order-md-last ps-lg-48">
                    <div id="lottieImage3" class="w-100"></div>
                </div>
                <div class="col-12 col-md-5 order-md-first">
                    <div class="text-center text-md-end fs-16 fs-lg-24"><h2 class="fs-22 fs-lg-32 text-diputadas-lila">
                            Ocupó la curul por el distrito de Lerma y fue la presidenta de la Gran Comisión de la <strong>XXXIX
                                Legislatura en 1954</strong></h2></div>
                </div>
            </div>
        </div>
        <div class="py-32 py-lg-60">
            <div class="row justify-content-center align-items-center g-0">
                <div class="col-12 col-md-7 pe-lg-48">
                    <div id="lottieImage4" class="w-100"></div>
                </div>
                <div class="col-12 col-md-5">
                    <div class="text-center text-md-start fs-16 fs-lg-24"><h2
                            class="fs-32 fs-lg-48 text-diputadas-lila fw-bold">Clara: defensora de las maestras y los
                            maestros</h2>
                        <p>Apenas unos días después de asumir el cargo, Clara del Moral <strong>legisló una ley</strong>
                            para pensionar a los maestros y maestras, así como presupuesto para que no desaparecieran
                            las misiones culturales.</p></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-diputadas-rosa text-diputadas-purpura py-60">
        <div class="container-xl">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-9"><h1 class="fs-24 fs-lg-48 text-center"><strong>La integración de las
                            mujeres al Congreso local se fortaleció gradualmente</strong>, pero fue hasta 2006 cuando superó las
                        10 curules y para 2015 las 28 curules.</h1></div>
            </div>
        </div>
    </div>
    <div class="container-xl">
        <div class="py-32 py-lg-60">
            <div class="row justify-content-center align-items-center g-0">
                <div class="col-12 col-md-5">
                    <div class="text-center text-md-end fs-16 fs-lg-24"><h2
                            class="fs-32 fs-lg-48 text-diputadas-lila fw-bold">Hoy contamos una historia diferente a la
                            que vivió Clara...</h2>
                        <p>Hoy corre la segunda Legislatura consecutiva con paridad de género.</p>
                        <p><strong>Hoy son 37 historias, 37 formas de ver el mundo, 37 inteligencias y
                                sensibilidades</strong> que buscan legislar para todas las personas.</p></div>
                </div>
                <div class="col-12 col-md-7">
                    <div id="lottieImage5" class="w-100 w-lg-80 mx-lg-auto"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-diputadas-verde text-diputadas-marino py-60 mt-48">
        <div class="container-xl">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-9"><h1 class="fs-24 fs-lg-48 text-center"><strong>Hoy existen 37 mujeres que
                            defienden lo que inició Clara</strong>, porque las mujeres han llegado a la esfera pública para
                        quedarse.</h1></div>
            </div>
        </div>
    </div>
    <div class="container-xl py-100">
        <div class="border-top border-bottom border-5 border-diputadas-lila py-24 pt-lg-32 pb-lg-24"><h2
                class="fs-32 fs-lg-48 fw-bold text-center text-diputadas-lila">Conoce a tus diputadas</h2>
        </div>
        <div class="grid-diputadas row justify-content-center gy-32 mt-60">
            @foreach($data->sortBy("integrante.diputado.apaterno", SORT_LOCALE_STRING) as $item)
                <div class="col-4 col-md-3 col-lg-2">
                    <a href="{{route("diputadas.show", $item->integrante->id)}}" class="text-center">
                        <figure class="bg-black ratio ratio-1x1 rounded-circle w-100"><img
                                src="{{asset($item->short_images)}}" alt=""></figure>
                        <span class="d-block">
                                {{$item->integrante->nombre_field}}
                           </span>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
@endsection