{% load brickwork_components %}
{% comment %}
Hero (04-interfaces.md section 4d): the marketing headline block. Structural,
consumed via {% include %} (no render-time a11y enforcement or icon
resolution of its own, so it follows the _card.html/_page_header.html
structural-include doctrine, not the tag doctrine, per BR-BW-MKT §4d).

Required context: none. An all-empty hero renders a bare hero band, so a
page can fill it via context or override the block entirely.

Optional context:
  eyebrow       (str): a small overline above the heading.
  heading       (str): the display headline. Rendered as the page's h1: a
                page composing this include owns exactly one hero per page.
  lede          (str): the subhead paragraph.
  primary_cta   ({label, url}): rendered via {% bw_button %} primary.
  primary_cta_label / primary_cta_href (str, #98): the same primary CTA as
                flat strings, generalising _stat.html's flat-string shape. A
                Django template cannot build a dict inline, so a page
                composing this include directly (the ADR-056 shape) passes
                the flat kwargs instead:
                {% include "..._hero.html" with heading="Ship faster" primary_cta_label="Get started" primary_cta_href="/signup/" %}
                Both shapes are supported on every CTA in this kit; when
                both are supplied the dict wins outright (the flat kwargs
                are ignored), and a dict-shaped caller renders
                byte-identically to before the flat shape existed.
  secondary_cta ({label, url}): rendered via {% bw_button %} secondary.
  secondary_cta_label / secondary_cta_href (str, #98): the flat form of
                secondary_cta, same precedence.
  media         (safe string): pre-rendered HTML for an image/illustration
                slot. Omitted renders a text-only hero, never a broken image
                box. The caller owns escaping (mark it safe at the call
                site), matching _stat.html's sparkline convention.
  align         ("start" | "center", default "start").

Uses the display type role (--bw-text-heading-display-*) and the marketing
section-rhythm token for its own block spacing.
{% endcomment %}
<section class="bw-hero bw-hero--{% firstof align 'start' %}">
  <div class="bw-hero__copy">
    {% if eyebrow %}<p class="bw-hero__eyebrow">{{ eyebrow }}</p>{% endif %}
    {% if heading %}<h1 class="bw-hero__heading">{{ heading }}</h1>{% endif %}
    {% if lede %}<p class="bw-hero__lede">{{ lede }}</p>{% endif %}
    {% if primary_cta or secondary_cta or primary_cta_label or secondary_cta_label %}
      <div class="bw-hero__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>
  {% if media %}<div class="bw-hero__media">{{ media }}</div>{% endif %}
</section>