{% load brickwork_components %}
{% comment %}
CTA band (04-interfaces.md section 4d): a full-width call-to-action band,
the section that closes a marketing page. Structural, consumed via
{% include %} (BR-BW-MKT §4d structural-include doctrine).

Required context: heading. An absent heading renders nothing at all (the same
"reason to render" convention every sibling component in this kit follows,
BR-BW-PAGE-002/BR-BW-MKT-005): the three pages wire this component into a
normal (non-reason-to-exist) block on every page that uses it, so a page
extended with no cta_heading in context must not still emit an empty CTA band.

Optional context:
  body          (str).
  primary_cta   ({label, url}): rendered via {% bw_button %} primary.
  primary_cta_label / primary_cta_href (str, #98): the same primary CTA as
                flat strings, for a template-authored caller (a Django
                template cannot build a dict inline, so the ADR-056
                compose-it-yourself shape passes
                {% include ... with heading="Ready?" primary_cta_label="Get started" primary_cta_href="/signup/" %}).
                When both shapes are supplied the dict wins outright (the
                flat kwargs are ignored); a dict-shaped caller renders
                byte-identically to before the flat shape existed.
  secondary_cta ({label, url}): rendered via {% bw_button %} secondary
                (styled to read on the tinted band, see marketing.css).
  secondary_cta_label / secondary_cta_href (str, #98): the flat form of
                secondary_cta, same precedence.
  band          ("tint" default | "plain", ADR-057 section 1a): the section's
                background treatment. "tint" composes
                --bw-color-surface-marketing-tint (contrast-checked in both
                themes per BR-BW-MKT-002); "plain" renders on the page's own
                surface instead of standing out as its own band.

                This replaced a negated `no_tint` boolean in 3.0.0. The
                negation existed because a plain {% include %} forwarding an
                omitted page-level variable resolves it to an empty string
                rather than None, so a default-True boolean could not tell
                "never set" from "explicitly off". A three-valued string has
                no such ambiguity: {% firstof band 'tint' %} treats the empty
                string as unset and falls back correctly, so the option can
                finally be named for what it selects rather than what it
                switches off.
  width         ("contained" default | "bleed", ADR-057 section 1a): whether
                the band wraps at the marketing shell's content measure
                (unchanged, no modifier class) or escapes it to run edge to
                edge. Orthogonal to band, so a tinted full-bleed band is
                expressible. "bleed" is a CSS-only option (adds no markup):
                it undoes the shell's per-child max-width and page gutter the
                same way examples/sections/cta/full-bleed.html's standalone
                .bw-cta-bleed class always has, and re-applies its own inline
                gutter so the copy does not touch the viewport edge on a
                phone (icvoss/django-brickwork#98/#118 pattern, ADR-077
                section 3a).

States: none: a static band, no open/closed or hover-driven state of its
  own (the bw_button CTAs inside carry their own button states).
Accessibility: purely structural; the heading is an <h2>, so a page
  composing this band contributes one heading level to the outline rather
  than a div soup. Covered by axe.spec.mjs against landing-*.html,
  pricing-*.html, about-*.html (all three compose it), sections-*.html
  (cta/centred-band.html) and cta-width-*.html (the width="bleed" axis,
  never rendered by the three pages above).
Responsive: no breakpoint switch. The actions row is
  display: flex; flex-wrap: wrap, so two CTA buttons sit side by side at
  wide widths and stack onto their own lines when the band narrows, fluid
  at every viewport rather than a named-breakpoint jump. width="bleed" is a
  CSS-only escape from the marketing shell's content cap (100vw, capped so
  it cannot itself cause page-level horizontal scroll), applying at every
  width, not gated to one.
{% endcomment %}
{% if heading %}
<section class="bw-cta{% if band != 'plain' %} bw-cta--tint{% endif %}{% if width == 'bleed' %} bw-cta--bleed{% endif %}">
  <div class="bw-cta__inner">
    <h2 class="bw-cta__heading">{{ heading }}</h2>
    {% if body %}<p class="bw-cta__body">{{ body }}</p>{% endif %}
    {% if primary_cta or secondary_cta or primary_cta_label or secondary_cta_label %}
      <div class="bw-cta__actions">
        {% if primary_cta %}{% bw_button primary_cta.label variant="primary" size="lg" href=primary_cta.url %}{% elif primary_cta_label %}{% bw_button primary_cta_label variant="primary" size="lg" href=primary_cta_href %}{% endif %}
        {% if secondary_cta %}{% bw_button secondary_cta.label variant="secondary" size="lg" href=secondary_cta.url %}{% elif secondary_cta_label %}{% bw_button secondary_cta_label variant="secondary" size="lg" href=secondary_cta_href %}{% endif %}
      </div>
    {% endif %}
  </div>
</section>
{% endif %}