<div class="hqp-hub">
  <div class="hqp-hub-header">
    <div class="hqp-hub-logo">
      <i class="fas fa-film"></i>
    </div>
    <div class="hqp-hub-title-block">
      <h2>High Quality Prep</h2>
      <p>{{#if subtitle}}{{subtitle}}{{else}}GM tools for cinematic sessions{{/if}}</p>
    </div>
  </div>

  <div class="hqp-hub-grid">
    {{#each tools}}
    <div class="hqp-tool-card {{#if disabled}}hqp-tool-disabled{{/if}}" data-action="openTool" data-tool="{{id}}" style="--card-accent: {{accent}};">
      <div class="hqp-tool-icon">
        <i class="{{icon}}"></i>
      </div>
      <div class="hqp-tool-info">
        <h3>{{title}}</h3>
        <p>{{desc}}</p>
      </div>
      {{#unless disabled}}
      <div class="hqp-tool-arrow">
        <i class="fas fa-chevron-right"></i>
      </div>
      {{/unless}}
    </div>
    {{/each}}
  </div>
</div>
