{# ============================================================================
   molecules.html — Jinja macros for molecule-level components

   Molecules are small combinations of atoms that appear inside organisms.
   Import: `{% from 'molecules.html' import nav_links, inline_form, faq_row %}`
   ============================================================================ #}

{% from 'atoms.html' import input, arrow, wordmark, glyph %}

{# nav-links — horizontal list of links with optional active index #}
{% macro nav_links(items, active_index=-1) -%}
<div class="wf-nav-links">
  {% for item in items -%}
    <a class="wf-nav-link{% if loop.index0 == active_index %} active{% endif %}">{{ item }}</a>
  {% endfor -%}
</div>
{%- endmacro %}

{# inline-form — email + optional icon block + submit. Used in subnav and footer #}
{% macro inline_form(placeholder='Enter Email to receive a sample report', with_icon=true, submit_label='Submit') -%}
<div class="wf-inline-form">
  {{ input(placeholder=placeholder, type='email') }}
  {% if with_icon %}<span class="wf-form-icon" aria-hidden="true"></span>{% endif %}
  <span class="wf-submit">{{ submit_label }} {{ arrow('→▪') }}</span>
</div>
{%- endmacro %}

{# faq-row — accordion question with red + toggle. `question_html` may contain <em>…</em> for bold inline terms #}
{% macro faq_row(question_html) -%}
<div class="wf-faq-row">
  <span class="wf-faq-toggle">+</span>
  <div class="wf-faq-question">{{ question_html|safe }}</div>
</div>
{%- endmacro %}

{# feature-card — column in a feature-strip. title + 1-line body #}
{% macro feature_card(title, body) -%}
<div class="wf-feature-card">
  <h3 class="wf-h3">{{ title }}</h3>
  <p class="wf-small">{{ body }}</p>
</div>
{%- endmacro %}

{# testimonial-card — quote_html may contain inline wordmark glyphs #}
{% macro testimonial_card(quote_html, name, title_company) -%}
<div class="wf-testimonial-card">
  <p class="wf-testimonial-quote">{{ quote_html|safe }}</p>
  <div class="wf-testimonial-meta">
    <strong>{{ name }}</strong>
    {{ title_company }}
  </div>
</div>
{%- endmacro %}

{# product-panel — dark (or light) product-module card.
   variant: dark (default) | light | dark-sm
   link_label: the "LEARN MORE" CTA label #}
{% macro product_panel(name_html, desc_html, variant='dark', link_label='Learn more', screen_variant='dark') -%}
{% set classes = 'wf-product-panel' %}
{% if variant == 'light' %}{% set classes = classes + ' light' %}{% endif %}
{% if 'sm' in variant %}{% set classes = classes + ' sm' %}{% endif %}
<div class="{{ classes }}">
  <div class="wf-module-info">
    <div class="wf-module-name">{{ name_html|safe }}</div>
    <p class="wf-module-desc">{{ desc_html|safe }}</p>
    <div class="wf-module-link">{{ link_label }}</div>
  </div>
  <div class="wf-media-box{% if screen_variant == 'dark' %} dark{% endif %}"></div>
</div>
{%- endmacro %}

{# publication-card — article teaser with meta-col + body-col #}
{% macro publication_card(tag, date_meta, title, excerpt) -%}
<div class="wf-publication-card">
  <div class="wf-pub-meta">
    <strong>{{ tag }}</strong>
    <span>{{ date_meta }}</span>
  </div>
  <div class="wf-pub-title">{{ title }}</div>
  <p class="wf-pub-excerpt">{{ excerpt }}</p>
</div>
{%- endmacro %}

{# process-step — numbered step in a horizontal sequence #}
{% macro process_step(num_label, title, body) -%}
<div class="wf-process-step">
  <div class="wf-step-num">{{ num_label }}</div>
  <h3 class="wf-h3">{{ title }}</h3>
  <p class="wf-body">{{ body }}</p>
</div>
{%- endmacro %}

{# compliance-pills — row of pills aligned right #}
{% macro compliance_pills(pills) -%}
<div class="wf-compliance-pills">
  {% for p in pills -%}
    <span class="wf-pill {{ p.variant|default('solid') }}">{{ p.text }}</span>
  {% endfor -%}
</div>
{%- endmacro %}

{# sequencing-step — one step in the supporting-statement flow (not a hero step) #}
{% macro sequencing_step(label, body) -%}
<div class="wf-sequencing-step">
  <div class="wf-step-label">{{ label }}</div>
  <p class="wf-small">{{ body }}</p>
</div>
{%- endmacro %}

{# partner-card — partner / collaboration block (used in partner-grid) #}
{% macro partner_card(title, body_html) -%}
<div class="wf-partner">
  <h3 class="wf-h3">{{ title }}</h3>
  <p class="wf-small">{{ body_html|safe }}</p>
</div>
{%- endmacro %}

{# reason-card — one reason in the why-grid #}
{% macro reason_card(title, body) -%}
<div class="wf-reason">
  <h3 class="wf-h3">{{ title }}</h3>
  <p class="wf-small">{{ body }}</p>
</div>
{%- endmacro %}