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

const user = Astro.locals.user;

const tiers = [
  {
    name: 'Fenja Basic',
    desc: 'General knowledge work — document retrieval, Q&A, summarisation, and search across the organisation\'s corpus. The foundation every other tier is built on.',
    current: true,
  },
  {
    name: 'Fenja Code',
    desc: 'Developer-assisted coding within the customer\'s own codebase. The agent understands project structure, conventions, and prior decisions.',
    current: false,
  },
  {
    name: 'Fenja Analyze',
    desc: 'Strategic data analysis — structured extraction across large document corpora, with full provenance on every finding.',
    current: false,
  },
  {
    name: 'Fenja Agentic',
    desc: 'Governed agent-based automation. Non-technical users define repeatable workflows; the platform handles execution, scheduling, and audit.',
    current: false,
  },
];
---
<AppLayout title="Product" user={user}>
  <div class="page">

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

    <!-- ── What Fenja is ──────────────────────────────────────────── -->
    <section class="section">
      <div class="intro-prose">
        <p class="body-lg">
          Fenja is not a single product. It is a platform for running advanced AI
          inside the customer's own infrastructure. It solves many use cases because
          it provides the building blocks every regulated AI deployment needs: a local
          model, agents that do work, a layer that teaches the AI the organisation's
          language, and the tools those agents use to act.
        </p>
        <p class="body-lg">
          One deployment, fully under your control, with no data ever touching
          external infrastructure.
        </p>
      </div>
    </section>

    <!-- ── Architecture diagram ───────────────────────────────────── -->
    <section class="section arch-section">
      <h2 class="section-heading label-sm">How it is structured</h2>

      <div class="arch-diagram" role="list" aria-label="Platform architecture layers">

        <div class="arch-row" role="listitem" style="background: var(--surface-container-lowest);">
          <div class="arch-row-label">
            <span class="arch-layer-name label-sm">AI Model</span>
          </div>
          <div class="arch-row-content">
            <p class="arch-row-desc body-md">
              Locally hosted, open-source foundation model (Llama 3, Mistral).
              No data ever leaves the customer's infrastructure.
            </p>
          </div>
          <div class="arch-row-tag">
            <span class="arch-tag label-sm">Foundation</span>
          </div>
        </div>

        <div class="arch-row" role="listitem" style="background: var(--surface-container-low);">
          <div class="arch-row-label">
            <span class="arch-layer-name label-sm">Agents</span>
          </div>
          <div class="arch-row-content">
            <p class="arch-row-desc body-md">
              Specialised AI agents that handle distinct tasks — retrieval, summarisation,
              analysis, drafting — and collaborate to solve complex queries.
            </p>
          </div>
          <div class="arch-row-tag">
            <span class="arch-tag label-sm">Execution</span>
          </div>
        </div>

        <div class="arch-row arch-row--highlight" role="listitem" style="background: var(--surface-container);">
          <div class="arch-row-label">
            <span class="arch-layer-name label-sm">Semantic Layer</span>
            <span class="arch-sublabel label-sm">Fenja Knowledge</span>
          </div>
          <div class="arch-row-content">
            <p class="arch-row-desc body-md">
              The business vocabulary through which the AI understands the organisation —
              its structure, terminology, decisions, and the people behind them.
              Grows automatically as the organisation uses the platform.
            </p>
          </div>
          <div class="arch-row-tag">
            <span class="arch-tag label-sm">Context</span>
          </div>
        </div>

        <div class="arch-row" role="listitem" style="background: var(--surface-container-high);">
          <div class="arch-row-label">
            <span class="arch-layer-name label-sm">Tools</span>
          </div>
          <div class="arch-row-content">
            <p class="arch-row-desc body-md">
              The capabilities agents use to act: read files, query systems, search the corpus,
              produce structured output, trigger processes.
            </p>
          </div>
          <div class="arch-row-tag">
            <span class="arch-tag label-sm">Capabilities</span>
          </div>
        </div>

      </div>
    </section>

    <!-- ── Platform framing ───────────────────────────────────────── -->
    <section class="section platform-section">
      <h2 class="section-heading label-sm">Why this is a platform, not a product</h2>
      <div class="prose-col">
        <p class="body-lg">
          The same sovereign infrastructure supports fundamentally different shapes of work.
          One deployment, one security model, one audit trail — but the use cases it enables
          expand as you add tiers.
        </p>
      </div>
      <div class="tiers-list">
        {tiers.map((tier) => (
          <div class:list={['tier-row', { 'tier-row--current': tier.current }]}>
            <div class="tier-name-col">
              <span class="tier-name body-md">{tier.name}</span>
              {tier.current && (
                <span class="tier-badge label-sm">Bifrost MVP</span>
              )}
            </div>
            <p class="tier-desc body-md">{tier.desc}</p>
          </div>
        ))}
      </div>
    </section>

    <!-- ── What Bifrost delivers ──────────────────────────────────── -->
    <section class="section bifrost-section">
      <h2 class="section-heading label-sm">What Project Bifrost delivers first</h2>
      <div class="prose-col">
        <p class="body-lg">
          The MVP in Project Bifrost is Fenja Basic: a locally hosted LLM with agent
          flows, plus Fenja Knowledge — the semantic layer that lets the AI understand
          not just your documents, but the context behind them.
        </p>
        <p class="body-lg">
          This is the foundation. It solves real work today. And every tier that follows —
          Code, Analyze, Agentic — is built on it without requiring a new deployment,
          new infrastructure, or new compliance review.
        </p>
      </div>
    </section>

    <!-- ── What comes after ───────────────────────────────────────── -->
    <section class="section extends-section">
      <h2 class="section-heading label-sm">The platform extends to</h2>
      <ul class="extends-list">
        <li class="extends-item">
          <span class="extends-name body-md">Fenja Code</span>
          <span class="extends-desc body-md">
            Developer-assisted coding inside your own infrastructure — source code never leaves.
          </span>
        </li>
        <li class="extends-item">
          <span class="extends-name body-md">Fenja Analyze</span>
          <span class="extends-desc body-md">
            Structured data extraction and analysis across large corpora, with provenance intact.
          </span>
        </li>
        <li class="extends-item">
          <span class="extends-name body-md">Fenja Agentic</span>
          <span class="extends-desc body-md">
            Governed automation for repeatable workflows — defined in natural language, audited end to end.
          </span>
        </li>
      </ul>
    </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);
  }

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

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

  /* ── Architecture diagram ────────────────────────────────────────── */
  .arch-diagram {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 52rem;
  }

  .arch-row {
    display: grid;
    grid-template-columns: 11rem 1fr 6rem;
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-6) var(--space-8);
    transition: background var(--duration-fast) var(--ease-standard);
  }

  .arch-row-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .arch-layer-name {
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface);
    font-weight: 700;
  }

  .arch-sublabel {
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--secondary);
    font-weight: 500;
  }

  .arch-row-desc {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--on-surface-variant);
    margin: 0;
    line-height: var(--leading-relaxed);
  }

  .arch-row-tag {
    display: flex;
    justify-content: flex-end;
  }

  .arch-tag {
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--on-surface-muted);
    font-weight: 500;
  }

  /* ── Platform / tiers ────────────────────────────────────────────── */
  .prose-col {
    max-width: 44rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
  }

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

  .tiers-list {
    display: flex;
    flex-direction: column;
    max-width: 52rem;
  }

  .tier-row {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--space-6);
    align-items: start;
    padding: var(--space-5) 0;
    border-top: var(--ghost-border);
  }
  .tier-row:last-child {
    border-bottom: var(--ghost-border);
  }

  .tier-name-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .tier-name {
    font-family: var(--font-serif);
    font-weight: 700;
    font-style: italic;
    letter-spacing: var(--tracking-snug);
    color: var(--on-surface);
    margin: 0;
  }

  .tier-row--current .tier-name {
    color: var(--secondary);
  }

  .tier-badge {
    display: inline-block;
    padding: 0.2em var(--space-2);
    background: var(--surface-container);
    border-radius: var(--radius-full);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--secondary);
    font-weight: 600;
  }

  .tier-desc {
    color: var(--on-surface-variant);
    margin: 0;
    line-height: var(--leading-relaxed);
    padding-top: 0.2rem;
  }

  /* ── Extends list ────────────────────────────────────────────────── */
  .extends-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 52rem;
  }

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

  .extends-name {
    font-family: var(--font-serif);
    font-weight: 700;
    font-style: italic;
    letter-spacing: var(--tracking-snug);
    color: var(--on-surface-variant);
    margin: 0;
  }

  .extends-desc {
    color: var(--on-surface-variant);
    margin: 0;
    line-height: var(--leading-relaxed);
  }
</style>
