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

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

    <!-- ── Hero ───────────────────────────────────────────────────── -->
    <header class="hero">
      <p class="label-sm eyebrow">Vision</p>
      <h1 class="hero-headline">
        A European platform for <em>sovereign AI.</em>
      </h1>
    </header>

    <!-- ── The stakes ─────────────────────────────────────────────── -->
    <section class="section stakes-section">
      <h2 class="section-heading label-sm">The stakes</h2>
      <div class="prose-column">
        <p class="body-lg">
          Foreign governments can compel access to Europe's most sensitive data.
          Foreign companies can cut off access to the AI that runs on it — overnight,
          without warning, and with no recourse. Today, 97% of AI foundational model
          usage falls outside EU jurisdiction. For hospitals, public authorities,
          defence contractors, and financial institutions, this is not an abstract risk.
          It is an active exposure.
        </p>
        <p class="body-lg">
          For critical infrastructure, healthcare, defence, and finance, reliance on
          foreign-controlled AI is not a strategy. It is a vulnerability — one that
          organisations can no longer afford to ignore as AI becomes central to how
          decisions are made.
        </p>
      </div>
      <blockquote class="pulled-quote">
        <p class="pulled-quote__text">We can't build our digital fortress on foreign clouds.</p>
        <footer class="pulled-quote__attribution">— The imperative behind Project Bifrost</footer>
      </blockquote>
    </section>

    <!-- ── What Fenja is building ─────────────────────────────────── -->
    <section class="section">
      <h2 class="section-heading label-sm">What we are building</h2>
      <div class="prose-column">
        <p class="body-lg">
          Fenja enables the safe, sovereign use of AI in organisations where data is
          highly sensitive, operations are mission-critical, and strict privacy is
          non-negotiable. We are building the solution for public authorities and
          regulated industries — pharmaceuticals, critical infrastructure, finance —
          where standard AI hosted on foreign-owned public clouds is simply not
          a compliant option.
        </p>
        <p class="body-lg">
          The core proposition is direct: highly advanced, customer-hosted AI within
          the client's own secure infrastructure. Data remains under absolute, localised
          control. The AI understands the organisation's language, context, and structure.
          Every response is traceable to its source documents. Nothing leaves the building.
        </p>
        <p class="body-lg">
          As global demand for digital sovereignty accelerates, this becomes a matter of
          strategic necessity. Backed by Innofounder, we are executing the first pilot
          projects and building the foundational customer cases. The long-term ambition
          is to establish Fenja as the definitive Danish and European platform for
          locally controlled AI in regulated environments.
        </p>
      </div>
    </section>

    <!-- ── Project Bifrost in context ────────────────────────────── -->
    <section class="section bifrost-context-section">
      <div class="bifrost-lockup-col">
        <ProjectLockup size="lg" alignment="left" showWordmark={false} />
      </div>
      <div class="bifrost-text-col">
        <h2 class="section-heading label-sm">The first step</h2>
        <div class="prose-column">
          <p class="body-lg">
            Project Bifrost is not a proof of concept in a lab. It is a working
            collaboration with five organisations who are already operating in the
            environments this platform is built for. Two are running paid pilots.
            Three are on the Customer Advisory Board. All of them are shaping what
            the platform becomes.
          </p>
          <p class="body-lg">
            The trajectory is clear: from a working pilot → the Danish standard for
            sovereign AI deployment → the foundation for EU-scale expansion. Project
            Bifrost participants are at the beginning of that arc — helping to define
            what it looks like at every step.
          </p>
        </div>
        <div class="horizon-list">
          <div class="horizon-item">
            <span class="horizon-label label-sm">Now</span>
            <p class="horizon-desc body-md">Pilot — five organisations shaping the first working version.</p>
          </div>
          <div class="horizon-item">
            <span class="horizon-label label-sm">Next</span>
            <p class="horizon-desc body-md">Danish standard — a proven, replicable sovereign AI deployment.</p>
          </div>
          <div class="horizon-item">
            <span class="horizon-label label-sm">Further</span>
            <p class="horizon-desc body-md">EU expansion — the platform for regulated AI across Europe.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- ── Closing ─────────────────────────────────────────────────── -->
    <section class="closing-section">
      <p class="closing-text">
        This is not a product that gets built in a boardroom.
        It gets built with the organisations who will depend on it.
        That is what Project Bifrost is for.
      </p>
    </section>

  </div>
</AppLayout>

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

  /* ── Hero ────────────────────────────────────────────────────────── */
  .hero {
    padding-top: var(--space-16);
    padding-bottom: var(--space-12);
    max-width: 52rem;
    border-bottom: var(--ghost-border);
  }

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

  .hero-headline {
    font-family: var(--font-serif);
    font-size: var(--text-display-md);
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--on-surface);
    margin: 0;
  }

  .hero-headline em {
    font-weight: 700;
    font-style: italic;
  }

  /* ── Sections ────────────────────────────────────────────────────── */
  .section {
    padding: var(--space-12) 0;
    border-bottom: var(--ghost-border);
  }

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

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

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

  /* ── Pulled quote ────────────────────────────────────────────────── */
  .stakes-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .pulled-quote {
    margin: 0;
    padding: 0 0 0 var(--space-6);
    border-left: 3px solid var(--secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 44rem;
  }

  .pulled-quote__text {
    font-family: var(--font-serif);
    font-size: var(--text-display-md);
    font-style: italic;
    font-weight: 400;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--on-surface-variant);
    margin: 0;
  }

  .pulled-quote__attribution {
    font-family: var(--font-sans);
    font-size: var(--text-label-md);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--on-surface-muted);
  }

  /* ── Bifrost context — two-column ───────────────────────────────── */
  .bifrost-context-section {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--space-10);
    align-items: start;
  }

  .bifrost-lockup-col {
    padding-top: var(--space-7);
  }

  .bifrost-text-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .bifrost-text-col .section-heading {
    margin-bottom: var(--space-4);
  }

  /* ── Horizon list ────────────────────────────────────────────────── */
  .horizon-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .horizon-item {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-4) 0;
    border-top: var(--ghost-border);
  }
  .horizon-item:last-child {
    border-bottom: var(--ghost-border);
  }

  .horizon-label {
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-muted);
    font-weight: 600;
  }

  .horizon-desc {
    color: var(--on-surface-variant);
    margin: 0;
    line-height: var(--leading-relaxed);
  }

  /* ── Closing ─────────────────────────────────────────────────────── */
  .closing-section {
    padding: var(--space-16) 0 var(--space-12);
    max-width: 44rem;
  }

  .closing-text {
    font-family: var(--font-serif);
    font-size: var(--text-headline-md);
    font-weight: 400;
    font-style: italic;
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-relaxed);
    color: var(--on-surface-variant);
    margin: 0;
  }

  /* ── Mobile (≤767px) ────────────────────────────────────────────── */
  @media (max-width: 767px) {
    .page { padding: 0 var(--space-5) var(--space-12); }
    .bifrost-context-section { grid-template-columns: 1fr; gap: var(--space-3); }
  }
</style>
