{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block title %}Contact Us | {{ site_settings.site_name }}{% endblock %}

{% block content %}


<section class="pt-24 pb-12 bg-slate-50 relative z-0 border-b border-slate-200/60">
    <div class="absolute top-0 inset-x-0 h-64 bg-gradient-to-b from-white to-transparent -z-10"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-6">

        <div class="text-center max-w-2xl mx-auto mb-8" data-aos="fade-up">
            <h2 class="text-2xl md:text-3xl font-extrabold text-slate-900 mb-3 tracking-tight">Our Offices</h2>
            <div class="h-1 w-16 bg-indigo-500 rounded-full mx-auto mb-4"></div>
            <p class="text-base text-slate-500">Find us at one of our locations worldwide. We are always happy to
                welcome
                you.</p>
        </div>

        <div class="grid grid-cols-1 gap-8 max-w-4xl mx-auto">
            {% for loc in locations %}
            <div class="bg-white border border-indigo-900 p-6 rounded-2xl shadow-lg shadow-slate-200/40 hover:shadow-2xl hover:shadow-indigo-200/40 transition-all duration-300 relative group overflow-hidden"
                data-aos="fade-up" data-aos-delay="{{ forloop.counter0|add:1 }}00">
                <!-- Subtle background decoration -->
                <div
                    class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-indigo-50 to-blue-50 rounded-bl-[100px] -z-10 group-hover:scale-125 transition-transform duration-700">
                </div>

                <div class="flex flex-row w-full gap-10 sm:gap-12 items-stretch" style="min-height: 260px;">
                    <!-- Left: Map -->
                    <div class="flex-none rounded-2xl overflow-hidden shadow-inner border border-slate-200 relative"
                        style="width: 42%;">
                        {% if loc.map_embed_url %}
                        {% if "embed" in loc.map_embed_url %}
                        <iframe src="{{ loc.map_embed_url }}"
                            class="absolute inset-0 w-full h-full grayscale-[15%] hover:grayscale-0 transition-all duration-700"
                            style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                        {% else %}
                        <iframe
                            src="https://maps.google.com/maps?q={{ loc.map_embed_url|urlencode }}&t=&z=13&ie=UTF8&iwloc=&output=embed"
                            class="absolute inset-0 w-full h-full grayscale-[15%] hover:grayscale-0 transition-all duration-700"
                            style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                        {% endif %}
                        {% else %}
                        <iframe
                            src="https://maps.google.com/maps?q={{ loc.address|urlencode }}&t=&z=13&ie=UTF8&iwloc=&output=embed"
                            class="absolute inset-0 w-full h-full grayscale-[15%] hover:grayscale-0 transition-all duration-700"
                            style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                        {% endif %}
                    </div>

                    <!-- Right: Info -->
                    <div class="flex-1 flex flex-col justify-center py-6 overflow-hidden pr-4">
                        <div class="flex items-center gap-4 mb-6">
                            <div
                                class="w-12 h-12 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600 shadow-sm transition-all duration-500 group-hover:scale-110 transform">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.243-4.243a8 8 0 1111.314 0z">
                                    </path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                            </div>
                            <h3 class="text-xl md:text-2xl font-extrabold text-slate-900 tracking-tight">{{ loc.name }}
                            </h3>
                        </div>

                        <div class="space-y-4">
                            <div class="flex items-start gap-3">
                                <div class="mt-0.5 bg-slate-100 p-1.5 rounded-lg text-slate-500">
                                    <svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
                                        </path>
                                    </svg>
                                </div>
                                <p class="text-slate-600 font-medium text-sm md:text-base leading-relaxed">{{ loc.address }}</p>
                            </div>
                            {% if loc.phone %}
                            <div class="flex items-center gap-3">
                                <div class="bg-slate-100 p-1.5 rounded-lg text-slate-500">
                                    <svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                                        </path>
                                    </svg>
                                </div>
                                <p class="text-slate-700 font-semibold text-sm md:text-base">{{ loc.phone }}</p>
                            </div>
                            {% endif %}
                            {% if loc.email %}
                            <div class="flex items-center gap-3">
                                <div class="bg-slate-100 p-1.5 rounded-lg text-slate-500">
                                    <svg class="w-4 h-4 md:w-5 md:h-5" 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>
                                <p class="text-slate-700 font-semibold text-sm md:text-base">{{ loc.email }}</p>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="py-16 bg-white relative z-0">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">

        <!-- Form Area -->
        <div class="bg-white p-5 md:p-6 rounded-2xl shadow-2xl shadow-slate-200/50 border-2 border-indigo-900 relative z-10 overflow-hidden"
            data-aos="fade-up">


            <div class="text-center mb-6">
                <h2 class="text-xl lg:text-2xl font-extrabold text-slate-900 mb-2 tracking-tight">Send a Message</h2>
                <div class="h-1 w-12 bg-indigo-500 rounded-full mx-auto mb-3"></div>
                <p class="text-slate-500 text-sm">Have a question or want to work together? Fill out the form below and
                    we'll be in touch.</p>
            </div>



            {% crispy form %}
        </div>
    </div>
</section>
{% endblock %}