@extends('layouts.site')

@section('content')


<div class="relative my-20 w-4/5 h-[300px] md:h-[400px] bg-white text-gray-600 flex flex-col justify-center items-center
    text-center px-6 shadow-lg overflow-hidden mx-auto">
    <!-- Texto Principal -->
    <h1 class="lg:text-5xl md:text-4xl text-2xl text-gray-400 font-extrabold">Tem remédios sobrando,<br> precisa de algum?</h1>
    <p class="mt-5 text-lg md:text-xl">Troque com quem precisa e ajude a evitar desperdício!</p>

    <!-- Botão de Ação -->
    <a href="{{ route('register.user') }}" class="mt-5 bg-gray-600 text-white hover:bg-amber-200 hover:text-amber-600 font-bold py-2 px-6 rounded-full text-lg transition bg-yellow-01 hover:bg-blue-custom">
        Comece Agora
    </a>

    <!-- Imagens de caixas de remédios (fundo) -->
    <img src="{{ asset('assets/images/remedio-02.png') }}" class="hidden lg:block absolute left-12 bottom-4 w-36 opacity-70 rotate-[-15deg]">
    <img src="{{ asset('assets/images/remedio-01.png') }}" class="hidden lg:block absolute right-10 top-20 w-40 opacity-70 rotate-[10deg]">
    <img src="{{ asset('assets/images/remedio-03.png') }}" class="hidden lg:block absolute left-12 top-0 w-44 opacity-70 rotate-[20deg]">

    <img src="{{ asset('assets/images/remedio-04.png') }}" class="hidden lg:block absolute right-12 -bottom-16 w-44 opacity-70 rotate-[20deg]">
</div>

<!-- Sobre o Troca de Medicamentos -->
<section class="bg-gradient-to-b w-full from-green-50 to-green-600  py-10 px-6 text-gray-400">
    <div class="max-w-5xl mx-auto text-center">
        <!-- Título -->
        <h2 class="text-2xl md:text-4xl py-4 text-green-700">Sobre o Troca de Medicamentos</h2>

        <p class="mt-5 text-lg md:text-xl text-gray-700 leading-relaxed">
            O <strong>Troca de Medicamentos</strong> é uma plataforma confiável e segura que conecta pessoas com remédios excedentes
            àquelas que precisam, ajudando a reduzir o desperdício e promovendo solidariedade.
        </p>
    </div>

    <!-- Benefícios do Projeto -->
    <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-10 max-w-6xl mx-auto">
        <!-- Item 1 -->
        <div class="bg-white p-8 rounded-tl-4xl rounded-br-4xl shadow-xl transition-transform transform hover:scale-105">
            <div class="flex justify-center">
                <img src="{{asset('assets/images/ajuda-mutua-350x300.webp')}}" class="w-60 h-60 rounded-full mb-4">
            </div>
            <h3 class="text-2xl font-semibold text-yellow-400 text-center">Ajuda Mútua</h3>
            <p class="text-gray-600 mt-3 text-lg text-justify">Conectamos quem pode doar com quem mais precisa, garantindo acesso a medicamentos essenciais.</p>
        </div>

        <!-- Item 2 -->
        <div class="bg-white p-8 rounded-tl-4xl rounded-br-4xl  shadow-xl transition-transform transform hover:scale-105">
            <div class="flex justify-center">
                <img src="{{asset('assets/images/desperdicio-medicamento-350x300.webp')}}" class="w-60 h-60 rounded-full mb-4">
            </div>
            <h3 class="text-2xl font-semibold text-green-700 text-center">Menos Desperdício</h3>
            <p class="text-gray-600 mt-3 text-lg text-justify">Medicamentos não utilizados ganham um novo propósito, evitando descartes inadequados.</p>
        </div>

        <!-- Item 3 -->
        <div class="bg-white p-8 rounded-tl-4xl rounded-br-4xl  shadow-xl transition-transform transform hover:scale-105">
            <div class="flex justify-center">
                <img src="{{asset('assets/images/motoboy-01-350x300.webp')}}" class="w-60 h-60 rounded-full mb-4">
            </div>
            <h3 class="text-2xl font-semibold text-blue-700 text-center">Entrega Segura</h3>
            <p class="text-gray-600 mt-3 text-lg text-justify">Contamos com entregadores parceiros que garantem que os remédios cheguem com segurança.</p>
        </div>
    </div>
