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

{% block title %}<title>{% if fitting.seo_title %}{{ fitting.seo_title }}{% else %}{{ fitting.name }} توپی برزیل | فیگور {{ fitting.figure }}{% endif %}</title>{% endblock %}

{% block meta %}
<meta name="description" content="{% if fitting.meta_description %}{{ fitting.meta_description }}{% else %}{{ fitting.name }} توپی برزیل، فیگور {{ fitting.figure }}، سایز {{ fitting.sizes }}، {{ fitting.get_finish_display }}.{% endif %}">
<meta property="og:type" content="product">
<meta property="og:title" content="{% if fitting.seo_title %}{{ fitting.seo_title }}{% else %}{{ fitting.name }} توپی برزیل | فیگور {{ fitting.figure }}{% endif %}">
<meta property="og:description" content="{% if fitting.meta_description %}{{ fitting.meta_description }}{% else %}{{ fitting.name }} توپی برزیل، فیگور {{ fitting.figure }}، سایز {{ fitting.sizes }}، {{ fitting.get_finish_display }}.{% endif %}">
{% if fitting.image %}<meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ fitting.image.url }}">{% endif %}
<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "Product",
  "name": "{{ fitting.name|escapejs }} توپی برزیل",
  "sku": "{{ sku_en|escapejs }}",
  "mpn": "{{ fig_en|escapejs }}",
  "description": "{{ fitting.intro|escapejs }}",
  "brand": { "@type": "Brand", "name": "TUPY" },
  "manufacturer": { "@type": "Organization", "name": "TUPY", "url": "https://www.tupy.com.br/" },
  "material": "چدن چکش‌خوار",
  "category": "اتصالات لوله",
{% if fitting.image %}  "image": ["{{ request.scheme }}://{{ request.get_host }}{{ fitting.image.url }}"],{% endif %}
  "additionalProperty": [
    { "@type": "PropertyValue", "name": "شماره فیگور", "value": "{{ fitting.figure|escapejs }}" },
    { "@type": "PropertyValue", "name": "بازه سایز", "value": "{{ fitting.sizes|escapejs }}" },
    { "@type": "PropertyValue", "name": "نوع رزوه", "value": "{{ fitting.thread|escapejs }}" },
    { "@type": "PropertyValue", "name": "استاندارد", "value": "{{ fitting.standard|escapejs }}" }
  ],
  "url": "{{ request.scheme }}://{{ request.get_host }}{{ fitting.get_absolute_url }}" }
</script>
<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "خانه", "item": "{{ request.scheme }}://{{ request.get_host }}/" },
    { "@type": "ListItem", "position": 2, "name": "محصولات", "item": "{{ request.scheme }}://{{ request.get_host }}/products" },
    { "@type": "ListItem", "position": 3, "name": "{{ fitting.name|escapejs }}" }
  ] }
</script>
<script type="application/ld+json">
{% if faqs %}{ "@context": "https://schema.org", "@type": "FAQPage",
"mainEntity": [
{% for f in faqs %}{ "@type": "Question", "name": "{{ f.q|escapejs }}",
"acceptedAnswer": { "@type": "Answer", "text": "{{ f.a|escapejs }}" } }{% if not forloop.last %},{% endif %}
{% endfor %}] }{% endif %}
</script>
{% endblock %}

