---
/**
 * Spacecraft — three "vessels" (Lite / Base / Pro). Pure CSS, no JS.
 * Maps to Nibiru's actual offering:
 *   Lite  — clone & start (the framework alone)
 *   Base  — recommended, with the AI module + Oracle
 *   Pro   — full deployment with CMS, ACL, Elasticsearch and Machineryscout
 */
---
<section class="section" id="download" aria-labelledby="dl-h">
  <div class="container">
    <div class="section-head">
      <span class="eyebrow">Choose your craft · 04</span>
      <h2 id="dl-h" class="section-title">Three vessels. <span class="accent">Same orbit.</span></h2>
      <p class="section-sub">Open source, MIT-licensed, no SDK. Pick the configuration that matches your altitude.</p>
    </div>
  </div>

  <div class="craft-grid">
    <article class="craft lite">
      <span class="badge">Probe · Edge</span>
      <h3 class="name">Nibiru <em>Lite</em></h3>
      <p class="role">Just the framework. Five commands and you're running.</p>
      <div class="silhouette" aria-hidden="true">
        <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="1.2" style="color: rgba(122, 214, 163, 0.9);">
          <circle cx="50" cy="50" r="8" fill="currentColor"></circle>
          <ellipse cx="50" cy="50" rx="32" ry="6"></ellipse>
          <ellipse cx="50" cy="50" rx="32" ry="6" transform="rotate(60 50 50)"></ellipse>
          <ellipse cx="50" cy="50" rx="32" ry="6" transform="rotate(-60 50 50)"></ellipse>
          <circle cx="82" cy="50" r="2.5" fill="currentColor"></circle>
        </svg>
      </div>
      <div class="stats">
        <div><span class="l">Disk</span><span class="v">~ 5 MB</span></div>
        <div><span class="l">Boot</span><span class="v">3 min</span></div>
        <div><span class="l">DB drivers</span><span class="v">5</span></div>
        <div><span class="l">License</span><span class="v">MIT</span></div>
      </div>
      <a class="craft-cta" href="/en/start/quick-start/">Read the quick start <span class="arrow">→</span></a>
    </article>

    <article class="craft base">
      <span class="badge">Shuttle · Daily driver</span>
      <h3 class="name">Nibiru <em>Base</em></h3>
      <p class="role">Framework + AI module + Oracle, wired to your Ollama.</p>
      <div class="silhouette" aria-hidden="true">
        <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="1.2" style="color: rgba(184, 107, 255, 0.9);">
          <circle cx="50" cy="50" r="14" fill="currentColor" opacity="0.4"></circle>
          <circle cx="50" cy="50" r="9" fill="currentColor"></circle>
          <ellipse cx="50" cy="50" rx="38" ry="9"></ellipse>
          <ellipse cx="50" cy="50" rx="38" ry="9" transform="rotate(45 50 50)"></ellipse>
          <ellipse cx="50" cy="50" rx="38" ry="9" transform="rotate(90 50 50)"></ellipse>
          <ellipse cx="50" cy="50" rx="38" ry="9" transform="rotate(-45 50 50)"></ellipse>
          <circle cx="88" cy="50" r="3" fill="currentColor"></circle>
          <circle cx="22" cy="22" r="2" fill="currentColor"></circle>
          <circle cx="78" cy="78" r="2.5" fill="currentColor"></circle>
        </svg>
      </div>
      <div class="stats">
        <div><span class="l">Modules</span><span class="v">+ ai · oracle</span></div>
        <div><span class="l">Tools</span><span class="v">3 built-in</span></div>
        <div><span class="l">Backends</span><span class="v">Ollama · OpenAI · Claude</span></div>
        <div><span class="l">License</span><span class="v">MIT</span></div>
      </div>
      <a class="craft-cta" href="/en/ai/module/overview/">Read the AI docs <span class="arrow">→</span></a>
    </article>

    <article class="craft pro">
      <span class="badge">Mothership · Heavy lift</span>
      <h3 class="name">Nibiru <em>Pro</em></h3>
      <p class="role">Production stack — CMS, ACL, Elasticsearch, blue-green deploys.</p>
      <div class="silhouette" aria-hidden="true">
        <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="1.2" style="color: rgba(255, 181, 116, 0.9);">
          <circle cx="50" cy="50" r="20" fill="currentColor" opacity="0.25"></circle>
          <circle cx="50" cy="50" r="12" fill="currentColor"></circle>
          <ellipse cx="50" cy="50" rx="44" ry="12"></ellipse>
          <ellipse cx="50" cy="50" rx="44" ry="12" transform="rotate(30 50 50)"></ellipse>
          <ellipse cx="50" cy="50" rx="44" ry="12" transform="rotate(60 50 50)"></ellipse>
          <ellipse cx="50" cy="50" rx="44" ry="12" transform="rotate(90 50 50)"></ellipse>
          <ellipse cx="50" cy="50" rx="44" ry="12" transform="rotate(120 50 50)"></ellipse>
          <ellipse cx="50" cy="50" rx="44" ry="12" transform="rotate(150 50 50)"></ellipse>
          <circle cx="92" cy="50" r="3.5" fill="currentColor"></circle>
          <circle cx="14" cy="36" r="2.5" fill="currentColor"></circle>
          <circle cx="68" cy="86" r="3" fill="currentColor"></circle>
          <circle cx="32" cy="14" r="2" fill="currentColor"></circle>
        </svg>
      </div>
      <div class="stats">
        <div><span class="l">Modules</span><span class="v">+ cms · acl · search</span></div>
        <div><span class="l">Migrations</span><span class="v">161 in prod</span></div>
        <div><span class="l">Search</span><span class="v">Elasticsearch</span></div>
        <div><span class="l">Deploy</span><span class="v">blue-green</span></div>
      </div>
      <a class="craft-cta" href="/en/showcase/projects/">See it in production <span class="arrow">→</span></a>
    </article>
  </div>
</section>
