{% extends 'portfolio/base.html' %}

{% block title %}Contact Me - ChrisDev{% endblock %}

{% block content %}
<section class="gradient-animated py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
        <h1 class="text-5xl font-bold mb-4" data-aos="fade-down">Get In Touch</h1>
        <p class="text-xl text-gray-200" data-aos="fade-up" data-aos-delay="100">Let's discuss your project</p>
    </div>
</section>

<section class="py-20 bg-white">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <!-- Contact Info -->
            <div class="space-y-8" data-aos="fade-right" data-aos-duration="1000">
                <h2 class="text-3xl font-bold text-gray-900">Contact Information</h2>
                <p class="text-gray-600">Fill out the form and I'll get back to you within 24 hours.</p>
                
                <div class="space-y-6">
                    <div class="flex items-start hover:scale-105 transition-transform duration-300" data-aos="fade-up" data-aos-delay="100">
                        <div class="gradient-bg w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 pulse-slow">
                            <i class="fas fa-envelope text-white"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-gray-900">Email</h3>
                            <p class="text-gray-600">hello@chrisdev.com</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start hover:scale-105 transition-transform duration-300" data-aos="fade-up" data-aos-delay="200">
                        <div class="gradient-bg w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 pulse-slow">
                            <i class="fas fa-phone text-white"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-gray-900">Phone</h3>
                            <p class="text-gray-600">+234 7066006386</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start hover:scale-105 transition-transform duration-300" data-aos="fade-up" data-aos-delay="300">
                        <div class="gradient-bg w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 pulse-slow">
                            <i class="fas fa-map-marker-alt text-white"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="font-semibold text-gray-900">Location</h3>
                            <p class="text-gray-600">Nigeria</p>
                        </div>
                    </div>
                </div>

                <!-- Social Media -->
                <div class="pt-6" data-aos="fade-up" data-aos-delay="400">
                    <h3 class="font-semibold text-gray-900 mb-4">Follow Me</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="gradient-bg w-12 h-12 rounded-full flex items-center justify-center text-white hover:scale-125 transition-transform duration-300">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="gradient-bg w-12 h-12 rounded-full flex items-center justify-center text-white hover:scale-125 transition-transform duration-300">
                            <i class="fab fa-linkedin"></i>
                        </a>
                        <a href="#" class="gradient-bg w-12 h-12 rounded-full flex items-center justify-center text-white hover:scale-125 transition-transform duration-300">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="gradient-bg w-12 h-12 rounded-full flex items-center justify-center text-white hover:scale-125 transition-transform duration-300">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Contact Form -->
            <div class="bg-gray-50 p-8 rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300" data-aos="fade-left" data-aos-duration="1000">
                <form method="post" class="space-y-6">
                    {% csrf_token %}
                    <div class="form-group">
                        <label class="block text-gray-700 font-medium mb-2">Name *</label>
                        {{ form.name }}
                    </div>
                    <div class="form-group">
                        <label class="block text-gray-700 font-medium mb-2">Email *</label>
                        {{ form.email }}
                    </div>
                    <div class="form-group">
                        <label class="block text-gray-700 font-medium mb-2">Subject *</label>
                        {{ form.subject }}
                    </div>
                    <div class="form-group">
                        <label class="block text-gray-700 font-medium mb-2">Message *</label>
                        {{ form.message }}
                    </div>
                    <button type="submit" class="w-full gradient-bg text-white py-3 rounded-lg font-semibold hover:opacity-90 hover:scale-105 transition-all duration-300">
                        <i class="fas fa-paper-plane mr-2"></i> Send Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- Map Section (Optional) -->
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center" data-aos="fade-up">Let's Connect</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2" data-aos="zoom-in" data-aos-delay="0">
                <i class="fas fa-clock text-purple-600 text-4xl mb-4"></i>
                <h3 class="font-bold text-gray-900 mb-2">Response Time</h3>
                <p class="text-gray-600">Within 24 hours</p>
            </div>
            <div class="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2" data-aos="zoom-in" data-aos-delay="100">
                <i class="fas fa-comments text-purple-600 text-4xl mb-4"></i>
                <h3 class="font-bold text-gray-900 mb-2">Free Consultation</h3>
                <p class="text-gray-600">30-minute call</p>
            </div>
            <div class="text-center p-6 bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-2" data-aos="zoom-in" data-aos-delay="200">
                <i class="fas fa-handshake text-purple-600 text-4xl mb-4"></i>
                <h3 class="font-bold text-gray-900 mb-2">Project Discussion</h3>
                <p class="text-gray-600">Let's plan together</p>
            </div>
        </div>
    </div>
</section>
{% endblock %}