Now with legal policies and services pages

src/lib/components/Navigation.svelte

@@ -1,5 +1,21 @@
 <script lang="ts">
+    import { page as pageState } from '$app/state';
     import Wordmark from './Wordmark.svelte';
+
+    const path = $derived(pageState.url?.pathname ?? '/');
+
+    /** Page slug for body class: "page-home" | "page-services" | "page-services-hands-on-saas-architecture-consultant" etc. Set at build time per route; no client JS. */
+    const bodyClass = $derived(
+        path === '/' ? 'page-home' : 'page-' + path.replace(/^\/|\/$/g, '').replace(/\//g, '-')
+    );
+
+    interface NavigationItem {
+        label: string;
+        href: string;
+        umamiEventLabel: string;
+    }
+
+    const { items = [], page }: { items: NavigationItem[]; page: string } = $props();
 </script>
 
 <nav id="nav" class="nav" aria-label="Main navigation">
@@ -37,42 +53,30 @@
         </button>
     </div>
     <div id="nav-menu" class="nav-menu container">
-        <span class="nav-header-logo desktop">
-            <Wordmark />
+        <span class={['nav-header-logo desktop', { 'page-home': bodyClass === 'page-home' }]}>
+            {#if page !== 'home'}
+                <a href="/">
+                    <Wordmark />
+                    <span class="sr-only">mifi Ventures home page</span>
+                </a>
+            {:else}
+                <Wordmark />
+            {/if}
         </span>
         <ul class="nav-list">
-            <li class="nav-item">
-                <a
-                    href="#what-we-do"
-                    class="nav-link"
-                    data-umami-event="navigation"
-                    data-umami-event-label="services">Services</a
-                >
-            </li>
-            <li class="nav-item">
-                <a
-                    href="#impact"
-                    class="nav-link"
-                    data-umami-event="navigation"
-                    data-umami-event-label="impact">Impact</a
-                >
-            </li>
-            <li class="nav-item">
-                <a
-                    href="#how-we-work"
-                    class="nav-link"
-                    data-umami-event="navigation"
-                    data-umami-event-label="process">Process</a
-                >
-            </li>
-            <li class="nav-item">
-                <a
-                    href="#schedule"
-                    class="nav-link"
-                    data-umami-event="navigation"
-                    data-umami-event-label="contact">Contact</a
-                >
-            </li>
+            {#each items as item (item.href)}
+                <li class="nav-item">
+                    <a
+                        href={item.href}
+                        class="nav-link"
+                        data-umami-event="navigation"
+                        data-umami-event-label={item.umamiEventLabel}
+                        data-umami-event-page={page}
+                    >
+                        {item.label}
+                    </a>
+                </li>
+            {/each}
         </ul>
         <div class="nav-item nav-back-to-top">
             <a
@@ -246,7 +250,7 @@
 
     .nav-list {
         display: flex;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
         list-style: none;
         padding: 0;
@@ -259,7 +263,7 @@
 
     /* Back to top + mobile nav logo: hidden until page is scrolled (CSS scroll-driven animation) */
     .nav-back-to-top,
-    .nav-header-logo {
+    .nav-header-logo.page-home {
         /* Fallback when scroll-driven animations aren’t supported: always visible */
         opacity: 1;
         visibility: visible;
@@ -362,7 +366,7 @@
 
         /* Composited-only animation: opacity only (visibility/pointer-events not animated) */
         .nav-back-to-top,
-        .nav-header-logo {
+        .nav-header-logo.page-home {
             opacity: 0;
             animation: nav-reveal-on-scroll linear;
             animation-timeline: scroll(root block);