<%# Inner-page hero with breadcrumbs. Locals: heroTitle, heroLead?, heroEyebrow?, heroImage?, heroCtas? %>
<% var _hasImage = typeof heroImage !== 'undefined' && heroImage; %>
<section class="page-hero<%= _hasImage ? '' : ' page-hero--plain' %>">
  <% if (_hasImage) { %>
    <div class="page-hero__media"><%- img(heroImage, { alt: '', sizes: '100vw', priority: true }) %></div>
  <% } %>
  <div class="container page-hero__inner">
    <% if (meta.crumbs) { %>
      <nav class="breadcrumbs" aria-label="Breadcrumb">
        <ol>
          <% meta.crumbs.forEach(function (c, i) { %>
            <li><% if (i === meta.crumbs.length - 1) { %><span aria-current="page"><%= c.name %></span><% } else { %><a href="<%= c.path %>"><%= c.name %></a><% } %></li>
          <% }) %>
        </ol>
      </nav>
    <% } %>
    <% if (typeof heroEyebrow !== 'undefined' && heroEyebrow) { %><p class="eyebrow"><%= heroEyebrow %></p><% } %>
    <h1><%= heroTitle %></h1>
    <% if (typeof heroLead !== 'undefined' && heroLead) { %><p><%= heroLead %></p><% } %>
    <% if (typeof heroCtas !== 'undefined' && heroCtas) { %>
      <div class="btn-row">
        <a class="btn btn--light" href="<%= heroCtas.primaryHref || '/quote' %>"><%= heroCtas.primary || 'Get a Quote' %><%- icon('arrow-right', 'icon--arrow') %></a>
        <a class="btn btn--ghost-light" href="<%= heroCtas.secondaryHref || '/contact' %>"><%= heroCtas.secondary || 'Contact Us' %></a>
      </div>
    <% } %>
  </div>
</section>
