{# demoflow-page.module — the whole demo-flow / run-sheet page as one bespoke module.
   Design target: the editorial reference (2026-07-14): eyebrow system, full-bleed bands,
   hairline path rows, initial avatars, 3-box architecture, dark discovery band. #}
{% set b = module.brand %}
{% set st = module.styles %}
{% set L = module.labels %}
{% set run = module.mode == "run" %}
{# Colours: follow the THEME tokens by default; explicit style-tab colours when opted out.
   (The explicit colour doubles as the token fallback.) #}
{% if st.use_theme_colors %}
  {% set primary = "var(--color-primary, " ~ st.primary.color ~ ")" %}
  {% set accent = "var(--color-accent, " ~ st.accent.color ~ ")" %}
{% else %}
  {% set primary = st.primary.color %}
  {% set accent = st.accent.color %}
{% endif %}
{# Logo: explicit style-tab logo first; then brand kit — a LIGHT top bar prefers the
   full-colour primaryLogo, a dark one the white/knockout variant. #}
{% set light_top = st.topbar == "light" %}
{% if light_top %}
  {% set logo_src = st.logo.src or brand_settings.primaryLogo.src or brand_settings.logo.src %}
{% else %}
  {% set logo_src = st.logo.src or brand_settings.logo.src or brand_settings.primaryLogo.src %}
{% endif %}
<div class="df {% if run %}df--run{% endif %}"
     style="--df-primary:{{ primary }};--df-accent:{{ accent }};--df-on-primary:{{ st.on_primary.color }};--df-on-accent:{{ st.on_accent.color }};">

  <header class="df-top {% if light_top %}df-top--light{% endif %}">
    <div class="df-wrap df-top-in">
      <div class="df-top-brand">
        {% if logo_src %}<img src="{{ logo_src }}" alt="{{ b.brand_name }} logo">{% else %}<strong>{{ b.brand_name }}</strong>{% endif %}
        <span class="df-top-label">{{ module.header.page_label }}</span>
      </div>
      <div class="df-top-right">
        {% if module.header.chips %}
        <div class="df-top-chips">
          {% for c in module.header.chips|split(",") %}<span>{{ c|trim }}</span>{% endfor %}
        </div>
        {% endif %}
        {# Buttons repeater (logo bar). Falls back to the legacy single CTA for pages
           saved before `buttons` existed. Kept in sync with the business-case module. #}
        {% if module.header.buttons %}
        <div class="df-top-btns">
          {% for btn in module.header.buttons %}{% if btn.text %}<a class="df-btn df-btn--{{ btn.style|default("solid") }} df-top-cta" href="{{ btn.url }}" target="_blank" rel="noopener">{{ btn.text }}</a>{% endif %}{% endfor %}
        </div>
        {% elif module.header.cta_label %}<a class="df-btn df-btn--solid df-top-cta" href="{{ module.header.cta_url }}" target="_blank" rel="noopener">{{ module.header.cta_label }}</a>{% endif %}
      </div>
    </div>
  </header>

  <section class="df-hero">
    {% if module.hero.bg.src %}
    <img class="df-hero-bg" src="{{ module.hero.bg.src }}" alt="" loading="eager">
    <div class="df-hero-scrim {% if st.hero_scrim != "uniform" %}df-hero-scrim--grad{% endif %}" style="opacity:{{ (st.hero_overlay_opacity|default(92)) / 100 }};"></div>
    {% endif %}
    <div class="df-wrap df-hero-in">
      <div class="df-hero-main">
        {% if module.hero.eyebrow %}<p class="df-eyebrow df-eyebrow--onprimary">{{ module.hero.eyebrow }}</p>{% endif %}
        <h1>{{ module.hero.title }}</h1>
        <div class="df-hero-intro">{{ module.hero.intro }}</div>
        <div class="df-hero-ctas">
          {% if module.hero.cta1_label %}<a class="df-btn df-btn--solid" href="{{ module.hero.cta1_url }}" target="_blank" rel="noopener">{{ module.hero.cta1_label }}</a>{% endif %}
          {% if module.hero.cta2_label %}<a class="df-btn df-btn--ghost" href="{{ module.hero.cta2_url }}" target="_blank" rel="noopener">{{ module.hero.cta2_label }}</a>{% endif %}
        </div>
      </div>
      {% if run and module.hero.side_title and module.hero.side_items %}
      <aside class="df-hero-side">
        <p class="df-side-h">{{ module.hero.side_title }}</p>
        <ul>{% for it in module.hero.side_items %}<li>{{ it.text }}</li>{% endfor %}</ul>
      </aside>
      {% endif %}
    </div>
  </section>

  {# Every section below is one accordion field group whose `show` boolean gates it (default on).
     The `!= false` test keeps a section visible on pages saved before its `show` existed
     (undefined reads as "on"), so the restructure is backward-safe. Each section ALSO keeps its
     own emptiness guard, so a shown-but-empty section still renders nothing. #}

  {# Context strip = thread card + show/skip, one toggle for both (module.contextstrip.show). #}
  {% set show_context = module.contextstrip.show != false %}
  {% set has_thread = show_context and module.contextstrip.tl_text %}
  {% if has_thread %}
  <div class="df-wrap"><div class="df-strip df-thread">
    <div class="df-thread-icon" aria-hidden="true">&#8776;</div>
    <div><span class="df-strip-k">{{ module.contextstrip.tl_title }}</span><p>{{ module.contextstrip.tl_text }}</p></div>
  </div></div>
  {% endif %}

  {% if show_context and (module.contextstrip.show_text or module.contextstrip.skip_text) %}
  <div class="df-wrap"><div class="df-strip {% if has_thread %}df-strip--flat{% endif %}">
    {% if module.contextstrip.show_text %}<div><span class="df-strip-k">{{ L.show_label }}</span><p>{{ module.contextstrip.show_text }}</p></div>{% endif %}
    {% if module.contextstrip.skip_text %}<div><span class="df-strip-k">{{ L.skip_label }}</span><p>{{ module.contextstrip.skip_text }}</p></div>{% endif %}
  </div></div>
  {% endif %}

  {% if not run and module.stats.show != false and module.stats.items %}
  <div class="df-wrap"><div class="df-stats">
    {% for s in module.stats.items %}<div><strong>{{ s.stat_value }}</strong><span>{{ s.stat_label }}</span></div>{% endfor %}
  </div></div>
  {% endif %}

  {% if module.discovery.show != false and module.discovery.rows %}
  <section class="df-band df-band--dark">
    <div class="df-wrap df-disc">
      <div class="df-disc-lead">
        <p class="df-eyebrow df-eyebrow--onprimary">{{ module.discovery.eyebrow }}</p>
        <h2>{{ module.discovery.title }}</h2>
        {% if module.discovery.intro %}<p>{{ module.discovery.intro }}</p>{% endif %}
      </div>
      <dl class="df-disc-rows">
        {% for r in module.discovery.rows %}<div><dt>{{ r.row_label }}</dt><dd>{{ r.text }}</dd></div>{% endfor %}
      </dl>
    </div>
  </section>
  {% endif %}

  {% if module.acts.show != false and module.acts.items %}
  <section class="df-wrap df-acts-sec">
    <p class="df-eyebrow">{{ module.acts.eyebrow }}</p>
    {% if module.acts.title %}<h2>{{ module.acts.title }}</h2>{% endif %}
    <div class="df-acts">
      {% for a in module.acts.items %}
      <div class="df-act df-act--{{ loop.index }}">
        {% if a.tag %}<span class="df-act-tag">{{ a.tag }}</span>{% endif %}
        <h3>{{ a.title }}</h3>
        <p>{{ a.text }}</p>
      </div>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if module.people.show != false and module.people.cards %}
  <section class="df-band df-band--tint">
    <div class="df-wrap">
      <p class="df-eyebrow">{{ module.people.eyebrow }}</p>
      <h2>{{ module.people.title }}</h2>
      <div class="df-people">
        {% for p in module.people.cards %}
        {% set parts = p.person_name|split(" ") %}
        <div class="df-person">
          <span class="df-avatar">{{ parts[0][:1] }}{% if parts|length > 1 %}{{ parts[parts|length - 1][:1] }}{% endif %}</span>
          <strong>{{ p.person_name }}</strong>
          <p>{{ p.line }}</p>
          {% if p.tag %}<span class="df-person-tag">{{ p.tag }}</span>{% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
  </section>
  {% endif %}

  {% if module.runofshow.show != false and module.runofshow.items %}
  {# "Show assets and links" toggle (default on). When off, the link column isn't rendered AND
     df-steps--nolinks drops its grid track, so the step body reclaims the full width.
     PRESENTER OVERRIDE: any URL query string containing "present" forces the links back on
     regardless of the toggle (?presenter, ?present=1, ?mode=presenter) — a rep presenting reveals
     the deep links without editing the module. We test the RAW query string, not query_dict,
     because HubSpot drops valueless params from query_dict (bare ?presenter wouldn't register),
     whereas request.query keeps them. Server-side, no JS. #}
  {% set presenter = "present" in ("" ~ request.query)|lower %}
  {% set show_links = presenter or module.runofshow.show_links != false %}
  <section class="df-wrap df-path" id="df-path">
    <div class="df-path-head">
      <div>
        <p class="df-eyebrow">{{ module.runofshow.eyebrow }}</p>
        <h2>{{ module.runofshow.title }}</h2>
      </div>
      {% if run %}<div class="df-progress"><span data-df-progress data-df-template="{{ L.progress_template }}">{{ L.progress_template|replace('{done}', '0')|replace('{total}', module.runofshow.items|length) }}</span><span class="df-progress-bar"><span data-df-progress-fill></span></span></div>{% endif %}
    </div>
    <ol class="df-steps {% if not show_links %}df-steps--nolinks{% endif %}">
      {% for step in module.runofshow.items %}
      <li class="df-step" {% if run %}data-df-step="{{ loop.index }}"{% endif %}>
        <div class="df-step-idx">{% if run %}<button class="df-step-check" type="button" aria-label="Mark step {{ loop.index }} complete">{{ loop.index }}</button>{% else %}<span class="df-step-num">{{ loop.index }}</span>{% endif %}</div>
        {% if run and step.time %}<div class="df-step-time">{{ step.time }}</div>{% endif %}
        <div class="df-step-body">
          <h3>{{ step.title }}</h3>
          {% if step.description %}<p>{{ step.description }}</p>{% endif %}
          {% if step.land %}<p class="df-step-land"><strong>{{ L.land_label }}</strong> {{ step.land }}</p>{% endif %}
          {% if run and step.say %}<p class="df-step-say">&ldquo;{{ step.say }}&rdquo;</p>{% endif %}
          {% if run and step.action %}<p class="df-step-action">{{ step.action }}</p>{% endif %}
          {% if run and step.spiced %}<p class="df-spiced-row">{% for t in step.spiced|split(",") %}<span class="df-spiced">{{ t|trim }}</span>{% endfor %}</p>{% endif %}
          {% if run and step.internal %}<p class="df-step-internal"><strong>{{ L.internal_label }}</strong> {{ step.internal }}</p>{% endif %}
        </div>
        {% if show_links %}
        <div class="df-step-links">
          {% if run and step.links %}
            {% for l in step.links|split(";") %}{% set kv = l|split("|") %}{% if kv|length == 2 %}<a href="{{ kv[1]|trim }}" target="_blank" rel="noopener">{{ kv[0]|trim }}</a>{% endif %}{% endfor %}
          {% elif not run and step.curated %}
            {% set kv = step.curated|split("|") %}{% if kv|length == 2 %}<a href="{{ kv[1]|trim }}" target="_blank" rel="noopener">{{ kv[0]|trim }}</a>{% endif %}
          {% endif %}
        </div>
        {% endif %}
      </li>
      {% endfor %}
    </ol>
  </section>
  {% endif %}

  {% if run and module.checklist.show != false and module.checklist.items %}
  <section class="df-wrap df-check">
    <p class="df-eyebrow">Build status</p>
    <h2>Checklist</h2>
    <ul class="df-check-list">
      {% for c in module.checklist.items %}
      <li><span class="df-badge df-badge--{{ c.status }}">{% if c.status == "unbuilt" %}Build{% elif c.status == "partial" %}Partial{% elif c.status == "ready" %}Ready{% else %}Final+{% endif %}</span><strong>{{ c.asset }}</strong><span class="df-check-note">{{ c.note }}</span></li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}

  {# Architecture / proposed solution. arch.mode drives what shows:
       outcomes = CEO consolidation statements only  |  diagram = the image only (rep drop-in)
       both     = outcomes then the diagram.
     Legacy default (no mode) reads as "both". Each half also self-hides when its data is empty. #}
  {% set arch_mode = module.arch.mode or "both" %}
  {% set show_outcomes = arch_mode != "diagram" and module.arch.outcomes %}
  {% set show_diagram = arch_mode != "outcomes" and module.arch.diagram.src %}
  {% if module.arch.show != false and (show_outcomes or show_diagram) %}
  <section class="df-wrap df-arch">
    <p class="df-eyebrow">{{ module.arch.eyebrow }}</p>
    {% if module.arch.title %}<h2>{{ module.arch.title }}</h2>{% endif %}
    {% if show_outcomes %}
    <ul class="df-arch-outcomes">
      {% for o in module.arch.outcomes %}
      <li class="df-arch-outcome">
        <strong>{{ o.headline }}</strong>
        {% if o.detail %}<span>{{ o.detail }}</span>{% endif %}
      </li>
      {% endfor %}
    </ul>
    {% if module.arch.caption %}<p class="df-arch-caption">{{ module.arch.caption }}</p>{% endif %}
    {% endif %}
    {% if show_diagram %}
    <figure class="df-arch-figure">
      <img src="{{ module.arch.diagram.src }}" alt="{{ module.arch.diagram_alt or module.arch.diagram.alt }}" loading="lazy">
      {% if module.arch.diagram_caption %}<figcaption>{{ module.arch.diagram_caption }}</figcaption>{% endif %}
    </figure>
    {% endif %}
  </section>
  {% endif %}

  {% if module.scorecard.show != false and (module.scorecard.fit_chips or module.scorecard.notfit_chips) %}
  <section class="df-wrap df-score">
    <div class="df-score-row">
      {% if module.scorecard.fit_chips %}
      <div class="df-score-card df-score-card--fit">
        <h3>{{ module.scorecard.fit_title }}</h3>
        <div>{% for c in module.scorecard.fit_chips|split(",") %}<span class="df-score-chip">{{ c|trim }}</span>{% endfor %}</div>
      </div>
      {% endif %}
      {% if module.scorecard.notfit_chips %}
      <div class="df-score-card df-score-card--notfit">
        <h3>{{ module.scorecard.notfit_title }}</h3>
        <div>{% for c in module.scorecard.notfit_chips|split(",") %}<span class="df-score-chip df-score-chip--no">{{ c|trim }}</span>{% endfor %}</div>
      </div>
      {% endif %}
    </div>
  </section>
  {% endif %}

  {% if run and module.guard.show != false and (module.guard.leftout_items or module.guard.nextbuild_items) %}
  <section class="df-wrap df-guard">
    <div class="df-score-row">
      {% if module.guard.leftout_items %}
      <div class="df-guard-card df-guard-card--out">
        <h3>{{ module.guard.leftout_title }}</h3>
        <ul>{% for i in module.guard.leftout_items|split(";") %}<li>{{ i|trim }}</li>{% endfor %}</ul>
      </div>
      {% endif %}
      {% if module.guard.nextbuild_items %}
      <div class="df-guard-card df-guard-card--next">
        <h3>{{ module.guard.nextbuild_title }}</h3>
        <ul>{% for i in module.guard.nextbuild_items|split(";") %}<li>{{ i|trim }}</li>{% endfor %}</ul>
      </div>
      {% endif %}
    </div>
  </section>
  {% endif %}

  {% if module.nextsteps.show != false and module.nextsteps.items %}
  <section class="df-wrap df-next">
    <p class="df-eyebrow">{{ module.nextsteps.eyebrow }}</p>
    <h2>{{ module.nextsteps.title }}</h2>
    <ol class="df-next-row">
      {% for n in module.nextsteps.items %}
      <li class="df-next-card {% if n.highlight %}df-next-card--hl{% endif %}">
        {% if n.date %}<span class="df-next-date">{{ n.date }}</span>{% endif %}
        <h3>{{ n.title }}</h3>
        {% if n.text %}<p>{{ n.text }}</p>{% endif %}
      </li>
      {% endfor %}
    </ol>
  </section>
  {% endif %}

  {% if module.resources.show != false and module.resources.items %}
  <section class="df-wrap df-dock">
    <p class="df-eyebrow">{{ module.resources.eyebrow }}</p>
    <h2>{{ module.resources.title }}</h2>
    <div class="df-dock-grid">
      {% for r in module.resources.items %}
      <a class="df-dock-card" href="{{ r.res_url }}" target="_blank" rel="noopener">
        <strong>{{ r.res_label }}</strong>
        {% if r.description %}<p>{{ r.description }}</p>{% endif %}
        <span class="df-dock-cta">{{ r.res_cta }} &rarr;</span>
      </a>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if run and module.questions.show != false and module.questions.items %}
  <section class="df-wrap df-q">
    <p class="df-eyebrow">{{ module.questions.eyebrow }}</p>
    <h2>{{ module.questions.title }}</h2>
    <ol class="df-q-grid">
      {% for q in module.questions.items %}<li><span>{{ loop.index }}</span><p>{{ q.text }}</p></li>{% endfor %}
    </ol>
  </section>
  {% endif %}

  {% if module.closing.show != false and module.closing.title %}
  <section class="df-closing">
    <div class="df-wrap df-closing-in">
      <div>
        <p class="df-eyebrow df-eyebrow--onprimary">{{ module.closing.eyebrow }}</p>
        <h2>{{ module.closing.title }}</h2>
        {% if module.closing.text %}<p class="df-closing-text">{{ module.closing.text }}</p>{% endif %}
      </div>
      {% if module.closing.quote %}
      <blockquote class="df-closing-quote">&ldquo;{{ module.closing.quote }}&rdquo;</blockquote>
      {% endif %}
    </div>
  </section>
  {% endif %}

  <footer class="df-foot">
    <div class="df-wrap df-foot-in">
      {# footer is always dark → knockout logo preferred, regardless of top-bar style #}
      {% set foot_logo = st.logo.src or brand_settings.logo.src or brand_settings.primaryLogo.src %}
      {% if foot_logo %}<img class="df-foot-logo" src="{{ foot_logo }}" alt="{{ b.brand_name }} logo">{% else %}<strong>{{ b.brand_name }}</strong>{% endif %}
      <span>{{ module.footer.prepared }}</span>
      {% if run %}<button class="df-btn df-btn--ghost" type="button" data-df-reset>{{ L.reset_label }}</button>{% endif %}
    </div>
  </footer>
</div>