<x-app-layout>
    <div class="max-w-2xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-8">
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Report Abuse</h1>
            <p class="text-gray-600 dark:text-gray-400 mb-8">We take the safety and integrity of our marketplace seriously. If you've encountered an item, user, or activity that violates our policies, please report it here.</p>

            <div class="mb-8 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                <p class="text-blue-900 dark:text-blue-200">
                    <strong>Need to report something urgent?</strong> Please contact us directly at
                    <a href="mailto:support@xeek.com" class="font-semibold hover:underline">support@xeek.com</a>
                </p>
            </div>

            <p class="text-gray-700 dark:text-gray-300 mb-6">
                For more detailed abuse reports, please use our reporting system while logged in to your account.
                <a href="{{ auth()->check() ? route('reports.create') : route('login') }}" class="font-semibold text-gray-900 dark:text-white hover:underline">
                    {{ auth()->check() ? 'Go to Report Page' : 'Log in to Report' }}
                </a>
            </p>

            <div class="mt-8 space-y-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">What Can You Report?</h3>
                    <ul class="space-y-2 text-gray-700 dark:text-gray-300">
                        <li class="flex items-start">
                            <span class="text-gray-400 mr-3">•</span>
                            <span>Listings with inappropriate or prohibited content</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-gray-400 mr-3">•</span>
                            <span>Scams, fraud, or suspicious activity</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-gray-400 mr-3">•</span>
                            <span>Harassment or threatening behavior from users</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-gray-400 mr-3">•</span>
                            <span>Copyright or trademark infringement</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-gray-400 mr-3">•</span>
                            <span>Counterfeit or inauthentic items</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-gray-400 mr-3">•</span>
                            <span>Other policy violations</span>
                        </li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Our Commitment</h3>
                    <p class="text-gray-700 dark:text-gray-300">
                        All reports are reviewed by our moderation team. We treat all reports confidentially and take appropriate action based on our community guidelines. Thank you for helping keep {{ config('app.name') }} safe for everyone.
                    </p>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
