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

<main id="main-content">
  <article style="padding-top: calc(var(--header-h) + var(--space-2xl)); padding-bottom: var(--space-2xl);">
    <div class="container">
      <nav class="breadcrumbs" aria-label="Breadcrumb" style="max-width:780px; margin-inline:auto;">
        <a href="/">Home</a> <span>/</span> <a href="/insights">Insights</a> <span>/</span> <span><%= article.title %></span>
      </nav>

      <header class="article-header" data-reveal>
        <div class="article-card__meta" style="justify-content:center;">
          <span class="badge badge-accent"><%= article.category_name %></span>
          <span><%= formatDate(article.published_at) %></span>
          <span><%= article.reading_minutes %> min read</span>
        </div>
        <h1><%= article.title %></h1>
        <p class="lead"><%= article.excerpt %></p>

        <div style="display:flex; align-items:center; justify-content:center; gap: var(--space-sm); margin-top: var(--space-md);">
          <div class="testimonial-card__avatar" style="width:36px; height:36px;"></div>
          <div style="text-align:left;">
            <strong style="display:block; font-size:0.875rem; color:var(--ink-900);"><%= article.author_name || 'Kubera Wealth Management' %></strong>
            <span style="font-size:0.75rem; color:var(--ink-300);"><%= article.author_title || '' %></span>
          </div>
        </div>
      </header>

      <div class="article-hero-media" data-reveal="scale"></div>

      <div class="article-body" data-article-body data-reveal>
        <%- bodyHtml %>
      </div>

      <div style="max-width:720px; margin-inline:auto; margin-top: var(--space-xl); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: var(--space-md);" data-reveal>
        <div class="filter-row">
          <% tags.forEach(function(tag) { %>
            <span class="badge"><%= tag %></span>
          <% }); %>
        </div>
        <div class="share-row">
          <a href="https://www.linkedin.com/sharing/share-offsite/?url=<%= encodeURIComponent(meta.canonical) %>" target="_blank" rel="noopener" aria-label="Share on LinkedIn"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.03-1.85-3.03-1.85 0-2.14 1.45-2.14 2.94v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45z"/></svg></a>
          <a href="https://twitter.com/intent/tweet?url=<%= encodeURIComponent(meta.canonical) %>&text=<%= encodeURIComponent(article.title) %>" target="_blank" rel="noopener" aria-label="Share on X"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.9 2H22l-7.6 8.7L23.3 22h-7l-5.5-6.6L4.6 22H1.5l8.1-9.3L1 2h7.2l5 6.1L18.9 2zm-1.2 18h1.7L7.3 4h-1.8l12.2 16z"/></svg></a>
          <a href="mailto:?subject=<%= encodeURIComponent(article.title) %>&body=<%= encodeURIComponent(meta.canonical) %>" aria-label="Share via email"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 6-10 7L2 6"/></svg></a>
        </div>
      </div>

      <% if (related.length) { %>
      <div class="related-articles">
        <h2 style="font-size:1.25rem; margin-bottom: var(--space-md);" data-reveal>Related Insights</h2>
        <div class="insights-grid" data-reveal-group>
          <% related.forEach(function(a, i) { %>
            <a href="/insights/<%= a.slug %>" class="article-card" data-reveal style="--reveal-index: <%= i %>">
              <div class="article-card__media"></div>
              <div class="article-card__meta"><span class="badge badge-accent"><%= a.category_name %></span></div>
              <h3><%= a.title %></h3>
            </a>
          <% }); %>
        </div>
      </div>
      <% } %>
    </div>
  </article>
</main>

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