{% extends "base.html" %}
{% block title %}Contact Us - Infyrus Tech{% endblock %}

{% block content %}
<section class="hero-bg pt-32 pb-20 relative overflow-hidden">
    <div class="orb w-96 h-96 bg-blue-600 -top-20 -left-20 opacity-10" style="position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-14" data-aos="fade-up">
            <div class="section-label mx-auto w-fit"><i class="fa-solid fa-envelope"></i> Contact Us</div>
            <h1 class="font-display font-bold text-5xl sm:text-6xl text-white mb-4">
                We're Here to <span class="gradient-text">Help</span>
            </h1>
            <p class="text-slate-400 max-w-xl mx-auto text-lg">Reach out via any channel. Our Nepali support team is online 24/7.</p>
        </div>

        <!-- Contact info cards -->
        <div class="grid sm:grid-cols-3 gap-5 mb-14">
            {% set contacts = [
                ('fa-phone', 'blue', 'Phone', '+977-9801234567', 'Mon–Fri 9am–6pm'),
                ('fa-envelope', 'purple', 'Email', 'support@infyrus.com.np', 'Reply within 2 hours'),
                ('fa-location-dot', 'green', 'Office', 'New Baneshwor, Kathmandu', 'Nepal, 44600')
            ] %}
            {% for icon, color, title, val, sub in contacts %}
            <div class="glass rounded-2xl p-6 text-center card-hover" data-aos="fade-up" data-aos-delay="{{ loop.index0 * 100 }}">
                <div class="w-12 h-12 bg-{{ color }}-500/15 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fa-solid {{ icon }} text-{{ color }}-400 text-lg"></i>
                </div>
                <h3 class="font-semibold text-white mb-1">{{ title }}</h3>
                <p class="text-slate-300 text-sm font-medium">{{ val }}</p>
                <p class="text-slate-500 text-xs mt-0.5">{{ sub }}</p>
            </div>
            {% endfor %}
        </div>

        <div class="grid lg:grid-cols-2 gap-10">
            <!-- Form -->
            <div class="glass-strong rounded-2xl p-8" data-aos="fade-right">
                <h2 class="font-display font-bold text-2xl text-white mb-6">Send us a Message</h2>
                <form class="space-y-4">
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs text-slate-400 font-medium mb-2">Full Name</label>
                            <input type="text" placeholder="Ram Sharma" class="w-full bg-[#0F172A] border border-white/10 rounded-xl px-4 py-3.5 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors text-sm">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-400 font-medium mb-2">Email</label>
                            <input type="email" placeholder="you@example.com" class="w-full bg-[#0F172A] border border-white/10 rounded-xl px-4 py-3.5 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors text-sm">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs text-slate-400 font-medium mb-2">Subject</label>
                        <select class="w-full bg-[#0F172A] border border-white/10 rounded-xl px-4 py-3.5 text-white focus:outline-none focus:border-indigo-500 transition-colors text-sm">
                            <option value="" class="bg-[#0F172A]">Select a topic</option>
                            <option class="bg-[#0F172A]">Sales & Pricing</option>
                            <option class="bg-[#0F172A]">Technical Support</option>
                            <option class="bg-[#0F172A]">Billing & Invoices</option>
                            <option class="bg-[#0F172A]">Domain Transfer</option>
                            <option class="bg-[#0F172A]">Other</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs text-slate-400 font-medium mb-2">Message</label>
                        <textarea rows="5" placeholder="Describe your question or issue in detail..." class="w-full bg-[#0F172A] border border-white/10 rounded-xl px-4 py-3.5 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors text-sm resize-none"></textarea>
                    </div>
                    <button type="button" onclick="sendMsg()" class="btn-primary w-full justify-center">
                        Send Message <i class="fa-solid fa-paper-plane"></i>
                    </button>
                    <div id="msg-success" class="hidden text-center py-3 text-green-400 text-sm bg-green-400/10 rounded-xl border border-green-400/20">
                        <i class="fa-solid fa-check-circle mr-2"></i>Message sent! We'll reply within 2 hours.
                    </div>
                </form>
            </div>

            <!-- Live chat + FAQ + Hours -->
            <div class="space-y-5" data-aos="fade-left">
                <!-- Live chat -->
                <div class="gradient-border p-6">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-green-500/15 rounded-2xl flex items-center justify-center flex-shrink-0">
                            <i class="fa-solid fa-comments text-green-400 text-lg"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center gap-2 mb-1">
                                <h3 class="font-semibold text-white">Live Chat</h3>
                                <span class="text-xs text-green-400 bg-green-400/10 px-2 py-0.5 rounded-full flex items-center gap-1">
                                    <div class="w-1.5 h-1.5 bg-green-400 rounded-full"></div> Online
                                </span>
                            </div>
                            <p class="text-slate-400 text-sm">Chat with a support engineer right now. Average wait: &lt;2 min.</p>
                        </div>
                    </div>
                    <button class="btn-primary w-full justify-center mt-4 text-sm">Start Live Chat</button>
                </div>

                <!-- WhatsApp -->
                <div class="glass rounded-2xl p-5 flex items-center gap-4">
                    <div class="w-11 h-11 bg-green-500/15 rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="fa-brands fa-whatsapp text-green-400 text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-semibold text-white text-sm">WhatsApp Support</h3>
                        <p class="text-slate-500 text-xs">+977-9801234567 · 9am–9pm</p>
                    </div>
                    <a href="#" class="btn-outline text-xs py-2 px-4">Chat</a>
                </div>

                <!-- Support hours -->
                <div class="glass rounded-2xl p-6">
                    <h3 class="font-semibold text-white mb-4">Support Hours</h3>
                    <div class="space-y-3">
                        {% set hours = [
                            ('Live Chat', '24 / 7 / 365', 'green'),
                            ('Email Support', '24 / 7', 'blue'),
                            ('Phone Support', 'Mon–Fri, 9am–6pm', 'purple'),
                            ('Emergency', '24/7 (Enterprise)', 'amber')
                        ] %}
                        {% for service, time, color in hours %}
                        <div class="flex justify-between items-center py-2 border-b border-white/5 last:border-0">
                            <span class="text-sm text-slate-400">{{ service }}</span>
                            <span class="text-xs text-{{ color }}-400 bg-{{ color }}-400/10 px-2.5 py-1 rounded-full font-medium">{{ time }}</span>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <!-- Office map placeholder -->
                <div class="glass rounded-2xl p-5">
                    <h3 class="font-semibold text-white mb-3 text-sm">Our Office</h3>
                    <div class="bg-[#0F172A] rounded-xl h-36 flex items-center justify-center mb-3">
                        <div class="text-center">
                            <i class="fa-solid fa-map-location-dot text-indigo-400 text-3xl mb-2"></i>
                            <p class="text-slate-500 text-xs">New Baneshwor, Kathmandu</p>
                        </div>
                    </div>
                    <p class="text-xs text-slate-500">Infyrus Tech Pvt. Ltd., Office 301, Tech Tower,<br>New Baneshwor, Kathmandu 44600, Nepal</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
function sendMsg() {
    const btn = event.target;
    btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i>Sending...';
    btn.disabled = true;
    setTimeout(() => {
        btn.innerHTML = 'Send Message <i class="fa-solid fa-paper-plane"></i>';
        btn.disabled = false;
        document.getElementById('msg-success').classList.remove('hidden');
    }, 1500);
}
</script>
{% endblock %}