<!doctype html>
<html lang="en">
<head>
<%- include('../partials/head', { meta }) %>
</head>
<body data-page="insights">
<%- include('../partials/header', { heroDark: false }) %>

<main id="main-content">
  <section class="section--tight" style="padding-top: calc(var(--header-h) + var(--space-xl));">
    <div class="container">
      <div class="section-head" data-reveal>
        <p class="section-eyebrow">Insights</p>
        <h1 style="font-size: var(--fs-h1);">Perspectives from our investment team</h1>
        <p class="lead">Research, portfolio news, and founder stories from Kubera Wealth Management.</p>
      </div>

      <% if (featured && !filters.category && !filters.q && !filters.tag) { %>
      <div class="insights-featured" data-reveal>
        <div class="insights-featured__media"></div>
        <div>
          <div class="article-card__meta">
            <span class="badge badge-accent"><%= featured.category_name %></span>
            <span><%= formatDate(featured.published_at) %></span>
            <span><%= featured.reading_minutes %> min read</span>
          </div>
          <h2 style="font-size: 1.75rem; margin-bottom: var(--space-sm);"><%= featured.title %></h2>
          <p class="lead" style="margin-bottom: var(--space-md);"><%= featured.excerpt %></p>
          <a href="/insights/<%= featured.slug %>" class="btn btn-primary" data-cursor-hover>Read Article</a>
        </div>
      </div>
      <% } %>

      <form class="insights-toolbar" method="GET" action="/insights" data-reveal>
        <div class="filter-row">
          <a href="/insights" class="chip <%= !filters.category ? 'is-active' : '' %>">All</a>
          <% categories.forEach(function(cat) { %>
            <a href="/insights?category=<%= cat.slug %>" class="chip <%= filters.category === cat.slug ? 'is-active' : '' %>"><%= cat.name %></a>
          <% }); %>
        </div>
        <div class="search-box">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg>
          <input type="search" name="q" value="<%= filters.q %>" placeholder="Search articles…" aria-label="Search insights" />
        </div>
      </form>

      <% if (!articles.length) { %>
        <p class="empty-state">No articles match your filters yet.</p>
      <% } else { %>
      <div class="insights-grid" data-reveal-group>
        <% articles.forEach(function(a, i) { %>
          <a href="/insights/<%= a.slug %>" class="article-card" data-reveal style="--reveal-index: <%= i % 6 %>" data-cursor-hover>
            <div class="article-card__media"></div>
            <div class="article-card__meta">
              <span class="badge badge-accent"><%= a.category_name %></span>
              <span><%= a.reading_minutes %> min read</span>
            </div>
            <h3><%= a.title %></h3>
            <p><%= a.excerpt %></p>
          </a>
        <% }); %>
      </div>
      <% } %>

      <% if (pagination.totalPages > 1) { %>
      <div class="pagination">
        <% for (var p = 1; p <= pagination.totalPages; p++) { %>
          <a href="/insights?page=<%= p %><%= filters.category ? '&category=' + filters.category : '' %>" class="<%= p === pagination.page ? 'is-active' : '' %>"><%= p %></a>
        <% } %>
      </div>
      <% } %>
    </div>
  </section>
</main>

<%- include('../partials/footer') %>
</body>
</html>