</section>
<!-- Fim Sobre o Troca de Medicamentos -->


<!-- Registro de Motoboys -->
<section class="bg-gray-100 py-10">
    <div class="container max-w-5xl mx-auto flex flex-col lg:flex-row justify-center items-center gap-4">
        <!-- Coluna 1: Chamada para Motoboys -->
        <div class="w-full lg:w-1/2 bg-white shadow-lg p-8  text-center">

            <h2 class="text-2xl md:text-4xl py-4 font-bold text-green-700">Motoboy, transporte medicamentos e lucre!</h2>

            <p class="text-gray-700 mb-6 leading-relaxed text-lg text-justify">
                Junte-se ao TrovaMedicamentos! Nossos usuários trocam medicamentos entre si e precisam de você para fazer as entregas.
                Cadastre-se, pegue corridas e receba por cada transporte concluído diretamente no seu Pix. Fácil e rápido!
            </p>
            <div class="flex justify-center gap-4">
                <a href="{{ route('register.motoboy') }}"
                   class="bg-green-600 text-white rounded-full font-semibold py-3 px-6 hover:bg-green-700 transition-all duration-200 shadow-md">
                    Cadastre-se Agora
                </a>
                <a href="{{ route('trocas-abertas')}}"
                   class="bg-gray-600 text-white rounded-full font-semibold py-3 px-6 hover:bg-gray-700 transition-all duration-200 shadow-md">
                    Veja Entregas Disponíveis
                </a>
            </div>
            <p class="text-gray-600 mt-4 text-sm">
                Já é motoboy no TrovaMedicamentos? <a href="{{ route('login') }}" class="text-green-600 hover:underline">Faça login</a>
            </p>
        </div>

        <!-- Coluna 2: Imagem Chamativa -->
        <div class="w-full lg:w-1/2 flex justify-center items-center">
            <img src="{{ asset('storage/profissionais/motoboy/motoboy-home-01-400x400.webp') }}"
                 alt="Motoboy transportando medicamentos"
                 class="w-full max-w-md h-auto shadow-lg object-cover transform hover:scale-105 transition-all duration-300">
        </div>
    </div>
</section>
<!-- Fim Registro de Motoboys -->

