<!-- Full Funnel: Search → Analytics → Conversions -->
<style>
  .funnel-stage {
    display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem;
    border-bottom: 1px solid #F1F5F9;
  }
  .funnel-stage:last-child { border-bottom: none; }
  .funnel-label { width: 120px; flex-shrink: 0; }
  .funnel-label span { font-size: 0.8125rem; font-weight: 600; color: #0F172A; }
  .funnel-label small { font-size: 0.6875rem; color: #94A3B8; display: block; }
  .funnel-bar-wrap { flex: 1; height: 28px; background: #F1F5F9; border-radius: 4px; overflow: hidden; }
  .funnel-bar { height: 100%; border-radius: 4px; min-width: 2px; transition: width 0.3s; }
  .funnel-value { width: 100px; text-align: right; flex-shrink: 0; }
  .funnel-value span { font-size: 0.9375rem; font-weight: 700; color: #0F172A; }
  .funnel-value small { font-size: 0.6875rem; color: #94A3B8; display: block; }
  .funnel-section-label {
    font-size: 0.5625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #94A3B8; padding: 0.5rem 1rem 0.25rem;
  }
</style>

{% set max_val = [funnel.impressions, funnel.clicks, funnel.pageviews, funnel.visitors, funnel.planner_users, funnel.leads] | max or 1 %}

<div class="card">
  <div class="funnel-section-label">Search (GSC + Bing)</div>

  <div class="funnel-stage">
    <div class="funnel-label"><span>Impressions</span><small>Search results shown</small></div>
    <div class="funnel-bar-wrap">
      <div class="funnel-bar" style="width:{{ (funnel.impressions / max_val * 100) | round(1) }}%;background:#3B82F6"></div>
    </div>
    <div class="funnel-value">
      <span>{{ "{:,}".format(funnel.impressions | int) }}</span>
    </div>
  </div>

  <div class="funnel-stage">
    <div class="funnel-label"><span>Clicks</span><small>CTR: {{ "%.1f" | format(funnel.ctr * 100) }}%</small></div>
    <div class="funnel-bar-wrap">
      <div class="funnel-bar" style="width:{{ (funnel.clicks / max_val * 100) | round(1) }}%;background:#2563EB"></div>
    </div>
    <div class="funnel-value">
      <span>{{ "{:,}".format(funnel.clicks | int) }}</span>
    </div>
  </div>

  <div class="funnel-section-label" style="border-top:1px solid #E2E8F0;margin-top:0.25rem;padding-top:0.75rem">Analytics (Umami)</div>

  <div class="funnel-stage">
    <div class="funnel-label"><span>Pageviews</span><small>{% if funnel.clicks %}{{ "%.0f" | format(funnel.click_to_view * 100) }}% of clicks{% endif %}</small></div>
    <div class="funnel-bar-wrap">
      <div class="funnel-bar" style="width:{{ (funnel.pageviews / max_val * 100) | round(1) }}%;background:#8B5CF6"></div>
    </div>
    <div class="funnel-value">
      <span>{{ "{:,}".format(funnel.pageviews | int) }}</span>
    </div>
  </div>

  <div class="funnel-stage">
    <div class="funnel-label"><span>Visitors</span><small>Unique</small></div>
    <div class="funnel-bar-wrap">
      <div class="funnel-bar" style="width:{{ (funnel.visitors / max_val * 100) | round(1) }}%;background:#7C3AED"></div>
    </div>
    <div class="funnel-value">
      <span>{{ "{:,}".format(funnel.visitors | int) }}</span>
    </div>
  </div>

  <div class="funnel-section-label" style="border-top:1px solid #E2E8F0;margin-top:0.25rem;padding-top:0.75rem">Conversions (App)</div>

  <div class="funnel-stage">
    <div class="funnel-label"><span>Planner Users</span><small>{% if funnel.visitors %}{{ "%.1f" | format(funnel.visitor_to_planner * 100) }}% of visitors{% endif %}</small></div>
    <div class="funnel-bar-wrap">
      <div class="funnel-bar" style="width:{{ (funnel.planner_users / max_val * 100) | round(1) }}%;background:#10B981"></div>
    </div>
    <div class="funnel-value">
      <span>{{ "{:,}".format(funnel.planner_users | int) }}</span>
    </div>
  </div>

  <div class="funnel-stage">
    <div class="funnel-label"><span>Lead Requests</span><small>{% if funnel.planner_users %}{{ "%.1f" | format(funnel.planner_to_lead * 100) }}% of planners{% endif %}</small></div>
    <div class="funnel-bar-wrap">
      <div class="funnel-bar" style="width:{{ (funnel.leads / max_val * 100) | round(1) }}%;background:#059669"></div>
    </div>
    <div class="funnel-value">
      <span>{{ "{:,}".format(funnel.leads | int) }}</span>
    </div>
  </div>
</div>

{% if not funnel.impressions and not funnel.pageviews and not funnel.planner_users %}
<div class="card text-center mt-4" style="padding:1.5rem">
  <p class="text-slate text-sm">No funnel data yet. Run a sync to populate search and analytics metrics.</p>
</div>
{% endif %}