{% block content %}
<style>
:root{--fam:{{ fam_color }};--fam-ink:{{ fam_ink }}}
.fx{max-width:1200px;margin:0 auto;padding:0 20px;direction:rtl}
.fx-card{background:#061b3e;border:2px solid var(--fam);border-radius:32px;padding:34px;margin-top:26px}
.fx-panel{border:2px solid var(--fam);border-radius:24px;display:flex;align-items:center;justify-content:center;padding:22px}
.fx-crumb{font-size:14px;color:#c8d8ea;padding-top:28px;display:flex;gap:8px;flex-wrap:wrap}
.fx-crumb a{color:#c8d8ea;text-decoration:none}.fx-crumb a:hover{color:var(--fam)}.fx-crumb .cur{color:var(--fam)}.fx-crumb .sep{color:#4a5a6e}
.fx-hero{display:flex;gap:36px;align-items:center}
.fx-hero .img{flex:0 0 34%;height:300px}
.fx-hero .img img{max-width:100%;max-height:100%;object-fit:contain}
.fx-hero .txt{flex:1 1 auto;min-width:0}
.fx-fig{font-size:14px;color:#8fa3b8;display:block;margin-bottom:10px}
.fx-h1{font-size:40px;line-height:1.25;color:#fff;margin:0 0 18px}
.fx-intro{font-size:17px;line-height:2.1;color:#c8d8ea;text-align:justify;margin:0 0 28px}
.fx-btns{display:flex;gap:16px;max-width:520px}
.fx-btn{height:56px;flex:1;border-radius:10px;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:16px}
.fx-btn.primary{background:var(--fam);border:2px solid var(--fam);color:var(--fam-ink)}
.fx-btn.ghost{border:2px solid var(--fam);color:#fff}
.fx-h2{font-size:26px;color:#fff;margin:0}
.fx-rule{height:2px;background:#173059;margin:22px 0}
.fx-tbl{width:100%;border-collapse:collapse}
.fx-tbl td,.fx-tbl th{padding:14px 0}
.fx-tbl tr+tr td{border-top:1px solid #12294d}
.fx-tbl .lbl{color:#8fa3b8;font-size:15px;width:42%;text-align:right}
.fx-tbl .val{color:#fff;font-size:15px;text-align:left}
.fx-tbl thead th{color:#8fa3b8;font-size:13px;font-weight:400;padding-bottom:14px;border:0}
.fx-tbl thead th.r{text-align:right}.fx-tbl thead th.l{text-align:left}
.fx-tbl .num{color:#fff;font-size:17px;text-align:left}
.fx-tbl .dash{color:#4a5a6e;font-size:15px}
.fx-note{font-size:13px;color:#8fa3b8;line-height:2;margin:0}
.fx-meta{font-size:13px;color:#8fa3b8}
.fx-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.fx-body{font-size:17px;line-height:2.2;color:#c8d8ea;text-align:justify}
.fx-rel{display:grid;grid-template-columns:repeat(4,1fr);column-gap:34px}
.fx-rel a{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #12294d;text-decoration:none}
.fx-rel a:hover{border-bottom-color:var(--fam)}
.fx-rel .ic{width:46px;height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center}
.fx-rel .ic img{max-width:100%;max-height:100%;object-fit:contain;opacity:.75}
.fx-rel a:hover .ic img{opacity:1}
.fx-rel .nm{color:#fff;font-size:14px;line-height:1.35}
.fx-rel a:hover .nm{color:var(--fam)}
.fx-rel .fg{color:#8fa3b8;font-size:12px}
@media(max-width:1024px){.fx-hero{flex-direction:column}.fx-hero .img{flex:none;width:100%;height:260px}.fx-h1{font-size:30px}.fx-rel{grid-template-columns:repeat(2,1fr);column-gap:22px}.fx-btns{max-width:none}}
@media(max-width:640px){.fx-card{padding:20px;border-radius:24px}.fx-h1{font-size:23px}.fx-h2{font-size:19px}.fx-intro,.fx-body{font-size:14px}.fx-btns{flex-direction:column}.fx-rel{grid-template-columns:1fr}.fx-tbl .lbl,.fx-tbl .val{font-size:13px}.fx-tbl .num{font-size:14px}}
.fx-price td{padding:19px 0;border-top:1px solid #0f2547}
.fx-price tr:first-child td{border-top:0}
.fx-price .sz{color:#c8d8ea;font-size:15px;text-align:right;width:42%}
.fx-price .num{color:#e2ebf5;font-size:16px;text-align:left;letter-spacing:.3px}
.fx-price thead th{color:#7b8a9c;font-size:12px;font-weight:400;padding-bottom:16px;border:0}
.fx-price .dash{color:#3f4d61}
@media(max-width:640px){.fx-price td{padding:14px 0}.fx-price .sz{font-size:13px}.fx-price .num{font-size:14px}}
.fx-std{display:flex;flex-wrap:wrap;gap:14px}
.fx-std-i{flex:1 1 calc(16.666% - 14px);min-width:104px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:20px 8px 16px;background:#03142f;border:1px solid #0f2547;border-radius:20px}
.fx-std-i .lg{height:54px;display:flex;align-items:center;justify-content:center}
.fx-std-i img{max-height:54px;max-width:100%;width:auto;object-fit:contain}
.fx-std-i span{color:#8fa3b8;font-size:12px;letter-spacing:.3px;text-align:center;line-height:1.5;direction:ltr}
.fx-std-n{color:#8fa3b8;font-size:14px;line-height:2.1;margin:20px 0 0;text-align:justify}
@media(max-width:1000px){.fx-std-i{flex:1 1 calc(33.333% - 14px)}}
@media(max-width:560px){.fx-std-i{flex:1 1 calc(50% - 14px)}.fx-std-i .lg{height:44px}.fx-std-i img{max-height:44px}}
.fx-faq{display:flex;flex-direction:column}
.fx-q{border-top:1px solid #0f2547}
.fx-q:first-child{border-top:0}
.fx-q summary{list-style:none;cursor:pointer;color:#fff;font-size:16px;line-height:1.7;padding:20px 0 20px 34px;position:relative;transition:color .25s ease}
.fx-q summary::-webkit-details-marker{display:none}
.fx-q summary:hover{color:var(--fam)}
.fx-q summary:after{content:"";position:absolute;left:6px;top:27px;width:9px;height:9px;border-right:1.7px solid var(--fam);border-bottom:1.7px solid var(--fam);transform:rotate(45deg);transition:transform .25s ease}
.fx-q[open] summary:after{transform:rotate(-135deg);top:31px}
.fx-q p{color:#c8d8ea;font-size:15px;line-height:2.1;margin:0 0 22px;text-align:justify}
</style>

<div class="fx">
  <nav class="fx-crumb">
    <a href="{% url 'home' %}">خانه</a><span class="sep">/</span>
    <a href="{% url 'products' %}">محصولات</a><span class="sep">/</span>
    <span class="cur">{{ fitting.name }}</span>
  </nav>

  <div class="fx-card fx-hero">
    <div class="fx-panel img">
      {% if fitting.image %}<img src="{{ fitting.image.url }}" alt="{{ fitting.name }} توپی برزیل فیگور {{ fitting.figure }}">
      {% else %}<img src="{% static 'img/products/banner.png' %}" alt="{{ fitting.name }} توپی برزیل">{% endif %}
    </div>
    <div class="txt">
      <span class="fx-fig font-YekanRegular">فیگور {{ fitting.figure }}</span>
      <h1 class="fx-h1 font-YekanExtraBold">{{ fitting.name }} توپی برزیل</h1>
      <p class="fx-intro font-YekanRegular">{{ fitting.intro }}</p>
      <div class="fx-btns">
        <a class="fx-btn primary font-YekanExtraBold" href="{% url 'representatives' %}">استعلام قیمت و خرید</a>
        <a class="fx-btn ghost font-YekanExtraBold" href="{% url 'standards' %}">استانداردها</a>
      </div>
    </div>
  </div>

  <div class="fx-card" data-anim="up">
    <h2 class="fx-h2 font-YekanExtraBold">مشخصات فنی</h2>
    <div class="fx-rule"></div>
    <table class="fx-tbl font-YekanRegular"><tbody>
      <tr><td class="lbl">شماره فیگور</td><td class="val">{{ fitting.figure }}</td></tr>
      <tr><td class="lbl">بازه سایز</td><td class="val">{{ fitting.sizes }}</td></tr>
      <tr><td class="lbl">نوع پوشش</td><td class="val">{{ fitting.get_finish_display }}</td></tr>
      <tr><td class="lbl">نوع رزوه</td><td class="val">{{ fitting.thread }}</td></tr>
      <tr><td class="lbl">استاندارد</td><td class="val">{{ fitting.standard }}</td></tr>
      <tr><td class="lbl">حداکثر فشار کاری</td><td class="val">{{ fitting.pressure }}</td></tr>
      <tr><td class="lbl">جنس</td><td class="val">چدن چکش‌خوار (Malleable Iron)</td></tr>
    </tbody></table>
  </div>

  <div class="fx-card" data-anim="up">
    <h2 class="fx-h2 font-YekanExtraBold">استانداردها و گواهینامه‌ها</h2>
    <div class="fx-rule"></div>
    <div class="fx-std">
      <div class="fx-std-i"><div class="lg"><img src="{% static 'img/ULListed.png' %}" alt="UL Listed" loading="lazy"></div><span>UL Listed</span></div>
      <div class="fx-std-i"><div class="lg"><img src="{% static 'img/fm.png' %}" alt="FM Approved" loading="lazy"></div><span>FM Approved</span></div>
      <div class="fx-std-i"><div class="lg"><img src="{% static 'img/iso.png' %}" alt="ISO" loading="lazy"></div><span>ISO</span></div>
      <div class="fx-std-i"><div class="lg"><img src="{% static 'img/abnt.png' %}" alt="ABNT" loading="lazy"></div><span>ABNT</span></div>
      <div class="fx-std-i"><div class="lg"><img src="{% static 'img/inmetro.png' %}" alt="INMETRO" loading="lazy"></div><span>INMETRO</span></div>
      <div class="fx-std-i"><div class="lg"><img src="{% static 'img/dvgw.png' %}" alt="DVGW" loading="lazy"></div><span>DVGW</span></div>
    </div>
    <p class="fx-std-n font-YekanRegular">اتصالات توپی برزیل تحت نظارت مراجع بین‌المللی بالا تولید و بازرسی می‌شوند و برای کاربرد در شبکه‌های اطفای حریق، آب و گاز دارای تأییدیه‌های معتبر جهانی هستند.</p>
  </div>


  {% if drawing_url %}
  <div class="fx-card" data-anim="up">
    <h2 class="fx-h2 font-YekanExtraBold">نقشه فنی {{ fitting.name }}</h2>
    <div class="fx-rule"></div>
    <figure style="margin:18px 0 0;text-align:center">
      <img src="{{ drawing_url }}" alt="نقشه فنی و ابعادی {{ fitting.name }} توپی برزیل - فیگور {{ fitting.figure }}"
           loading="lazy" width="900" height="900"
           style="width:100%;max-width:420px;height:auto;background:#fff;border-radius:12px;padding:18px;border:1px solid #1d3c68">
      <figcaption class="fx-std-n font-YekanRegular" style="margin-top:12px">نقشه ابعادی {{ fitting.name }} — فیگور {{ fitting.figure }}. مقادیر حروف در جدول مشخصات فنی بالا آمده است.</figcaption>
    </figure>
  </div>
  {% endif %}



  {% if dim_table %}
  <div class="fx-card" data-anim="up">
    <h2 class="fx-h2 font-YekanExtraBold">جدول ابعاد و وزن {{ fitting.name }}</h2>
    <div class="fx-rule"></div>
    <p class="fx-std-n font-YekanRegular" style="margin:12px 0 4px">حروف ابعاد مطابق نقشه فنی بالا است. وزن‌ها بر حسب کیلوگرم برای یک عدد اتصال.</p>
    <div style="overflow-x:auto;margin-top:12px">
    <table style="width:100%;border-collapse:collapse;min-width:520px">
      <thead>
        <tr>
          <th style="background:#0a2450;color:#fff;font-weight:700;font-size:12.5px;padding:9px 6px;border:1px solid #1d3c68;text-align:center;white-space:nowrap" colspan="2">قطر اسمی</th>
          <th style="background:#0a2450;color:#fff;font-weight:700;font-size:12.5px;padding:9px 6px;border:1px solid #1d3c68;text-align:center;white-space:nowrap" colspan="{{ dim_table.cols|length }}">ابعاد (میلی‌متر)</th>
          <th style="background:#0a2450;color:#fff;font-weight:700;font-size:12.5px;padding:9px 6px;border:1px solid #1d3c68;text-align:center;white-space:nowrap" colspan="2">وزن (کیلوگرم)</th>
        </tr>
        <tr>
          <th style="background:#0a2450;color:#fff;font-weight:700;font-size:12.5px;padding:9px 6px;border:1px solid #1d3c68;text-align:center;white-space:nowrap">اینچ</th>
          <th style="background:#0a2450;color:#fff;font-weight:700;font-size:12.5px;padding:9px 6px;border:1px solid #1d3c68;text-align:center;white-space:nowrap">میلی‌متر</th>
          {% for c in dim_table.cols %}<th style="background:#0a2450;color:#fff;font-weight:700;font-size:12.5px;padding:9px 6px;border:1px solid #1d3c68;text-align:center;white-space:nowrap">{{ c }}</th>{% endfor %}
          <th style="background:#0a2450;color:#fff;font-weight:700;font-size:12.5px;padding:9px 6px;border:1px solid #1d3c68;text-align:center;white-space:nowrap">گالوانیزه</th>
          <th style="background:#0a2450;color:#fff;font-weight:700;font-size:12.5px;padding:9px 6px;border:1px solid #1d3c68;text-align:center;white-space:nowrap">سیاه</th>
        </tr>
      </thead>
      <tbody>
        {% for r in dim_table.rows %}
        <tr style="background:{% cycle 'rgba(255,255,255,.02)' 'transparent' %}">
          <td style="padding:8px 6px;border:1px solid #1d3c68;color:#c8d8ea;text-align:center;font-size:13px;white-space:nowrap;color:#fff;font-weight:700">{{ r.inch }}</td>
          <td style="padding:8px 6px;border:1px solid #1d3c68;color:#c8d8ea;text-align:center;font-size:13px;white-space:nowrap">{{ r.mm }}</td>
          {% for d in r.dims %}<td style="padding:8px 6px;border:1px solid #1d3c68;color:#c8d8ea;text-align:center;font-size:13px;white-space:nowrap">{{ d }}</td>{% endfor %}
          <td style="padding:8px 6px;border:1px solid #1d3c68;color:#c8d8ea;text-align:center;font-size:13px;white-space:nowrap">{{ r.gal }}</td>
          <td style="padding:8px 6px;border:1px solid #1d3c68;color:#c8d8ea;text-align:center;font-size:13px;white-space:nowrap">{{ r.black }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    <p class="fx-std-n font-YekanRegular" style="margin-top:12px;font-size:12px">منبع: کاتالوگ رسمی اتصالات دنده‌ای توپی برزیل (BSP).</p>
  </div>
  {% endif %}

  {% if cad_files %}
  <div class="fx-card" data-anim="up">
    <h2 class="fx-h2 font-YekanExtraBold">فایل‌های CAD {{ fitting.name }}</h2>
    <div class="fx-rule"></div>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:16px">
      {% for f in cad_files %}
      <a href="{{ f.url }}" download style="display:flex;gap:12px;align-items:center;padding:13px 15px;border:1px solid #1d3c68;border-radius:12px;background:#08214a;text-decoration:none">
        <span style="flex:0 0 auto;min-width:52px;text-align:center;padding:6px 8px;border-radius:8px;background:var(--fam);color:var(--fam-ink);font-size:11px;font-weight:800;letter-spacing:.5px">{{ f.badge }}</span>
        <span><b style="display:block;color:#fff;font-size:14px;line-height:1.7">{{ f.label }}</b>
        <em style="display:block;color:#8fa3b8;font-size:11.5px;font-style:normal;line-height:1.7">{{ f.size }}</em></span>
      </a>
      {% endfor %}
    </div>
    <p class="fx-std-n font-YekanRegular" style="margin-top:14px">فایل‌های اصلی کارخانه توپی برزیل، برای استفاده در اتوکد، رویت و نرم‌افزارهای سه‌بعدی.</p>
  </div>
  {% endif %}


  <div class="fx-card" data-anim="up">
    <h2 class="fx-h2 font-YekanExtraBold">درباره {{ fitting.name }}</h2>
    <div class="fx-rule"></div>
    <div class="fx-body font-YekanRegular">{{ fitting.description|linebreaks }}</div>
  </div>

  {% if pres_video %}
  <div class="fx-card" data-anim="up">
    <h2 class="fx-h2 font-YekanExtraBold">{{ pres_video.title }}</h2>
    <div class="fx-rule"></div>
    <video class="fx-video" controls preload="metadata" playsinline poster="{{ pres_video.image.url }}">
      <source src="{{ pres_video.video.url }}" type="video/mp4">
    </video>
    {% if pres_video.description %}<p class="fx-body font-YekanRegular" style="margin-top:14px">{{ pres_video.description }}</p>{% endif %}
  </div>
  <style>.fx-video{width:100%;height:auto;display:block;border-radius:6px;background:#041430}</style>
  <script type="application/ld+json">
  {"@context":"https://schema.org","@type":"VideoObject","name":"{{ pres_video.title|escapejs }}","description":"{{ pres_video.description|default:pres_video.title|escapejs }}","thumbnailUrl":"https://tupybrazil.ir{{ pres_video.image.url }}","contentUrl":"https://tupybrazil.ir{{ pres_video.video.url }}"}
  </script>
  {% endif %}

  <div class="fx-card" data-anim="up">
    <h2 class="fx-h2 font-YekanExtraBold">پرسش‌های پرتکرار درباره {{ fitting.name }}</h2>
    <div class="fx-rule"></div>
<div class="fx-faq font-YekanRegular">
{% for f in faqs %}<details class="fx-q">
<summary>{{ f.q }}</summary>
<p>{{ f.a }}</p>
</details>
{% endfor %}</div>
  </div>

  {% if others %}
  <div class="fx-card" data-anim="up" style="margin-bottom:70px">
    <h2 class="fx-h2 font-YekanExtraBold">سایر اتصالات دنده‌ای توپی برزیل</h2>
    <div class="fx-rule"></div>
    <div class="fx-rel">
      {% for o in others %}
      <a href="{{ o.get_absolute_url }}">
        <span class="ic">{% if o.image %}<img src="{{ o.image.url }}" alt="{{ o.name }} توپی برزیل">{% endif %}</span>
        <span><span class="nm font-YekanRegular" style="display:block">{{ o.name }}</span><span class="fg font-YekanRegular">فیگور {{ o.figure }}</span></span>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}