{{-- Caixa com carroussel na esquerda, de produtos. Título, texto e botão na direita. --}}
<div class="bg-midnightblue-100 flex flex-col sm:flex-row gap-0 sm:gap-12 items-center justify-center pb-24 sm:pb-24">
    <div class="flex flex-col items-center mt-8 sm:mt-3 order-1 sm:order-none">
        <img class="hidden sm:block w-[480px] h-[494px]" src="https://placehold.co/480x494"/>
        <img class="block sm:hidden w-[360px] h-[280px]" src="https://placehold.co/360x280"/>
        {{-- Paginação, controle do carrossel. --}}
        <div class="px-8 py-4 backdrop-blur-[15px] backdrop-brightness-[105%] box-border flex gap-x-4">
            <img alt="Retroceder uma página" src="{{ asset('images/arrow-left.svg') }}" />
            <img src="{{ asset('images/ellipse-7.svg') }}" alt="Cartão ativo."/>
            <img src="{{ asset('images/ellipse-13.svg') }}" alt="Cartão inativo."/>
            <img src="{{ asset('images/ellipse-13.svg') }}" alt="Cartão inativo."/>
            <img src="{{ asset('images/ellipse-13.svg') }}" alt="Cartão inativo."/>
            <img alt="Avançar uma página" src="{{ asset('images/arrow-right.svg') }}" />
        </div>
    </div>
    <div class="max-w-lg ml-0 sm:ml-12 mt-12 sm:mt-0 relative">
        <div class="text-center sm:text-left text-white text-xs tracking-36">PRODUTOS</div>
        <div class="font-bricolage font-extrabold mt-2 mx-5 sm:mx-auto text-center sm:text-left text-13xl sm:text-33xl text-white">
            Nossos produtos estão nas empresas, casas e no coração dos brasileiros.
        </div>
        <button class="block bg-white mt-8 sm:mt-12 rounded-full px-10 py-4 font-bold mx-auto sm:mx-0 text-sm text-midnightblue-100">
            Conheça Azulim
        </button>
        <img class="absolute -top-16 left-auto sm:-left-28 right-0 sm:right-auto scale-[40%] sm:scale-50" src="{{ asset('images/star1.svg') }}" alt="Estrela dourada."/>
        <img class="absolute -top-6 sm:-top-20 left-10 sm:-left-2 scale-75" src="{{ asset('images/star-white.svg') }}" alt="Estrela branca."/>
        <img class="absolute -bottom-6 sm:-bottom-20 -left-4 sm:left-auto sm:right-32 scale-[40%]" src="{{ asset('images/star1.svg') }}" alt="Estrela dourada."/>
        <img class="absolute bottom-2 right-4 scale-50" src="{{ asset('images/star-white.svg') }}" alt="Estrela branca."/>
    </div>
