{% extends "base.html" %}

{% block content %}
<section class="hero-panel">
  <div class="hero-copy">
    <p class="eyebrow">{{ site.hero.eyebrow }}</p>
    <h1>{{ site.hero.title }}</h1>
    <p class="lede">{{ site.hero.lede }}</p>
    <div class="stat-row">
      <div class="stat-pill">
        <strong>{{ question_count }}</strong>
        <span>questions</span>
      </div>
      <div class="stat-pill">
        <strong>5-10</strong>
        <span>minutes</span>
      </div>
      <div class="stat-pill">
        <strong>1</strong>
        <span>executive summary</span>
      </div>
    </div>
    <div class="cta-row">
      <a class="button button--primary" href="{{ url_for('assessment_details') }}">{{ site.hero.primary_cta }}</a>
      <a class="button button--ghost" href="{{ url_for('roadmap_decision') }}">See the Roadmap Offer</a>
    </div>
    <p class="supporting-copy">{{ site.hero.supporting_text }}</p>
  </div>

  <aside class="hero-card">
    <p class="section-label">Built for</p>
    <ul class="clean-list">
      {% for audience in site.audiences %}
        <li>{{ audience }}</li>
      {% endfor %}
    </ul>
  </aside>
</section>

<section class="content-band">
  <div class="section-heading">
    <p class="section-label">How it works</p>
    <h2>A structured readout before you fund the next wave of digital work.</h2>
  </div>

  <div class="card-grid">
    {% for item in site.process %}
      <article class="info-card">
        <p class="card-index">0{{ loop.index }}</p>
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </article>
    {% endfor %}
  </div>
</section>

<section class="split-panel">
  <article class="feature-panel">
    <p class="section-label">Free assessment</p>
    <h2>Get a credible baseline without starting a consulting engagement.</h2>
    <ul class="clean-list">
      {% for feature in site.free_assessment_features %}
        <li>{{ feature }}</li>
      {% endfor %}
    </ul>
  </article>

  <article class="offer-panel">
    <p class="section-label">Paid next step</p>
    <h2>{{ site.roadmap_offer.title }}</h2>
    <p>{{ site.roadmap_offer.description }}</p>
    <ul class="clean-list">
      {% for item in site.roadmap_offer.deliverables %}
        <li>{{ item }}</li>
      {% endfor %}
    </ul>
    <div class="cta-row">
      <a class="button button--ghost" href="{{ url_for('roadmap_decision') }}">Review the Roadmap Offer</a>
    </div>
  </article>
</section>
{% endblock %}