{{ attach_library('mwrd_theme/reservoir-map') }}

<div class="bg-white border-t border-gray-200">
  <section id="gis-map-section" class="py-16 bg-white relative z-20"
    data-reservoir-map
    data-endpoint="{{ path('mwrd_reservoir.data') }}"
    data-tiles="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
    data-attribution="&copy; OpenStreetMap contributors"
    data-unit="TMC"
    data-refresh="{{ paragraph.field_refresh_seconds.value ?? 300 }}"
    data-error-text="{{ 'Live data is temporarily unavailable.'|t }}"
    data-label-normal="{{ 'Normal'|t }}"
    data-label-monitor="{{ 'Monitor'|t }}"
    data-label-alert="{{ 'Alert'|t }}"
    data-label-critical="{{ 'Critical'|t }}"
    data-label-updated="{{ 'Updated'|t }}">
    <div class="max-w-container mx-auto px-6 md:px-10">

      <div class="flex items-center justify-between mb-6 pb-4 border-b border-gray-200">
        <div>
          {% if paragraph.field_tag.value %}
            <div class="flex items-center gap-2 mb-1">
              <span class="w-3 h-3 rounded-full bg-teal"></span>
              <span class="text-xs font-bold text-teal uppercase tracking-widest">{{ paragraph.field_tag.value }}</span>
            </div>
          {% endif %}
          <h2 class="text-2xl md:text-3xl font-bold text-navy tracking-tight m-0">{{ paragraph.field_title.value }}</h2>
        </div>
            {% if paragraph.field_badge.value %}
            <span class="hidden sm:inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-navy text-xs font-bold">
                <span class="material-symbols-outlined text-sm text-teal">map</span>
                {{ paragraph.field_badge.value|striptags|trim }}
            </span>
            {% endif %}
      </div>

            {% if paragraph.field_description.value %}
            <p class="text-gray-500 text-sm font-normal leading-relaxed mb-8 max-w-3xl">
                {{ paragraph.field_description.processed|striptags|trim }}
            </p>
            {% endif %}

      <div class="flex flex-col lg:flex-row gap-8">

        {# ---------- Info panel ---------- #}
        <div class="w-full lg:w-1/3 flex flex-col gap-6">
          <div class="bg-navy rounded-3xl p-8 text-white shadow-xl relative overflow-hidden flex-grow transition-all duration-500 min-h-[380px] border border-navy-mid flex flex-col" aria-live="polite">

            <div data-dam-default class="absolute inset-0 flex flex-col items-center justify-center text-center p-8 z-10 transition-opacity duration-300">
              <span class="material-symbols-outlined text-[4rem] text-teal/40 mb-4 animate-bounce">touch_app</span>
              <p data-empty-text class="text-white/80 font-semibold text-sm m-0">{{ paragraph.field_empty_text.value }}</p>
            </div>

            <div data-dam-active class="relative z-10 opacity-0 pointer-events-none transition-opacity duration-300 flex flex-col h-full">
              <div class="flex justify-between items-start mb-6">
                <div>
                  <span data-di="district" class="text-teal text-[10px] font-bold uppercase tracking-widest"></span>
                  <h3 data-di="name" class="text-2xl font-bold text-white mt-1 mb-0"></h3>
                </div>
                <span data-di="status" class="px-3 py-1 text-[10px] font-bold uppercase tracking-widest rounded-full"></span>
              </div>

              <div class="mb-8">
                <p class="text-white/50 text-xs font-semibold uppercase tracking-wider mb-2 mt-0">{{ 'Live Storage'|t }}</p>
                <div class="flex items-end gap-2">
                  <span data-di="live" class="text-5xl font-bold text-white leading-none">0%</span>
                  <span class="text-white/50 font-bold mb-1">{{ 'of Capacity'|t }}</span>
                </div>
                <div class="w-full h-2 bg-white/10 rounded-full mt-4 overflow-hidden">
                  <div data-di="progress" class="h-full bg-teal rounded-full transition-all duration-1000 ease-out w-0"></div>
                </div>
              </div>

              <div class="grid grid-cols-2 gap-4 mt-auto">
                <div class="bg-white/5 rounded-xl p-4 border border-white/10 hover:bg-white/10 transition-colors">
                  <span class="material-symbols-outlined text-teal/70 mb-2 text-xl">water</span>
                  <p class="text-white/40 text-[10px] font-bold uppercase tracking-widest mb-1 mt-0">{{ 'River Basin'|t }}</p>
                  <p data-di="river" class="text-white font-bold text-sm m-0"></p>
                </div>
                <div class="bg-white/5 rounded-xl p-4 border border-white/10 hover:bg-white/10 transition-colors">
                  <span class="material-symbols-outlined text-teal/70 mb-2 text-xl">straighten</span>
                  <p class="text-white/40 text-[10px] font-bold uppercase tracking-widest mb-1 mt-0">{{ 'Total Capacity'|t }}</p>
                  <p data-di="capacity" class="text-white font-bold text-sm m-0"></p>
                </div>
              </div>
              <p data-di="updated" class="text-[10px] text-white/40 mt-4 mb-0"></p>
            </div>

            <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-white/5 rounded-full blur-3xl pointer-events-none"></div>
          </div>
        </div>

        {# ---------- Map ---------- #}
        <div class="w-full lg:w-2/3 bg-white rounded-3xl border border-gray-200 relative overflow-hidden min-h-[480px] shadow-sm">
          <div data-map-canvas class="absolute inset-0 z-0" role="region" aria-label="{{ paragraph.field_title.value }}"></div>
        </div>
      </div>
    </div>
  </section>
</div>