<!-- Medicamentos Disponíveis-->
<section class="bg-gradient-to-b w-full bg-gray-100 to-gray-500 mt-0 py-10 px-6 text-gray-400">
    <div class="max-w-6xl mx-auto text-center">        <!-- Título -->
        <h2 class="text-2xl md:text-4xl py-4 text-gray-600">Medicamentos Disponíveis</h2>
        <div class="flex flex-col md:flex-row gap-6 py-6 max-w-7xl mx-auto">
            @foreach ($medicamentos as $medicamento)
                <a href="{{ route('medicamentos.show',['slug'=>$medicamento->slug])}}" title="Clique para detalhes de {{$medicamento->name}}">
                    <div class="bg-white w-full shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                        <!-- Nome do Medicamento -->
                        <div class="text-base text-gray-800 font-semibold border-b-2 border-gray-200 p-3 h-14 flex items-center justify-center text-center break-words bg-white line-clamp-2">
                            {{ Str::limit($medicamento->name, 30) }}
                        </div>

                        <!-- Imagem -->
                        <div class="p-0 border-b-2 border-gray-200 flex justify-center items-center h-44 bg-gray-50">
                            @if($medicamento->imagens->isNotEmpty())
                                <img src="{{ asset('storage/' . $medicamento->imagens->first()->path) }}"
                                    alt="{{ $medicamento->name }}"
                                    class="w-40 h-40 p-3 object-contain transition-all duration-200 hover:scale-105">
                            @else
                                <img src="{{ asset('assets/images/sem-imagem.png') }}"
                                    alt="{{ $medicamento->name }}"
                                    class="w-40 h-40 p-3 object-contain transition-all duration-200 hover:scale-105">
                            @endif
                        </div>

                        <!-- Informações -->
                        <div class="p-4 space-y-2 text-gray-700 text-sm">
                            <div class="flex justify-between">
                                <span class="font-semibold">Estado:</span>
                                <span>{{ $medicamento->estado ?? 'Rio de Janeiro' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-semibold">UF:</span>
                                <span>{{ $medicamento->uf ?? 'RJ' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-semibold">Situação:</span>
                                <span>{{ $medicamento->status == 'novo' ? 'Novo' : 'Usado' }}</span>
                            </div>
                            <div class="flex justify-between text-red-600">
                                <span class="font-semibold">Validade:</span>
                                <span>{{ $medicamento->validade ? \Carbon\Carbon::parse($medicamento->validade)->format('d/m/Y') : 'N/A' }}</span>
                            </div>
                        </div>

                        <!-- Avaliação -->
                        <a href="{{ route('usuario.avaliacoes', $medicamento->user->email) }}" class="block hover:bg-gray-50 transition">
                            <div class="p-4 border-t border-gray-200">
                                <div class="text-xs font-bold text-gray-700 text-center">Avaliação do Proprietário</div>
                                <!-- Usando o componente -->
                                <x-avaliacao-estrelas
                                    :nota="round($medicamento->user->media_avaliacoes)"
                                    tamanho="md"
                                    class="mt-1"
                                />

                                <div class="text-xs text-gray-500 text-center mt-1">
                                    {{ $medicamento->user->total_avaliacoes }} avaliações
                                </div>
                            </div>
                        </a>

                        <!-- Botão -->
                        @if(auth()->user())
                        <div class="p-4 text-xl ">
                            <form action="{{ route('medicamentos.request', ['slug'=>$medicamento->slug]) }}" method="POST">
                                @csrf
                                <button type="submit"
                                        class="w-full bg-green-600 text-white font-semibold py-2 px-4 rounded-full hover:bg-green-700 focus:ring-4 focus:ring-green-300 transition-all duration-300 shadow-md hover:shadow-lg flex items-center justify-center gap-2">
                                        <i class="ri-hand font-thin text-lg"></i>
                                    <span>Requerer</span>
                                </button>
                            </form>
                        </div>
                        @else
                            <a href="{{route('register.user')}}" title="Criar usuário">
                                <div class="p-4 w-full text-sm font-bold text-gray-500 bg-gray-300 hover:bg-gray-400 hover:text-white">
                                    Registre-se pra requerer!
                                </div>
                            </a>
                        @endif
                    </div>
                </a>
            @endforeach
        </div>
        <div class="flex justify-center my-8 text-white">
            <a href="{{ route('medicamentos')}}" class="mt-5 bg-gray-600 text-white hover:bg-amber-200 hover:text-amber-600 font-bold py-2 px-6 rounded-full text-lg transition bg-yellow-01 hover:bg-blue-custom">
                <i class="ri-search-line mr-2"></i>Veja mais
            </a>
        </div>
    </div>
</section>
<!-- Fim Medicamentos Disponíveis-->

<!-- Avaliações de Trocas -->
<section class="bg-gray-50 py-12 px-6">
    <div class="max-w-6xl mx-auto text-center">
        <h2 class="text-3xl md:text-4xl py-4 font-bold text-yellow-600">O que dizem sobre as trocas?</h2>
        <p class="text-lg text-gray-600 mt-2">Veja as avaliações de quem já participou</p>
    </div>

    {{-- Ajuste da grade para 3 cards por linha em telas maiores --}}
    <div class="max-w-6xl mx-auto mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        {{-- Avaliação Fake 1 --}}
        <div class="bg-white shadow-lg border border-gray-200 overflow-hidden p-6 transition hover:shadow-xl rounded-lg">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-4">
                    <img src="https://placehold.co/56x56/e0e0e0/555555?text=AV1"
                         alt="Ana Paula F."
                         class="w-14 h-14 rounded-full border border-gray-300 object-cover">
                    <div>
                        <h3 class="font-semibold text-gray-800 text-lg">Ana Paula F.</h3>
                        <p class="text-sm text-gray-500">20/05/2024 10:30</p>
                    </div>
                </div>
                <div class="flex text-yellow-400 text-lg">
                    @for($i = 1; $i <= 5; $i++)
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                    @endfor
                </div>
            </div>

            <div class="flex flex-col gap-4">
                <div class="bg-gray-100 p-4 rounded-lg flex justify-center">
                    <img src="https://placehold.co/96x96/e0e0e0/555555?text=MED1"
                         alt="Medicamento A"
                         class="w-24 h-24 object-contain">
                </div>

                <div class="flex items-center gap-4 border-t pt-4">
                    <img src="https://placehold.co/48x48/d0d0d0/555555?text=USR1"
                         alt="Carlos S."
                         class="w-12 h-12 rounded-full border border-gray-300 object-cover">
                    <div>
                        <h4 class="font-bold text-gray-800">Carlos S.</h4>
                        <p class="text-sm text-gray-500">Usuário Avaliado</p>
                    </div>
                </div>

                <div class="bg-yellow-50 p-3 rounded-lg border-l-4 border-yellow-500 shadow-sm">
                    <h4 class="font-bold text-gray-700">Comentário:</h4>
                    <p class="text-gray-600">"Troca rápida e eficiente! O medicamento estava em perfeito estado. Recomendo!"</p>
                </div>

                <div class="text-sm text-gray-600 flex items-center gap-2 border-t pt-4">
                    <span class="font-medium">Tipo:</span>
                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded">Requerente → Dono</span>
                </div>
            </div>
        </div>

        {{-- Avaliação Fake 2 --}}
        <div class="bg-white shadow-lg border border-gray-200 overflow-hidden p-6 transition hover:shadow-xl rounded-lg">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-4">
                    <img src="https://placehold.co/56x56/e0e0e0/555555?text=AV2"
                         alt="João P."
                         class="w-14 h-14 rounded-full border border-gray-300 object-cover">
                    <div>
                        <h3 class="font-semibold text-gray-800 text-lg">João P.</h3>
                        <p class="text-sm text-gray-500">15/05/2024 14:15</p>
                    </div>
                </div>
                <div class="flex text-yellow-400 text-lg">
                    @for($i = 1; $i <= 4; $i++)
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                    @endfor
                </div>
            </div>

            <div class="flex flex-col gap-4">
                <div class="bg-gray-100 p-4 rounded-lg flex justify-center">
                    <img src="https://placehold.co/96x96/e0e0e0/555555?text=MED2"
                         alt="Medicamento B"
                         class="w-24 h-24 object-contain">
                </div>

                <div class="flex items-center gap-4 border-t pt-4">
                    <img src="https://placehold.co/48x48/d0d0d0/555555?text=MOTO"
                         alt="Motoboy X"
                         class="w-12 h-12 rounded-full border border-gray-300 object-cover">
                    <div>
                        <h4 class="font-bold text-gray-800">Motoboy X</h4>
                        <p class="text-sm text-gray-500">Motoboy Avaliado</p>
                    </div>
                </div>

                <div class="bg-yellow-50 p-3 rounded-lg border-l-4 border-yellow-500 shadow-sm">
                    <h4 class="font-bold text-gray-700">Comentário:</h4>
                    <p class="text-gray-600">"Serviço de entrega excelente, muito profissional e atencioso. Chegou super rápido!"</p>
                </div>

                <div class="text-sm text-gray-600 flex items-center gap-2 border-t pt-4">
                    <span class="font-medium">Tipo:</span>
                    <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Dono → Motoboy</span>
                </div>
            </div>
        </div>

        {{-- Avaliação Fake 3 --}}
        <div class="bg-white shadow-lg border border-gray-200 overflow-hidden p-6 transition hover:shadow-xl rounded-lg">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-4">
                    <img src="https://placehold.co/56x56/e0e0e0/555555?text=AV3"
                         alt="Mariana S."
                         class="w-14 h-14 rounded-full border border-gray-300 object-cover">
                    <div>
                        <h3 class="font-semibold text-gray-800 text-lg">Mariana S.</h3>
                        <p class="text-sm text-gray-500">10/05/2024 09:00</p>
                    </div>
                </div>
                <div class="flex text-yellow-400 text-lg">
                    @for($i = 1; $i <= 5; $i++)
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                        </svg>
                    @endfor
                </div>
            </div>

            <div class="flex flex-col gap-4">
                <div class="bg-gray-100 p-4 rounded-lg flex justify-center">
                    <img src="https://placehold.co/96x96/e0e0e0/555555?text=MED3"
                         alt="Medicamento C"
                         class="w-24 h-24 object-contain">
                </div>

                <div class="flex items-center gap-4 border-t pt-4">
                    <img src="https://placehold.co/48x48/d0d0d0/555555?text=USR2"
                         alt="Pedro A."
                         class="w-12 h-12 rounded-full border border-gray-300 object-cover">
                    <div>
                        <h4 class="font-bold text-gray-800">Pedro A.</h4>
                        <p class="text-sm text-gray-500">Usuário Avaliado</p>
                    </div>
                </div>

                <div class="bg-yellow-50 p-3 rounded-lg border-l-4 border-yellow-500 shadow-sm">
                    <h4 class="font-bold text-gray-700">Comentário:</h4>
                    <p class="text-gray-600">"Processo de troca muito simples e a comunicação com o outro usuário foi excelente. Experiência 5 estrelas!"</p>
                </div>

                <div class="text-sm text-gray-600 flex items-center gap-2 border-t pt-4">
                    <span class="font-medium">Tipo:</span>
                    <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">Dono → Requerente</span>
                </div>
            </div>
        </div>

    </div>

</section>
<!-- Fim Avaliações de Trocas -->




<!-- Form Contato -->
<section class="bg-gradient-to-b from-gray-200 to-gray-50 py-10 px-6">
    <div class="max-w-6xl mx-auto text-center">
        <!-- Título -->
        <h2 class="text-2xl md:text-4xl py-4 text-gray-600">Entre em Contato</h2>
        <!-- Formulário -->
        <form action="{{ route('contato.enviar') }}" method="POST" class="max-w-lg mx-auto space-y-3">
            @csrf
            <!-- Nome -->
            <div class="flex flex-col items-start gap-2">
                <label for="email" class="text-gray-700 font-semibold">Nome</label>
                <input type="text"
                       id="nome"
                       name="nome"
                       required
                       placeholder="Digite seu nome"
                       class="w-full px-4 py-2 bg-white text-gray-700 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500">
                @error('email')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>
            <!-- E-mail -->
            <div class="flex flex-col items-start gap-2">
                <label for="email" class="text-gray-700 font-semibold">E-mail</label>
                <input type="email"
                       id="email"
                       name="email"
                       required
                       placeholder="Digite seu e-mail"
                       class="w-full px-4 py-2 bg-white text-gray-700 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500">
                @error('email')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>

            <!-- Celular -->
            <div class="flex flex-col items-start gap-2">
                <label for="celular" class="text-gray-700 font-semibold">Celular</label>
                <input type="tel"
                       id="celular"
                       name="celular"
                       required
                       placeholder="(XX) XXXXX-XXXX"
                       class="w-full px-4 py-2 bg-white text-gray-700 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500">
                @error('celular')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>

            <!-- Mensagem -->
            <div class="flex flex-col items-start gap-2">
                <label for="mensagem" class="text-gray-700 font-semibold">Mensagem</label>
                <textarea id="mensagem"
                          name="mensagem"
                          required
                          rows="4"
                          placeholder="Escreva sua mensagem aqui"
                          class="w-full px-4 py-2 bg-white text-gray-700 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"></textarea>
                @error('mensagem')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>

            <!-- Botão -->
            <div class="flex justify-center my-12">
                <button type="submit"
                        class="bg-gray-600 text-white hover:bg-amber-200 hover:text-amber-600 font-bold py-2 px-6 rounded-full text-lg transition bg-yellow-01 hover:bg-blue-custom">
                        <i class="ri-mail-send-fill mr-2 "></i>Enviar Mensagem
                </button>
            </div>
        </form>
    </div>
</section>
<!-- Fim Form Contato -->



@endsection