@extends('layouts.guest-page')

@section('title', 'Contact Us')

@section('no-container', true)

@section('content')
<div class="bg-[#030508] relative pt-32 pb-20 overflow-hidden">
    <!-- Decor bg -->
    <div class="absolute top-0 right-0 -mr-24 -mt-24 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute bottom-0 left-0 -ml-24 -mb-24 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center mb-16">
            <h2 class="text-blue-500 font-bold tracking-widest uppercase text-xs mb-3">Support</h2>
            <h1 class="text-4xl md:text-6xl font-display font-bold text-white mb-6">How can we help?</h1>
            <p class="text-gray-400 text-lg max-w-2xl mx-auto">We're here to help you get the most out of CheckMyAlgo. Reach out to us for support, feedback, or enterprise inquiries.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-20 items-start">
            <!-- Left Side: Info -->
            <div class="pt-8 space-y-12">
                <div>
                    <h3 class="text-2xl font-display font-bold text-white mb-4">Get in touch</h3>
                    <p class="text-gray-400 text-base leading-relaxed mb-8">
                        Our support team is available Monday through Friday. We usually respond within 24 hours.
                    </p>
                    
                    <a href="mailto:help@checkmyalgo.com" class="inline-flex items-center gap-4 group p-4 rounded-2xl bg-white/5 border border-white/5 hover:bg-white/10 hover:border-blue-500/30 transition-all duration-300 w-full sm:w-auto">
                        <div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center group-hover:bg-blue-500 group-hover:shadow-lg group-hover:shadow-blue-500/30 transition-all">
                            <svg class="w-6 h-6 text-blue-400 group-hover:text-white transition-colors" 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>
                        </div>
                        <div>
                            <div class="text-sm text-gray-400 mb-0.5">Email Support</div>
                            <div class="text-white font-bold group-hover:text-blue-400 transition-colors">help@checkmyalgo.com</div>
                        </div>
                    </a>
                </div>

                <div>
                    <h3 class="text-xl font-display font-bold text-white mb-4">Frequently asked questions</h3>
                    <ul class="space-y-4">
                        <li>
                            <a href="{{ route('pages.show', 'help-support') }}" class="flex items-center justify-between text-gray-400 hover:text-white group border-b border-white/5 pb-4 transition-colors">
                                <span>How do I cancel my subscription?</span>
                                <svg class="w-4 h-4 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('pages.show', 'help-support') }}" class="flex items-center justify-between text-gray-400 hover:text-white group border-b border-white/5 pb-4 transition-colors">
                                <span>Can I switch plans later?</span>
                                <svg class="w-4 h-4 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('pages.show', 'help-support') }}" class="flex items-center justify-between text-gray-400 hover:text-white group transition-colors">
                                <span>Do you offer custom enterprise plans?</span>
                                <svg class="w-4 h-4 opacity-0 group-hover:opacity-100 transform group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Right Side: Form -->
            <div class="bg-[#0E121A] border border-white/10 rounded-3xl p-8 md:p-10 shadow-2xl relative">
                @if(session('success'))
                    <div class="mb-6 bg-green-500/10 text-green-400 p-4 rounded-xl border border-green-500/20 flex items-center gap-3">
                        <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <span class="font-medium">{{ session('success') }}</span>
                    </div>
                @endif

                <form action="{{ route('contact.store') }}" method="POST" class="space-y-6">
                    @csrf
                    <div>
                        <label for="name" class="block text-sm font-bold text-gray-300 mb-2">Name</label>
                        <input type="text" name="name" id="name" placeholder="John Doe" required class="w-full px-4 py-3.5 rounded-xl border border-gray-700 bg-[#0A0C10] text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all placeholder-gray-600">
                        @error('name') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="email" class="block text-sm font-bold text-gray-300 mb-2">Email</label>
                        <input type="email" name="email" id="email" placeholder="john@example.com" required class="w-full px-4 py-3.5 rounded-xl border border-gray-700 bg-[#0A0C10] text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all placeholder-gray-600">
                        @error('email') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="subject" class="block text-sm font-bold text-gray-300 mb-2">Subject</label>
                        <input type="text" name="subject" id="subject" placeholder="What is this regarding?" required class="w-full px-4 py-3.5 rounded-xl border border-gray-700 bg-[#0A0C10] text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all placeholder-gray-600">
                        @error('subject') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="message" class="block text-sm font-bold text-gray-300 mb-2">Message</label>
                        <textarea name="message" id="message" rows="5" placeholder="Tell us more about your inquiry..." required class="w-full px-4 py-3.5 rounded-xl border border-gray-700 bg-[#0A0C10] text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all placeholder-gray-600 resize-none"></textarea>
                        @error('message') <p class="mt-1 text-sm text-red-400">{{ $message }}</p> @enderror
                    </div>

                    <button type="submit" class="w-full px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-xl transition-all shadow-lg shadow-blue-500/20 hover:shadow-blue-500/40 transform hover:-translate-y-0.5 mt-2">
                        Send Message
                    </button>
                    
                    <p class="text-xs text-gray-500 text-center mt-4">
                        By sending this message, you agree to our <a href="{{ route('pages.show', 'privacy-policy') }}" class="text-blue-500 hover:underline">Privacy Policy</a>.
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection