<!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">
      <nav class="breadcrumbs" aria-label="Breadcrumb">
        <a href="/">Home</a> <span>/</span> <a href="/portfolio">Portfolio</a> <span>/</span> <span><%= company.name %></span>
      </nav>

      <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: var(--space-md);" data-reveal>
        <div style="display:flex; align-items:center; gap: var(--space-md);">
          <div class="company-card__logo" style="width:72px; height:72px; font-size:1.5rem;"><%= company.name.slice(0,2).toUpperCase() %></div>
          <div>
            <h1 style="font-size: var(--fs-h2); margin-bottom: 0.35rem;"><%= company.name %></h1>
            <p class="lead" style="margin:0;"><%= company.tagline %></p>
          </div>
        </div>
        <% if (company.website_url) { %>
          <a href="<%= company.website_url %>" target="_blank" rel="noopener" class="btn btn-outline" data-cursor-hover>Visit Website</a>
        <% } %>
      </div>

      <div class="company-card__meta" style="margin-top: var(--space-lg);" data-reveal>
        <% if (company.is_unicorn) { %><span class="badge badge-unicorn">Unicorn</span><% } %>
        <span class="badge badge-accent"><%= company.category_name || 'Uncategorized' %></span>
        <span class="badge"><%= stageLabel(company.stage) %></span>
        <span class="badge"><%= company.headquarters %></span>
      </div>
    </div>
  </section>

  <section class="section section--tight">
    <div class="container" style="display:grid; grid-template-columns: 2fr 1fr; gap: var(--space-2xl);">
      <div data-reveal>
        <h2 style="font-size:1.5rem; margin-bottom: var(--space-md);">About <%= company.name %></h2>
        <p class="lead" style="color: var(--ink-700);"><%= company.description %></p>
      </div>

      <aside class="card" data-reveal="right">
        <h3 style="font-size:1rem; margin-bottom: var(--space-md);">Company Details</h3>
        <dl style="display:grid; gap: var(--space-sm);">
          <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border-subtle); padding-bottom:0.5rem;">
            <dt style="color:var(--ink-300); font-size:0.875rem;">Valuation</dt>
            <dd style="font-weight:600;"><%= formatUsdCompact(company.valuation_usd) || 'Undisclosed' %></dd>
          </div>
          <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border-subtle); padding-bottom:0.5rem;">
            <dt style="color:var(--ink-300); font-size:0.875rem;">Stage</dt>
            <dd style="font-weight:600;"><%= stageLabel(company.stage) %></dd>
          </div>
          <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border-subtle); padding-bottom:0.5rem;">
            <dt style="color:var(--ink-300); font-size:0.875rem;">Founded</dt>
            <dd style="font-weight:600;"><%= company.founded_year %></dd>
          </div>
          <div style="display:flex; justify-content:space-between; border-bottom:1px solid var(--border-subtle); padding-bottom:0.5rem;">
            <dt style="color:var(--ink-300); font-size:0.875rem;">Kubera Investment</dt>
            <dd style="font-weight:600;"><%= formatDate(company.investment_date, { year: 'numeric', month: 'short' }) %></dd>
          </div>
          <div style="display:flex; justify-content:space-between;">
            <dt style="color:var(--ink-300); font-size:0.875rem;">Headquarters</dt>
            <dd style="font-weight:600;"><%= company.headquarters %>, <%= company.country %></dd>
          </div>
        </dl>
      </aside>
    </div>
  </section>

  <section class="section--tight">
    <div class="container" style="text-align:center;" data-reveal>
      <a href="/portfolio" class="btn btn-ghost" data-cursor-hover><span class="icon">←</span> Back to Portfolio</a>
    </div>
  </section>
</main>

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