{% extends '_base.html' %}
{% load static %}

    {% block title %}<title>Distributors and Project Enquiries | TUPY Middle East</title>{% endblock %}

    {% block meta %}

    <meta name="description" content="TUPY pipe fittings are supplied across the Middle East from stock in Dubai. See the markets served and send a distributor or project enquiry to Amini Building Materials Trading L.L.C, exclusive agent of TUPY S.A.">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Distributors and Project Enquiries | TUPY Middle East">
    <meta property="og:description" content="TUPY pipe fittings are supplied across the Middle East from stock in Dubai. See the markets served and send a distributor or project enquiry to Amini Building Materials Trading L.L.C, exclusive agent of TUPY S.A.">
    <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{% static 'img/cover.png' %}">

        <script type="application/ld+json">
    { "@context": "https://schema.org", "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "Home", "item": "{{ request.scheme }}://{{ request.get_host }}/" },
        { "@type": "ListItem", "position": 2, "name": "Distributors" }
      ] }
    </script>

{% endblock %}

    {% block content %}

    <!-- Banner -->

    <section class="overflow-hidden mt-10 mb-5">
        <div class="container mx-auto">

            <div class="flex laptop:flex-col items-stretch min-h-[420px] mobile:min-h-[330px]">

                <!-- Image Side -->

                <div class="relative w-[45%] laptop:w-full laptop:h-[300px] mobile:h-[220px] flex-shrink-0">
                    <img
                    src="{% static 'img/representative/banner.png' %}"
                    alt="TUPY pipe fittings distributed across the Middle East"
                    class="w-full h-full object-cover mobile:object-contain laptop:object-contain block"
                    />
                    
                </div>

                <!-- Text Side -->

                <div
                    class="w-[55%] laptop:w-full py-[50px] pl-20 laptop:px-5 laptop:py-7 mobile:px-4 mobile:py-6 flex flex-col justify-center items-start"
                >
                    <h1 class="font-YekanExtraBold text-[#6ecff6] text-[clamp(42px,5vw,70px)] leading-tight mb-6 laptop:mb-4 mobile:text-[28px]">
                        TUPY Distributors in the Middle East
                    </h1>
                    <p class="font-YekanRegular text-[#c8d8ea] text-[clamp(15px,1.4vw,20px)] mobile:text-[14px] leading-[2] text-justify">
                        Genuine TUPY fittings, held in stock in Dubai and supplied to distributors,
                        contractors and project buyers across the Gulf and Iraq.
                    </p>
                </div>

            </div>
        </div>
    </section>


    <!-- Markets served from Dubai -->

    <section class="py-10 mobile:py-6">
        <div class="container mx-auto px-6 mobile:px-4">

            <div class="border-2 border-[#1e3a5f] tablet:border-0 rounded-3xl p-14 desktop:p-8 laptop:p-6 tablet:p-5 mobile:p-4">

                <div class="flex flex-col gap-3 mb-8">
                    <h2 class="font-YekanExtraBold text-[#6ecff6] text-[30px] laptop:text-[24px] mobile:text-[20px]">
                        Markets served from Dubai
                    </h2>
                    <p class="font-YekanRegular text-[#c8d8ea] text-[16px] mobile:text-[14px] leading-[2]">
                        Amini Building Materials Trading L.L.C is the exclusive agent of TUPY S.A. in the Middle East.
                        Stock is held in Dubai &mdash; BSP threaded fittings, NPT Class 150 and 300 and the TUPYPRES
                        press system, galvanised and black &mdash; and supplied to distributors, contractors and
                        project buyers across the region.
                    </p>
                </div>

                <div class="grid grid-cols-3 gap-6 desktop:grid-cols-2 tablet:grid-cols-1">

                    <div class="border border-[#1e3a5f] rounded-xl px-4 py-4 mobile:px-3 mobile:py-3 flex items-center hover:border-[#6ecff6] transition-colors duration-200">
                        <div class="flex flex-col gap-1">
                            <h4 class="font-YekanExtraBold text-[#6ecff6] text-[16px] mobile:text-[14px]">United Arab Emirates</h4>
                            <p class="font-YekanRegular text-[#a0b4c8] text-[11px] mobile:text-[10px]">Stock held in Dubai. Complete BSP, NPT and TUPYPRES range.</p>
                        </div>
                    </div>

                    <div class="border border-[#1e3a5f] rounded-xl px-4 py-4 mobile:px-3 mobile:py-3 flex items-center hover:border-[#6ecff6] transition-colors duration-200">
                        <div class="flex flex-col gap-1">
                            <h4 class="font-YekanExtraBold text-[#6ecff6] text-[16px] mobile:text-[14px]">Iraq</h4>
                            <p class="font-YekanRegular text-[#a0b4c8] text-[11px] mobile:text-[10px]">Supplied from Dubai stock to distributors and contractors.</p>
                        </div>
                    </div>

                    <div class="border border-[#1e3a5f] rounded-xl px-4 py-4 mobile:px-3 mobile:py-3 flex items-center hover:border-[#6ecff6] transition-colors duration-200">
                        <div class="flex flex-col gap-1">
                            <h4 class="font-YekanExtraBold text-[#6ecff6] text-[16px] mobile:text-[14px]">Saudi Arabia</h4>
                            <p class="font-YekanRegular text-[#a0b4c8] text-[11px] mobile:text-[10px]">Supplied from Dubai stock.</p>
                        </div>
                    </div>

                    <div class="border border-[#1e3a5f] rounded-xl px-4 py-4 mobile:px-3 mobile:py-3 flex items-center hover:border-[#6ecff6] transition-colors duration-200">
                        <div class="flex flex-col gap-1">
                            <h4 class="font-YekanExtraBold text-[#6ecff6] text-[16px] mobile:text-[14px]">Oman</h4>
                            <p class="font-YekanRegular text-[#a0b4c8] text-[11px] mobile:text-[10px]">Supplied from Dubai stock.</p>
                        </div>
                    </div>

                    <div class="border border-[#1e3a5f] rounded-xl px-4 py-4 mobile:px-3 mobile:py-3 flex items-center hover:border-[#6ecff6] transition-colors duration-200">
                        <div class="flex flex-col gap-1">
                            <h4 class="font-YekanExtraBold text-[#6ecff6] text-[16px] mobile:text-[14px]">Qatar</h4>
                            <p class="font-YekanRegular text-[#a0b4c8] text-[11px] mobile:text-[10px]">Supplied from Dubai stock.</p>
                        </div>
                    </div>

                    <div class="border border-[#1e3a5f] rounded-xl px-4 py-4 mobile:px-3 mobile:py-3 flex items-center hover:border-[#6ecff6] transition-colors duration-200">
                        <div class="flex flex-col gap-1">
                            <h4 class="font-YekanExtraBold text-[#6ecff6] text-[16px] mobile:text-[14px]">Kuwait</h4>
                            <p class="font-YekanRegular text-[#a0b4c8] text-[11px] mobile:text-[10px]">Supplied from Dubai stock.</p>
                        </div>
                    </div>

                    <div class="border border-[#1e3a5f] rounded-xl px-4 py-4 mobile:px-3 mobile:py-3 flex items-center hover:border-[#6ecff6] transition-colors duration-200">
                        <div class="flex flex-col gap-1">
                            <h4 class="font-YekanExtraBold text-[#6ecff6] text-[16px] mobile:text-[14px]">Bahrain</h4>
                            <p class="font-YekanRegular text-[#a0b4c8] text-[11px] mobile:text-[10px]">Supplied from Dubai stock.</p>
                        </div>
                    </div>

                </div>

                <p class="font-YekanRegular text-[#a0b4c8] text-[13px] mobile:text-[12px] leading-[2] mt-8">
                    Buying from a market that is not listed here? Send the enquiry form below and our Dubai office
                    will come back to you on stock, lead time and shipping.
                </p>

            </div>

        </div>
    </section>

    
    <!-- Distributor / project enquiry form -->

    <section class="py-8">
        <div class="container mx-auto">
            <div class="my-10 gap-4 flex flex-col">
                <h3 class="text-[#6ecff6] text-[34px] laptop:text-[28px] tablet:text-[24px] tablet:text-center font-YekanExtraBold">Distributor and project enquiries</h3>
                <p class="text-[#c8d8ea] font-YekanMedium text-[24px] laptop:text-[20px] tablet:text-[14px] tablet:text-center mt-2">
                    If your company supplies, distributes or sells building services and industrial equipment, or you are buying TUPY fittings for a project, fill in the form below. Our Dubai office will review the enquiry and come back to you on range, stock position and terms.
                </p>
            </div>

            <form method="post" id="repForm"
            class="border border-[#1e2c42] rounded-[22px]
                    p-11 desktop:p-9 laptop:p-8 tablet:p-6">

                    {% csrf_token %}

                <!-- information -->
                
                <div class="mb-1">
                    <div class="flex items-center gap-3 mb-6">
                    <div class="w-[34px] h-[34px] rounded-[9px] border border-[#6ecff6] flex items-center justify-center text-[#6ecff6] shrink-0">
                        <svg viewBox="0 0 24 24" fill="none" class="w-[17px] h-[17px]">
                        <rect x="4" y="9" width="16" height="11" rx="1.5" stroke="currentColor" stroke-width="1.8"/>
                        <path d="M9 9V6a3 3 0 0 1 6 0v3" stroke="currentColor" stroke-width="1.8"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="font-YekanExtraBold text-[18.5px] text-[#f4f6fa] m-0">Company details</h2>
                        <span class="block font-YekanLight text-[12px] text-[#7c8ba3] mt-0.5">Your organisation and how to reach you</span>
                    </div>
                    </div>

                    <div class="grid grid-cols-2 gap-5 tablet:grid-cols-1 tablet:gap-4">
                    <div class="flex flex-col gap-2">
                        <label for="companyName" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">Company name</label>
                        <input required name="company_name" type="text" id="companyName" placeholder="Registered company name"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="fullName" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">Full name</label>
                        <input required name="full_name" type="text" id="fullName" placeholder="Name of the contact person"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="phone" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">Phone number</label>
                        <input required name="phone" type="tel" id="phone" placeholder="Include the country code"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="email" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">Email</label>
                        <input required name="email" type="email" id="email" placeholder="name@company.com"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="province" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">Country</label>
                        <input required name="province" type="text" id="province" placeholder="e.g. United Arab Emirates"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="city" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">City</label>
                        <input required name="city" type="text" id="city" placeholder="e.g. Dubai"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>
                    </div>
                </div>

                <div class="flex items-center gap-2.5 my-7" dir="ltr">
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                    <div class="w-1.5 h-1.5 rounded-full border border-[#6ecff6] shrink-0"></div>
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                </div>

                <!-- Information -->

                <div class="mb-1">
                    <div class="flex items-center gap-3 mb-6">
                    <div class="w-[34px] h-[34px] rounded-[9px] border border-[#6ecff6] flex items-center justify-center text-[#6ecff6] shrink-0">
                        <svg viewBox="0 0 24 24" fill="none" class="w-[17px] h-[17px]">
                        <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.8"/>
                        <path d="M12 4a12 12 0 0 1 0 16M12 4a12 12 0 0 0 0 16M4 12h16" stroke="currentColor" stroke-width="1.6"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="font-YekanExtraBold text-[18.5px] text-[#f4f6fa] m-0">Business details</h2>
                        <span class="block font-YekanLight text-[12px] text-[#7c8ba3] mt-0.5">Where we can read about your company</span>
                    </div>
                    </div>

                    <div class="grid grid-cols-2 gap-5 tablet:grid-cols-1 tablet:gap-4">
                    <div class="col-span-2 tablet:col-span-1 flex flex-col gap-2">
                        <label for="website" class="font-YekanRegular text-[13.5px] text-[#c7d1e0] flex items-center gap-1.5">
                        Website <span class="font-YekanLight text-[11px] text-[#7c8ba3]">(optional)</span>
                        </label>
                        <input name="website" type="url" id="website" placeholder="https://example.com"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>
                    </div>
                </div>

                <div class="flex items-center gap-2.5 my-7" dir="ltr">
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                    <div class="w-1.5 h-1.5 rounded-full border border-[#6ecff6] shrink-0"></div>
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                </div>

                <!-- Experience and market -->

                <div class="mb-1">
                    <div class="flex items-center gap-3 mb-6">
                    <div class="w-[34px] h-[34px] rounded-[9px] border border-[#6ecff6] flex items-center justify-center text-[#6ecff6] shrink-0">
                        <svg viewBox="0 0 24 24" fill="none" class="w-[17px] h-[17px]">
                        <path d="M4 20V10M10 20V4M16 20V13M22 20H2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="font-YekanExtraBold text-[18.5px] text-[#f4f6fa] m-0">Experience and market</h2>
                        <span class="block font-YekanLight text-[12px] text-[#7c8ba3] mt-0.5">Your track record and the area you cover</span>
                    </div>
                    </div>

                    <div class="grid grid-cols-2 gap-5 tablet:grid-cols-1 tablet:gap-4">
                    <div class="flex flex-col gap-2">
                        <label for="years" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">How many years have you worked in building services and industrial piping?</label>
                        <input required name="years" type="number" min="0" id="years" placeholder="e.g. 5"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label for="brands" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">Which brands do you currently carry?</label>
                        <input required name="brands" type="text" id="brands" placeholder="Brand or brands"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>

                    <div class="col-span-2 tablet:col-span-1 flex flex-col gap-2">
                        <label for="coverage" class="font-YekanRegular text-[13.5px] text-[#c7d1e0]">Which countries or cities do you cover?</label>
                        <input required name="coverage" type="text" id="coverage" placeholder="e.g. Dubai, Abu Dhabi, Sharjah"
                        class="w-full bg-transparent border border-[#6ecff6] rounded-[10px] px-4 py-3.5 text-[#f4f6fa] font-YekanRegular text-sm
                                outline-none placeholder:text-[#7c8ba3] placeholder:font-YekanLight
                                hover:border-[#6ecff6] focus:border-[#6ecff6] focus:ring-4 focus:ring-[#6ecff6]/15 transition">
                    </div>
                    </div>
                </div>

                <div class="flex items-center gap-2.5 my-7" dir="ltr">
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                    <div class="w-1.5 h-1.5 rounded-full border border-[#6ecff6] shrink-0"></div>
                    <div class="flex-1 h-px bg-gradient-to-r from-transparent via-[#2a3c58] to-transparent"></div>
                </div>

                <!-- Capabilities -->

                <div class="mb-1">
                    <div class="flex items-center gap-3 mb-6">
                    <div class="w-[34px] h-[34px] rounded-[9px] border border-[#6ecff6] flex items-center justify-center text-[#6ecff6] shrink-0">
                        <svg viewBox="0 0 24 24" fill="none" class="w-[17px] h-[17px]">
                        <path d="M3 9l9-6 9 6-9 6-9-6z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
                        <path d="M3 9v6l9 6 9-6V9" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="font-YekanExtraBold text-[18.5px] text-[#f4f6fa] m-0">Capability</h2>
                        <span class="block font-YekanLight text-[12px] text-[#7c8ba3] mt-0.5">The logistics you already have in place</span>
                    </div>
                    </div>

                    <div class="flex items-center gap-4 flex-wrap">
                    <label class="font-YekanRegular text-sm text-[#c7d1e0] me-1">Do you hold warehouse stock?</label>
                    <div class="inline-flex border border-[#1c5d9f] rounded-full p-1 gap-1">
                        <input name="warehouse" value="yes" type="radio" name="warehouse" id="wh-yes" class="hidden peer/yes" checked>
                        <label for="wh-yes"
                        class="px-6 py-2 rounded-full border border-transparent font-YekanRegular text-[13.5px] text-[#7c8ba3] cursor-pointer transition
                                peer-checked/yes:border-[#1c5d9f] peer-checked/yes:text-[#f4f6fa] peer-checked/yes:font-YekanDemiBold">Yes</label>

                        <input name="warehouse" value="no" type="radio" name="warehouse" id="wh-no" class="hidden peer/no">
                        <label for="wh-no"
                        class="px-6 py-2 rounded-full border border-transparent font-YekanRegular text-[13.5px] text-[#7c8ba3] cursor-pointer transition
                                peer-checked/no:border-[#1c5d9f] peer-checked/no:text-[#f4f6fa] peer-checked/no:font-YekanDemiBold">No</label>
                    </div>
                    </div>
                </div>

                <!-- submit -->

                <div class="mt-10 flex flex-col items-center gap-3.5">
                    <button type="submit"
                    class="w-full bg-transparent border-2 border-[#1c5d9f] rounded-[10px] text-[#f4f6fa]
                            font-YekanRegular text-base py-4 flex items-center justify-center gap-2.5
                            hover:bg-[#1c5d9f]/10 active:bg-[#1c5d9f]/20 transition group">
                    Send enquiry
                        <svg viewBox="0 0 24 24" fill="none" class="w-[18px] h-[18px] transition">
                            <path d="M5 12h14M12 5l7 7-7 7" stroke="#f4f6fa" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                    <p class="font-YekanLight text-xs text-[#7c8ba3] text-center m-0">
                    Your details stay confidential and are used only to assess this enquiry.
                    </p>
                </div>

            </form>

        </div>

        {% if messages %}
            {% for message in messages %}
                {% if message.tags == 'success' %}
                    <script>
                        window.successMessage = "{{ message|escapejs }}";
                    </script>
                {% endif %}
            {% endfor %}
        {% endif %}

    </section>

    {% endblock %}


    <br><br><br>


    {% block js %}

    <script>
    (function () {
      var popup = document.getElementById('popup');
      if (!popup || !window.successMessage) { return; }
      popup.textContent = window.successMessage;
      popup.classList.add('show');
      setTimeout(function () { popup.classList.remove('show'); }, 3000);
    })();
    </script>

    {% endblock %}