---
import AppLayout from '../layouts/AppLayout.astro';

const user = Astro.locals.user;
---
<AppLayout title="Vision" user={user}>
  <div class="page">

    <header class="page-header">
      <p class="label-sm eyebrow">Vision</p>
      <h1 class="display-md page-title">Why this matters.</h1>
    </header>

    <div class="content">

      <!-- Fenja AI -->
      <section class="section">
        <h2 class="headline-md section-title">Fenja AI</h2>
        <div class="prose">
          <p class="body-lg">
            Fenja enables the safe, sovereign use of Artificial Intelligence in organisations
            where data is highly sensitive, operations are mission-critical, and strict data
            privacy is essential. We are building the premier solution for public authorities
            and companies operating in heavily regulated industries — pharmaceuticals, critical
            infrastructure, finance — where standard AI solutions hosted on foreign-owned public
            clouds are simply not a viable or compliant option.
          </p>
          <p class="body-lg">
            Many organisations are eager to harness the transformative power of AI but cannot
            accept the risk of their data, workflows, and critical functions becoming dependent
            on external providers with foreign ownership and control. Fenja directly addresses
            this gap by enabling highly advanced, customer-hosted AI within the client's own
            secure infrastructure. Data remains under absolute, localised control while we
            deliver the robust security, traceability, and documentation demanded by the market.
          </p>
          <p class="body-lg">
            As the global demand for digital sovereignty accelerates, Fenja is positioned to
            generate profound societal value. We are making cutting-edge AI safely usable in
            the most critical of functions without ever compromising security or compliance.
            Backed by investment from the Innovation Fund, we are accelerating product
            development, executing high-impact pilot projects, and establishing foundational
            customer cases. Our long-term ambition is to establish Fenja as the definitive
            Danish and European platform for secure, locally controlled AI in regulated
            environments.
          </p>
        </div>
      </section>

      <!-- Project Bifrost -->
      <section class="section">
        <h2 class="headline-md section-title">Project Bifrost</h2>
        <div class="prose">
          <p class="body-lg">
            Project Bifrost is one of the first stones in the foundation of Denmark and the EU's
            sovereign AI platform — a platform controlled by its customers, that understands not
            just your business, but you and your department, and builds on that knowledge
            automatically. Open-source LLMs in a modern, secure, customer-hosted environment.
          </p>
          <p class="body-lg statement">
            This is Project Bifrost.
          </p>
        </div>
      </section>

      <!-- What comes after -->
      <section class="section">
        <h2 class="headline-md section-title">What comes after</h2>
        <p class="body-md section-intro">
          The current pilot is one chapter. The platform we are building toward is something
          more ambitious. In reserved terms:
        </p>
        <ul class="after-list">
          <li class="after-item">
            <h3 class="headline-sm item-title">Full developer agentic experience</h3>
            <p class="body-md item-body">
              A platform where developers can compose, orchestrate, and deploy AI agents that
              work within your infrastructure — deeply integrated, auditable, and under your control.
            </p>
          </li>
          <li class="after-item">
            <h3 class="headline-sm item-title">Agentic data extraction and analysis</h3>
            <p class="body-md item-body">
              Agents that move across your document corpus, surface connections, extract
              structured information, and return findings with provenance intact.
            </p>
          </li>
          <li class="after-item">
            <h3 class="headline-sm item-title">Self-service agent work automation</h3>
            <p class="body-md item-body">
              Non-technical users define repeatable tasks in natural language. The platform
              handles execution, scheduling, and audit — without IT involvement.
            </p>
          </li>
        </ul>
      </section>

    </div>
  </div>
</AppLayout>

<style>
  .page {
    padding: var(--space-12) var(--space-20) var(--space-16);
    max-width: var(--content-max);
    margin: 0 auto;
  }

  /* ── Header ──────────────────────────────────────────────────────── */
  .page-header {
    margin-bottom: var(--space-12);
    max-width: 44rem;
  }

  .eyebrow {
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-muted);
    margin-bottom: var(--space-3);
  }

  .page-title {
    margin: 0;
  }

  /* ── Content ─────────────────────────────────────────────────────── */
  .content {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    max-width: 52rem;
  }

  /* ── Section ─────────────────────────────────────────────────────── */
  .section {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .section-title {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: var(--tracking-snug);
    margin: 0;
    color: var(--on-surface);
  }

  .section-intro {
    color: var(--on-surface-variant);
    margin: 0;
  }

  /* ── Prose ───────────────────────────────────────────────────────── */
  .prose {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .prose .body-lg {
    margin: 0;
    color: var(--on-surface-variant);
    line-height: var(--leading-relaxed);
    max-width: var(--reading-max);
  }

  .statement {
    font-family: var(--font-serif);
    font-size: var(--text-headline-sm) !important;
    font-weight: 700;
    font-style: italic;
    color: var(--on-surface) !important;
    letter-spacing: var(--tracking-snug);
  }

  /* ── After list ──────────────────────────────────────────────────── */
  .after-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .after-item {
    padding: var(--space-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-top: var(--ghost-border);
  }
  .after-item:last-child {
    border-bottom: var(--ghost-border);
  }

  .item-title {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: var(--tracking-snug);
    margin: 0;
    color: var(--on-surface);
  }

  .item-body {
    margin: 0;
    color: var(--on-surface-variant);
    max-width: var(--reading-max);
    line-height: var(--leading-relaxed);
  }
</style>
