<main>
    <section class="hidden mt-10 lg:flex lg:justify-center lg:gap-5">
        @foreach ($categories as $item)
            <button wire:click="searchProduct({{ $item->id }})"
                class="px-6 py-2 text-center text-white hover:bg-principalhover transition-all duration-300 {{ $select == $item->id ? 'bg-principalhover' : 'bg-principal' }}">{{ $item->name }}</button>
        @endforeach
    </section>
    <section class="flex items-center justify-center w-full my-5 lg:hidden">
        <select wire:change="searchProduct($event.target.value)"
            class="w-3/4 p-2 border-2 rounded-lg border-secondary md:w-1/2">
            {{-- <option value="">Selecciona una categoría</option> --}}
            @foreach ($categories as $item)
                <option value="{{ $item->id }}">{{ $item->name }}</option>
            @endforeach
        </select>
    </section>
    <section class="grid grid-cols-1 gap-3 mx-5 my-5 lg:gap-8 md:grid-cols-3 lg:mx-36 lg:mb-20 lg:mt-14">
        @foreach ($products as $item)
            <a href="{{ route('product', $item->id) }}" class="flex flex-col items-center justify-center">
                <img class="h-[60%] lg:h-80 object-cover"
                    src="{{ asset('storage/images/gallery/' . $item->images->first()->path) }}" alt="producto">
                <h4 class="mt-5 text-2xl font-semibold text-center lg:text-start">
                    {{ is_null($item->name) ? '' : $item->name . ' - ' }}
                    {{ $item->category->name }}
                    ({{ $item->contents }}
                    {{ $item->measurement_unit->code }})
                </h4>
            </a>
        @endforeach
        {{-- <a href="{{ route('product', 2) }}" class="flex flex-col items-center justify-center">
            <img class="h-[60%] lg:h-80" src="{{ asset('storage/productos/cafe_org_amer_7,5.jpg') }}" alt="producto">
            <h4 class="text-2xl font-semibold text-center lg:text-start ">CAFÉ ORGÁNICO AMERICANO 7.5 kg.</h4>
        </a>
        <a href="{{route('product')}}" class="flex flex-col items-center justify-center">
            <img class="h-[60%] lg:h-auto"  src="{{asset('storage/productos/cafe_esp_amer_7,5.jpg')}}" alt="producto">
            <h4 class="text-2xl font-semibold text-center lg:text-start ">CAFÉ ESPECIAL ORGÁNICO 7.5 kg.</h4>
        </a>
        <a href="{{route('product')}}" class="flex flex-col items-center justify-center">
            <img class="h-[60%] lg:h-auto"  src="{{asset('storage/productos/cafe_org_500.jpg')}}" alt="producto">
            <h4 class="text-2xl font-semibold text-center lg:text-start ">CAFÉ ORGÁNICO DE ESPECIALIDAD 500 gr.</h4>
        </a>
        <a href="{{route('product')}}" class="flex flex-col items-center justify-center">
            <img class="h-[60%] lg:h-auto"  src="{{asset('storage/productos/cafe_org_amer_7,5.jpg')}}" alt="producto">
            <h4 class="text-2xl font-semibold text-center lg:text-start ">CAFÉ ORGÁNICO AMERICANO 7.5 kg.</h4>
        </a>
        <a href="{{route('product')}}" class="flex flex-col items-center justify-center">
            <img class="h-[60%] lg:h-auto"  src="{{asset('storage/productos/cafe_esp_amer_7,5.jpg')}}" alt="producto">
            <h4 class="text-2xl font-semibold text-center lg:text-start ">CAFÉ ESPECIAL ORGÁNICO 7.5 kg.</h4>
        </a> --}}
    </section>

    <section class="flex justify-center mb-10 text-white bg-contain lg:p-10 xl:items-center bg-principal "
        style="background-image: url({{ asset('storage/index/pleca_tribal3.png') }});">
        <div class="w-[90%] lg:w-[70%] mx-auto text-center  bg-principal p-5">
            <h4 class="font-semibold lg:text-2xl ">Nuestra variedad estrella es Marsellesa muy apreciada por su sabor y
                excelente calificación en taza. <br> Se cultiva junto
                con otras variedades como Sarchimor, Costa Rica y Oro Azteca. <br> <br> <br>
                <span class="font-bold">
                    NUESTRA FINCA ESTA UBICADA ENTRE LOS 1,100 Y 1,350 msnm., UNA ALTITUD IDEAL PARA DESARROLLAR
                    PERFILES DE ALTA CALIDAD.</span>
            </h4>
        </div>
    </section>

    <section class="p-5 mt-10 bg-principal ">
        <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:mx-44">
            <p class="font-semibold text-white lg:text-xl 2xl:text-3xl place-self-center">
                El perfil de nuestro café enamora por su complejidad, equilibrio y sabor persistente. <br> <br>
                Ofrecemos una experiencia sensorial al probar nuestro café, que es nuestra carta de presentación.
            </p>
            <img src="{{ asset('storage/productos/finca.jpg') }}" alt="">
        </div>
    </section>
</main>
