{% 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" | "end", default "start").
  media_placement ("below" default | "behind" | "beside", ADR-057 section
                1a): where the media slot sits relative to the copy. "below"
                is the shipped 2.0.0 layout (a column flex, media after the
                copy in document order) and is the honestly-named default,
                not "beside": the copy and media were never side by side
                until this option existed (icvoss/django-brickwork#118).
                "behind" stacks the media in the same grid area as the copy,
                with the copy on top; the section takes the inverse surface
                (--bw-color-surface-inverse / --bw-color-fg-on-inverse) plus
                a scrim over the media, so contrast holds in both themes
                regardless of what the media itself contains. "beside" is a
                true side-by-side row from 48rem up (single column below
                it), replacing what a consumer previously had to hand-build
                as its own section (src/brickwork/examples/sections/hero/
                split-media.html, which collapses to an include of this
                option, per ADR-077).

                This is a CSS-only option: it changes no markup, only the
                modifier class on the section root, so a caller who has
                copied this include still only edits one class to change
                arrangement (ADR-057 section 1a's binding rule on CSS-only
                axes).

Uses the display type role (--bw-text-heading-display-*) and the marketing
section-rhythm token for its own block spacing.

Named blocks (semver-public, BR-BW-TPL-001), all empty by default, in
document order: eyebrow, heading, lede, actions, media. Each wraps the
existing conditional rendering above, so a call site supplying only the
flat context variables (the pre-existing path) renders byte-identical
output to before these blocks existed. These blocks exist because
BR-BW-OPT-004 forbids a proliferating set of prose kwargs with no data
object behind them: eyebrow/heading/lede are exactly that shape, so the
slot is the escape hatch for a caller with structured copy (a translated
mark, a rich lede with an inline link) that a flat string cannot carry,
rather than adding yet another *_html kwarg per field.
{% endcomment %}
<section class="bw-hero bw-hero--{% firstof align 'start' %}{% if media_placement == 'behind' %} bw-hero--media-behind{% elif media_placement == 'beside' %} bw-hero--media-beside{% endif %}">
  <div class="bw-hero__copy">
    {% block eyebrow %}{% if eyebrow %}<p class="bw-hero__eyebrow">{{ eyebrow }}</p>{% endif %}{% endblock %}
    {% block heading %}{% if heading %}<h1 class="bw-hero__heading">{{ heading }}</h1>{% endif %}{% endblock %}
    {% block lede %}{% if lede %}<p class="bw-hero__lede">{{ lede }}</p>{% endif %}{% endblock %}
    {% block actions %}
    {% 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 %}
    {% endblock %}
  </div>
  {% block media %}{% if media %}<div class="bw-hero__media">{{ media }}</div>{% endif %}{% endblock %}
</section>