{% macro nav(active_page) %}
<nav class="nav">
  <a href="/" class="nav-brand">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
    Taste<span>Engine</span>
  </a>
  <div class="nav-center">
    <div class="nav-links">
      <a href="/" class="{{ 'active' if active_page == 'home' }}">Home</a>
      <a href="/recommend" class="{{ 'active' if active_page == 'recommend' }}">Recommend</a>
      <a href="/evaluate" class="{{ 'active' if active_page == 'evaluate' }}">Evaluate</a>
    </div>
  </div>
  <div class="nav-actions">
    <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle dark/light mode">
      <span id="themeIcon">🌙</span>
    </button>
  </div>
</nav>
{% endmacro %}

{% macro glass(title, class="") %}
<div class="glass {{ class }}">
  {% if title %}<h2 class="glass-header">{{ title }}</h2>{% endif %}
  {{ caller() }}
</div>
{% endmacro %}

{% macro product_card(item) %}
<div class="product-card">
  <div class="product-icon">{{ get_category_icon(item.category) }}</div>
  <div class="product-name">{{ item.name }}</div>
  <div class="product-meta">{{ item.brand }} · {{ item.subcategory }}</div>
  <div class="compact-row">
    <div class="product-price">${{ "%.2f"|format(item.price) }}</div>
    <div class="product-rating">{{ stars(item.avg_rating) }} {{ item.avg_rating }}</div>
  </div>
  <div class="product-explanation">{{ item.explanation }}</div>
</div>
{% endmacro %}

{% macro tag(text, type="") %}
<span class="tag{% if type == 'brand' %} tag-brand{% endif %}">{{ text }}</span>
{% endmacro %}

{% macro spinner(text="Loading...") %}
<div class="loading">
  <div class="spinner"></div>
  <span>{{ text }}</span>
</div>
{% endmacro %}

{% macro empty_state(icon, title, desc) %}
<div class="empty-state">
  <div class="empty-icon">{{ icon }}</div>
  <div class="empty-title">{{ title }}</div>
  <div class="empty-desc">{{ desc }}</div>
</div>
{% endmacro %}

{% macro tooltip(term, explanation) %}
<span class="tooltip-trigger">{{ term }}<span class="tooltip-content">{{ explanation }}</span></span>
{% endmacro %}

{% macro kpi_card(label, value, unit, class="") %}
<div class="kpi-card {{ class }}">
  <div class="kpi-label">{{ label }}</div>
  <div class="kpi-value">{{ value }}</div>
  {% if unit %}<div class="kpi-unit">{{ unit }}</div>{% endif %}
</div>
{% endmacro %}

{% macro skeleton_cards(count=6) %}
<div class="product-grid" id="skeletonGrid">
  {% for i in range(count) %}
  <div class="product-card skeleton-card">
    <div class="skeleton" style="width:48px;height:48px;border-radius:10px;margin-bottom:0.75rem;"></div>
    <div class="skeleton skeleton-line"></div>
    <div class="skeleton skeleton-line" style="width:60%;"></div>
    <div class="skeleton skeleton-line" style="width:40%;"></div>
  </div>
  {% endfor %}
</div>
{% endmacro %}