<!-- Contact page content starts here -->

    <!-- Hero Section -->
    <section class="relative bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 dark:from-gray-900 dark:via-blue-900 dark:to-purple-900 hero-section-compact">
        <div class="absolute inset-0 bg-black opacity-50 dark:opacity-70"></div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-5xl md:text-6xl font-bold text-white mb-6">
                <%- __('contact.hero.title') %>
            </h1>
            <p class="text-xl text-gray-300 dark:text-gray-200 max-w-3xl mx-auto">
                <%- __('contact.hero.subtitle') %>
            </p>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="py-20 bg-white dark:bg-gray-900">
        <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>
                    <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">
                        <%- __('contact.form.title') %>
                    </h2>
                    <form id="contact-form" class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    <%- __('contact.form.name') %>
                                </label>
                                <input type="text" name="name" required class="form-input w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    <%- __('contact.form.email') %>
                                </label>
                                <input type="email" name="email" required class="form-input w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                <%- __('contact.form.phone') %>
                            </label>
                            <input type="tel" name="phone" class="form-input w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                <%- __('contact.form.service.title') %>
                            </label>
                            <select name="serviceInterest" class="form-input w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
                                <option value=""><%- __('contact.form.service.select') %></option>
                                <option value="web-development"><%- __('contact.form.service.web') %></option>
                                <option value="mobile-app"><%- __('contact.form.service.mobile') %></option>
                                <option value="ui-ux-design"><%- __('contact.form.service.design') %></option>
                                <option value="branding"><%- __('contact.form.service.branding') %></option>
                                <option value="consulting"><%- __('contact.form.service.consulting') %></option>
                                <option value="other"><%- __('contact.form.service.other') %></option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                <%- __('contact.form.message') %>
                            </label>
                            <textarea name="message" rows="5" required class="form-input w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-gray-700 dark:text-white"></textarea>
                        </div>
                        
                        <button type="submit" class="w-full btn-primary bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-3 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105">
                            <%- __('contact.form.submit') %>
                        </button>
                    </form>
                </div>
                
                <!-- Contact Info -->
                <div>
                    <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">
                        <%- __('contact.info.title') %>
                    </h2>
                    
                    <div class="space-y-6">
                        <!-- Phone -->
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-phone text-blue-600 dark:text-blue-400"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                                    <%- __('contact.phone.title') %>
                                </h3>
                                <p class="text-gray-600 dark:text-gray-300">
                                    <%- __('contact.phone.number') %>
                                </p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    <%- __('contact.phone.hours') %>
                                </p>
                            </div>
                        </div>
                        
                        <!-- Email -->
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-envelope text-purple-600 dark:text-purple-400"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                                    <%- __('contact.email.title') %>
                                </h3>
                                <p class="text-gray-600 dark:text-gray-300">
                                    <%- __('contact.email.address') %>
                                </p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    <%- __('contact.email.response') %>
                                </p>
                            </div>
                        </div>
                        
                        <!-- Telegram -->
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fab fa-telegram text-green-600 dark:text-green-400"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                                    <%- __('contact.telegram.title') %>
                                </h3>
                                <p class="text-gray-600 dark:text-gray-300">
                                    @smartsoltech
                                </p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    <%- __('contact.telegram.subtitle') %>
                                </p>
                            </div>
                        </div>
                        
                        <!-- Address -->
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-map-marker-alt text-gray-600 dark:text-gray-400"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                                    <%- __('contact.address.title') %>
                                </h3>
                                <p class="text-gray-600 dark:text-gray-300">
                                    <%- __('contact.address.line1') %><br>
                                    <%- __('contact.address.line2') %>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<!-- Contact page content ends here -->

<script>
    // Theme initialization
    document.addEventListener('DOMContentLoaded', function() {
        const theme = localStorage.getItem('theme') || 'light';
        document.documentElement.className = theme === 'dark' ? 'dark' : '';
    });

    // Contact form handler
    document.getElementById('contact-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        
        fetch('/contact', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('<%- __("contact.form.success") %>');
                this.reset();
            } else {
                alert('<%- __("contact.form.error") %>');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('<%- __("contact.form.error") %>');
        });
    });
</script>