---
/**
 * EditorialContent — the prose tail of the splash. Lives between Spacecraft
 * and the footer; carries the production-scale evidence and the entry-point
 * doc links so visitors who scroll past the demo end with a clear next step.
 *
 *   05 — In production (Maschinen-Stockert showcase + scale quote)
 *   06 — Pick a thread (4 link cards into the docs)
 *   07 — Marquee close
 */
---
{/* ============================================================
    05 · IN PRODUCTION
    ============================================================ */}
<section class="section" id="production" aria-labelledby="prod-h">
  <div class="container">
    <div class="section-head">
      <span class="eyebrow">In production · 05</span>
      <h2 id="prod-h" class="section-title">Real apps. <span class="accent">Real revenue.</span></h2>
      <p class="section-sub">
        The flagship Nibiru deployment is the <strong>Maschinen Stockert</strong> group — two
        repos powering one of Austria's larger industrial-machinery e-commerce platforms.
        18 shared modules, ~74 000 lines of PHP, 161 timestamped SQL migrations into
        production. No service container.
      </p>
    </div>

    <div class="prod-grid">
      <a class="prod-card" href="/en/showcase/projects/#maschinen-stockertde--public-catalogue">
        <div class="prod-card__head">
          <span class="prod-card__tag">Public catalogue</span>
          <span class="prod-card__url">maschinen-stockert.de</span>
        </div>
        <p class="prod-card__desc">
          Multilingual content, Elasticsearch search, SEO-friendly URLs, Yumpu PDF flipbooks.
        </p>
        <div class="prod-card__stats">
          <div><span class="v">10</span><span class="l">Controllers</span></div>
          <div><span class="v">18</span><span class="l">Modules</span></div>
          <div><span class="v">150</span><span class="l">Templates</span></div>
          <div><span class="v">36 289</span><span class="l">Lines of PHP</span></div>
        </div>
        <span class="prod-card__cta">Read the case <span class="arrow">→</span></span>
      </a>

      <a class="prod-card" href="/en/showcase/projects/#datamaschinen-stockertde--admin--api">
        <div class="prod-card__head">
          <span class="prod-card__tag">Admin &amp; API</span>
          <span class="prod-card__url">data.maschinen-stockert.de</span>
        </div>
        <p class="prod-card__desc">
          Page-tree CMS, role-based ACL, public-API whitelist, Machineryscout indexer.
        </p>
        <div class="prod-card__stats">
          <div><span class="v">36</span><span class="l">Controllers</span></div>
          <div><span class="v">18</span><span class="l">Modules</span></div>
          <div><span class="v">348</span><span class="l">Templates</span></div>
          <div><span class="v">37 369</span><span class="l">Lines of PHP</span></div>
        </div>
        <span class="prod-card__cta">Read the case <span class="arrow">→</span></span>
      </a>
    </div>

    <blockquote class="prod-quote">
      Two repos, 18 shared modules, 161 timestamped SQL migrations into production with
      no migration framework, 74 000 lines of PHP with no service container. The team
      that built and runs it is small.
    </blockquote>
  </div>
</section>

{/* ============================================================
    06 · PICK A THREAD
    ============================================================ */}
<section class="section" id="threads" aria-labelledby="threads-h">
  <div class="container">
    <div class="section-head">
      <span class="eyebrow">Where next · 06</span>
      <h2 id="threads-h" class="section-title">Pick a <span class="accent">thread.</span></h2>
      <p class="section-sub">
        Four ways into the framework. None of them takes more than five minutes to start.
      </p>
    </div>

    <div class="thread-grid">
      <a class="thread-card" href="/en/start/what-is-nibiru/">
        <span class="thread-card__num">01</span>
        <h3 class="thread-card__title">What is Nibiru?</h3>
        <p class="thread-card__desc">The 90-second tour: MMVC, the dispatcher, the request lifecycle.</p>
        <span class="thread-card__cta">Read <span class="arrow">→</span></span>
      </a>
      <a class="thread-card" href="/en/why-nibiru/">
        <span class="thread-card__num">02</span>
        <h3 class="thread-card__title">Why Nibiru, not Laravel</h3>
        <p class="thread-card__desc">Five things Nibiru does differently — each backed by real production code.</p>
        <span class="thread-card__cta">Read <span class="arrow">→</span></span>
      </a>
      <a class="thread-card" href="/en/start/local-testing/">
        <span class="thread-card__num">03</span>
        <h3 class="thread-card__title">Run it locally</h3>
        <p class="thread-card__desc">Three paths from clone to running site, including the Oracle on your own Ollama.</p>
        <span class="thread-card__cta">Read <span class="arrow">→</span></span>
      </a>
      <a class="thread-card" href="/en/ai/module/overview/">
        <span class="thread-card__num">04</span>
        <h3 class="thread-card__title">The AI module</h3>
        <p class="thread-card__desc">Chat, embeddings, RAG, agents — first-class AI in your Nibiru app.</p>
        <span class="thread-card__cta">Read <span class="arrow">→</span></span>
      </a>
    </div>
  </div>
