<!doctype html>
<html lang="en">
<head>
<%- include('../partials/head', { meta }) %>
</head>
<body data-page="portfolio">
<%- 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">Portfolio</p>
        <h1 style="font-size: var(--fs-h1);">Founders we're proud to back</h1>
        <p class="lead">Explore <%= stats.total_companies %> companies across AI, climate, healthcare, defense, and more — <%= stats.unicorns %> of them unicorns, spanning <%= stats.countries %> countries.</p>
      </div>
    </div>
  </section>

  <section class="section section--tight">
    <div class="container">
      <div class="portfolio-toolbar">
        <div class="filter-row" data-reveal>
          <button class="chip is-active" data-portfolio-chip="">All Sectors</button>
          <% sectors.forEach(function(s) { %>
            <button class="chip" data-portfolio-chip="<%= s.slug %>"><%= s.name %></button>
          <% }); %>
        </div>
      </div>

      <div class="portfolio-toolbar" data-reveal>
        <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" placeholder="Search portfolio companies…" data-portfolio-search aria-label="Search portfolio" />
        </div>
        <div style="display:flex; align-items:center; gap: var(--space-sm);">
          <span data-portfolio-count style="font-size: 0.875rem; color: var(--ink-300);"><%= companies.length %> companies</span>
          <select class="chip" data-portfolio-stage aria-label="Filter by stage">
            <option value="">All Stages</option>
            <option value="pre-seed">Pre-Seed</option>
            <option value="seed">Seed</option>
            <option value="series-a">Series A</option>
            <option value="series-b">Series B</option>
            <option value="series-c">Series C</option>
            <option value="growth">Growth</option>
          </select>
        </div>
      </div>

      <div class="portfolio-grid" data-portfolio-grid data-reveal-group>
        <% companies.forEach(function(c, i) { %>
          <article class="company-card card-hover" data-reveal style="--reveal-index: <%= i % 6 %>">
            <div class="company-card__top">
              <div class="company-card__logo"><%= c.name.slice(0,2).toUpperCase() %></div>
              <% if (c.is_unicorn) { %><span class="badge badge-unicorn">Unicorn</span><% } %>
            </div>
            <h3><%= c.name %></h3>
            <p><%= c.tagline %></p>
            <div class="company-card__meta">
              <span class="badge badge-accent"><%= c.category_name || 'Uncategorized' %></span>
              <span class="badge"><%= stageLabel(c.stage) %></span>
            </div>
            <div class="company-card__footer">
              <span class="company-card__valuation"><%= formatUsdCompact(c.valuation_usd) || '—' %></span>
              <a class="btn-ghost" href="/portfolio/<%= c.slug %>" data-cursor-hover>Learn more <span class="icon">→</span></a>
            </div>
          </article>
        <% }); %>
      </div>

      <p class="empty-state" data-portfolio-empty style="display:none;">No companies match those filters yet. Try a different sector or search term.</p>
    </div>
  </section>
</main>

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