@extends('layouts.app')

@section('title', 'Help & Support - ' . config('app.name'))

@section('content')
    <div class="mb-8">
        <h2 class="text-2xl font-semibold mb-2">Help & Support</h2>
        <p class="text-[#706f6c] dark:text-[#A1A09A]
            Get help and contact our support team
        </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg p-6 text-center">
            <svg class="w-12 h-12 mx-auto mb-4 text-[#1b1b18] dark:text-[#EDEDEC] fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            <h3 class="font-medium mb-2">Documentation</h3>
            <p class="text-sm text-[#706f6c] dark:text-[#A1A09A] mb-4">Browse our guides</p>
            <a href="{{ route('documentation') }}" class="text-sm text-[#1b1b18] dark:text-[#EDEDEC] hover:underline">Read docs →</a>
        </div>

        <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg p-6 text-center">
            <svg class="w-12 h-12 mx-auto mb-4 text-[#1b1b18] dark:text-[#EDEDEC] fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
            </svg>
            <h3 class="font-medium mb-2">Email Support</h3>
            <p class="text-sm text-[#706f6c] dark:text-[#A1A09A] mb-4">Contact our team</p>
            <a href="mailto:support@example.com" class="text-sm text-[#1b1b18] dark:text-[#EDEDEC] hover:underline">Send email →</a>
        </div>

        <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg p-6 text-center">
            <svg class="w-12 h-12 mx-auto mb-4 text-[#1b1b18] dark:text-[#EDEDEC] fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <h3 class="font-medium mb-2">FAQ</h3>
            <p class="text-sm text-[#706f6c] dark:text-[#A1A09A] mb-4">Find quick answers</p>
            <a href="#" class="text-sm text-[#1b1b18] dark:text-[#EDEDEC] hover:underline">View FAQ →</a>
        </div>
    </div>

    <div class="bg-white dark:bg-[#161615] border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-lg p-8">
        <h3 class="text-lg font-medium mb-4">Contact Support</h3>
        <form class="space-y-4">
            <div>
                <label class="block text-sm font-medium mb-2">Subject</label>
                <input type="text" class="w-full px-4 py-2.5 border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-sm bg-white dark:bg-[#161615]
            </div>
            <div>
                <label class="block text-sm font-medium mb-2">Message</label>
                <textarea rows="5" class="w-full px-4 py-2.5 border border-[#e3e3e0] dark:border-[#3E3E3A] rounded-sm bg-white dark:bg-[#161615]
            </div>
            <button type="submit" class="px-5 py-2.5 bg-white dark:bg-[#161615] text-white dark:text-[#1b1b18] border border-[#1b1b18] hover:bg-[#FDFDFC] dark:bg-[#0a0a0a] rounded-sm text-sm font-medium transition-all">
                Send Message
            </button>
        </form>
    </div>
@endsection