@extends('layouts.frontend')

@section('title', 'Contact - Tirumalarao Naidu')

@section('content')
<!-- Hero Section -->
<section class="pt-32 pb-16 bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <p class="text-primary-500 font-medium mb-4">GET IN TOUCH</p>
            <h1 class="font-display text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
                Let's Connect
            </h1>
            <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                Have a question or want to work together? I'd love to hear from you.
            </p>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <!-- Contact Form -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-8">
                <h2 class="font-display text-2xl font-bold text-gray-900 dark:text-white mb-6">Send a Message</h2>
                
                <form action="{{ route('contact.store') }}" method="POST" class="space-y-6">
                    @csrf
                    
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name *</label>
                        <input type="text" id="name" name="name" required value="{{ old('name') }}" class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('name') border-red-500 @enderror">
                        @error('name')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email *</label>
                        <input type="email" id="email" name="email" required value="{{ old('email') }}" class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent @error('email') border-red-500 @enderror">
                        @error('email')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Subject</label>
                        <input type="text" id="subject" name="subject" value="{{ old('subject') }}" class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
                    </div>
                    
                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Message *</label>
                        <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none @error('message') border-red-500 @enderror">{{ old('message') }}</textarea>
                        @error('message')
                        <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <button type="submit" class="w-full px-6 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition-colors">
                        Send Message <i class="fas fa-paper-plane ml-2"></i>
                    </button>
                </form>
            </div>
            
            <!-- Contact Info -->
            <div class="space-y-8">
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-8">
                    <h2 class="font-display text-2xl font-bold text-gray-900 dark:text-white mb-6">Contact Information</h2>
                    
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-envelope text-primary-500"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-900 dark:text-white">Email</h4>
                                <a href="mailto:tirumalarao.naidu@gmail.com" class="text-gray-600 dark:text-gray-400 hover:text-primary-500">tirumalarao.naidu@gmail.com</a>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-phone text-primary-500"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-900 dark:text-white">Phone</h4>
                                <a href="tel:+14706014799" class="text-gray-600 dark:text-gray-400 hover:text-primary-500">+1 (470) 601-4799</a>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-map-marker-alt text-primary-500"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-900 dark:text-white">Location</h4>
                                <p class="text-gray-600 dark:text-gray-400">Atlanta, Georgia, USA</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Social Links -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-8">
                    <h3 class="font-display text-xl font-bold text-gray-900 dark:text-white mb-4">Connect on Social</h3>
                    <div class="flex space-x-4">
                        <a href="{{ App\Models\Setting::get('social_linkedin', '#') }}" target="_blank" class="w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:bg-primary-500 hover:text-white transition-colors">
                            <i class="fab fa-linkedin-in text-xl"></i>
                        </a>
                        <a href="{{ App\Models\Setting::get('social_facebook', '#') }}" target="_blank" class="w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:bg-primary-500 hover:text-white transition-colors">
                            <i class="fab fa-facebook-f text-xl"></i>
                        </a>
                        <a href="{{ App\Models\Setting::get('social_twitter', '#') }}" target="_blank" class="w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:bg-primary-500 hover:text-white transition-colors">
                            <i class="fab fa-x-twitter text-xl"></i>
                        </a>
                        <a href="{{ App\Models\Setting::get('social_instagram', '#') }}" target="_blank" class="w-12 h-12 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:bg-primary-500 hover:text-white transition-colors">
                            <i class="fab fa-instagram text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection