@extends('layouts.site')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-12">
    <!-- Breadcrumbs -->
    <nav class="flex flex-col lg:flex-row gap-4 items-center justify-between text-gray-600 bg-white px-4 py-4 text-base shadow-lg mt-0">
        <!-- Links de Navegação -->
        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('home') }}" class="hover:text-green-700 font-semibold transition-colors duration-200">Home</a>
            <span class="mx-1 text-gray-400">/</span>
            <span class="hover:text-green-700 font-semibold transition-colors duration-200">Como Funciona</span>
        </div>

        <!-- Botão Voltar -->
        <div class="flex-shrink-0">
            <a href="{{ url()->previous() }}"
            class="bg-gray-600 hover:bg-gray-700 text-white font-semibold py-2 px-6 shadow-md hover:shadow-lg transition-all duration-300 flex items-center gap-2">
                <i class="ri-arrow-left-line text-lg"></i>
                Voltar
            </a>
        </div>
    </nav>

    <!-- Título -->
    <h1 class="text-4xl py-8 font-normal lg:tracking-widest tracking-normal text-green-700 text-center">Como Funciona o Processo de Troca e Entrega</h1>

    <!-- Conteúdo Principal -->
    <div class="bg-white p-8 shadow-lg space-y-8">
        <!-- Introdução -->
        <section>
            <h2 class="text-3xl font-semibold text-gray-800 mb-4">Entendendo o Processo de Troca</h2>
            <p class="text-lg text-gray-700">
                O processo de troca de medicamentos no nosso sistema é simples e rápido, visando facilitar a vida de quem precisa de medicamentos e não tem acesso imediato. Confira o passo a passo:
            </p>
            <ol class="list-decimal pl-6 space-y-3 text-lg text-gray-700">
                <li><strong>1. Encontre o Medicamento:</strong> Navegue pela nossa plataforma e encontre o medicamento que você precisa.</li>
                <li><strong>2. Requerer o Medicamento:</strong> Caso o medicamento esteja disponível para troca, você pode clicar no botão "Requerer Medicamento" após o login. Se você ainda não tiver uma conta, será necessário criar uma para poder realizar a solicitação.</li>
                <li><strong>3. Aprovação do Dono:</strong> O dono do medicamento receberá a notificação do seu pedido e poderá aceitar ou recusar a troca.</li>
                <li><strong>4. Confirmação de Troca:</strong> Após a aprovação, a troca será confirmada e o status mudará para "Aceito". A troca ficará visível para os motoboys, que poderão "pegar" a entrega. Você poderá então agendar o envio do medicamento.</li>
            </ol>
        </section>

        <!-- Motoboy -->
        <section>
            <h2 class="text-3xl font-semibold text-gray-800 mb-4">O Papel do Motoboy</h2>
            <p class="text-lg text-gray-700">
                O motoboy é um intermediário essencial no processo de troca. Ele é responsável por realizar a entrega do medicamento entre as partes, garantindo que a troca aconteça de forma segura e eficiente.
            </p>
            <p class="text-lg text-gray-700">
                O motoboy, ao receber a solicitação de troca, irá buscar o medicamento com o dono e entregá-lo para o requerente. Ele também é responsável por verificar se a troca foi realizada corretamente.
            </p>
        </section>

        <!-- Pagamento via PIX -->
        <section>
            <h2 class="text-3xl font-semibold text-gray-800 mb-4">Pagamento do Requerente via PIX</h2>
            <p class="text-lg text-gray-700">
                Após a entrega do medicamento, o requerente deve efetuar o pagamento diretamente ao motoboy por meio de PIX. O valor do pagamento será composto pelo valor do medicamento, que será definido pelo dono do medicamento, considerando a condição do item e outros fatores acordados previamente, além do valor do frete pela corrida, que será cobrado pelo motoboy.
            </p>
            <p class="text-lg text-gray-700">
                O pagamento via PIX deve ser feito no momento da entrega, e o motoboy fornecerá os dados necessários para a transferência, tanto para o valor do medicamento quanto para o frete.
            </p>
            <p class="text-lg text-gray-700">
                Esse sistema de pagamento é rápido, seguro e prático, permitindo que o processo de troca seja finalizado de forma simples.
            </p>
        </section>


        <!-- Aviso de Conta -->
        <section class="bg-red-50 p-4">
            <p class="text-red-600 text-sm font-medium text-center">
                <i class="ri-information-line mr-1 text-xl align-middle"></i>
                Para realizar uma troca, você precisa ter uma conta registrada. Se ainda não tem, registre-se agora!
                <br>
                <a href="{{ route('register.user') }}" class="text-green-600 text-lg hover:text-green-700 font-semibold ml-1">
                    Registre-se aqui
                </a>
            </p>
        </section>
    </div>
</div>
@endsection