@extends('layouts.site')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <!-- Breadcrumbs -->
    <nav class="flex flex-col sm:flex-row gap-4 items-center justify-between bg-white px-6 py-2 shadow-lg">
        <div class="flex flex-wrap items-center gap-2 text-gray-600">
            <a href="{{ route('home') }}" class="text-sm font-medium hover:text-green-600 transition-colors duration-200">Home</a>
            <span class="mx-1 text-gray-400">/</span>
            <span class="text-sm font-medium text-green-700">Sobre Nós</span>
        </div>
        <a href="{{ url()->previous() }}" class="bg-gray-700 hover:bg-gray-800 text-white text-sm font-semibold py-2 px-4 shadow-md hover:shadow-lg transition-all duration-300 flex items-center gap-2">
            <i class="ri-arrow-left-line text-base"></i>
            Voltar
        </a>
    </nav>

    <!-- Cabeçalho -->
    <header class="text-center mt-6">
        <h1 class="text-4xl py-4 font-normal lg:tracking-widest tracking-normal text-green-700  text-center ">{{ $title }}</h1>
        <p class="text-lg sm:text-xl text-gray-600 mt-2 max-w-3xl mx-auto">Conheça nossa missão de compartilhar saúde e esperança com amor e justiça.</p>
    </header>

    <!-- Conteúdo Principal -->
    <section class="max-w-7xl mx-auto mt-6 bg-white shadow-lg p-6 sm:p-8 lg:p-12 space-y-8 text-gray-700">
        <h2 class="text-4xl py-4 font-normal lg:tracking-widest tracking-normal text-green-700  text-center ">Compartilhar para Cuidar</h2>
        <p class="text-base sm:text-lg leading-relaxed">Em um mundo onde o acesso a medicamentos é um desafio para muitos, acreditamos que a solidariedade pode mudar vidas. Nosso projeto nasceu do desejo de unir pessoas em um propósito maior: garantir que remédios parados em gavetas cheguem a quem precisa, transformando compaixão em ação.</p>

        <blockquote class="relative pl-6 border-l-4 border-green-600 text-lg italic text-green-700 font-medium bg-gray-50 p-4 rounded-r-lg">
            "Aquele que tem duas túnicas reparta com o que não tem, e aquele que tem comida faça da mesma maneira." <span class="block mt-2 text-sm text-gray-600">— Lucas 3:11</span>
        </blockquote>

        <p class="text-base sm:text-lg leading-relaxed">Inspirados pelos ensinamentos de Cristo, buscamos repartir o que temos para aliviar o sofrimento e promover a justiça. A saúde é um dom precioso, e compartilhá-la é um ato de fé e amor ao próximo.</p>

        <blockquote class="relative pl-6 border-l-4 border-green-600 text-lg italic text-green-700 font-medium bg-gray-50 p-4 rounded-r-lg">
            "Porque tive fome, e me destes de comer; tive sede, e me destes de beber; estava enfermo, e me visitastes." <span class="block mt-2 text-sm text-gray-600">— Mateus 25:35-36</span>
        </blockquote>

        <p class="text-base sm:text-lg leading-relaxed">Nosso compromisso vai além da troca de medicamentos: é sobre criar uma rede de cuidado e esperança. Cada remédio doado ou trocado é um passo para tornar a medicina um instrumento de cura acessível a todos, e não um privilégio de poucos.</p>

        <blockquote class="relative pl-6 border-l-4 border-green-600 text-lg italic text-green-700 font-medium bg-gray-50 p-4 rounded-r-lg">
            "O que fizermos ao menor dos nossos irmãos, é a Ele que fazemos." <span class="block mt-2 text-sm text-gray-600">— Mateus 25:40</span>
        </blockquote>

        <p class="text-lg font-semibold text-center text-gray-800">💙 Doe, troque, compartilhe. Juntos, fazemos a diferença!</p>
    </section>

    <!-- Seção Contato -->
    <section class="max-w-5xl mx-auto mt-12 text-center">
        <h3 class="text-4xl py-8 font-normal lg:tracking-widest tracking-normal text-green-700  text-center ">Faça Parte Dessa Missão</h3>
        <p class="text-3xl sm:text-lg text-gray-600 mt-4">Tem dúvidas? Estamos aqui para ajudar.</p>
        <!-- Botão para WhatsApp -->
        <a href="https://wa.me/5521984040773" target="_blank" class="mt-6 inline-block bg-gradient-to-r from-green-500 to-green-600 text-white text-base font-semibold px-8 py-3 shadow-md hover:shadow-xl hover:from-yellow-600 hover:to-yellow-700 transition-all duration-300 flex items-center space-x-2">
            <span>Fale no WhatsApp</span>
            <i class="ri-whatsapp-line text-2xl font-thin "></i>
        </a>



    </section>
</div>
@endsection