</section>

{/* ============================================================
    07 · MARQUEE CLOSE
    ============================================================ */}
<section class="section section--marquee" aria-hidden="true">
  <p class="atelier-marquee">Create · Invent · Impress</p>
</section>

<style is:global>
  /* === Production showcase (Maschinen-Stockert plates) === */
  .prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.25rem;
    max-width: var(--nibiru-container, 1280px);
    margin: 0 auto;
    padding: 0 32px;
  }
  .prod-card {
    display: flex; flex-direction: column; gap: 1rem;
    background: linear-gradient(180deg, var(--nibiru-night), var(--nibiru-space));
    border: 1px solid var(--nibiru-line);
    border-radius: var(--nibiru-radius-2xl);
    padding: 1.4rem 1.5rem;
    color: var(--nibiru-star);
    text-decoration: none;
    transition: transform 240ms var(--nibiru-ease-out, ease),
                border-color 240ms ease,
                box-shadow 240ms ease;
  }
  .prod-card:hover {
    transform: translateY(-2px);
    border-color: var(--nibiru-nebula-mag);
    box-shadow: var(--nibiru-shadow-lg);
  }
  .prod-card__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
  }
  .prod-card__tag {
    font-family: var(--font-mono);
    font-size: 0.69rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--nibiru-nebula-mag);
  }
  .prod-card__url {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--nibiru-muted);
  }
  .prod-card__desc {
    margin: 0;
    color: rgba(244, 238, 219, 0.75);
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .prod-card__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--nibiru-line);
    border-bottom: 1px solid var(--nibiru-line);
  }
  .prod-card__stats div { display: flex; flex-direction: column; gap: 2px; }
  .prod-card__stats .v {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 500;
    color: var(--nibiru-star);
    letter-spacing: -0.02em;
  }
  .prod-card__stats .l {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--nibiru-muted);
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .prod-card__cta {
    margin-top: auto;
    font-size: 0.92rem;
    color: var(--nibiru-star);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .prod-card__cta .arrow {
    font-family: var(--font-mono);
    transition: transform 200ms ease;
  }
  .prod-card:hover .prod-card__cta .arrow { transform: translateX(4px); }

  .prod-quote {
    max-width: 56rem;
    margin: 4rem auto 0;
    padding: 0 32px;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
    line-height: 1.55;
    letter-spacing: -0.015em;
    color: var(--nibiru-star);
    border-left: 3px solid var(--nibiru-nebula-mag);
    padding-left: 1.4rem;
  }
  @media (max-width: 720px) {
    .prod-card__stats { grid-template-columns: repeat(2, 1fr); }
  }

  /* === Pick-a-thread cards === */
  .thread-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1rem;
    max-width: var(--nibiru-container, 1280px);
    margin: 0 auto;
    padding: 0 32px;
  }
  .thread-card {
    position: relative;
    display: flex; flex-direction: column; gap: 0.7rem;
    padding: 1.5rem 1.4rem 1.3rem;
    background: var(--nibiru-night);
    border: 1px solid var(--nibiru-line);
    border-radius: var(--nibiru-radius-xl);
    color: var(--nibiru-star);
    text-decoration: none;
    overflow: hidden;
    transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
  }
  .thread-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(184, 107, 255, 0.18), transparent 70%);
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
  }
  .thread-card:hover {
    transform: translateY(-2px);
    border-color: var(--nibiru-nebula-mag);
    background: rgba(28, 15, 58, 0.6);
  }
  .thread-card:hover::before { opacity: 1; }
  .thread-card__num {
    font-family: var(--font-mono);
    font-size: 0.69rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nibiru-nebula-mag);
  }
  .thread-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--nibiru-star);
  }
  .thread-card__desc {
    margin: 0;
    flex: 1;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(244, 238, 219, 0.7);
  }
  .thread-card__cta {
    font-size: 0.86rem;
    color: rgba(244, 238, 219, 0.85);
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 0.4rem;
  }
  .thread-card__cta .arrow {
    font-family: var(--font-mono);
    transition: transform 200ms ease;
  }
  .thread-card:hover .thread-card__cta .arrow { transform: translateX(4px); }
  .thread-card:hover .thread-card__cta { color: var(--nibiru-nebula-mag); }

  /* === Marquee close === */
  .section--marquee {
    padding: 6rem 0 7rem;
  }
  .section--marquee .atelier-marquee {
    text-align: center;
    margin: 0;
  }
</style>
