Pricing

{% extends "brickwork_marketing/shell/marketing.html" %}
{% comment %}
A pricing page: tiers, an FAQ, and a closing CTA.

COPY THIS FILE into your project and edit it. It is not on the template loader
path, so you cannot extend it (ADR-056).

What your view must supply:
    faq_items  [{question, answer}]
The tiers below are written straight into this template on purpose: see the
note above the pricing section.

States: the auth-aware header actions branch on request.user.is_authenticated;
  every composed component's own states (hero, pricing tiers, FAQ, CTA) are
  unchanged, see each component's own header; single_open=True on the FAQ
  makes its answers a single native exclusive-open group.
Accessibility: inherits shell/marketing.html's skip link and header/footer
  landmarks; the current-page nav link carries aria-current="page"; the
  composed hero renders the page's own <h1>. Covered by the archetype
  harness's full gate sweep (render, axe WCAG 2.2 AA, no horizontal
  overflow, light/dark distinctness, skip-link first-tab-stop with JS
  disabled) at every W0.1 breakpoint, both themes, and directly by
  axe.spec.mjs against pricing-*.html, this page's own hand-maintained
  fixture.
Responsive: no breakpoint switch of its own; inherits shell/marketing.html's
  fluid header wrap and content-column cap. The tiers here are three plain
  _pricing_tier.html includes inside a hand-written div carrying the same
  bw-pricing-table class _pricing_table.html's own wrapper uses (this page
  skips the wrapper component itself, per the note above, but reuses its
  class so the three tiers still take that class's own breakpoint switch:
  1 column below md, 2 from md to below lg, 3 from lg upward, see
  _pricing_table.html's own header for the exact matrix).
{% endcomment %}
{% load brickwork_components %}

{% block page_title %}Pricing - Northwind{% endblock %}

{% block brand_wordmark %}Northwind{% endblock %}

{% comment %}
Package-owned mobile disclosure (icvoss/django-brickwork#263 / #509): include
the toggle as a sibling of the nav via marketing_nav_region.
{% endcomment %}
{% block marketing_nav_region %}
  {% include "brickwork_marketing/components/_mobile_nav_toggle.html" %}
  <nav class="bw-site-header__nav" aria-label="Primary">
    {% block marketing_nav %}
      <a href="/features/">Features</a>
      <a href="/pricing/" aria-current="page">Pricing</a>
      <a href="/customers/">Customers</a>
      <a href="/docs/">Docs</a>
    {% endblock %}
  </nav>
{% endblock %}

{% block marketing_actions %}
  {% if request.user.is_authenticated %}
    <a href="/app/">Go to app</a>
  {% else %}
    <a href="/accounts/login/">Sign in</a>
    {% bw_button "Start free trial" variant="primary" href="/accounts/signup/" %}
  {% endif %}
{% endblock %}

{% block content %}

  {% include "brickwork_marketing/components/_hero.html" with heading="Simple pricing" lede="Every plan includes unlimited invoices and automatic reminders. Pay for the people, not the paperwork." align="center" %}

  {% comment %}
  THE TIERS.

  _pricing_table.html loops tier dicts from context, which suits a pricing
  page driven by your billing system. But a tier's feature list is the one
  thing you most want to edit as words, so when your prices are static the
  clearer shape is to skip the wrapper and include _pricing_tier.html once per
  plan, as here: everything except the feature list is a flat string, so the
  whole section is readable and editable in place.

  The feature lists still come from context, because a Django template cannot
  build a list inline. Define them in your view as plain lists of strings.

  Exactly one tier should be highlighted, and a highlighted tier is the only
  one whose badge renders.
  {% endcomment %}
  <section class="bw-pricing-table-section">
    <div class="bw-pricing-table">
      {% include "brickwork_marketing/components/_pricing_tier.html" with name="Solo" price="£9" period="/month" description="For one person invoicing a handful of clients." features=solo_features cta_label="Start free trial" cta_href="/accounts/signup/?plan=solo" %}
      {% include "brickwork_marketing/components/_pricing_tier.html" with name="Team" price="£29" period="/month" description="For a finance function of two to ten." features=team_features cta_label="Start free trial" cta_href="/accounts/signup/?plan=team" highlighted=True badge="Most popular" %}
      {% include "brickwork_marketing/components/_pricing_tier.html" with name="Scale" price="£89" period="/month" description="Multi-entity, multi-currency, audit trails." features=scale_features cta_label="Talk to sales" cta_href="/contact/" %}
    </div>
    <p class="bw-pricing-table__note">Prices exclude VAT. Annual billing saves two months.</p>
  </section>

  {% comment %}
  The FAQ. single_open=True makes the answers mutually exclusive using the
  native <details name> group, so only one is open at a time with no JS.
  {% endcomment %}
  {% include "brickwork_marketing/components/_faq.html" with heading="Questions people ask before signing up" items=faq_items single_open=True %}

  {% include "brickwork_marketing/components/_cta.html" with heading="Try it on this month's invoices" body="Thirty days free. If it has not paid for itself by then, do not keep it." primary_cta_label="Start free trial" primary_cta_href="/accounts/signup/" %}

{% endblock %}

{% block marketing_footer %}
  {% include "brickwork_marketing/components/_marketing_footer_groups.html" with groups=footer_groups %}
{% endblock %}

{% block footer_legal %}
  <p>Copyright 2026 Northwind Software Ltd. <a href="/privacy/">Privacy</a> <a href="/terms/">Terms</a></p>
{% endblock %}