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

{% block title %}<title>Request a Quote | TUPY Brazil Pipe Fittings</title>{% endblock %}

{% block meta %}
<meta name="description" content="Request a quotation for TUPY Brazil malleable and ductile iron pipe fittings — BSP, NPT Class 150 and 300, and TUPYPRES. Send us your figures, sizes and quantities and our Dubai office replies with price, stock and lead time.">
<meta property="og:type" content="website">
<meta property="og:title" content="Request a Quote | TUPY Brazil Pipe Fittings">
<meta property="og:description" content="Send us the figures, sizes and quantities you need. Our Dubai office replies with price, stock position and lead time.">
<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": "Request a quote" }
  ] }
</script>
{% endblock %}

{% block content %}
<style>
.rq{max-width:1200px;margin:0 auto;padding:0 20px 80px;direction:ltr}
.rq-crumb{font-size:14px;color:#c8d8ea;padding-top:28px;display:flex;gap:8px;flex-wrap:wrap}
.rq-crumb a{color:#c8d8ea;text-decoration:none}.rq-crumb a:hover{color:#6ecff6}
.rq-crumb .cur{color:#6ecff6}.rq-crumb .sep{color:#4a5a6e}
.rq-head{padding:30px 0 6px}
.rq-h1{font-size:38px;line-height:1.3;color:#fff;margin:0 0 16px}
.rq-lead{font-size:17px;line-height:2;color:#c8d8ea;margin:0;max-width:760px}
.rq-rule{height:1px;background:#173059;margin:26px 0 34px}

.rq-cols{display:grid;grid-template-columns:1.45fr 1fr;gap:26px;align-items:start}

.rq-card{background:#061b3e;border:1px solid #1d3c68;border-radius:22px;padding:30px}
.rq-card h2{font-size:21px;color:#fff;margin:0 0 6px}
.rq-card .sub{font-size:14.5px;line-height:1.9;color:#8fa3b8;margin:0 0 24px}

.rq-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rq-f{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.rq-f label{font-size:13.5px;color:#c8d8ea;letter-spacing:.01em}
.rq-f .req{color:#6ecff6}
.rq-f input,.rq-f select,.rq-f textarea{
  width:100%;background:#03142f;border:1px solid #1d3c68;border-radius:10px;
  color:#fff;font-size:15px;font-family:inherit;padding:13px 14px;
  transition:border-color .2s ease,background .2s ease;
}
.rq-f textarea{min-height:150px;resize:vertical;line-height:1.75}
.rq-f input:focus,.rq-f select:focus,.rq-f textarea:focus{
  outline:none;border-color:#6ecff6;background:#04193a;
}
.rq-f input::placeholder,.rq-f textarea::placeholder{color:#5c7189}
.rq-hint{font-size:12.5px;color:#6b8199;line-height:1.7;margin:-6px 0 18px}

.rq-submit{
  display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
  background:#6ecff6;color:#04142c;font-family:inherit;font-size:15.5px;
  padding:15px 30px;border-radius:999px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.rq-submit:hover{transform:translateY(-2px);box-shadow:0 12px 28px -14px #6ecff6}
.rq-submit svg{width:18px;height:18px}
.rq-note{font-size:12.5px;color:#6b8199;margin:16px 0 0;line-height:1.8}

.rq-side{display:flex;flex-direction:column;gap:18px}
.rq-panel{background:#03142f;border:1px solid #16325c;border-radius:22px;padding:26px}
.rq-panel h3{font-size:16px;color:#fff;margin:0 0 14px}
.rq-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.rq-list li{font-size:14px;line-height:1.8;color:#8fa3b8;padding-left:22px;position:relative}
.rq-list li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:#6ecff6}
.rq-ct{display:flex;flex-direction:column;gap:13px}
.rq-ct a,.rq-ct span.line{display:flex;align-items:flex-start;gap:11px;color:#c8d8ea;font-size:14px;text-decoration:none;line-height:1.7;transition:color .25s ease}
.rq-ct a:hover{color:#6ecff6}
.rq-ct .ci{flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:#0a2247;border:1px solid #1d3c68;display:flex;align-items:center;justify-content:center}
.rq-ct .ci svg{width:16px;height:16px;fill:#8fa3b8}
.rq-ct a:hover .ci svg{fill:#6ecff6}

.rq-flash{border-radius:16px;padding:18px 22px;margin:0 0 24px;font-size:15px;line-height:1.8}
.rq-flash.ok{background:#06301f;border:1px solid #1f7a53;color:#9fe7c4}
.rq-flash.bad{background:#33101a;border:1px solid #8a3550;color:#f0b3c2}

@media(max-width:1000px){.rq-cols{grid-template-columns:1fr}}
@media(max-width:630px){
  .rq-h1{font-size:28px}
  .rq-card,.rq-panel{padding:22px;border-radius:18px}
  .rq-row{grid-template-columns:1fr;gap:0}
  .rq-submit{width:100%;justify-content:center}
}
</style>

<div class="rq">

  <nav class="rq-crumb" aria-label="Breadcrumb">
    <a href="/">Home</a><span class="sep">/</span><span class="cur">Request a quote</span>
  </nav>

  <div class="rq-head">
    <h1 class="rq-h1 font-YekanExtraBold">Request a quote</h1>
    <p class="rq-lead font-YekanRegular">
      Tell us the figures, sizes and quantities you need and our Dubai office will
      come back to you with pricing, the stock position and a lead time. If you are
      not sure which figure you need, describe the job and we will work it out.
    </p>
  </div>

  <div class="rq-rule"></div>

  {% if messages %}
    {% for m in messages %}
      <div class="rq-flash {% if m.tags == 'error' %}bad{% else %}ok{% endif %} font-YekanRegular">{{ m }}</div>
    {% endfor %}
  {% endif %}

  <div class="rq-cols">

    <!-- Form -->
    <div class="rq-card">
      <h2 class="font-YekanBold">Your requirement</h2>
      <p class="sub font-YekanRegular">Fields marked <span class="req">*</span> are the ones we cannot quote without.</p>

      <form method="post" novalidate>
        {% csrf_token %}

        <div class="rq-row">
          <div class="rq-f">
            <label for="company">Company</label>
            <input type="text" id="company" name="company" value="{{ form.company|default:'' }}" autocomplete="organization">
          </div>
          <div class="rq-f">
            <label for="full_name">Contact person <span class="req">*</span></label>
            <input type="text" id="full_name" name="full_name" required value="{{ form.full_name|default:'' }}" autocomplete="name">
          </div>
        </div>

        <div class="rq-row">
          <div class="rq-f">
            <label for="email">Email <span class="req">*</span></label>
            <input type="email" id="email" name="email" required value="{{ form.email|default:'' }}" autocomplete="email">
          </div>
          <div class="rq-f">
            <label for="phone">Phone / WhatsApp</label>
            <input type="text" id="phone" name="phone" value="{{ form.phone|default:'' }}" placeholder="Include the country code" autocomplete="tel">
          </div>
        </div>

        <div class="rq-row">
          <div class="rq-f">
            <label for="country">Country</label>
            <input type="text" id="country" name="country" value="{{ form.country|default:'' }}" autocomplete="country-name">
          </div>
          <div class="rq-f">
            <label for="finish">Finish</label>
            <select id="finish" name="finish">
              <option value="">Not sure yet</option>
              <option value="Galvanised">Galvanised</option>
              <option value="Black">Black</option>
              <option value="Galvanised and black">Galvanised and black</option>
            </select>
          </div>
        </div>

        <div class="rq-f">
          <label for="project">Project or application</label>
          <input type="text" id="project" name="project" value="{{ form.project|default:'' }}" placeholder="Fire protection, water supply, compressed air, resale stock…">
        </div>

        <div class="rq-f">
          <label for="requirement">Figures, sizes and quantities <span class="req">*</span></label>
          <textarea id="requirement" name="requirement" required placeholder="For example:&#10;Figure 90 elbow, 1/2in, galvanised — 2,000 pcs&#10;Figure 130 tee, 3/4in, galvanised — 800 pcs&#10;Figure 340 union, 1in, black — 300 pcs">{{ form.requirement|default:'' }}</textarea>
        </div>
        <p class="rq-hint font-YekanRegular">
          One line per item is ideal. Pasting straight from your own list or BOQ is
          fine — we will read it.
        </p>

        <button type="submit" class="rq-submit font-YekanBold">
          Send request
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h14"/><path d="M13 6l6 6-6 6"/></svg>
        </button>

        <p class="rq-note font-YekanRegular">
          We use what you send here to prepare your quotation and nothing else.
        </p>
      </form>
    </div>

    <!-- Side -->
    <aside class="rq-side">

      <div class="rq-panel">
        <h3 class="font-YekanBold">What helps us quote faster</h3>
        <ul class="rq-list font-YekanRegular">
          <li>Figure numbers if you have them — the figure is on every product page.</li>
          <li>Sizes in inches, and whether you need galvanised or black.</li>
          <li>Quantities per line, even approximate ones.</li>
          <li>Where the goods are going, so we can price the freight.</li>
          <li>Your deadline, if the job has one.</li>
        </ul>
      </div>

      <div class="rq-panel">
        <h3 class="font-YekanBold">Or reach us directly</h3>
        <div class="rq-ct font-YekanRegular">
          <a href="mailto:info@abmtgroup.com">
            <span class="ci"><svg viewBox="0 0 24 24"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.24-8 4.76-8-4.76V6l8 4.76L20 6v2.24z"/></svg></span>
            <span>info@abmtgroup.com</span>
          </a>
          <a href="tel:+97142367677">
            <span class="ci"><svg viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1z"/></svg></span>
            <span>+971 4 236 7677</span>
          </a>
          <a href="https://wa.me/971569509061" target="_blank" rel="noopener">
            <span class="ci"><svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.4A10 10 0 1 0 12 2zm0 18a8 8 0 0 1-4.1-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8 8 0 1 1 12 20zm4.4-5.9c-.2-.1-1.4-.7-1.6-.8s-.4-.1-.5.1-.6.8-.7 1-.3.2-.5.1a6.5 6.5 0 0 1-3.2-2.8c-.2-.4.2-.4.6-1.2a.5.5 0 0 0 0-.5c0-.1-.5-1.3-.7-1.8s-.4-.4-.5-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.9 11.9 0 0 0 4.6 4c2.2.9 2.2.6 2.6.6a2.6 2.6 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.2z"/></svg></span>
            <span>WhatsApp +971 56 950 9061</span>
          </a>
          <span class="line">
            <span class="ci"><svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5z"/></svg></span>
            <span>Office 1703, 17th Floor, Al Masraf Building, Deira, Dubai, UAE</span>
          </span>
        </div>
      </div>

      <div class="rq-panel">
        <h3 class="font-YekanBold">Not sure what you need?</h3>
        <p class="font-YekanRegular" style="font-size:14px;line-height:1.9;color:#8fa3b8;margin:0 0 14px">
          The catalogues carry every figure with dimensions, weights and working
          pressures, and the fitting pages show pieces per carton.
        </p>
        <div class="rq-ct font-YekanRegular">
          <a href="/catalogs"><span class="ci"><svg viewBox="0 0 24 24"><path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5z"/></svg></span><span>Download Centre</span></a>
          <a href="/products#fittings"><span class="ci"><svg viewBox="0 0 24 24"><path d="M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z"/></svg></span><span>Browse all fittings</span></a>
        </div>
      </div>

    </aside>
  </div>
</div>
{% endblock %}