{# ============================================================================
   organisms.html — Jinja macros for every block-level / page-region organism

   Phase A: all organisms live in one file for composition-pipeline proof.
   Phase B (follow-up): split into organisms/{type}/{variation}.html per
   variation so the block catalog stays scannable.

   Import: `{% from 'organisms.html' import nav, hero_type_first, footer_brand %}`
   ============================================================================ #}

{% from 'atoms.html' import wordmark, glyph, arrow, link_arrow, browser_dots, media_box, cert_badge, input %}
{% from 'molecules.html' import nav_links, inline_form, faq_row, feature_card, testimonial_card, product_panel, publication_card, process_step, compliance_pills, sequencing_step, partner_card, reason_card %}

{# =====================================================================
   HEADER REGION — top-strip, compliance-pills, nav, subnav
   ===================================================================== #}

{# top-strip — product switcher + URL bar at the very top #}
{% macro top_strip(products, url) -%}
<div class="wf-top-strip">
  <div class="wf-products">
    {% for p in products -%}
      <span class="wf-product{% if p.active %} active{% endif %}">{{ p.name }}</span>
    {% endfor -%}
  </div>
  <div class="wf-url-bar">
    <span>{{ url }}</span>
    {{ browser_dots() }}
  </div>
</div>
{%- endmacro %}

{# nav/row-simple — wordmark + links + CTA. The default nav variation.
   cta: {type: 'link' | 'button', label: str, glyph_char?: str} #}
{% macro nav_row_simple(brand, brand_glyph, links, active_index, cta) -%}
<nav class="wf-nav">
  {{ wordmark(brand=brand, glyph_char=brand_glyph) }}
  {{ nav_links(items=links, active_index=active_index) }}
  <div>
    {% if cta.type == 'link' %}{{ link_arrow(cta.label) }}{% else %}<button class="wf-btn small">{{ cta.label }}</button>{% endif %}
  </div>
</nav>
{%- endmacro %}

{# subnav — annotation band + inline-form. The tinted row under main nav #}
{% macro subnav(annotation, form_placeholder='Enter Email to receive a sample report') -%}
<div class="wf-subnav">
  <div>{{ annotation }}</div>
  <div class="wf-subnav-right">
    {{ inline_form(placeholder=form_placeholder, with_icon=false) }}
  </div>
</div>
{%- endmacro %}

{# =====================================================================
   HERO REGION — variations of the opener
   ===================================================================== #}

{# hero/type-first — editorial-posture hero. Huge H1 left, meta-pointer right.
   headline_lines: list of strings, one per visual line (enables <br>)
   meta: {arrow: '→→', label: '…', body_paragraphs: [str, str]} #}
{% macro hero_type_first(headline_lines, meta) -%}
<section class="wf-block wide">
  <div class="wf-inner">
    <div class="wf-hero">
      <div>
        <h1 class="wf-display">{% for line in headline_lines %}{{ line }}{% if not loop.last %}<br>{% endif %}{% endfor %}</h1>
      </div>
      <div class="wf-hero-right">
        <div class="wf-meta-pointer">{{ arrow(meta.arrow|default('→→')) }}<span>{{ meta.label }}</span></div>
        {% for p in meta.body_paragraphs -%}
          <p class="wf-body">{{ p|safe }}</p>
        {% endfor -%}
      </div>
    </div>
    {%- if caller is defined %}{{ caller() }}{% endif -%}
  </div>
</section>
{%- endmacro %}

{# feature-strip/six-col — row of 6 feature-cards with hairline separators.
   items: list of {title, body} #}
{% macro feature_strip_six_col(items) -%}
<div class="wf-feature-strip">
  {% for it in items -%}
    {{ feature_card(title=it.title, body=it.body) }}
  {% endfor -%}
</div>
{%- endmacro %}

{# =====================================================================
   SUPPORTING STATEMENT + SEQUENCING FLOW
   ===================================================================== #}

{# statement-flow/four-step — big asymmetric H2 + right-side 4-step sequencing #}
{% macro statement_flow_four_step(statement_html, sequencing_label, steps) -%}
<section class="wf-block">
  <div class="wf-inner">
    <div class="wf-statement-row">
      <h2 class="wf-statement">{{ statement_html|safe }}</h2>
      <div class="wf-sequencing">
        <div class="wf-sequencing-head">{{ arrow('→→') }}<span>{{ sequencing_label }}</span></div>
        <div class="wf-sequencing-steps">
          {% for s in steps -%}
            {{ sequencing_step(label=s.label, body=s.body) }}
          {% endfor -%}
        </div>
      </div>
    </div>
  </div>
</section>
{%- endmacro %}

{# =====================================================================
   REASONS / WHY GRID
   ===================================================================== #}

{# reasons/six-col — H2 head + 6-col card grid.
   head: {label, title_html, right_cta: {label, variant}}
   items: list of {title, body} #}
{% macro reasons_six_col(head, items) -%}
<section class="wf-block">
  <div class="wf-inner">
    <div class="wf-reasons-head">
      <h2 class="wf-h2">{{ head.title_html|safe }}</h2>
      <div style="display: flex; justify-content: flex-end; align-items: flex-end;">
        {% if head.right_cta %}{{ link_arrow(head.right_cta.label) }}{% endif %}
      </div>
    </div>
    <div class="wf-reasons-grid">
      {% for it in items -%}
        {{ reason_card(title=it.title, body=it.body) }}
      {% endfor -%}
    </div>
  </div>
</section>
{%- endmacro %}

{# =====================================================================
   MODULES GRID — dark product panels
   ===================================================================== #}

{# modules/dark-grid — 2 top panels + 2 smaller panels + optional wide bottom panel.
   head: {label, title}
   panels: list of {name_html, desc_html, variant ('dark'|'dark-sm'|'light'), link_label}
   head_right_label: CTA link on right of head #}
{% macro modules_dark_grid(head, panels, head_right_label='Explore all') -%}
<section class="wf-block">
  <div class="wf-inner">
    <div class="wf-modules-head">
      <h2 class="wf-h2">{{ head.title }}</h2>
      {{ link_arrow(head_right_label) }}
    </div>
    <div class="wf-modules-grid">
      {% for p in panels -%}
        {{ product_panel(name_html=p.name_html, desc_html=p.desc_html, variant=p.variant|default('dark'), link_label=p.link_label|default('Learn more')) }}
      {% endfor -%}
    </div>
  </div>
</section>
{%- endmacro %}

{# =====================================================================
   TESTIMONIALS
   ===================================================================== #}

{# testimonials/3-col — H2 head + 3-column grid of testimonial cards.
   items: list of {quote_html, name, title_company} #}
{% macro testimonials_3_col(title, items) -%}
<section class="wf-block">
  <div class="wf-inner">
    <h2 class="wf-h2" style="margin-bottom: 20px;">{{ title }}</h2>
    <div class="wf-testimonial-grid">
      {% for it in items -%}
        {{ testimonial_card(quote_html=it.quote_html, name=it.name, title_company=it.title_company) }}
      {% endfor -%}
    </div>
  </div>
</section>
{%- endmacro %}

{# =====================================================================
   PARTNERS
   ===================================================================== #}

{# partners/3-col — H2 head + 3-col grid #}
{% macro partners_3_col(title, items) -%}
<section class="wf-block">
  <div class="wf-inner">
    <h2 class="wf-h2" style="margin-bottom: 20px;">{{ title }}</h2>
    <div class="wf-partner-grid">
      {% for it in items -%}
        {{ partner_card(title=it.title, body_html=it.body_html) }}
      {% endfor -%}
    </div>
  </div>
</section>
{%- endmacro %}

{# =====================================================================
   PUBLICATIONS
   ===================================================================== #}

{# publications/2-col — H2 head + 2-col article cards.
   items: list of {tag, date_meta, title, excerpt} #}
{% macro publications_2_col(head, items, head_right_label='All publications') -%}
<section class="wf-block">
  <div class="wf-inner">
    <div class="wf-publications-head">
      <h2 class="wf-h2">{{ head.title }}</h2>
      {{ link_arrow(head_right_label) }}
    </div>
    <div class="wf-publications-grid">
      {% for it in items -%}
        {{ publication_card(tag=it.tag, date_meta=it.date_meta, title=it.title, excerpt=it.excerpt) }}
      {% endfor -%}
    </div>
  </div>
</section>
{%- endmacro %}

{# =====================================================================
   FAQ ACCORDION
   ===================================================================== #}

{# faq/2-col — H2 head + 2-col grid of accordion rows.
   items: list of {question_html} strings. Each rendered as a faq_row molecule. #}
{% macro faq_2_col(title, items, head_right_label='All FAQs') -%}
<section class="wf-block">
  <div class="wf-inner">
    <div class="wf-faq-head">
      <h2 class="wf-h2">{{ title }}</h2>
      {{ link_arrow(head_right_label) }}
    </div>
    <div class="wf-faq-grid">
      {% for it in items -%}
        {{ faq_row(question_html=it) }}
      {% endfor -%}
    </div>
  </div>
</section>
{%- endmacro %}

{# =====================================================================
   FOOTER REGION — brand-note, compliance-line, footer-inline-form, footer-brand, cert-row, demo-row, copyright
   ===================================================================== #}

{# brand-note — huge red-▲ declaration (e.g., "▲ Example Studio is registered with…") #}
{% macro brand_note(brand_html, body_html) -%}
<div class="wf-brand-note">
  {{ brand_html|safe }} {{ body_html|safe }}
</div>
{%- endmacro %}

{# compliance-line — the paired legal-line below brand-note (no ▲) #}
{% macro compliance_line(brand_html, body_html) -%}
<div class="wf-compliance-line">
  {{ brand_html|safe }} {{ body_html|safe }}
</div>
{%- endmacro %}

{# footer-inline-form — full-width email-submit row with icon block #}
{% macro footer_inline_form(placeholder='Enter Email to receive a sample report') -%}
<div class="wf-footer-inline">
  {{ inline_form(placeholder=placeholder, with_icon=true) }}
</div>
{%- endmacro %}

{# footer-brand — left body paragraph + right XL wordmark.
   body_html: paragraph (may embed small wordmarks inline)
   wordmark_brand / wordmark_glyph_char: the XL wordmark content #}
{% macro footer_brand(body_html, wordmark_brand, wordmark_glyph_char='') -%}
<div class="wf-footer-brand">
  <div class="wf-footer-body">
    <p>{{ body_html|safe }}</p>
  </div>
  <div class="wf-wordmark-block">
    {{ wordmark(brand=wordmark_brand, glyph_char=wordmark_glyph_char, size='xl') }}
  </div>
</div>
{%- endmacro %}

{# cert-row — brand-name left / cert-badge right #}
{% macro cert_row(brand_text, badge_lines) -%}
<div class="wf-cert-row">
  <div class="wf-cert-brand">{{ brand_text }}</div>
  {{ cert_badge(lines=badge_lines) }}
</div>
{%- endmacro %}

{# demo-row — Request Demo CTA left + UI Image Snippet placeholder right #}
{% macro demo_row(cta_label='Request Demo', snippet_label='UI Image Snippet') -%}
<div class="wf-demo-row">
  <div class="wf-demo-left">
    <span class="wf-demo-cta">{{ cta_label }}</span>
  </div>
  <div class="wf-ui-snippet">{{ snippet_label }}</div>
</div>
{%- endmacro %}

{# copyright — bottom bar #}
{% macro copyright(left, right_links) -%}
<div class="wf-copyright">
  <div>{{ left }}</div>
  <div>
    {% for link in right_links -%}
      <a class="wf-nav-link">{{ link }}</a>{% if not loop.last %} &nbsp;&middot;&nbsp; {% endif %}
    {% endfor -%}
  </div>
</div>
{%- endmacro %}