{% load brickwork_components %}
{% comment %}
HERO / split-media: copy on one side, media on the other.

WHY THIS OWNS ITS MARKUP. The shipped _hero.html stacks its media BELOW the
copy (.bw-hero is a column flex), and its `media` slot takes pre-rendered HTML,
which a plain template cannot build. Side-by-side is a different arrangement,
not a different value of an existing option, so this variant is hand-written on
the same --bw-* tokens. That gap is icvoss/django-brickwork#118; when the hero
gains media_placement="beside", this file collapses back to an include.

The media below is an inline SVG so the example has no binary asset and no
broken image box. Swap it for your own <img>. If you do, keep width and height
attributes on it: they reserve the box before the image loads and stop the
heading jumping (layout shift), which no CSS here can do for you.

DECORATIVE MEDIA IS HIDDEN FROM SCREEN READERS. The illustration repeats what
the heading already says, so it carries aria-hidden. If your media conveys
something the copy does not, it is NOT decorative: give it a real alt (on an
img) or a <title> and role="img" (on an svg) instead.

Mobile-first: base styles stack, and the two-column grid starts at 48rem.
{% endcomment %}
<section class="bw-hero-split">
  <div class="bw-hero-split__copy">
    <p class="bw-hero-split__eyebrow">Invoicing</p>
    <h1 class="bw-hero-split__heading">Get paid without the awkward email</h1>
    <p class="bw-hero-split__lede">
      Northwind raises the invoice, sends the reminders on your schedule, and
      flags the accounts about to run late. You keep the relationship.
    </p>
    <div class="bw-hero-split__actions">
      {% bw_button "Start free trial" variant="primary" size="lg" href="/accounts/signup/" %}
      {% bw_button "Book a demo" variant="secondary" size="lg" href="/demo/" %}
    </div>
  </div>
  <div class="bw-hero-split__media">
    <svg viewBox="0 0 480 360" width="480" height="360" aria-hidden="true" focusable="false">
      <rect x="24" y="40" width="432" height="280" rx="16" fill="var(--bw-color-surface-sunken)" stroke="var(--bw-color-border)" />
      <rect x="56" y="76" width="180" height="16" rx="8" fill="var(--bw-color-fg-subtle)" />
      <rect x="56" y="112" width="368" height="10" rx="5" fill="var(--bw-color-border-strong)" />
      <rect x="56" y="136" width="320" height="10" rx="5" fill="var(--bw-color-border-strong)" />
      <rect x="56" y="188" width="368" height="1" fill="var(--bw-color-border)" />
      <rect x="56" y="212" width="120" height="12" rx="6" fill="var(--bw-color-border-strong)" />
      <rect x="336" y="208" width="88" height="20" rx="10" fill="var(--bw-color-accent)" />
      <rect x="56" y="252" width="120" height="12" rx="6" fill="var(--bw-color-border-strong)" />
      <rect x="352" y="248" width="72" height="20" rx="10" fill="var(--bw-color-success)" />
    </svg>
  </div>
</section>