<!doctype html>
<html lang="en">
<head>
<%- include('../partials/head', { meta }) %>
</head>
<body data-page="events">
<%- 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 section-head--center" data-reveal>
        <p class="section-eyebrow" style="justify-content:center">Events</p>
        <h1 style="font-size: var(--fs-h1);">Where our community gathers</h1>
        <p class="lead">Summits, roundtables, and office hours for founders, LPs, and the Kubera network.</p>
      </div>
    </div>
  </section>

  <section class="section section--tight">
    <div class="container">
      <h2 style="font-size:1.15rem; margin-bottom: var(--space-md);" data-reveal>Upcoming</h2>
      <% if (!upcoming.length) { %>
        <p class="empty-state">No upcoming events scheduled — check back soon.</p>
      <% } %>
      <% upcoming.forEach(function(e, i) { %>
        <% var d = new Date(e.starts_at); %>
        <a href="/events/<%= e.slug %>" class="event-card" data-reveal style="--reveal-index: <%= i %>" data-cursor-hover>
          <div class="event-date">
            <div class="event-date__day"><%= d.getDate() %></div>
            <div class="event-date__month"><%= d.toLocaleDateString('en-US', { month: 'short', year: 'numeric' }) %></div>
          </div>
          <div>
            <h3 style="font-size:1.15rem; margin-bottom:0.35rem;"><%= e.title %></h3>
            <p><%= e.description %></p>
            <div class="job-row__meta" style="margin-top:0.5rem;">
              <span><%= e.is_virtual ? 'Virtual' : e.location %></span>
            </div>
          </div>
          <span class="icon">→</span>
        </a>
      <% }); %>
    </div>
  </section>

  <% if (past.length) { %>
  <section class="section" style="background: var(--surface-2);">
    <div class="container">
      <h2 style="font-size:1.15rem; margin-bottom: var(--space-md);" data-reveal>Past Events</h2>
      <div class="insights-grid" data-reveal-group>
        <% past.forEach(function(e, i) { %>
          <a href="/events/<%= e.slug %>" class="article-card" data-reveal style="--reveal-index: <%= i %>">
            <div class="article-card__media"></div>
            <div class="article-card__meta"><span><%= formatDate(e.starts_at) %></span></div>
            <h3><%= e.title %></h3>
          </a>
        <% }); %>
      </div>
    </div>
  </section>
  <% } %>
</main>

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