</div>
<x-casca>
    <div class="font-bricolage font-extrabold max-w-4xl mx-4 sm:mx-auto mt-16 text-center text-midnightblue-100 text-13xl">
        Conheça nossos produtos
    </div>
    <div class="max-w-4xl mt-6 mx-4 sm:mx-auto text-base text-center text-darkslateblue-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div class="flex gap-5 justify-center mt-12 overflow-hidden">
        <button class="bg-midnightblue-100 rounded-full px-10 py-4 font-bold shrink-0 text-sm text-white">
            Lorem iosum
        </button>
        <button class="bg-white border border-midnightblue-100 rounded-full px-10 py-4 font-bold shrink-0 text-sm text-midnightblue-100">
            Lorem iosum
        </button>
        <button class="bg-white border border-midnightblue-100 rounded-full px-10 py-4 font-bold shrink-0 text-sm text-midnightblue-100">
            Lorem iosum
        </button>
        <button class="bg-white border border-midnightblue-100 rounded-full px-10 py-4 font-bold shrink-0 text-sm text-midnightblue-100">
            Lorem iosum
        </button>
    </div>
    {{-- Caixa estilo slider --}}
    <div class="flex flex-wrap sm:flex-nowrap font-bricolage gap-x-3 sm:gap-x-14 gap-y-10 sm:gap-y-14 justify-center w-full mt-12 px-1 sm:px-10">
        {{-- Um item --}}
        <div class="flex flex-col gap-5 items-center w-[170px] sm:w-[260px]">
            <div class="border border-midnightblue-100/50 grow-0 relative rounded-full w-fit">
                <div class="overflow-hidden h-[160px] sm:h-[260px] w-[160px] sm:w-[260px] rounded-full">
                    <img class="object-scale-down h-full w-full scale-75 sm:scale-100" src="{{ asset('images/produtos-01.webp') }}" alt="Produto Tuff."/>
                </div>
            </div>
            <div class="font-bricolage font-extrabold px-3 text-center text-midnightblue-100 text-sm sm:text-base">Tuff Sabão em pó sachê 2Kg</div>
        </div>
        {{-- Um item --}}
        <div class="flex flex-col gap-5 items-center w-[170px] sm:w-[260px]">
            <div class="border border-midnightblue-100/50 grow-0 relative rounded-full w-fit">
                <div class="overflow-hidden h-[160px] sm:h-[260px] w-[160px] sm:w-[260px] rounded-full">
                    <img class="object-scale-down h-full w-full scale-75 sm:scale-100" src="{{ asset('images/produtos-02.webp') }}" alt="Produto Azulim."/>
                </div>
            </div>
            <div class="font-bricolage font-extrabold px-3 text-center text-midnightblue-100 text-sm sm:text-base">Azulim desinfetante perfumado 1L lavics</div>
        </div>

        {{-- Um item --}}
        <div class="flex flex-col gap-5 items-center w-[170px] sm:w-[260px]">
            <div class="border border-midnightblue-100/50 grow-0 relative rounded-full w-fit">
                <div class="overflow-hidden h-[160px] sm:h-[260px] w-[160px] sm:w-[260px] rounded-full">
                    <img class="object-scale-down h-full w-full scale-75 sm:scale-100" src="{{ asset('images/produtos-03.webp') }}" alt="Produto amaciante Rose Pink."/>
                </div>
            </div>
            <div class="font-bricolage font-extrabold px-3 text-center text-midnightblue-100 text-sm sm:text-base">Tuff amaciante concentrado Rose Pink 1L</div>
        </div>
        {{-- Um item --}}
        <div class="flex flex-col gap-5 items-center w-[170px] sm:w-[260px]">
            <div class="border border-midnightblue-100/50 grow-0 relative rounded-full w-fit">
                <div class="overflow-hidden h-[160px] sm:h-[260px] w-[160px] sm:w-[260px] rounded-full">
                    <img class="object-scale-down h-full w-full scale-75 sm:scale-100" src="{{ asset('images/produtos-04.webp') }}" alt="Produto Tuff Alvejante."/>
                </div>
            </div>
            <div class="font-bricolage font-extrabold px-3 text-center text-midnightblue-100 text-sm sm:text-base">Tuff Alvejante sem cloro 2L</div>
        </div>
    </div>
    <button class="bg-midnightblue-100 block rounded-full mt-14 mb-24 px-10 py-4 font-bold mx-auto text-sm text-white">
        Ver todos os Produtos
    </button>
    {{-- Caixa fundo azul com vídeo e bloco de 3 botões --}}
    <div class="bg-midnightblue-100 pb-16 sm:pb-24 sm:rounded-l-50xl rounded-29xl">
        <div class="flex flex-col sm:flex-row gap-5 sm:gap-20 items-center justify-center pt-24">
            {{-- Item --}}
            <div class="flex gap-3 items-center">
                <div class="bg-white flex items-center justify-center rounded-full h-11 sm:h-12 w-11 sm:w-12">
                    <img class="h-[18px] w-5" src="https://placehold.co/20x18"/>
                </div>
                <div class="font-bricolage font-bold text-base sm:text-xl text-white">Lorem ipsum</div>
            </div>
            {{-- Item --}}
            <div class="flex gap-3 items-center">
                <div class="bg-white flex items-center justify-center rounded-full h-11 sm:h-12 w-11 sm:w-12">
                    <img class="h-[18px] w-5" src="https://placehold.co/20x18"/>
                </div>
                <div class="font-bricolage font-bold text-base sm:text-xl text-white">Lorem ipsum</div>
            </div>
            {{-- Item --}}
            <div class="flex gap-3 items-center">
                <div class="bg-white flex items-center justify-center rounded-full h-11 sm:h-12 w-11 sm:w-12">
                    <img class="h-[18px] w-5" src="https://placehold.co/20x18"/>
                </div>
                <div class="font-bricolage font-bold text-base sm:text-xl text-white">Lorem ipsum</div>
            </div>
        </div>
        {{-- Caixa do vídeo --}}
        <div class="mt-9 sm:mt-16 px-7 sm:px-0">
            <div class="box-border flex flex-shrink-0 h-[250px] sm:h-[506px] items-center justify-center overflow-hidden max-w-full mt-8 mx-auto relative rounded-3xl w-full sm:w-[900px]">
                <img class="absolute h-full object-cover left-0 top-0 w-full" src="{{ asset('images/imagem-video-sustentabilidade.png') }}" alt="Vídeo de introdução da sustentabilidade."/>
                <div class="bg-midnightblue-100 flex flex-shrink-0 h-20 items-center justify-center w-20 rounded-full z-10">
                    <img class="" src="{{ asset('images/triangulo.svg') }}"/>
                </div>
            </div>
        </div>
    </div>

    <x-desktop.home.segmentos/>
    <x-desktop.home.especialidades/>
    {{-- Banner --}}
    <img class="hidden sm:block mx-auto" src="https://placehold.co/1230x400"/>
    <img class="block sm:hidden mt-16 mx-auto rounded-3xl" src="https://placehold.co/340x480"/>

    {{-- Bloco Conheca os produtos --}}
    <div class="flex flex-col sm:flex-row gap-7 sm:gap-20 items-center mt-16 sm:mt-10 mx-10 sm:mx-16 justify-center">
        <div class="border border-gainsboro grow-0 p-1 sm:p-2 relative rounded-full shrink-0 w-fit">
            <div class="overflow-hidden h-[300px] sm:h-[480px] w-[300px] sm:w-[480px] rounded-full">
                <img class="object-cover h-full w-full" src="https://placehold.co/490x490"/>
            </div>
            <img class="absolute -top-4 -right-2 scale-50 sm:scale-100" src="{{ asset('images/star1.svg') }}" alt="Estrela dourada."/>
            <img class="absolute -bottom-2 right-[42px] scale-75 sm:scale-100" src="{{ asset('images/star2.svg') }}" alt="Estrela azulada."/>
        </div>
        <div>
            <div class="font-bricolage font-extrabold text-midnightblue-100 text-13xl sm:text-33xl">
                Lorem ipsum dolor sit amet,
            </div>
            <div class="leading-6 mt-5 text-darkslateblue-300 text-base">
                Nem só de sanitizadores de mãos vive a Asseptgel. A linha de Sprays antissépticos também serve para higienizar 
                os pés ao chegar da rua, ou entrar e sair de um hospital, por exemplo. Não pode faltar na sua bolsa! 
            </div>
            <div class="font-bold mt-4 text-midnightblue-100">
                Composição
            </div>
            <div class="leading-6 mt-2 text-darkslateblue-300 text-base">
                Os produtos possuem uma composição de Álcool 70% + Clorexidina, que juntos são uma dupla imbatível contra vírus, fungos e bactérias.
            </div>
            <button class="bg-midnightblue-100 block rounded-full mt-6 sm:mt-14 mb-6 sm:mb-24 px-10 py-4 font-bold text-sm text-white">
                Conheça os produtos
            </button>
        </div>
    </div>

    {{-- Bloco Conheca os produtos --}}
    <div class="flex flex-col sm:flex-row gap-7 sm:gap-20 items-center mt-16 sm:mt-10 mx-10 sm:mx-16 justify-center">
        <div class="border border-gainsboro grow-0 order-none sm:order-1 p-1 sm:p-2 relative rounded-full shrink-0 w-fit">
            <div class="overflow-hidden h-[300px] sm:h-[480px] w-[300px] sm:w-[480px] rounded-full">
                <img class="object-cover h-full w-full" src="https://placehold.co/490x490"/>
            </div>
            <img class="absolute -top-4 -right-2 scale-50 sm:scale-100" src="{{ asset('images/star1.svg') }}" alt="Estrela dourada."/>
            <img class="absolute -bottom-2 right-[42px] scale-75 sm:scale-100" src="{{ asset('images/star2.svg') }}" alt="Estrela azulada."/>
        </div>
        <div>
            <div class="font-bricolage font-extrabold text-midnightblue-100 text-13xl sm:text-33xl">
                Lorem ipsum dolor sit amet,
            </div>
            <div class="leading-6 mt-5 text-darkslateblue-300 text-base">
                Nem só de sanitizadores de mãos vive a Asseptgel. A linha de Sprays antissépticos também serve para higienizar 
                os pés ao chegar da rua, ou entrar e sair de um hospital, por exemplo. Não pode faltar na sua bolsa! 
            </div>
            <div class="font-bold mt-4 text-midnightblue-100">
                Composição
            </div>
            <div class="leading-6 mt-2 text-darkslateblue-300 text-base">
                Os produtos possuem uma composição de Álcool 70% + Clorexidina, que juntos são uma dupla imbatível contra vírus, fungos e bactérias.
            </div>
            <button class="bg-midnightblue-100 block rounded-full mt-6 sm:mt-14 mb-6 sm:mb-24 px-10 py-4 font-bold text-sm text-white">
                Conheça os produtos
            </button>
        </div>
    </div>

    {{-- Seria o bloco Dicas com Azulim. No caso colei de exemplo o novidades. Quando copiar, retirar o título e o botão de baixo. --}}
    <x-desktop.home.novidades/>
    {{-- Fale conosco, copiado do fabricator e adaptado. --}}
    <div class="flex flex-col sm:flex-row mt-16 sm:mt-0">
        <div class="mb-10 sm:mb-24">
            <div class="w-[340px] sm:w-[540px]">
                <img class="aspect-[580/560] max-w-full bg-neutral-100" src="{{ asset('images/fale-conosco-02.webp') }}" alt="">
            </div>
        </div>
        <div class="mb-24 mx-9 sm:mx-16">
            <div class="mb-24 sm:mb-0">
                <h2 class="font-bricolage text-midnightblue-100 font-extrabold text-13xl sm:text-5xl">Fale Conosco</h2>
                <p class="my-5 text-darkslateblue-300">Envie sua dúvida ou sugestão que a gente responde em breve.</p>
                <livewire:fale-conosco-form/>
            </div>
        </div>
    </div>

    {{-- Caixa das perguntas frequentes. --}}
    <div class="mx-9 sm:mx-16 mb-20">
        <h2 class="font-bricolage font-extrabold text-midnightblue-100 text-2xl sm:text-5xl text-left sm:text-center mb-5 sm:mb-11">Perguntas Frequentes</h2>
        
        <x-faq>
            Quais são os principais produtos oferecidos pela Start Química?
            <x-slot:details>
                A Start Química oferece uma ampla gama de produtos químicos, incluindo detergentes, desinfetantes, limpadores multiuso, 
                solventes, e produtos para tratamento de água. A empresa também desenvolve soluções personalizadas para diferentes segmentos 
                industriais, atendendo às necessidades específicas de cada cliente.
            </x-slot:details>
        </x-faq>
        <x-faq>
            Quais são os setores atendidos pela Start Química?Quais são os principais produtos oferecidos pela Start Química?
            <x-slot:details>
                Resposta.
            </x-slot:details>
        </x-faq>
        <x-faq>
            A Start Química oferece serviços de consultoria técnica?
            <x-slot:details>
                Resposta.
            </x-slot:details>
        </x-faq>
        <x-faq>
            Quais são as certificações e reconhecimentos que a Start Química possui?
            <x-slot:details>
                Resposta.
            </x-slot:details>
        </x-faq>
        <x-faq>
            A Start Química possui programas de sustentabilidade?
            <x-slot:details>
                Resposta.
            </x-slot:details>
        </x-faq>
        
    </div>

    <x-desktop.home.conecte-se/>
</x-casca>