@eric-emg/symphiq-components 1.2.527 → 1.2.529

package/fesm2022/symphiq-components.mjs

@@ -22,7 +22,6 @@ import { XYChart, CategoryAxis, AxisRendererX, ValueAxis, AxisRendererY, XYCurso
 import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
 import { PieChart, PieSeries } from '@amcharts/amcharts5/percent';
 import { EMAIL_IS_EMG_APPS } from '@jebgem/util';
-export * from '@symphiq-components/components/profile-analysis-focus-area-dashboard/focus-area-executive-summary.component';
 
 class FunnelOrderService {
     constructor() {
@@ -64073,17 +64072,24 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_10_Template(rf,
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.loadingTextClasses());
 } }
-function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 18);
-    i0.ɵɵelementStart(1, "div", 19)(2, "symphiq-initial-target-setting", 20);
-    i0.ɵɵlistener("targetsCreated", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Template_symphiq_initial_target_setting_targetsCreated_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTargetsCreated($event)); })("calculateRevenueReverseRequest", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Template_symphiq_initial_target_setting_calculateRevenueReverseRequest_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.calculateRevenueReverseRequest.emit($event)); })("calculateRevenueRequest", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Template_symphiq_initial_target_setting_calculateRevenueRequest_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCalculateRevenueRequest($event)); })("editRelatedMetricTarget", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Template_symphiq_initial_target_setting_editRelatedMetricTarget_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.editRelatedMetricTarget.emit($event)); })("saveTargetsClick", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Template_symphiq_initial_target_setting_saveTargetsClick_2_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.saveTargetsClick.emit()); })("targetsUpdated", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Template_symphiq_initial_target_setting_targetsUpdated_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.targetsUpdated.emit($event)); })("discardChangesClick", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Template_symphiq_initial_target_setting_discardChangesClick_2_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.discardChangesClick.emit()); });
+    i0.ɵɵelementStart(0, "div", 19)(1, "symphiq-initial-target-setting", 20);
+    i0.ɵɵlistener("targetsCreated", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Conditional_1_Template_symphiq_initial_target_setting_targetsCreated_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onTargetsCreated($event)); })("calculateRevenueReverseRequest", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Conditional_1_Template_symphiq_initial_target_setting_calculateRevenueReverseRequest_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.calculateRevenueReverseRequest.emit($event)); })("calculateRevenueRequest", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Conditional_1_Template_symphiq_initial_target_setting_calculateRevenueRequest_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCalculateRevenueRequest($event)); })("editRelatedMetricTarget", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Conditional_1_Template_symphiq_initial_target_setting_editRelatedMetricTarget_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.editRelatedMetricTarget.emit($event)); })("saveTargetsClick", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Conditional_1_Template_symphiq_initial_target_setting_saveTargetsClick_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.saveTargetsClick.emit()); })("targetsUpdated", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Conditional_1_Template_symphiq_initial_target_setting_targetsUpdated_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.targetsUpdated.emit($event)); })("discardChangesClick", function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Conditional_1_Template_symphiq_initial_target_setting_discardChangesClick_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.discardChangesClick.emit()); });
     i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(13, _c0$y))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingResponse", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("calculateRevenueReverseResponse", ctx_r0.calculateRevenueReverseResponse())("calculateRevenueResponse", ctx_r0.calculateRevenueResponse())("isCalculatingTargets", ctx_r0.isCalculatingTargets())("targets", ctx_r0.targets())("targetHistories", ctx_r0.targetHistories() ?? i0.ɵɵpureFunction0(14, _c0$y))("users", ctx_r0.users() ?? i0.ɵɵpureFunction0(15, _c0$y));
+} }
+function SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 18);
+    i0.ɵɵconditionalCreate(1, SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Conditional_1_Template, 2, 16, "div", 19);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", ctx_r0.hasCurrentYearTargets())("isOnboarded", ctx_r0.isOnboarded());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(17, _c0$y))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingResponse", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("calculateRevenueReverseResponse", ctx_r0.calculateRevenueReverseResponse())("calculateRevenueResponse", ctx_r0.calculateRevenueResponse())("isCalculatingTargets", ctx_r0.isCalculatingTargets())("targets", ctx_r0.targets())("targetHistories", ctx_r0.targetHistories() ?? i0.ɵɵpureFunction0(18, _c0$y))("users", ctx_r0.users() ?? i0.ɵɵpureFunction0(19, _c0$y));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r0.isLoading() ? 1 : -1);
 } }
 function SymphiqRevenueCalculatorDashboardComponent_Conditional_12_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
@@ -64296,7 +64302,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
             i0.ɵɵlistener("stepClick", function SymphiqRevenueCalculatorDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_6_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqRevenueCalculatorDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_6_listener() { return ctx.nextStepClick.emit(); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(7, "main", 6)(8, "div", 7);
-            i0.ɵɵconditionalCreate(9, SymphiqRevenueCalculatorDashboardComponent_Conditional_9_Template, 2, 1, "div", 8)(10, SymphiqRevenueCalculatorDashboardComponent_Conditional_10_Template, 10, 8)(11, SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Template, 3, 20);
+            i0.ɵɵconditionalCreate(9, SymphiqRevenueCalculatorDashboardComponent_Conditional_9_Template, 2, 1, "div", 8)(10, SymphiqRevenueCalculatorDashboardComponent_Conditional_10_Template, 10, 8)(11, SymphiqRevenueCalculatorDashboardComponent_Conditional_11_Template, 2, 5);
             i0.ɵɵelementEnd()();
             i0.ɵɵconditionalCreate(12, SymphiqRevenueCalculatorDashboardComponent_Conditional_12_Template, 7, 7, "div", 9);
             i0.ɵɵelementEnd()();
@@ -64425,30 +64431,32 @@ class SymphiqRevenueCalculatorDashboardComponent {
                   [isOnboarded]="isOnboarded()"
               />
 
-              <div class="mt-8">
-                <symphiq-initial-target-setting
-                    [viewMode]="viewMode()"
-                    [funnelMetrics]="funnelMetrics() ?? []"
-                    [mainUiData]="mainUiData()"
-                    [trendUiData]="trendUiData()"
-                    [shopId]="shopId()"
-                    [pacingResponse]="pacingResponse()"
-                    [dataResults]="dataResults()"
-                    [calculateRevenueReverseResponse]="calculateRevenueReverseResponse()"
-                    [calculateRevenueResponse]="calculateRevenueResponse()"
-                    [isCalculatingTargets]="isCalculatingTargets()"
-                    [targets]="targets()"
-                    [targetHistories]="targetHistories() ?? []"
-                    [users]="users() ?? []"
-                    (targetsCreated)="onTargetsCreated($event)"
-                    (calculateRevenueReverseRequest)="calculateRevenueReverseRequest.emit($event)"
-                    (calculateRevenueRequest)="onCalculateRevenueRequest($event)"
-                    (editRelatedMetricTarget)="editRelatedMetricTarget.emit($event)"
-                    (saveTargetsClick)="saveTargetsClick.emit()"
-                    (targetsUpdated)="targetsUpdated.emit($event)"
-                    (discardChangesClick)="discardChangesClick.emit()"
-                />
-              </div>
+              @if (!isLoading()) {
+                <div class="mt-8">
+                  <symphiq-initial-target-setting
+                      [viewMode]="viewMode()"
+                      [funnelMetrics]="funnelMetrics() ?? []"
+                      [mainUiData]="mainUiData()"
+                      [trendUiData]="trendUiData()"
+                      [shopId]="shopId()"
+                      [pacingResponse]="pacingResponse()"
+                      [dataResults]="dataResults()"
+                      [calculateRevenueReverseResponse]="calculateRevenueReverseResponse()"
+                      [calculateRevenueResponse]="calculateRevenueResponse()"
+                      [isCalculatingTargets]="isCalculatingTargets()"
+                      [targets]="targets()"
+                      [targetHistories]="targetHistories() ?? []"
+                      [users]="users() ?? []"
+                      (targetsCreated)="onTargetsCreated($event)"
+                      (calculateRevenueReverseRequest)="calculateRevenueReverseRequest.emit($event)"
+                      (calculateRevenueRequest)="onCalculateRevenueRequest($event)"
+                      (editRelatedMetricTarget)="editRelatedMetricTarget.emit($event)"
+                      (saveTargetsClick)="saveTargetsClick.emit()"
+                      (targetsUpdated)="targetsUpdated.emit($event)"
+                      (discardChangesClick)="discardChangesClick.emit()"
+                  />
+                </div>
+              }
             }
 
           </div>
@@ -64492,7 +64500,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 209 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 211 }); })();
 
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);
@@ -84913,39 +84921,39 @@ class FocusAreaHealthIndicatorComponent {
                 standalone: true,
                 imports: [CommonModule, SymphiqIconComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-xl p-6 border">
-      <div class="flex items-start gap-4">
-        <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
-          <symphiq-icon [icon]="healthIcon()" size="w-6 h-6" />
-        </div>
-        <div class="flex-1">
-          <div class="flex items-center justify-between mb-2">
-            <h3 [ngClass]="titleClasses()" class="text-sm font-semibold uppercase tracking-wider">
-              Focus Area Health
-            </h3>
-            <span [ngClass]="healthBadgeClasses()" class="px-3 py-1 rounded-full text-xs font-bold uppercase">
-              {{ healthLabel() }}
-            </span>
-          </div>
-
-          <!-- Health Meter -->
-          <div class="mb-3">
-            <div [ngClass]="meterBackgroundClasses()" class="h-2 rounded-full overflow-hidden">
-              <div
-                [ngClass]="meterFillClasses()"
-                [style.width.%]="healthPercentage()"
-                class="h-full transition-all duration-500 ease-out rounded-full"
-              ></div>
-            </div>
-          </div>
-
-          <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
-            {{ healthDescription() }}
-          </p>
-        </div>
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-xl p-6 border">
+      <div class="flex items-start gap-4">
+        <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
+          <symphiq-icon [icon]="healthIcon()" size="w-6 h-6" />
+        </div>
+        <div class="flex-1">
+          <div class="flex items-center justify-between mb-2">
+            <h3 [ngClass]="titleClasses()" class="text-sm font-semibold uppercase tracking-wider">
+              Focus Area Health
+            </h3>
+            <span [ngClass]="healthBadgeClasses()" class="px-3 py-1 rounded-full text-xs font-bold uppercase">
+              {{ healthLabel() }}
+            </span>
+          </div>
+
+          <!-- Health Meter -->
+          <div class="mb-3">
+            <div [ngClass]="meterBackgroundClasses()" class="h-2 rounded-full overflow-hidden">
+              <div
+                [ngClass]="meterFillClasses()"
+                [style.width.%]="healthPercentage()"
+                class="h-full transition-all duration-500 ease-out rounded-full"
+              ></div>
+            </div>
+          </div>
+
+          <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
+            {{ healthDescription() }}
+          </p>
+        </div>
+      </div>
+    </div>
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], health: [{ type: i0.Input, args: [{ isSignal: true, alias: "health", required: false }] }] }); })();
@@ -85315,177 +85323,177 @@ class FocusAreaExecutiveSummaryComponent {
                     RelatedGoalChipsComponent
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
-      <!-- Summary Banner -->
-      <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
-        <div class="space-y-6">
-          <div class="flex items-start justify-between gap-4">
-            <div class="flex-1">
-              <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
-                Executive Summary
-              </h2>
-              <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
-                {{ summary()?.gradeRationale }}
-              </p>
-            </div>
-            @if (summary()?.overallGrade) {
-              <symphiq-grade-badge
-                [grade]="summary()!.overallGrade!"
-                [gradeRationale]="summary()!.gradeRationale || ''"
-                [viewMode]="viewMode()"
-              />
-            }
-          </div>
-
-          @if (summary()?.narrative) {
-            <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
-              <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
-                Analysis Narrative
-              </h3>
-              <div class="relative">
-                @if (summary()?.napkinVisual?.enabled) {
-                  <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
-                    <symphiq-napkin-visual-placeholder
-                      [visual]="summary()!.napkinVisual!"
-                      [viewMode]="viewMode()"
-                    />
-                  </div>
-                }
-                <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
-                  {{ summary()?.narrative }}
-                </p>
-                <div class="clear-both"></div>
-              </div>
-            </div>
-          }
-
-          <!-- Health and Top Priorities -->
-          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <!-- Health Indicator -->
-            <div class="lg:col-span-1">
-              @if (summary()?.focusAreaHealth) {
-                <symphiq-focus-area-health-indicator
-                  [viewMode]="viewMode()"
-                  [health]="summary()?.focusAreaHealth"
-                />
-              }
-            </div>
-
-            <!-- Quick Stats -->
-            <div class="lg:col-span-2 grid grid-cols-2 gap-4">
-              <button
-                type="button"
-                (click)="onTopPrioritiesClick()"
-                [ngClass]="getTopPrioritiesStatCardClasses()"
-                class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
-                <div [ngClass]="getTopPrioritiesStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
-                  Top Priorities
-                </div>
-                <div [ngClass]="getTopPrioritiesStatValueClasses()" class="text-3xl font-bold mb-2">
-                  {{ summary()?.topPriorities?.length || 0 }}
-                </div>
-                <div class="flex items-center gap-1.5 text-xs font-medium">
-                  <span [ngClass]="getTopPrioritiesButtonTextClasses()">View Details</span>
-                  <symphiq-icon
-                    [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
-                    size="w-4 h-4"
-                    [ngClass]="getTopPrioritiesButtonTextClasses()"
-                    class="transition-transform group-hover:translate-x-1"
-                  />
-                </div>
-              </button>
-
-              <button
-                type="button"
-                (click)="scrollToQuickWins()"
-                [ngClass]="getQuickWinsStatCardClasses()"
-                class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
-                <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
-                  Quick Wins
-                </div>
-                <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
-                  {{ summary()?.quickWins?.length || 0 }}
-                </div>
-                <div class="flex items-center gap-1.5 text-xs font-medium">
-                  <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
-                  <symphiq-icon
-                    [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
-                    size="w-4 h-4"
-                    [ngClass]="getQuickWinsButtonTextClasses()"
-                    class="transition-transform group-hover:translate-y-1 animate-bounce"
-                  />
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Top Priorities Grid - Hidden, now shown in modal -->
-      <!-- Top priorities are now displayed in a modal instead of inline -->
-
-      <!-- Quick Wins -->
-      @if (summary()?.quickWins?.length) {
-        <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
-          <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
-            Quick Wins
-          </h3>
-          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            @for (win of summary()!.quickWins!; track $index) {
-              <div [ngClass]="getQuickWinCardClasses()"
-                   class="rounded-xl p-6 transition-all duration-300">
-                <div class="space-y-4">
-                  <div class="flex items-start gap-3">
-                    <span [ngClass]="getNumberBadgeClasses()"
-                          class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
-                      {{ $index + 1 }}
-                    </span>
-                    <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
-                      {{ win.action }}
-                    </p>
-                  </div>
-
-                  <div class="flex flex-wrap gap-2">
-                    <span [ngClass]="getEffortBadgeClasses(win.effort)"
-                          class="px-3 py-1 rounded-full text-xs font-semibold">
-                      {{ formatLabel(win.effort) }} Effort
-                    </span>
-                    <span [ngClass]="getImpactBadgeClasses(win.impact)"
-                          class="px-3 py-1 rounded-full text-xs font-semibold">
-                      {{ formatLabel(win.impact) }} Impact
-                    </span>
-                  </div>
-
-                  @if (win.estimatedTimeframe) {
-                    <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                      </svg>
-                      <span>{{ win.estimatedTimeframe }}</span>
-                    </div>
-                  }
-
-                  @if (win.relatedGoalId && allGoals()) {
-                    <div class="space-y-2">
-                      <h4 [ngClass]="getMetaTextClasses()" class="text-xs font-semibold uppercase tracking-wider">
-                        Related Goal
-                      </h4>
-                      <symphiq-related-goal-chips
-                        [relatedGoalIds]="[win.relatedGoalId]"
-                        [allGoals]="allGoals()"
-                        [viewMode]="viewMode()"
-                      />
-                    </div>
-                  }
-                </div>
-              </div>
-            }
-          </div>
-        </div>
-      }
-    </section>
+                template: `
+    <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
+      <!-- Summary Banner -->
+      <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
+        <div class="space-y-6">
+          <div class="flex items-start justify-between gap-4">
+            <div class="flex-1">
+              <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
+                Executive Summary
+              </h2>
+              <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
+                {{ summary()?.gradeRationale }}
+              </p>
+            </div>
+            @if (summary()?.overallGrade) {
+              <symphiq-grade-badge
+                [grade]="summary()!.overallGrade!"
+                [gradeRationale]="summary()!.gradeRationale || ''"
+                [viewMode]="viewMode()"
+              />
+            }
+          </div>
+
+          @if (summary()?.narrative) {
+            <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
+              <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
+                Analysis Narrative
+              </h3>
+              <div class="relative">
+                @if (summary()?.napkinVisual?.enabled) {
+                  <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
+                    <symphiq-napkin-visual-placeholder
+                      [visual]="summary()!.napkinVisual!"
+                      [viewMode]="viewMode()"
+                    />
+                  </div>
+                }
+                <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
+                  {{ summary()?.narrative }}
+                </p>
+                <div class="clear-both"></div>
+              </div>
+            </div>
+          }
+
+          <!-- Health and Top Priorities -->
+          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Health Indicator -->
+            <div class="lg:col-span-1">
+              @if (summary()?.focusAreaHealth) {
+                <symphiq-focus-area-health-indicator
+                  [viewMode]="viewMode()"
+                  [health]="summary()?.focusAreaHealth"
+                />
+              }
+            </div>
+
+            <!-- Quick Stats -->
+            <div class="lg:col-span-2 grid grid-cols-2 gap-4">
+              <button
+                type="button"
+                (click)="onTopPrioritiesClick()"
+                [ngClass]="getTopPrioritiesStatCardClasses()"
+                class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
+                <div [ngClass]="getTopPrioritiesStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
+                  Top Priorities
+                </div>
+                <div [ngClass]="getTopPrioritiesStatValueClasses()" class="text-3xl font-bold mb-2">
+                  {{ summary()?.topPriorities?.length || 0 }}
+                </div>
+                <div class="flex items-center gap-1.5 text-xs font-medium">
+                  <span [ngClass]="getTopPrioritiesButtonTextClasses()">View Details</span>
+                  <symphiq-icon
+                    [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
+                    size="w-4 h-4"
+                    [ngClass]="getTopPrioritiesButtonTextClasses()"
+                    class="transition-transform group-hover:translate-x-1"
+                  />
+                </div>
+              </button>
+
+              <button
+                type="button"
+                (click)="scrollToQuickWins()"
+                [ngClass]="getQuickWinsStatCardClasses()"
+                class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
+                <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
+                  Quick Wins
+                </div>
+                <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
+                  {{ summary()?.quickWins?.length || 0 }}
+                </div>
+                <div class="flex items-center gap-1.5 text-xs font-medium">
+                  <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
+                  <symphiq-icon
+                    [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
+                    size="w-4 h-4"
+                    [ngClass]="getQuickWinsButtonTextClasses()"
+                    class="transition-transform group-hover:translate-y-1 animate-bounce"
+                  />
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Top Priorities Grid - Hidden, now shown in modal -->
+      <!-- Top priorities are now displayed in a modal instead of inline -->
+
+      <!-- Quick Wins -->
+      @if (summary()?.quickWins?.length) {
+        <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
+          <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
+            Quick Wins
+          </h3>
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            @for (win of summary()!.quickWins!; track $index) {
+              <div [ngClass]="getQuickWinCardClasses()"
+                   class="rounded-xl p-6 transition-all duration-300">
+                <div class="space-y-4">
+                  <div class="flex items-start gap-3">
+                    <span [ngClass]="getNumberBadgeClasses()"
+                          class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
+                      {{ $index + 1 }}
+                    </span>
+                    <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
+                      {{ win.action }}
+                    </p>
+                  </div>
+
+                  <div class="flex flex-wrap gap-2">
+                    <span [ngClass]="getEffortBadgeClasses(win.effort)"
+                          class="px-3 py-1 rounded-full text-xs font-semibold">
+                      {{ formatLabel(win.effort) }} Effort
+                    </span>
+                    <span [ngClass]="getImpactBadgeClasses(win.impact)"
+                          class="px-3 py-1 rounded-full text-xs font-semibold">
+                      {{ formatLabel(win.impact) }} Impact
+                    </span>
+                  </div>
+
+                  @if (win.estimatedTimeframe) {
+                    <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                      </svg>
+                      <span>{{ win.estimatedTimeframe }}</span>
+                    </div>
+                  }
+
+                  @if (win.relatedGoalId && allGoals()) {
+                    <div class="space-y-2">
+                      <h4 [ngClass]="getMetaTextClasses()" class="text-xs font-semibold uppercase tracking-wider">
+                        Related Goal
+                      </h4>
+                      <symphiq-related-goal-chips
+                        [relatedGoalIds]="[win.relatedGoalId]"
+                        [allGoals]="allGoals()"
+                        [viewMode]="viewMode()"
+                      />
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </section>
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], topPrioritiesClick: [{ type: i0.Output, args: ["topPrioritiesClick"] }], priorityDetailClick: [{ type: i0.Output, args: ["priorityDetailClick"] }] }); })();
@@ -85898,158 +85906,158 @@ class CollapsibleAnalysisSectionGroupComponent {
                 standalone: true,
                 imports: [CommonModule, SymphiqIconComponent, ProfileSectionContentComponent, NapkinVisualPlaceholderComponent, FocusAreaExecutiveSummaryComponent, MetricExecutiveSummaryComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-3">
-            <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
-              </svg>
-            </div>
-            <div>
-              <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
-                Supporting Business Context
-              </h2>
-              <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
-                Operational insights and competitive analysis
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div [ngClass]="contentClasses()" class="p-6">
-        <div [ngClass]="infoBoxClasses()" class="mb-6 p-4 rounded-xl border flex items-start gap-3">
-          <svg class="w-5 h-5 flex-shrink-0 mt-0.5" [ngClass]="infoIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-          </svg>
-          <div class="flex-1">
-            <h4 [ngClass]="infoTitleClasses()" class="font-semibold text-sm mb-1">
-              {{ getDescriptionTitle() }}
-            </h4>
-            <p [ngClass]="infoTextClasses()" class="text-sm leading-relaxed">
-              {{ getDescriptionText() }}
-            </p>
-          </div>
-        </div>
-
-        <div class="space-y-3">
-          @for (section of sections(); track section.id; let idx = $index) {
-            <div [id]="'collapsible-section-' + idx" [ngClass]="sectionCardClasses()" class="rounded-xl border overflow-hidden transition-all duration-200">
-              <button
-                type="button"
-                (click)="toggleSection(idx)"
-                [ngClass]="sectionHeaderClasses(section, idx)"
-                class="cursor-pointer w-full px-5 py-4 flex items-center justify-between gap-4 text-left transition-colors duration-200">
-                <div class="flex items-center gap-3 flex-1 min-w-0">
-                  @if (section.icon) {
-                    <div [ngClass]="sectionIconContainerClasses(idx)" class="p-2 rounded-lg flex-shrink-0 transition-colors duration-200">
-                      <symphiq-icon [icon]="section.icon" size="w-4 h-4"></symphiq-icon>
-                    </div>
-                  }
-                  <div class="flex-1 min-w-0">
-                    <h3 [ngClass]="sectionTitleClasses(idx)" class="font-semibold transition-colors duration-200">
-                      {{ section.title }}
-                    </h3>
-                    @if (section.description) {
-                      <p [ngClass]="sectionDescriptionClasses(idx)" class="text-sm mt-0.5 line-clamp-1 transition-colors duration-200">
-                        {{ formatDescription(section.description) }}
-                      </p>
-                    }
-                  </div>
-                </div>
-                <svg
-                  [ngClass]="chevronClasses(idx)"
-                  [class.rotate-180]="expandedSections()[idx]"
-                  class="w-5 h-5 flex-shrink-0 transition-transform duration-200"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                </svg>
-              </button>
-
-              <div
-                class="grid transition-[grid-template-rows] duration-300 ease-in-out"
-                [style.grid-template-rows]="expandedSections()[idx] ? '1fr' : '0fr'">
-                <div class="overflow-hidden">
-                  <div [ngClass]="sectionContentClasses()" class="border-t p-6">
-                    <!-- Metric Executive Summary -->
-                    @if (section.id === 'metric-executive-summary' && metricExecutiveSummary()) {
-                      <symphiq-metric-executive-summary
-                        [viewMode]="viewMode()"
-                        [summary]="metricExecutiveSummary()!"
-                        [metricName]="metricName() || ''"
-                        [allGoals]="allGoals()"
-                        (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
-                        (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
-                      />
-                    } @else if (section.id === 'focus-area-executive-summary' && focusAreaExecutiveSummary()) {
-                      <symphiq-focus-area-executive-summary
-                        [viewMode]="viewMode()"
-                        [summary]="focusAreaExecutiveSummary()!"
-                        [allGoals]="allGoals()"
-                        (topPrioritiesClick)="handleTopPrioritiesClick()"
-                        (priorityDetailClick)="handlePriorityDetailClick($event)"
-                      />
-                    } @else {
-                      <!-- Description and Napkin Visual (if available) - Alternating layout -->
-                      @if (section.description || (section.visual && section.visual.enabled)) {
-                        <div class="mb-6">
-                          <div class="relative">
-                            @if (section.visual && section.visual.enabled) {
-                              @if (idx % 2 === 0) {
-                                <!-- Even index: Napkin on left -->
-                                <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[50%]">
-                                  <symphiq-napkin-visual-placeholder
-                                    [visual]="section.visual"
-                                    [viewMode]="viewMode()"
-                                  />
-                                </div>
-                              } @else {
-                                <!-- Odd index: Napkin on right -->
-                                <div class="mb-6 lg:float-right lg:ml-6 lg:mb-4 lg:max-w-[50%]">
-                                  <symphiq-napkin-visual-placeholder
-                                    [visual]="section.visual"
-                                    [viewMode]="viewMode()"
-                                  />
-                                </div>
-                              }
-                            }
-
-                            <!-- Description -->
-                            @if (section.description) {
-                              <p [ngClass]="descriptionTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
-                                {{ formatDescription(section.description) }}
-                              </p>
-                            }
-                            <div class="clear-both"></div>
-                          </div>
-                        </div>
-                      }
-
-                      <symphiq-profile-section-content
-                        [section]="section"
-                        [viewMode]="viewMode()"
-                        [sectionIndex]="idx"
-                        [executiveSummary]="executiveSummary()"
-                        [allGoals]="allGoals()"
-                        [allMetrics]="allMetrics()"
-                        [allCharts]="allCharts()"
-                        [allInsights]="allInsights()"
-                        [businessProfile]="businessProfile()"
-                      />
-                    }
-                  </div>
-                </div>
-              </div>
-            </div>
-          }
-        </div>
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+              </svg>
+            </div>
+            <div>
+              <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
+                Supporting Business Context
+              </h2>
+              <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
+                Operational insights and competitive analysis
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div [ngClass]="contentClasses()" class="p-6">
+        <div [ngClass]="infoBoxClasses()" class="mb-6 p-4 rounded-xl border flex items-start gap-3">
+          <svg class="w-5 h-5 flex-shrink-0 mt-0.5" [ngClass]="infoIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          <div class="flex-1">
+            <h4 [ngClass]="infoTitleClasses()" class="font-semibold text-sm mb-1">
+              {{ getDescriptionTitle() }}
+            </h4>
+            <p [ngClass]="infoTextClasses()" class="text-sm leading-relaxed">
+              {{ getDescriptionText() }}
+            </p>
+          </div>
+        </div>
+
+        <div class="space-y-3">
+          @for (section of sections(); track section.id; let idx = $index) {
+            <div [id]="'collapsible-section-' + idx" [ngClass]="sectionCardClasses()" class="rounded-xl border overflow-hidden transition-all duration-200">
+              <button
+                type="button"
+                (click)="toggleSection(idx)"
+                [ngClass]="sectionHeaderClasses(section, idx)"
+                class="cursor-pointer w-full px-5 py-4 flex items-center justify-between gap-4 text-left transition-colors duration-200">
+                <div class="flex items-center gap-3 flex-1 min-w-0">
+                  @if (section.icon) {
+                    <div [ngClass]="sectionIconContainerClasses(idx)" class="p-2 rounded-lg flex-shrink-0 transition-colors duration-200">
+                      <symphiq-icon [icon]="section.icon" size="w-4 h-4"></symphiq-icon>
+                    </div>
+                  }
+                  <div class="flex-1 min-w-0">
+                    <h3 [ngClass]="sectionTitleClasses(idx)" class="font-semibold transition-colors duration-200">
+                      {{ section.title }}
+                    </h3>
+                    @if (section.description) {
+                      <p [ngClass]="sectionDescriptionClasses(idx)" class="text-sm mt-0.5 line-clamp-1 transition-colors duration-200">
+                        {{ formatDescription(section.description) }}
+                      </p>
+                    }
+                  </div>
+                </div>
+                <svg
+                  [ngClass]="chevronClasses(idx)"
+                  [class.rotate-180]="expandedSections()[idx]"
+                  class="w-5 h-5 flex-shrink-0 transition-transform duration-200"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+              </button>
+
+              <div
+                class="grid transition-[grid-template-rows] duration-300 ease-in-out"
+                [style.grid-template-rows]="expandedSections()[idx] ? '1fr' : '0fr'">
+                <div class="overflow-hidden">
+                  <div [ngClass]="sectionContentClasses()" class="border-t p-6">
+                    <!-- Metric Executive Summary -->
+                    @if (section.id === 'metric-executive-summary' && metricExecutiveSummary()) {
+                      <symphiq-metric-executive-summary
+                        [viewMode]="viewMode()"
+                        [summary]="metricExecutiveSummary()!"
+                        [metricName]="metricName() || ''"
+                        [allGoals]="allGoals()"
+                        (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
+                        (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
+                      />
+                    } @else if (section.id === 'focus-area-executive-summary' && focusAreaExecutiveSummary()) {
+                      <symphiq-focus-area-executive-summary
+                        [viewMode]="viewMode()"
+                        [summary]="focusAreaExecutiveSummary()!"
+                        [allGoals]="allGoals()"
+                        (topPrioritiesClick)="handleTopPrioritiesClick()"
+                        (priorityDetailClick)="handlePriorityDetailClick($event)"
+                      />
+                    } @else {
+                      <!-- Description and Napkin Visual (if available) - Alternating layout -->
+                      @if (section.description || (section.visual && section.visual.enabled)) {
+                        <div class="mb-6">
+                          <div class="relative">
+                            @if (section.visual && section.visual.enabled) {
+                              @if (idx % 2 === 0) {
+                                <!-- Even index: Napkin on left -->
+                                <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[50%]">
+                                  <symphiq-napkin-visual-placeholder
+                                    [visual]="section.visual"
+                                    [viewMode]="viewMode()"
+                                  />
+                                </div>
+                              } @else {
+                                <!-- Odd index: Napkin on right -->
+                                <div class="mb-6 lg:float-right lg:ml-6 lg:mb-4 lg:max-w-[50%]">
+                                  <symphiq-napkin-visual-placeholder
+                                    [visual]="section.visual"
+                                    [viewMode]="viewMode()"
+                                  />
+                                </div>
+                              }
+                            }
+
+                            <!-- Description -->
+                            @if (section.description) {
+                              <p [ngClass]="descriptionTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
+                                {{ formatDescription(section.description) }}
+                              </p>
+                            }
+                            <div class="clear-both"></div>
+                          </div>
+                        </div>
+                      }
+
+                      <symphiq-profile-section-content
+                        [section]="section"
+                        [viewMode]="viewMode()"
+                        [sectionIndex]="idx"
+                        [executiveSummary]="executiveSummary()"
+                        [allGoals]="allGoals()"
+                        [allMetrics]="allMetrics()"
+                        [allCharts]="allCharts()"
+                        [allInsights]="allInsights()"
+                        [businessProfile]="businessProfile()"
+                      />
+                    }
+                  </div>
+                </div>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
   `
             }]
     }], null, { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], executiveSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "executiveSummary", required: false }] }], focusAreaExecutiveSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaExecutiveSummary", required: false }] }], metricExecutiveSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricExecutiveSummary", required: false }] }], metricName: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricName", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], allInsights: [{ type: i0.Input, args: [{ isSignal: true, alias: "allInsights", required: false }] }], businessProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "businessProfile", required: false }] }] }); })();
@@ -97183,93 +97191,93 @@ class FocusAreaWelcomeBannerComponent {
                 standalone: true,
                 imports: [CommonModule, SymphiqIconComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-      <div [ngClass]="contentClasses()" class="px-8 py-8">
-        <div class="flex items-start gap-6">
-          <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
-            <symphiq-icon [icon]="focusAreaIcon()" size="w-8 h-8" />
-          </div>
-
-          <div class="flex-1">
-            <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-3">
-              @if (isOnboarded()) {
-                Your {{ focusAreaDisplayName() }} Analysis
-              } @else {
-                Welcome to Your {{ focusAreaDisplayName() }} Analysis
-              }
-            </h2>
-
-            <!-- Description -->
-            <div class="space-y-3 mb-6">
-              <p [ngClass]="textClasses()" class="text-base leading-relaxed">
-                {{ focusAreaDisplayName() }} Analysis provides a deep dive into this specific operational domain. By analyzing your approach, tools, and performance in {{ focusAreaDisplayName() | lowercase }}, Symphiq identifies tactical opportunities and creates an actionable roadmap for improvement.
-              </p>
-              <p [ngClass]="textClasses()" class="text-base leading-relaxed">
-                <strong class="font-semibold">Why this matters:</strong> Rather than generic best practices, this analysis delivers domain-specific insights tailored to your current capabilities, resources, and market position—ensuring recommendations are both impactful and achievable.
-              </p>
-            </div>
-
-            <div [ngClass]="highlightBoxClasses()" class="mt-6 p-5 rounded-xl border-l-4 flex items-start gap-4">
-              <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="highlightIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-              </svg>
-              <div class="flex-1">
-                <h3 [ngClass]="highlightTitleClasses()" class="font-bold text-lg mb-2">
-                  What You'll See Below
-                </h3>
-                <ul [ngClass]="highlightListClasses()" class="space-y-2 text-sm">
-                  <li class="flex items-start gap-2">
-                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-                    </svg>
-                    <span><strong class="font-semibold">Focus Area Health</strong> — Current maturity and performance assessment for {{ focusAreaDisplayName() | lowercase }}</span>
-                  </li>
-                  <li class="flex items-start gap-2">
-                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-                    </svg>
-                    <span><strong class="font-semibold">Top Priorities</strong> — High-impact improvements specific to this operational domain</span>
-                  </li>
-                  <li class="flex items-start gap-2">
-                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-                    </svg>
-                    <span><strong class="font-semibold">Tactical Roadmap</strong> — Step-by-step goals, strategies, and recommendations for domain optimization</span>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div [ngClass]="nextStepsBoxClasses()" class="mt-6 p-5 rounded-xl border flex items-start gap-4">
-              <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="nextStepsIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                @if (isOnboarded()) {
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-                } @else {
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-                }
-              </svg>
-              <div class="flex-1">
-                <h3 [ngClass]="nextStepsTitleClasses()" class="font-bold mb-1">
-                  @if (isOnboarded()) {
-                    Keep Your Focus Area Updated
-                  } @else {
-                    Continue Your Journey
-                  }
-                </h3>
-                <p [ngClass]="nextStepsTextClasses()" class="text-sm leading-relaxed">
-                  @if (isOnboarded()) {
-                    As you implement improvements, adopt new tools, or refine your {{ focusAreaDisplayName() | lowercase }} approach, update this analysis to keep recommendations aligned with your evolving capabilities and market opportunities.
-                  } @else {
-                    This analysis provides domain-specific insights. To unlock the full power of Symphiq, explore additional focus areas and connect them to your shop operations and funnel metrics.
-                  }
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+      <div [ngClass]="contentClasses()" class="px-8 py-8">
+        <div class="flex items-start gap-6">
+          <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
+            <symphiq-icon [icon]="focusAreaIcon()" size="w-8 h-8" />
+          </div>
+
+          <div class="flex-1">
+            <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-3">
+              @if (isOnboarded()) {
+                Your {{ focusAreaDisplayName() }} Analysis
+              } @else {
+                Welcome to Your {{ focusAreaDisplayName() }} Analysis
+              }
+            </h2>
+
+            <!-- Description -->
+            <div class="space-y-3 mb-6">
+              <p [ngClass]="textClasses()" class="text-base leading-relaxed">
+                {{ focusAreaDisplayName() }} Analysis provides a deep dive into this specific operational domain. By analyzing your approach, tools, and performance in {{ focusAreaDisplayName() | lowercase }}, Symphiq identifies tactical opportunities and creates an actionable roadmap for improvement.
+              </p>
+              <p [ngClass]="textClasses()" class="text-base leading-relaxed">
+                <strong class="font-semibold">Why this matters:</strong> Rather than generic best practices, this analysis delivers domain-specific insights tailored to your current capabilities, resources, and market position—ensuring recommendations are both impactful and achievable.
+              </p>
+            </div>
+
+            <div [ngClass]="highlightBoxClasses()" class="mt-6 p-5 rounded-xl border-l-4 flex items-start gap-4">
+              <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="highlightIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+              <div class="flex-1">
+                <h3 [ngClass]="highlightTitleClasses()" class="font-bold text-lg mb-2">
+                  What You'll See Below
+                </h3>
+                <ul [ngClass]="highlightListClasses()" class="space-y-2 text-sm">
+                  <li class="flex items-start gap-2">
+                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                    </svg>
+                    <span><strong class="font-semibold">Focus Area Health</strong> — Current maturity and performance assessment for {{ focusAreaDisplayName() | lowercase }}</span>
+                  </li>
+                  <li class="flex items-start gap-2">
+                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                    </svg>
+                    <span><strong class="font-semibold">Top Priorities</strong> — High-impact improvements specific to this operational domain</span>
+                  </li>
+                  <li class="flex items-start gap-2">
+                    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                    </svg>
+                    <span><strong class="font-semibold">Tactical Roadmap</strong> — Step-by-step goals, strategies, and recommendations for domain optimization</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <div [ngClass]="nextStepsBoxClasses()" class="mt-6 p-5 rounded-xl border flex items-start gap-4">
+              <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="nextStepsIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                @if (isOnboarded()) {
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                } @else {
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                }
+              </svg>
+              <div class="flex-1">
+                <h3 [ngClass]="nextStepsTitleClasses()" class="font-bold mb-1">
+                  @if (isOnboarded()) {
+                    Keep Your Focus Area Updated
+                  } @else {
+                    Continue Your Journey
+                  }
+                </h3>
+                <p [ngClass]="nextStepsTextClasses()" class="text-sm leading-relaxed">
+                  @if (isOnboarded()) {
+                    As you implement improvements, adopt new tools, or refine your {{ focusAreaDisplayName() | lowercase }} approach, update this analysis to keep recommendations aligned with your evolving capabilities and market opportunities.
+                  } @else {
+                    This analysis provides domain-specific insights. To unlock the full power of Symphiq, explore additional focus areas and connect them to your shop operations and funnel metrics.
+                  }
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], focusAreaDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDomain", required: false }] }], focusAreaName: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaName", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }] }); })();
@@ -98163,351 +98171,1181 @@ class SymphiqProfileAnalysisFocusAreaDashboardComponent {
                     MarkAsReviewedFooterComponent
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="getContainerClasses()" [class.min-h-screen]="!embedded()" class="relative">
-      <div class="animated-bubbles" [class.light-mode]="isLightMode()"
-           style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
-
-      <!-- Scroll Progress Bar -->
-      <div
-          [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
-        <div
-            [style.width.%]="scrollProgress()"
-            [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
-            class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
-
-      <div class="relative z-[51]">
-        <!-- Dashboard Header -->
-        <symphiq-dashboard-header
-            [title]="getAnalysisSubtitle()"
-            [subtitle]="''"
-            [currentSection]="'Focus Area'"
-            [viewMode]="viewMode()"
-            [viewModeLabel]="displayModeLabel()"
-            [isLoading]="isLoading()"
-            [requestedByUser]="requestedByUser()"
-            [createdDate]="profileAnalysis()?.selfContentCompletedDate"
-            [showControls]="shouldShowHeaderControls()"
-            (searchClick)="openSearch()"
-            (viewModeClick)="openViewModeSwitcher()"
-        />
-
-        <!-- Main Content -->
-        <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12"
-              [class.pb-32]="shouldShowReviewFooter()">
-
-          <!-- Welcome Banner (Simplified View Only) -->
-          @if (isSimplifiedView()) {
-            <div class="mb-12">
-              <symphiq-focus-area-welcome-banner
-                  [viewMode]="viewMode()"
-                  [focusAreaDomain]="focusAreaDomain()"
-                  [focusAreaName]="focusAreaName()"
-              />
-            </div>
-
-            <!-- Loading Card -->
-            @if (isLoading()) {
-              <div [ngClass]="isLightMode() ? 'bg-white/80 border-slate-200' : 'bg-slate-800/80 border-slate-700'" 
-                   class="rounded-2xl border shadow-lg p-8 backdrop-blur-sm">
-                <div class="flex flex-col items-center justify-center space-y-4">
-                  <symphiq-indeterminate-spinner [viewMode]="viewMode()" size="large" />
-                  <div class="text-center">
-                    <h3 [ngClass]="isLightMode() ? 'text-slate-900' : 'text-white'" class="text-lg font-semibold mb-1">
-                      Loading Your Focus Area Analysis
-                    </h3>
-                    <p [ngClass]="isLightMode() ? 'text-slate-600' : 'text-slate-400'" class="text-sm">
-                      Please wait while we prepare your personalized insights...
-                    </p>
-                  </div>
-                </div>
-              </div>
-            }
-          }
-
-          <!-- Simplified View Content -->
-          @if (isSimplifiedView()) {
-            <!-- Strategic Insights & Goals -->
-            @if (profileAnalysis()) {
-              <div class="mb-8">
-                @if (isProfileAnalysisGenerating()) {
-                  <div [ngClass]="getProgressCardClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-                    <symphiq-content-generation-progress
-                        [itemStatus]="itemStatusProfileAnalysis()"
-                        [viewMode]="viewMode()"
-                        title="Generating Your Focus Area Analysis"
-                        subtitle="We're analyzing your data to create your personalized analysis. It will appear when ready."
-                    />
-                  </div>
-                } @else {
-                  <symphiq-strategic-goals-tiled-grid
-                      [goals]="strategicRoadmapGoals()"
-                      [viewMode]="viewMode()"
-                      (viewMoreClick)="openGoalModal($event)"
-                  />
-                }
-              </div>
-            }
+                template: `
+    <div [ngClass]="getContainerClasses()" [class.min-h-screen]="!embedded()" class="relative">
+      <div class="animated-bubbles" [class.light-mode]="isLightMode()"
+           style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
+
+      <!-- Scroll Progress Bar -->
+      <div
+          [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+        <div
+            [style.width.%]="scrollProgress()"
+            [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
+            class="h-full transition-all duration-200 ease-out">
+        </div>
+      </div>
+
+      <div class="relative z-[51]">
+        <!-- Dashboard Header -->
+        <symphiq-dashboard-header
+            [title]="getAnalysisSubtitle()"
+            [subtitle]="''"
+            [currentSection]="'Focus Area'"
+            [viewMode]="viewMode()"
+            [viewModeLabel]="displayModeLabel()"
+            [isLoading]="isLoading()"
+            [requestedByUser]="requestedByUser()"
+            [createdDate]="profileAnalysis()?.selfContentCompletedDate"
+            [showControls]="shouldShowHeaderControls()"
+            (searchClick)="openSearch()"
+            (viewModeClick)="openViewModeSwitcher()"
+        />
+
+        <!-- Main Content -->
+        <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12"
+              [class.pb-32]="shouldShowReviewFooter()">
+
+          <!-- Welcome Banner (Simplified View Only) -->
+          @if (isSimplifiedView()) {
+            <div class="mb-12">
+              <symphiq-focus-area-welcome-banner
+                  [viewMode]="viewMode()"
+                  [focusAreaDomain]="focusAreaDomain()"
+                  [focusAreaName]="focusAreaName()"
+              />
+            </div>
+
+            <!-- Loading Card -->
+            @if (isLoading()) {
+              <div [ngClass]="isLightMode() ? 'bg-white/80 border-slate-200' : 'bg-slate-800/80 border-slate-700'" 
+                   class="rounded-2xl border shadow-lg p-8 backdrop-blur-sm">
+                <div class="flex flex-col items-center justify-center space-y-4">
+                  <symphiq-indeterminate-spinner [viewMode]="viewMode()" size="large" />
+                  <div class="text-center">
+                    <h3 [ngClass]="isLightMode() ? 'text-slate-900' : 'text-white'" class="text-lg font-semibold mb-1">
+                      Loading Your Focus Area Analysis
+                    </h3>
+                    <p [ngClass]="isLightMode() ? 'text-slate-600' : 'text-slate-400'" class="text-sm">
+                      Please wait while we prepare your personalized insights...
+                    </p>
+                  </div>
+                </div>
+              </div>
+            }
+          }
+
+          <!-- Simplified View Content -->
+          @if (isSimplifiedView()) {
+            <!-- Strategic Insights & Goals -->
+            @if (profileAnalysis()) {
+              <div class="mb-8">
+                @if (isProfileAnalysisGenerating()) {
+                  <div [ngClass]="getProgressCardClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+                    <symphiq-content-generation-progress
+                        [itemStatus]="itemStatusProfileAnalysis()"
+                        [viewMode]="viewMode()"
+                        title="Generating Your Focus Area Analysis"
+                        subtitle="We're analyzing your data to create your personalized analysis. It will appear when ready."
+                    />
+                  </div>
+                } @else {
+                  <symphiq-strategic-goals-tiled-grid
+                      [goals]="strategicRoadmapGoals()"
+                      [viewMode]="viewMode()"
+                      (viewMoreClick)="openGoalModal($event)"
+                  />
+                }
+              </div>
+            }
+
+            <!-- Supporting Business Context -->
+            @if (nonStrategicSections().length > 0) {
+              <div>
+                <symphiq-collapsible-analysis-section-group
+                    [sections]="nonStrategicSections()"
+                    [viewMode]="viewMode()"
+                    [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
+                    [allGoals]="allGoals()"
+                    [allMetrics]="allMetrics()"
+                    [allCharts]="allCharts()"
+                    [allInsights]="allInsights()"
+                    [businessProfile]="profile()"
+                />
+              </div>
+            }
+          }
+
+          <!-- Compact & Expanded View Content -->
+          @if (!isSimplifiedView()) {
+            <!-- Focus Area Executive Summary -->
+            @if (focusAreaExecutiveSummary(); as summary) {
+              <symphiq-focus-area-executive-summary
+                  [viewMode]="viewMode()"
+                  [summary]="summary"
+                  [allGoals]="allGoals()"
+                  (topPrioritiesClick)="handleTopPrioritiesClick()"
+                  (priorityDetailClick)="handlePriorityDetailClick($event)"
+              />
+            }
+
+            <!-- Divider Before First Section -->
+            @if (sections(); as sectionList) {
+              @if (sectionList.length > 0 && sectionList[0].icon) {
+                <symphiq-section-divider
+                    [viewMode]="viewMode()"
+                    [sectionIcon]="sectionList[0].icon"
+                />
+              }
+            }
+
+            <!-- Profile Analysis Sections -->
+            @if (sections(); as sectionList) {
+              <section class="space-y-8">
+                @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
+                  <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
+                       class="rounded-xl p-8 scroll-mt-24">
+                    <!-- Icon and Title -->
+                    <div class="flex items-start gap-3 mb-6">
+                      @if (section.icon) {
+                        <div [ngClass]="getSectionIconClasses()"
+                             class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
+                          <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
+                        </div>
+                      }
+                      <div class="flex-1">
+                        <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
+                          {{ section.title }}
+                        </h3>
+                      </div>
+                    </div>
+
+                    <!-- Description and Visual Side-by-Side -->
+                    @if (section.description || (section.visual && section.visual.enabled)) {
+                      <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
+                           [class.lg:flex-row-reverse]="idx % 2 === 0">
+                        @if (section.visual && section.visual.enabled) {
+                          <div class="w-full lg:w-2/3">
+                            <symphiq-napkin-visual-placeholder
+                                [visual]="section.visual"
+                                [viewMode]="viewMode()"
+                            />
+                          </div>
+                        }
+                        @if (section.description) {
+                          <div class="w-full"
+                               [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
+                          <p [ngClass]="getSectionDescriptionClasses()"
+                             class="text-sm leading-relaxed whitespace-pre-line">
+                            {{ section.description }}
+                          </p>
+                          </div>
+                        }
+                      </div>
+                    }
+
+                    <!-- Section Content -->
+                    <symphiq-profile-section-content
+                        [section]="section"
+                        [viewMode]="viewMode()"
+                        [sectionIndex]="idx"
+                        [allGoals]="allGoals()"
+                        [allMetrics]="allMetrics()"
+                        [allCharts]="allCharts()"
+                        [allInsights]="allInsights()"
+                        [businessProfile]="profile()"
+                    />
+                  </div>
+
+                  <!-- Section Divider (between sections) -->
+                  @if (!last) {
+                    <symphiq-section-divider
+                        [viewMode]="viewMode()"
+                        [sectionIcon]="sectionList[idx + 1].icon"
+                    />
+                  }
+                }
+              </section>
+            }
+          }
+
+        </main>
+
+        <!-- Table of Contents (Compact & Expanded Views) -->
+        @if (!isSimplifiedView() && sections()) {
+          <symphiq-floating-toc
+              [sections]="tocSections()"
+              [viewMode]="viewMode()"
+              [embedded]="embedded()"
+              [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        <!-- Section Navigation Dots (Compact & Expanded Views) -->
+        @if (!isSimplifiedView() && sections()) {
+          <symphiq-section-navigation
+              [sections]="tocSections()"
+              [viewMode]="viewMode()"
+              [embedded]="embedded()"
+              [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        <!-- Search Modal -->
+        <symphiq-search-modal
+            [isOpen]="isSearchOpen()"
+            [isLightMode]="isLightMode()"
+            (close)="closeSearch()"
+        />
+
+        <!-- View Mode Switcher Modal -->
+        <symphiq-view-mode-switcher-modal
+            [isOpen]="isViewModeSwitcherOpen()"
+            [currentMode]="currentDisplayMode()"
+            [viewMode]="viewMode()"
+            (close)="closeViewModeSwitcher()"
+            (modeSelected)="handleDisplayModeChange($event)"
+        />
+
+        <!-- Profile Analysis Modal -->
+        <symphiq-profile-analysis-modal
+            [isLightMode]="isLightMode()"
+            [allMetrics]="allMetrics()"
+            [allInsights]="allInsights()"
+            [allBusinessInsights]="allBusinessInsights()"
+            [allCharts]="allCharts()"
+        >
+          @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
+            <symphiq-goal-card
+                [goal]="data.goal"
+                [viewMode]="data.viewMode"
+                [isInModal]="true"
+                [allMetrics]="allMetrics()"
+                [allCharts]="allCharts()"
+                [allInsights]="allInsights()"
+                [currentModalState]="getCurrentModalState()"
+                [businessProfile]="profile()"
+            />
+          }
+          @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
+            <symphiq-goal-objectives-modal-content
+                [goal]="data.goal"
+                [viewMode]="data.viewMode"
+            />
+          }
+          @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
+            <symphiq-objective-strategies-modal-content
+                [objective]="data.objective"
+                [goalTitle]="data.goalTitle"
+                [viewMode]="data.viewMode"
+            />
+          }
+          @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
+            <symphiq-strategy-recommendations-modal-content
+                [strategy]="data.strategy"
+                [objectiveTitle]="data.objectiveTitle"
+                [goalTitle]="data.goalTitle"
+                [viewMode]="data.viewMode"
+                [expandedRecommendationId]="data.expandedRecommendationId"
+                [allMetrics]="allMetrics()"
+                [allCharts]="allCharts()"
+                [allInsights]="allInsights()"
+                [allBusinessInsights]="allBusinessInsights()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
+            <symphiq-category-detail-modal-content
+                [category]="data.category"
+                [viewMode]="data.viewMode"
+                [scrollToSection]="data.scrollToSection"
+            />
+          }
+          @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
+            <symphiq-strength-detail-modal-content
+                [strength]="data.strength"
+                [viewMode]="data.viewMode"
+                [allFunnelStrengths]="funnelStrengths()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
+            <symphiq-gap-detail-modal-content
+                [gap]="data.gap"
+                [viewMode]="data.viewMode"
+                [allGoals]="allGoals()"
+                [allWeaknesses]="funnelWeaknesses()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
+            <symphiq-opportunity-detail-modal-content
+                [opportunity]="data.opportunity"
+                [viewMode]="data.viewMode"
+                [allStrengths]="funnelStrengths()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+        </symphiq-profile-analysis-modal>
+
+        <!-- Funnel Analysis Modal -->
+        <symphiq-funnel-analysis-modal
+            #funnelModalComponent
+        />
+
+        <!-- Mark as Reviewed Sticky Footer -->
+        <symphiq-mark-as-reviewed-footer
+            [viewMode]="viewMode()"
+            [reviewStatus]="profileAnalysis()?.reviewStatus"
+            [selfContentStatus]="profileAnalysis()?.selfContentStatus"
+            [isMarkingAsReviewed]="isMarkingAsReviewed()"
+            (markAsReviewedClick)="handleMarkAsReviewedClick()"
+        />
+
+        <!-- Tooltip Container -->
+        <symphiq-tooltip-container />
+      </div>
+    </div>
+  `
+            }]
+    }], null, { funnelModalComponent: [{
+            type: ViewChild,
+            args: ['funnelModalComponent']
+        }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], profileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalysis", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], itemStatusProfileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusProfileAnalysis", required: false }] }], isMarkingAsReviewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMarkingAsReviewed", required: false }] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], markAsReviewedClick: [{ type: i0.Output, args: ["markAsReviewedClick"] }], onWindowScroll: [{
+            type: HostListener,
+            args: ['window:scroll', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisFocusAreaDashboardComponent, { className: "SymphiqProfileAnalysisFocusAreaDashboardComponent", filePath: "lib/components/profile-analysis-focus-area-dashboard/symphiq-profile-analysis-focus-area-dashboard.component.ts", lineNumber: 481 }); })();
 
-            <!-- Supporting Business Context -->
-            @if (nonStrategicSections().length > 0) {
-              <div>
-                <symphiq-collapsible-analysis-section-group
-                    [sections]="nonStrategicSections()"
-                    [viewMode]="viewMode()"
-                    [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
-                    [allGoals]="allGoals()"
-                    [allMetrics]="allMetrics()"
-                    [allCharts]="allCharts()"
-                    [allInsights]="allInsights()"
-                    [businessProfile]="profile()"
-                />
-              </div>
+function SymphiqProfileMetricsAnalysesDashboardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-journey-progress-indicator", 35);
+    i0.ɵɵlistener("nextStepClick", function SymphiqProfileMetricsAnalysesDashboardComponent_Conditional_6_Template_symphiq_journey_progress_indicator_nextStepClick_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.nextStepClick.emit()); })("stepClick", function SymphiqProfileMetricsAnalysesDashboardComponent_Conditional_6_Template_symphiq_journey_progress_indicator_stepClick_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.stepClick.emit($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("currentStepId", ctx_r1.currentStepId())("showNextStepAction", ctx_r1.forDemo() || ctx_r1.allMetricsAnalysisReviewed())("forDemo", ctx_r1.forDemo())("maxAccessibleStepId", ctx_r1.maxAccessibleStepId());
+} }
+function SymphiqProfileMetricsAnalysesDashboardComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-profile-analysis-status-summary", 16);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("profileStatusCounts", ctx_r1.metricStatusCounts())("analysisStatusCounts", ctx_r1.analysisStatusCounts())("allReviewed", ctx_r1.allMetricsAnalysisReviewed())("hasItems", ctx_r1.metricCards().length > 0)("config", ctx_r1.metricStatusConfig);
+} }
+function SymphiqProfileMetricsAnalysesDashboardComponent_Conditional_65_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-search-modal", 36);
+    i0.ɵɵlistener("closeModal", function SymphiqProfileMetricsAnalysesDashboardComponent_Conditional_65_Template_symphiq_search_modal_closeModal_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleCloseSearchModal()); });
+    i0.ɵɵelementEnd();
+} }
+class SymphiqProfileMetricsAnalysesDashboardComponent {
+    constructor() {
+        this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
+        this.createdDate = input(...(ngDevMode ? [undefined, { debugName: "createdDate" }] : []));
+        this.embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
+        this.profileAnalyses = input(...(ngDevMode ? [undefined, { debugName: "profileAnalyses" }] : []));
+        this.profileMetrics = input(...(ngDevMode ? [undefined, { debugName: "profileMetrics" }] : []));
+        this.itemStatusesProfileMetric = input(...(ngDevMode ? [undefined, { debugName: "itemStatusesProfileMetric" }] : []));
+        this.itemStatusesProfileAnalysis = input(...(ngDevMode ? [undefined, { debugName: "itemStatusesProfileAnalysis" }] : []));
+        this.profile = input(...(ngDevMode ? [undefined, { debugName: "profile" }] : []));
+        this.funnelAnalysis = input(...(ngDevMode ? [undefined, { debugName: "funnelAnalysis" }] : []));
+        this.funnelMetrics = input(...(ngDevMode ? [undefined, { debugName: "funnelMetrics" }] : []));
+        this.account = input(...(ngDevMode ? [undefined, { debugName: "account" }] : []));
+        this.profileMetricQuestions = input(...(ngDevMode ? [undefined, { debugName: "profileMetricQuestions" }] : []));
+        this.isOnboarded = input(false, ...(ngDevMode ? [{ debugName: "isOnboarded" }] : []));
+        this.scrollEvent = input(...(ngDevMode ? [undefined, { debugName: "scrollEvent" }] : []));
+        this.scrollElement = input(...(ngDevMode ? [undefined, { debugName: "scrollElement" }] : []));
+        this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
+        this.isLoading = input(...(ngDevMode ? [undefined, { debugName: "isLoading" }] : []));
+        this.forDemo = input(false, ...(ngDevMode ? [{ debugName: "forDemo" }] : []));
+        this.currentUser = input(...(ngDevMode ? [undefined, { debugName: "currentUser" }] : []));
+        this.maxAccessibleStepId = input(undefined, ...(ngDevMode ? [{ debugName: "maxAccessibleStepId" }] : []));
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.displayMode = input(DisplayModeEnum.SIMPLIFIED, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+        this.currentStepId = input(JourneyStepIdEnum.METRIC_ANALYSIS, ...(ngDevMode ? [{ debugName: "currentStepId" }] : []));
+        this.navigateToProfileMetric = output();
+        this.navigateToProfileAnalysis = output();
+        this.stepClick = output();
+        this.nextStepClick = output();
+        this.answerMetricProfileQuestions = output();
+        this.continueMetricProfileQuestions = output();
+        this.profileQuestionAnswerSave = output();
+        this.metricProfileAdminAnswerAction = output();
+        this.showSearchModal = signal(false, ...(ngDevMode ? [{ debugName: "showSearchModal" }] : []));
+        this.scrollProgress = signal(0, ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
+        this.headerScrollService = inject(HeaderScrollService);
+        this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.isSimplifiedView = computed(() => this.displayMode() === DisplayModeEnum.SIMPLIFIED, ...(ngDevMode ? [{ debugName: "isSimplifiedView" }] : []));
+        this.AiDynamicContentStatusEnum = AiDynamicContentStatusEnum;
+        this.ProfileAnalysisReviewStatusEnum = ProfileAnalysisReviewStatusEnum;
+        this.metricStatusConfig = {
+            profileSectionTitle: 'Metric Profiles',
+            profileSectionIcon: 'chart',
+            analysisSectionTitle: 'Metric Analyses',
+            analysisSectionIcon: 'chart',
+            allReviewedMessage: 'All Metric Analyses Reviewed!',
+            noAnalysesMessage: 'No metric analyses yet'
+        };
+        this.metricCardConfig = {
+            toolsLabel: '',
+            profileProgressLabel: 'Profile progress',
+            generatingProfileTitle: 'Generating Metric Profile',
+            generatingAnalysisTitle: 'Generating Metric Analysis',
+            notInterestedSectionLabel: '',
+            showNotInterestedSection: false
+        };
+        this.COLLAPSE_THRESHOLD = 50;
+        this.EXPAND_THRESHOLD = 10;
+        this.embeddedScrollEffect = effect(() => {
+            const scrollEvent = this.scrollEvent();
+            const isEmbedded = this.embedded();
+            if (isEmbedded && !scrollEvent) {
+                return;
             }
-          }
-
-          <!-- Compact & Expanded View Content -->
-          @if (!isSimplifiedView()) {
-            <!-- Focus Area Executive Summary -->
-            @if (focusAreaExecutiveSummary(); as summary) {
-              <symphiq-focus-area-executive-summary
-                  [viewMode]="viewMode()"
-                  [summary]="summary"
-                  [allGoals]="allGoals()"
-                  (topPrioritiesClick)="handleTopPrioritiesClick()"
-                  (priorityDetailClick)="handlePriorityDetailClick($event)"
-              />
+            if (!scrollEvent || !isEmbedded) {
+                return;
             }
-
-            <!-- Divider Before First Section -->
-            @if (sections(); as sectionList) {
-              @if (sectionList.length > 0 && sectionList[0].icon) {
-                <symphiq-section-divider
-                    [viewMode]="viewMode()"
-                    [sectionIcon]="sectionList[0].icon"
-                />
-              }
+            const detail = scrollEvent.detail;
+            if (!detail) {
+                return;
             }
-
-            <!-- Profile Analysis Sections -->
-            @if (sections(); as sectionList) {
-              <section class="space-y-8">
-                @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
-                  <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
-                       class="rounded-xl p-8 scroll-mt-24">
-                    <!-- Icon and Title -->
-                    <div class="flex items-start gap-3 mb-6">
-                      @if (section.icon) {
-                        <div [ngClass]="getSectionIconClasses()"
-                             class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
-                          <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
-                        </div>
-                      }
-                      <div class="flex-1">
-                        <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
-                          {{ section.title }}
-                        </h3>
-                      </div>
-                    </div>
-
-                    <!-- Description and Visual Side-by-Side -->
-                    @if (section.description || (section.visual && section.visual.enabled)) {
-                      <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
-                           [class.lg:flex-row-reverse]="idx % 2 === 0">
-                        @if (section.visual && section.visual.enabled) {
-                          <div class="w-full lg:w-2/3">
-                            <symphiq-napkin-visual-placeholder
-                                [visual]="section.visual"
-                                [viewMode]="viewMode()"
-                            />
-                          </div>
-                        }
-                        @if (section.description) {
-                          <div class="w-full"
-                               [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
-                          <p [ngClass]="getSectionDescriptionClasses()"
-                             class="text-sm leading-relaxed whitespace-pre-line">
-                            {{ section.description }}
-                          </p>
-                          </div>
-                        }
-                      </div>
-                    }
-
-                    <!-- Section Content -->
-                    <symphiq-profile-section-content
-                        [section]="section"
-                        [viewMode]="viewMode()"
-                        [sectionIndex]="idx"
-                        [allGoals]="allGoals()"
-                        [allMetrics]="allMetrics()"
-                        [allCharts]="allCharts()"
-                        [allInsights]="allInsights()"
-                        [businessProfile]="profile()"
-                    />
-                  </div>
-
-                  <!-- Section Divider (between sections) -->
-                  @if (!last) {
-                    <symphiq-section-divider
-                        [viewMode]="viewMode()"
-                        [sectionIcon]="sectionList[idx + 1].icon"
-                    />
-                  }
+            const scrollTop = detail.scrollTop || 0;
+            this.headerScrollService.handleEmbeddedScroll(scrollTop, this.COLLAPSE_THRESHOLD, this.EXPAND_THRESHOLD);
+            const scrollElement = this.scrollElement();
+            if (scrollElement) {
+                const scrollHeight = scrollElement.scrollHeight || 0;
+                const clientHeight = scrollElement.clientHeight || 0;
+                const maxScroll = scrollHeight - clientHeight;
+                if (maxScroll > 0) {
+                    const progress = (scrollTop / maxScroll) * 100;
+                    this.scrollProgress.set(Math.min(100, Math.max(0, progress)));
                 }
-              </section>
             }
-          }
-
-        </main>
-
-        <!-- Table of Contents (Compact & Expanded Views) -->
-        @if (!isSimplifiedView() && sections()) {
-          <symphiq-floating-toc
-              [sections]="tocSections()"
-              [viewMode]="viewMode()"
-              [embedded]="embedded()"
-              [scrollElement]="scrollElement() ?? undefined"
-          />
+        }, ...(ngDevMode ? [{ debugName: "embeddedScrollEffect" }] : []));
+        this.metricCards = computed(() => {
+            const funnelMetricsData = this.funnelMetrics();
+            const profileMetricsData = this.profileMetrics();
+            const profileAnalysesData = this.profileAnalyses();
+            const itemStatusesProfileMetricData = this.itemStatusesProfileMetric();
+            const itemStatusesProfileAnalysisData = this.itemStatusesProfileAnalysis();
+            const profileMetricQuestionsData = this.profileMetricQuestions();
+            const isDemo = this.forDemo();
+            const funnelStageMetrics = [
+                MetricEnum.SCREEN_PAGE_VIEWS,
+                MetricEnum.ITEM_VIEW_EVENTS,
+                MetricEnum.ADD_TO_CARTS,
+                MetricEnum.CHECKOUTS,
+                MetricEnum.ECOMMERCE_PURCHASES,
+                MetricEnum.PURCHASE_REVENUE
+            ];
+            const mockProgressData = {
+                [MetricEnum.SCREEN_PAGE_VIEWS]: { answered: 10, total: 12, hasAnalysis: true },
+                [MetricEnum.ITEM_VIEW_EVENTS]: { answered: 8, total: 11, hasAnalysis: true },
+                [MetricEnum.ADD_TO_CARTS]: { answered: 5, total: 10, hasAnalysis: false },
+                [MetricEnum.CHECKOUTS]: { answered: 7, total: 9, hasAnalysis: true },
+                [MetricEnum.ECOMMERCE_PURCHASES]: { answered: 0, total: 8, hasAnalysis: false },
+                [MetricEnum.PURCHASE_REVENUE]: { answered: 0, total: 10, hasAnalysis: false },
+                [MetricEnum.SESSIONS]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.SESSIONS_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ACTIVE_USERS]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ACTIVE_USERS_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.TRANSACTIONS]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.TRANSACTIONS_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.PURCHASE_REVENUE_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.AVERAGE_ORDER_VALUE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.NEW_USERS]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.NEW_USERS_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.USER_ENGAGEMENT_DURATION]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.SCREEN_PAGE_VIEWS_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.BOUNCES]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.BOUNCE_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ADD_TO_CARTS_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.CHECKOUTS_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ECOMMERCE_PURCHASES_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ECOMMERCE_CONVERSION_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.GROSS_PURCHASE_REVENUE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.GROSS_PURCHASE_REVENUE_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEM_VIEW_EVENTS_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.PROMOTION_CLICKS]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.PROMOTION_CLICKS_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.PROMOTION_VIEWS]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.PROMOTION_VIEWS_PER_DAY]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.REFUND_AMOUNT]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.SHIPPING_AMOUNT]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.TAX_AMOUNT]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ACTIVE_USER_ADD_TO_CART_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.REVENUE_PER_PRODUCT_VIEW]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.REVENUE_PER_ADD_TO_CART]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.REVENUE_PER_CHECKOUT]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.VIEW_TO_PRODUCT_VIEW_CONVERSION_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.PRODUCT_VIEW_TO_CART_CONVERSION_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.CART_TO_CHECKOUT_CONVERSION_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.CHECKOUT_TO_PURCHASE_CONVERSION_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.PRODUCT_VIEW_CONVERSION_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.PRODUCT_VIEW_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ADD_TO_CART_CONVERSION_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ADD_TO_CART_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.CHECKOUT_CONVERSION_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ACTIVE_USER_CHECKOUT_RATE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.GROSS_ITEM_REVENUE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEM_DISCOUNT_AMOUNT]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEM_REFUND_AMOUNT]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEM_REVENUE]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEMS_ADDED_TO_CART]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEMS_CHECKED_OUT]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEMS_CLICKED_IN_LIST]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEMS_CLICKED_IN_PROMOTION]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEMS_PURCHASED]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEMS_VIEWED]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEMS_VIEWED_IN_LIST]: { answered: 0, total: 0, hasAnalysis: false },
+                [MetricEnum.ITEMS_VIEWED_IN_PROMOTION]: { answered: 0, total: 0, hasAnalysis: false }
+            };
+            const funnelMetricsMap = new Map(funnelMetricsData?.map(fm => [fm.funnelMetric, fm]));
+            const profileMetricsMap = new Map(profileMetricsData?.map(pm => {
+                const funnelMetricId = pm.funnelMetricId;
+                if (!funnelMetricId)
+                    return [undefined, pm];
+                const funnelMetric = funnelMetricsData?.find(fm => fm.id === funnelMetricId);
+                return [funnelMetric?.funnelMetric, pm];
+            }).filter(([key]) => key !== undefined));
+            const profileMetricIdToMetricEnumMap = new Map(profileMetricsData?.map(pm => {
+                const funnelMetricId = pm.funnelMetricId;
+                if (!funnelMetricId)
+                    return [pm.id, undefined];
+                const funnelMetric = funnelMetricsData?.find(fm => fm.id === funnelMetricId);
+                return [pm.id, funnelMetric?.funnelMetric];
+            }).filter(([, value]) => value !== undefined));
+            const profileAnalysesMap = new Map(profileAnalysesData
+                ?.filter(pa => pa.profileMetricId !== undefined)
+                .map(pa => [profileMetricIdToMetricEnumMap.get(pa.profileMetricId), pa])
+                .filter(([key]) => key !== undefined));
+            const itemStatusesProfileMetricMap = new Map(itemStatusesProfileMetricData?.map(is => [is.itemId, is]));
+            const itemStatusesProfileAnalysisMap = new Map(itemStatusesProfileAnalysisData?.map(is => [is.itemId, is]));
+            return funnelStageMetrics.map(metricEnum => {
+                let questionsAnswered = 0;
+                let totalQuestions = 0;
+                let hasAnalysis = false;
+                let status = 'pending';
+                let canViewDetails = false;
+                let selfContentStatusProfileMetric = null;
+                let selfContentStatusProfileAnalysis = null;
+                let itemStatusProfileMetric = null;
+                let itemStatusProfileAnalysis = null;
+                let profileMetric = null;
+                let profileAnalysis = null;
+                if (isDemo) {
+                    const mockData = mockProgressData[metricEnum];
+                    questionsAnswered = mockData.answered;
+                    totalQuestions = mockData.total;
+                    hasAnalysis = mockData.hasAnalysis;
+                    canViewDetails = true;
+                    selfContentStatusProfileMetric = AiDynamicContentStatusEnum.GENERATED;
+                    selfContentStatusProfileAnalysis = AiDynamicContentStatusEnum.GENERATED;
+                    if (questionsAnswered === totalQuestions && totalQuestions > 0) {
+                        status = 'complete';
+                    }
+                    else if (questionsAnswered > 0) {
+                        status = 'in-progress';
+                    }
+                    else {
+                        status = 'not-started';
+                    }
+                }
+                else {
+                    profileMetric = profileMetricsMap.get(metricEnum) ?? null;
+                    profileAnalysis = profileAnalysesMap.get(metricEnum) ?? null;
+                    hasAnalysis = !!profileAnalysis;
+                    if (profileMetric) {
+                        selfContentStatusProfileMetric = profileMetric.selfContentStatus ?? null;
+                        canViewDetails = selfContentStatusProfileMetric === AiDynamicContentStatusEnum.GENERATED;
+                        const profileMetricId = profileMetric.id;
+                        if (profileMetricId) {
+                            itemStatusProfileMetric = itemStatusesProfileMetricMap.get(profileMetricId) ?? null;
+                        }
+                        const questionsForMetric = profileMetricQuestionsData?.filter(q => q.profileMetricId === profileMetricId) ?? [];
+                        totalQuestions = questionsForMetric.length;
+                        questionsAnswered = questionsForMetric.filter(q => q.answered).length;
+                        if (questionsAnswered === totalQuestions && totalQuestions > 0) {
+                            status = 'complete';
+                        }
+                        else if (questionsAnswered > 0) {
+                            status = 'in-progress';
+                        }
+                        else {
+                            status = 'not-started';
+                        }
+                    }
+                    if (profileAnalysis) {
+                        selfContentStatusProfileAnalysis = profileAnalysis.selfContentStatus ?? null;
+                        const profileAnalysisId = profileAnalysis.id;
+                        if (profileAnalysisId) {
+                            itemStatusProfileAnalysis = itemStatusesProfileAnalysisMap.get(profileAnalysisId) ?? null;
+                        }
+                    }
+                }
+                const progressPercent = totalQuestions > 0 ? (questionsAnswered / totalQuestions) * 100 : 0;
+                return {
+                    metricEnum,
+                    title: MetricEnumUtil.title(metricEnum),
+                    description: this.getMetricDescription(metricEnum),
+                    questionsAnswered,
+                    totalQuestions,
+                    hasAnalysis,
+                    icon: this.getIconForMetric(metricEnum),
+                    progressPercent,
+                    status,
+                    canViewDetails,
+                    selfContentStatusProfileMetric,
+                    selfContentStatusProfileAnalysis,
+                    itemStatusProfileMetric,
+                    itemStatusProfileAnalysis,
+                    profileMetric,
+                    profileAnalysis
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "metricCards" }] : []));
+        this.allMetricsAnalysisReviewed = computed(() => {
+            const cards = this.metricCards();
+            if (cards.length === 0) {
+                return false;
+            }
+            return cards.every(card => card.profileAnalysis?.reviewStatus === ProfileAnalysisReviewStatusEnum.REVIEWED);
+        }, ...(ngDevMode ? [{ debugName: "allMetricsAnalysisReviewed" }] : []));
+        this.metricStatusCounts = computed(() => {
+            const cards = this.metricCards();
+            let generating = 0;
+            let notStarted = 0;
+            let inProgress = 0;
+            let completed = 0;
+            for (const card of cards) {
+                const contentStatus = card.selfContentStatusProfileMetric;
+                if (contentStatus === AiDynamicContentStatusEnum.GENERATING || contentStatus === AiDynamicContentStatusEnum.REQUESTED) {
+                    generating++;
+                }
+                else if (card.status === 'not-started') {
+                    notStarted++;
+                }
+                else if (card.status === 'in-progress') {
+                    inProgress++;
+                }
+                else if (card.status === 'complete') {
+                    completed++;
+                }
+            }
+            return { generating, notStarted, inProgress, completed };
+        }, ...(ngDevMode ? [{ debugName: "metricStatusCounts" }] : []));
+        this.analysisStatusCounts = computed(() => {
+            const cards = this.metricCards();
+            let generating = 0;
+            let notReviewed = 0;
+            let reviewed = 0;
+            for (const card of cards) {
+                const analysis = card.profileAnalysis;
+                if (!analysis) {
+                    continue;
+                }
+                const contentStatus = card.selfContentStatusProfileAnalysis;
+                if (contentStatus === AiDynamicContentStatusEnum.GENERATING || contentStatus === AiDynamicContentStatusEnum.REQUESTED) {
+                    generating++;
+                }
+                else if (analysis.reviewStatus === ProfileAnalysisReviewStatusEnum.NOT_REVIEWED) {
+                    notReviewed++;
+                }
+                else if (analysis.reviewStatus === ProfileAnalysisReviewStatusEnum.REVIEWED) {
+                    reviewed++;
+                }
+            }
+            return { generating, notReviewed, reviewed };
+        }, ...(ngDevMode ? [{ debugName: "analysisStatusCounts" }] : []));
+        this.genericCardData = computed(() => {
+            return this.metricCards().map(card => ({
+                id: card.metricEnum,
+                title: card.title,
+                description: card.description,
+                icon: card.icon,
+                questionsAnswered: card.questionsAnswered,
+                totalQuestions: card.totalQuestions,
+                progressPercent: card.progressPercent,
+                status: card.status,
+                hasAnalysis: card.hasAnalysis,
+                canViewDetails: card.canViewDetails,
+                engagementBadge: null,
+                tools: [],
+                selfContentStatusProfile: card.selfContentStatusProfileMetric,
+                selfContentStatusAnalysis: card.selfContentStatusProfileAnalysis,
+                itemStatusProfile: card.itemStatusProfileMetric,
+                itemStatusAnalysis: card.itemStatusProfileAnalysis,
+                profile: card.profileMetric,
+                profileAnalysis: card.profileAnalysis,
+                isNotInterested: false
+            }));
+        }, ...(ngDevMode ? [{ debugName: "genericCardData" }] : []));
+    }
+    onScroll() {
+        this.headerScrollService.handleScroll(this.embedded());
+    }
+    getCurrentMetricForConfidence() {
+        const cards = this.metricCards();
+        const completedCards = cards.filter(c => c.status === 'complete' || c.profileAnalysis?.reviewStatus === ProfileAnalysisReviewStatusEnum.REVIEWED);
+        if (completedCards.length === 0) {
+            return cards[0]?.metricEnum;
         }
-
-        <!-- Section Navigation Dots (Compact & Expanded Views) -->
-        @if (!isSimplifiedView() && sections()) {
-          <symphiq-section-navigation
-              [sections]="tocSections()"
-              [viewMode]="viewMode()"
-              [embedded]="embedded()"
-              [scrollElement]="scrollElement() ?? undefined"
-          />
+        if (completedCards.length === cards.length) {
+            return cards[cards.length - 1]?.metricEnum;
         }
-
-        <!-- Search Modal -->
-        <symphiq-search-modal
-            [isOpen]="isSearchOpen()"
-            [isLightMode]="isLightMode()"
-            (close)="closeSearch()"
-        />
-
-        <!-- View Mode Switcher Modal -->
-        <symphiq-view-mode-switcher-modal
-            [isOpen]="isViewModeSwitcherOpen()"
-            [currentMode]="currentDisplayMode()"
-            [viewMode]="viewMode()"
-            (close)="closeViewModeSwitcher()"
-            (modeSelected)="handleDisplayModeChange($event)"
-        />
-
-        <!-- Profile Analysis Modal -->
-        <symphiq-profile-analysis-modal
-            [isLightMode]="isLightMode()"
-            [allMetrics]="allMetrics()"
-            [allInsights]="allInsights()"
-            [allBusinessInsights]="allBusinessInsights()"
-            [allCharts]="allCharts()"
-        >
-          @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
-            <symphiq-goal-card
-                [goal]="data.goal"
-                [viewMode]="data.viewMode"
-                [isInModal]="true"
-                [allMetrics]="allMetrics()"
-                [allCharts]="allCharts()"
-                [allInsights]="allInsights()"
-                [currentModalState]="getCurrentModalState()"
-                [businessProfile]="profile()"
-            />
-          }
-          @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
-            <symphiq-goal-objectives-modal-content
-                [goal]="data.goal"
-                [viewMode]="data.viewMode"
-            />
-          }
-          @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
-            <symphiq-objective-strategies-modal-content
-                [objective]="data.objective"
-                [goalTitle]="data.goalTitle"
-                [viewMode]="data.viewMode"
-            />
-          }
-          @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
-            <symphiq-strategy-recommendations-modal-content
-                [strategy]="data.strategy"
-                [objectiveTitle]="data.objectiveTitle"
-                [goalTitle]="data.goalTitle"
-                [viewMode]="data.viewMode"
-                [expandedRecommendationId]="data.expandedRecommendationId"
-                [allMetrics]="allMetrics()"
-                [allCharts]="allCharts()"
-                [allInsights]="allInsights()"
-                [allBusinessInsights]="allBusinessInsights()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
-            <symphiq-category-detail-modal-content
-                [category]="data.category"
-                [viewMode]="data.viewMode"
-                [scrollToSection]="data.scrollToSection"
-            />
-          }
-          @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
-            <symphiq-strength-detail-modal-content
-                [strength]="data.strength"
-                [viewMode]="data.viewMode"
-                [allFunnelStrengths]="funnelStrengths()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
-            <symphiq-gap-detail-modal-content
-                [gap]="data.gap"
-                [viewMode]="data.viewMode"
-                [allGoals]="allGoals()"
-                [allWeaknesses]="funnelWeaknesses()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
-            <symphiq-opportunity-detail-modal-content
-                [opportunity]="data.opportunity"
-                [viewMode]="data.viewMode"
-                [allStrengths]="funnelStrengths()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-        </symphiq-profile-analysis-modal>
-
-        <!-- Funnel Analysis Modal -->
-        <symphiq-funnel-analysis-modal
-            #funnelModalComponent
-        />
-
-        <!-- Mark as Reviewed Sticky Footer -->
-        <symphiq-mark-as-reviewed-footer
-            [viewMode]="viewMode()"
-            [reviewStatus]="profileAnalysis()?.reviewStatus"
-            [selfContentStatus]="profileAnalysis()?.selfContentStatus"
-            [isMarkingAsReviewed]="isMarkingAsReviewed()"
-            (markAsReviewedClick)="handleMarkAsReviewedClick()"
-        />
-
-        <!-- Tooltip Container -->
-        <symphiq-tooltip-container />
-      </div>
-    </div>
-  `
-            }]
-    }], null, { funnelModalComponent: [{
-            type: ViewChild,
-            args: ['funnelModalComponent']
-        }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], profileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalysis", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], itemStatusProfileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusProfileAnalysis", required: false }] }], isMarkingAsReviewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMarkingAsReviewed", required: false }] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], markAsReviewedClick: [{ type: i0.Output, args: ["markAsReviewedClick"] }], onWindowScroll: [{
+        return completedCards[completedCards.length - 1]?.metricEnum;
+    }
+    handleCardClick(event) {
+        const { cardData, clickType } = event;
+        if (clickType === 'profile' && cardData.profile) {
+            this.navigateToProfileMetric.emit(cardData.profile);
+        }
+        else if ((clickType === 'analysis' || clickType === 'review') && cardData.profileAnalysis && cardData.profile) {
+            this.navigateToProfileAnalysis.emit({
+                profileAnalysis: cardData.profileAnalysis,
+                profileMetric: cardData.profile
+            });
+        }
+    }
+    handleSearchClick() {
+        this.showSearchModal.set(true);
+    }
+    handleCloseSearchModal() {
+        this.showSearchModal.set(false);
+    }
+    getWelcomeBannerContainerClasses() {
+        return this.isLightMode()
+            ? 'bg-white border-slate-200'
+            : 'bg-slate-800/50 border-slate-700/50';
+    }
+    getWelcomeBannerIconClasses() {
+        return this.isLightMode()
+            ? 'bg-blue-100 text-blue-600'
+            : 'bg-blue-500/20 text-blue-400';
+    }
+    getWelcomeBannerTitleClasses() {
+        return this.isLightMode()
+            ? 'text-slate-900'
+            : 'text-white';
+    }
+    getWelcomeBannerTextClasses() {
+        return this.isLightMode()
+            ? 'text-slate-700'
+            : 'text-slate-300';
+    }
+    getWelcomeBannerHighlightClasses() {
+        return this.isLightMode()
+            ? 'bg-blue-50/50 border-blue-300'
+            : 'bg-blue-500/10 border-blue-500/30';
+    }
+    getWelcomeBannerHighlightIconClasses() {
+        return this.isLightMode()
+            ? 'text-blue-600'
+            : 'text-blue-400';
+    }
+    getWelcomeBannerHighlightTitleClasses() {
+        return this.isLightMode()
+            ? 'text-slate-900'
+            : 'text-white';
+    }
+    getWelcomeBannerHighlightListClasses() {
+        return this.isLightMode()
+            ? 'text-slate-700'
+            : 'text-slate-300';
+    }
+    getWelcomeBannerNextStepsClasses() {
+        return this.isLightMode()
+            ? 'bg-amber-50/50 border-amber-200'
+            : 'bg-amber-500/10 border-amber-500/30';
+    }
+    getWelcomeBannerNextStepsIconClasses() {
+        return this.isLightMode()
+            ? 'text-amber-600'
+            : 'text-amber-400';
+    }
+    getWelcomeBannerNextStepsTitleClasses() {
+        return this.isLightMode()
+            ? 'text-slate-900'
+            : 'text-white';
+    }
+    getWelcomeBannerNextStepsTextClasses() {
+        return this.isLightMode()
+            ? 'text-slate-700'
+            : 'text-slate-300';
+    }
+    getIconForMetric(metric) {
+        const iconMap = {
+            [MetricEnum.SCREEN_PAGE_VIEWS]: '👁️',
+            [MetricEnum.ITEM_VIEW_EVENTS]: '🛍️',
+            [MetricEnum.ADD_TO_CARTS]: '🛒',
+            [MetricEnum.CHECKOUTS]: '💳',
+            [MetricEnum.ECOMMERCE_PURCHASES]: '✅',
+            [MetricEnum.PURCHASE_REVENUE]: '💰'
+        };
+        return iconMap[metric] || '📊';
+    }
+    getMetricDescription(metric) {
+        const descriptionMap = {
+            [MetricEnum.SCREEN_PAGE_VIEWS]: 'Total page views and sessions driving traffic to your store',
+            [MetricEnum.ITEM_VIEW_EVENTS]: 'Product detail page views indicating customer interest',
+            [MetricEnum.ADD_TO_CARTS]: 'Items added to cart showing purchase intent',
+            [MetricEnum.CHECKOUTS]: 'Initiated checkouts representing high purchase intent',
+            [MetricEnum.ECOMMERCE_PURCHASES]: 'Completed transactions and conversion success',
+            [MetricEnum.PURCHASE_REVENUE]: 'Total purchase revenue and average order value'
+        };
+        return descriptionMap[metric] || 'Funnel stage metric for conversion analysis';
+    }
+    static { this.ɵfac = function SymphiqProfileMetricsAnalysesDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqProfileMetricsAnalysesDashboardComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqProfileMetricsAnalysesDashboardComponent, selectors: [["symphiq-profile-metrics-analyses-dashboard"]], hostBindings: function SymphiqProfileMetricsAnalysesDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("scroll", function SymphiqProfileMetricsAnalysesDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
+        } }, inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalyses: [1, "profileAnalyses"], profileMetrics: [1, "profileMetrics"], itemStatusesProfileMetric: [1, "itemStatusesProfileMetric"], itemStatusesProfileAnalysis: [1, "itemStatusesProfileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], funnelMetrics: [1, "funnelMetrics"], account: [1, "account"], profileMetricQuestions: [1, "profileMetricQuestions"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], currentUser: [1, "currentUser"], maxAccessibleStepId: [1, "maxAccessibleStepId"], viewMode: [1, "viewMode"], displayMode: [1, "displayMode"], currentStepId: [1, "currentStepId"] }, outputs: { navigateToProfileMetric: "navigateToProfileMetric", navigateToProfileAnalysis: "navigateToProfileAnalysis", stepClick: "stepClick", nextStepClick: "nextStepClick", answerMetricProfileQuestions: "answerMetricProfileQuestions", continueMetricProfileQuestions: "continueMetricProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave", metricProfileAdminAnswerAction: "metricProfileAdminAnswerAction" }, decls: 67, vars: 32, consts: [[1, "relative"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "fixed", "top-0", "left-0", "right-0", "h-1", "z-[60]", "bg-slate-200/30"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "title", "subtitle", "viewMode", "showControls"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "container", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8", "md:py-12", "relative", "z-10"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [3, "viewMode", "profileStatusCounts", "analysisStatusCounts", "allReviewed", "hasItems", "config"], [1, "grid", "grid-cols-1", "lg:grid-cols-3", "gap-6", "mb-6"], [1, "lg:col-span-2", "space-y-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "lg:col-span-1"], ["currentStepId", "metric-analysis", 3, "viewMode", "currentMetric"], [1, "mt-6", "p-5", "rounded-xl", "border-l-4", "flex", "items-start", "gap-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "font-bold", "text-lg", "mb-2", 3, "ngClass"], [1, "space-y-2", "text-sm", 3, "ngClass"], [1, "flex", "items-start", "gap-2"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clip-rule", "evenodd"], [1, "mt-6", "p-5", "rounded-xl", "border", "flex", "items-start", "gap-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [3, "cardClick", "viewMode", "cards", "config"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "closeModal"]], template: function SymphiqProfileMetricsAnalysesDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵelement(3, "div", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 4);
+            i0.ɵɵelement(5, "symphiq-dashboard-header", 5);
+            i0.ɵɵconditionalCreate(6, SymphiqProfileMetricsAnalysesDashboardComponent_Conditional_6_Template, 1, 5, "symphiq-journey-progress-indicator", 6);
+            i0.ɵɵelementStart(7, "div", 7)(8, "div", 8)(9, "div", 9)(10, "div", 10)(11, "div", 11);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(12, "svg", 12);
+            i0.ɵɵelement(13, "path", 13);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(14, "div", 14)(15, "h2", 15);
+            i0.ɵɵtext(16, " Welcome to Your Metric Analysis ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(17, SymphiqProfileMetricsAnalysesDashboardComponent_Conditional_17_Template, 1, 6, "symphiq-profile-analysis-status-summary", 16);
+            i0.ɵɵelementStart(18, "div", 17)(19, "div", 18)(20, "p", 19);
+            i0.ɵɵtext(21, " Metric Analysis provides the deepest level of context for your conversion funnel. Each funnel stage metric\u2014from Views and Product Views to Add to Carts, Checkouts, and Purchases\u2014has unique patterns, behaviors, and optimization opportunities. By answering targeted questions about each metric, you help Symphiq understand the specific factors influencing performance at every conversion point. ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(22, "p", 19)(23, "strong", 20);
+            i0.ɵɵtext(24, "Why this matters:");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(25, " This granular context ensures recommendations address the precise bottlenecks in your customer journey. Rather than generic funnel advice, you'll receive metric-specific strategies grounded in your actual traffic patterns, customer behavior, content types, and marketing tactics. This completes the full picture\u2014from business strategy to operational execution to performance reality. ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(26, "div", 21);
+            i0.ɵɵelement(27, "symphiq-confidence-level-card", 22);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(28, "div", 23);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(29, "svg", 24);
+            i0.ɵɵelement(30, "path", 25);
+            i0.ɵɵelementEnd();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(31, "div", 14)(32, "h3", 26);
+            i0.ɵɵtext(33, " What You'll See Below ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(34, "ul", 27)(35, "li", 28);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(36, "svg", 29);
+            i0.ɵɵelement(37, "path", 30);
+            i0.ɵɵelementEnd();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(38, "span")(39, "strong", 20);
+            i0.ɵɵtext(40, "Funnel Stage Metrics");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(41, " \u2014 Each conversion point from Views through Revenue is represented with its own profile");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(42, "li", 28);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(43, "svg", 29);
+            i0.ɵɵelement(44, "path", 30);
+            i0.ɵɵelementEnd();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(45, "span")(46, "strong", 20);
+            i0.ɵɵtext(47, "Context Questions");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(48, " \u2014 Answer targeted questions about traffic sources, customer behavior, content types, and marketing activities for each metric");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(49, "li", 28);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(50, "svg", 29);
+            i0.ɵɵelement(51, "path", 30);
+            i0.ɵɵelementEnd();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(52, "span")(53, "strong", 20);
+            i0.ɵɵtext(54, "Performance Insights");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(55, " \u2014 Unlock analysis showing what's working, what's not, and specific improvement opportunities for each stage");
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(56, "div", 31);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(57, "svg", 24);
+            i0.ɵɵelement(58, "path", 32);
+            i0.ɵɵelementEnd();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(59, "div", 14)(60, "h3", 26);
+            i0.ɵɵtext(61, " Complete Your Profile ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(62, "p", 33);
+            i0.ɵɵtext(63, " You've reached the final onboarding step! Once all metrics are profiled, you'll have complete context coverage. Symphiq will then generate unified recommendations that connect business goals to specific funnel improvements\u2014showing exactly what to do next to drive growth. ");
+            i0.ɵɵelementEnd()()()()()()();
+            i0.ɵɵelementStart(64, "symphiq-profile-analysis-card-grid", 34);
+            i0.ɵɵlistener("cardClick", function SymphiqProfileMetricsAnalysesDashboardComponent_Template_symphiq_profile_analysis_card_grid_cardClick_64_listener($event) { return ctx.handleCardClick($event); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵconditionalCreate(65, SymphiqProfileMetricsAnalysesDashboardComponent_Conditional_65_Template, 1, 0, "symphiq-search-modal");
+            i0.ɵɵelement(66, "symphiq-tooltip-container");
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("min-h-screen", !ctx.embedded());
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("light-mode", ctx.isLightMode());
+            i0.ɵɵadvance(2);
+            i0.ɵɵstyleProp("width", ctx.scrollProgress(), "%");
+            i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "bg-gradient-to-r from-blue-500 to-cyan-500" : "bg-gradient-to-r from-blue-400 to-cyan-400");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("title", "Metric Analysis")("subtitle", "Provide context for funnel stage metrics and performance")("viewMode", ctx.viewMode())("showControls", false);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isSimplifiedView() ? 6 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerContainerClasses());
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerIconClasses());
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerTitleClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.profileMetrics() !== undefined || ctx.profileAnalyses() !== undefined ? 17 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerTextClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerTextClasses());
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("currentMetric", ctx.getCurrentMetricForConfidence());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerHighlightClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerHighlightIconClasses());
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerHighlightTitleClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerHighlightListClasses());
+            i0.ɵɵadvance(22);
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerNextStepsClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerNextStepsIconClasses());
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerNextStepsTitleClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.getWelcomeBannerNextStepsTextClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("cards", ctx.genericCardData())("config", ctx.metricCardConfig);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showSearchModal() ? 65 : -1);
+        } }, dependencies: [CommonModule, i1$1.NgClass, DashboardHeaderComponent, SearchModalComponent, JourneyProgressIndicatorComponent, ConfidenceLevelCardComponent, TooltipContainerComponent, ProfileAnalysisStatusSummaryComponent, ProfileAnalysisCardGridComponent], styles: [".animated-bubbles[_ngcontent-%COMP%]{background:linear-gradient(135deg,#3b82f60d,#06b6d40d)}.animated-bubbles.light-mode[_ngcontent-%COMP%]{background:linear-gradient(135deg,#3b82f608,#06b6d408)}.animated-bubbles[_ngcontent-%COMP%]:before, .animated-bubbles[_ngcontent-%COMP%]:after{content:\"\";position:absolute;border-radius:50%;animation:_ngcontent-%COMP%_float 20s infinite ease-in-out}.animated-bubbles[_ngcontent-%COMP%]:before{width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.1) 0%,transparent 70%);top:-250px;right:-250px;animation-delay:-5s}.animated-bubbles[_ngcontent-%COMP%]:after{width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,.1) 0%,transparent 70%);bottom:-200px;left:-200px;animation-delay:-10s}@keyframes _ngcontent-%COMP%_float{0%,to{transform:translateY(0) translate(0)}25%{transform:translateY(-50px) translate(50px)}50%{transform:translateY(-100px) translate(-50px)}75%{transform:translateY(-50px) translate(-100px)}}@keyframes _ngcontent-%COMP%_review-pulse{0%,to{box-shadow:0 0 #3b82f680}50%{box-shadow:0 0 0 8px #3b82f600}}.animate-review-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_review-pulse 2s ease-in-out infinite}@keyframes _ngcontent-%COMP%_status-pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.status-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_status-pop .3s ease-out;transition:all .3s ease-out}@keyframes _ngcontent-%COMP%_alert-pulse{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 6px #ef444400}}.animate-alert-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_alert-pulse 1.5s ease-in-out infinite}"], data: { animation: [
+                trigger('statusBadge', [
+                    transition(':enter', [
+                        style({ opacity: 0, transform: 'scale(0.8)' }),
+                        animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' }))
+                    ]),
+                    transition('* => *', [
+                        animate('200ms ease-out', style({ transform: 'scale(1.1)' })),
+                        animate('150ms ease-in', style({ transform: 'scale(1)' }))
+                    ])
+                ]),
+                trigger('allReviewedBadge', [
+                    transition(':enter', [
+                        style({ opacity: 0, transform: 'scale(0.5)' }),
+                        animate('400ms cubic-bezier(0.34, 1.56, 0.64, 1)', style({ opacity: 1, transform: 'scale(1)' }))
+                    ])
+                ])
+            ] }, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqProfileMetricsAnalysesDashboardComponent, [{
+        type: Component,
+        args: [{ selector: 'symphiq-profile-metrics-analyses-dashboard', standalone: true, imports: [CommonModule, DashboardHeaderComponent, SearchModalComponent, JourneyProgressIndicatorComponent, ConfidenceLevelCardComponent, TooltipContainerComponent, ProfileAnalysisStatusSummaryComponent, ProfileAnalysisCardGridComponent], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                    trigger('statusBadge', [
+                        transition(':enter', [
+                            style({ opacity: 0, transform: 'scale(0.8)' }),
+                            animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' }))
+                        ]),
+                        transition('* => *', [
+                            animate('200ms ease-out', style({ transform: 'scale(1.1)' })),
+                            animate('150ms ease-in', style({ transform: 'scale(1)' }))
+                        ])
+                    ]),
+                    trigger('allReviewedBadge', [
+                        transition(':enter', [
+                            style({ opacity: 0, transform: 'scale(0.5)' }),
+                            animate('400ms cubic-bezier(0.34, 1.56, 0.64, 1)', style({ opacity: 1, transform: 'scale(1)' }))
+                        ])
+                    ])
+                ], template: `
+    <div [class.min-h-screen]="!embedded()" class="relative">
+      <div class="animated-bubbles" [class.light-mode]="isLightMode()"
+           style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
+
+      <!-- Scroll Progress Bar -->
+      <div class="fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30">
+        <div
+            [style.width.%]="scrollProgress()"
+            [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-cyan-500' : 'bg-gradient-to-r from-blue-400 to-cyan-400'"
+            class="h-full transition-all duration-200 ease-out">
+        </div>
+      </div>
+
+      <div class="relative z-[51]">
+        <!-- Dashboard Header -->
+        <symphiq-dashboard-header
+            [title]="'Metric Analysis'"
+            [subtitle]="'Provide context for funnel stage metrics and performance'"
+            [viewMode]="viewMode()"
+            [showControls]="false"
+        ></symphiq-dashboard-header>
+
+        <!-- Journey Progress Indicator (Simplified View Only) -->
+        @if (isSimplifiedView()) {
+          <symphiq-journey-progress-indicator
+              [viewMode]="viewMode()"
+              [currentStepId]="currentStepId()"
+              [showNextStepAction]="forDemo() || allMetricsAnalysisReviewed()"
+              [forDemo]="forDemo()"
+              [maxAccessibleStepId]="maxAccessibleStepId()"
+              (nextStepClick)="nextStepClick.emit()"
+              (stepClick)="stepClick.emit($event)"
+          />
+        }
+
+        <!-- Main Content -->
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12 relative z-10">
+          <!-- Welcome Banner -->
+          <div [ngClass]="getWelcomeBannerContainerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
+            <div class="px-8 py-8">
+              <div class="flex items-start gap-6">
+                <div [ngClass]="getWelcomeBannerIconClasses()"
+                     class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
+                  <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                  </svg>
+                </div>
+
+                <div class="flex-1">
+                  <h2 [ngClass]="getWelcomeBannerTitleClasses()" class="text-2xl sm:text-3xl font-bold mb-3">
+                    Welcome to Your Metric Analysis
+                  </h2>
+
+                  <!-- Metric & Analysis Status Summary -->
+                  @if (profileMetrics() !== undefined || profileAnalyses() !== undefined) {
+                    <symphiq-profile-analysis-status-summary
+                        [viewMode]="viewMode()"
+                        [profileStatusCounts]="metricStatusCounts()"
+                        [analysisStatusCounts]="analysisStatusCounts()"
+                        [allReviewed]="allMetricsAnalysisReviewed()"
+                        [hasItems]="metricCards().length > 0"
+                        [config]="metricStatusConfig"
+                    />
+                  }
+
+                  <!-- Description and Confidence Card in Responsive Layout -->
+                  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+                    <!-- Description (takes 2 columns on large screens) -->
+                    <div class="lg:col-span-2 space-y-3">
+                      <p [ngClass]="getWelcomeBannerTextClasses()" class="text-base leading-relaxed">
+                        Metric Analysis provides the deepest level of context for your conversion funnel. Each funnel stage metric—from Views and Product Views to Add to Carts, Checkouts, and Purchases—has unique patterns, behaviors, and optimization opportunities. By answering targeted questions about each metric, you help Symphiq understand the specific factors influencing performance at every conversion point.
+                      </p>
+                      <p [ngClass]="getWelcomeBannerTextClasses()" class="text-base leading-relaxed">
+                        <strong class="font-semibold">Why this matters:</strong> This granular context ensures recommendations address the precise bottlenecks in your customer journey. Rather than generic funnel advice, you'll receive metric-specific strategies grounded in your actual traffic patterns, customer behavior, content types, and marketing tactics. This completes the full picture—from business strategy to operational execution to performance reality.
+                      </p>
+                    </div>
+
+                    <!-- Confidence Card (takes 1 column on large screens, full width on mobile) -->
+                    <div class="lg:col-span-1">
+                      <symphiq-confidence-level-card
+                          [viewMode]="viewMode()"
+                          currentStepId="metric-analysis"
+                          [currentMetric]="getCurrentMetricForConfidence()"
+                      />
+                    </div>
+                  </div>
+
+                  <div [ngClass]="getWelcomeBannerHighlightClasses()"
+                       class="mt-6 p-5 rounded-xl border-l-4 flex items-start gap-4">
+                    <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="getWelcomeBannerHighlightIconClasses()"
+                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    <div class="flex-1">
+                      <h3 [ngClass]="getWelcomeBannerHighlightTitleClasses()" class="font-bold text-lg mb-2">
+                        What You'll See Below
+                      </h3>
+                      <ul [ngClass]="getWelcomeBannerHighlightListClasses()" class="space-y-2 text-sm">
+                        <li class="flex items-start gap-2">
+                          <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd"
+                                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                  clip-rule="evenodd"></path>
+                          </svg>
+                          <span><strong class="font-semibold">Funnel Stage Metrics</strong> — Each conversion point from Views through Revenue is represented with its own profile</span>
+                        </li>
+                        <li class="flex items-start gap-2">
+                          <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd"
+                                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                  clip-rule="evenodd"></path>
+                          </svg>
+                          <span><strong class="font-semibold">Context Questions</strong> — Answer targeted questions about traffic sources, customer behavior, content types, and marketing activities for each metric</span>
+                        </li>
+                        <li class="flex items-start gap-2">
+                          <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd"
+                                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                  clip-rule="evenodd"></path>
+                          </svg>
+                          <span><strong class="font-semibold">Performance Insights</strong> — Unlock analysis showing what's working, what's not, and specific improvement opportunities for each stage</span>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+
+                  <div [ngClass]="getWelcomeBannerNextStepsClasses()"
+                       class="mt-6 p-5 rounded-xl border flex items-start gap-4">
+                    <svg class="w-6 h-6 flex-shrink-0 mt-0.5" [ngClass]="getWelcomeBannerNextStepsIconClasses()"
+                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                    </svg>
+                    <div class="flex-1">
+                      <h3 [ngClass]="getWelcomeBannerNextStepsTitleClasses()" class="font-bold text-lg mb-2">
+                        Complete Your Profile
+                      </h3>
+                      <p [ngClass]="getWelcomeBannerNextStepsTextClasses()" class="text-sm leading-relaxed">
+                        You've reached the final onboarding step! Once all metrics are profiled, you'll have complete context coverage. Symphiq will then generate unified recommendations that connect business goals to specific funnel improvements—showing exactly what to do next to drive growth.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Metrics Grid -->
+          <symphiq-profile-analysis-card-grid
+              [viewMode]="viewMode()"
+              [cards]="genericCardData()"
+              [config]="metricCardConfig"
+              (cardClick)="handleCardClick($event)"
+          />
+        </div>
+      </div>
+
+      <!-- Search Modal -->
+      @if (showSearchModal()) {
+        <symphiq-search-modal
+            (closeModal)="handleCloseSearchModal()"
+        ></symphiq-search-modal>
+      }
+
+      <symphiq-tooltip-container/>
+    </div>
+  `, styles: [".animated-bubbles{background:linear-gradient(135deg,#3b82f60d,#06b6d40d)}.animated-bubbles.light-mode{background:linear-gradient(135deg,#3b82f608,#06b6d408)}.animated-bubbles:before,.animated-bubbles:after{content:\"\";position:absolute;border-radius:50%;animation:float 20s infinite ease-in-out}.animated-bubbles:before{width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.1) 0%,transparent 70%);top:-250px;right:-250px;animation-delay:-5s}.animated-bubbles:after{width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,.1) 0%,transparent 70%);bottom:-200px;left:-200px;animation-delay:-10s}@keyframes float{0%,to{transform:translateY(0) translate(0)}25%{transform:translateY(-50px) translate(50px)}50%{transform:translateY(-100px) translate(-50px)}75%{transform:translateY(-50px) translate(-100px)}}@keyframes review-pulse{0%,to{box-shadow:0 0 #3b82f680}50%{box-shadow:0 0 0 8px #3b82f600}}.animate-review-pulse{animation:review-pulse 2s ease-in-out infinite}@keyframes status-pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.status-badge{animation:status-pop .3s ease-out;transition:all .3s ease-out}@keyframes alert-pulse{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 6px #ef444400}}.animate-alert-pulse{animation:alert-pulse 1.5s ease-in-out infinite}\n"] }]
+    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profileAnalyses: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalyses", required: false }] }], profileMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileMetrics", required: false }] }], itemStatusesProfileMetric: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusesProfileMetric", required: false }] }], itemStatusesProfileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusesProfileAnalysis", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], profileMetricQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileMetricQuestions", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], currentUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUser", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], navigateToProfileMetric: [{ type: i0.Output, args: ["navigateToProfileMetric"] }], navigateToProfileAnalysis: [{ type: i0.Output, args: ["navigateToProfileAnalysis"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], answerMetricProfileQuestions: [{ type: i0.Output, args: ["answerMetricProfileQuestions"] }], continueMetricProfileQuestions: [{ type: i0.Output, args: ["continueMetricProfileQuestions"] }], profileQuestionAnswerSave: [{ type: i0.Output, args: ["profileQuestionAnswerSave"] }], metricProfileAdminAnswerAction: [{ type: i0.Output, args: ["metricProfileAdminAnswerAction"] }], onScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisFocusAreaDashboardComponent, { className: "SymphiqProfileAnalysisFocusAreaDashboardComponent", filePath: "lib/components/profile-analysis-focus-area-dashboard/symphiq-profile-analysis-focus-area-dashboard.component.ts", lineNumber: 481 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileMetricsAnalysesDashboardComponent, { className: "SymphiqProfileMetricsAnalysesDashboardComponent", filePath: "lib/components/profile-analyses-metrics-dashboard/symphiq-profile-metrics-analyses-dashboard.component.ts", lineNumber: 366 }); })();
 
 const _forTrack0$4 = ($index, $item) => $item.id;
 function ShopProfileCategoryListComponent_For_2_Template(rf, ctx) { if (rf & 1) {
@@ -103675,5 +104513,5 @@ var pieChart_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, DashboardHeaderComponent, DataLoaderService, DisplayModeEnum, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaQuestionComponent, FocusAreaStatusCardComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricReportModalComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PacingStatusBadgeComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorService, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopProfileCategoryListComponent, ShopProfileQuestionAnswerComponent, ShopProfileQuestionCardComponent, ShopProfileQuestionsModalComponent, ShopProfileStatusCardComponent, ShopProfileStickyFooterComponent, ShopProfileViewToggleComponent, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, StickySubscriptionContinueButtonComponent, SubscriptionValuePropositionCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisFocusAreaDashboardComponent, SymphiqProfileFocusAreaDashboardComponent, SymphiqProfileFocusAreasAnalysesDashboardComponent, SymphiqProfileShopAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TargetChangeBadgeComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, UserAvatarComponent, UserDisplayComponent, ViewModeService, ViewModeSwitcherModalComponent, ViewportAnimationDirective, VisualizationContainerComponent, calculateFunnelRatios, calculateMetricTargetsFromRevenue, calculateMetricTargetsFromRevenueReverse, calculateRelatedMetricRatios, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, validateRevenueTarget };
+export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, DashboardHeaderComponent, DataLoaderService, DisplayModeEnum, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaStatusCardComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricReportModalComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PacingStatusBadgeComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorService, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopProfileCategoryListComponent, ShopProfileQuestionAnswerComponent, ShopProfileQuestionCardComponent, ShopProfileQuestionsModalComponent, ShopProfileStatusCardComponent, ShopProfileStickyFooterComponent, ShopProfileViewToggleComponent, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, StickySubscriptionContinueButtonComponent, SubscriptionValuePropositionCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisFocusAreaDashboardComponent, SymphiqProfileFocusAreaDashboardComponent, SymphiqProfileFocusAreasAnalysesDashboardComponent, SymphiqProfileMetricsAnalysesDashboardComponent, SymphiqProfileShopAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TargetChangeBadgeComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, UserAvatarComponent, UserDisplayComponent, ViewModeService, ViewModeSwitcherModalComponent, ViewportAnimationDirective, VisualizationContainerComponent, calculateFunnelRatios, calculateMetricTargetsFromRevenue, calculateMetricTargetsFromRevenueReverse, calculateRelatedMetricRatios, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, validateRevenueTarget };
 //# sourceMappingURL=symphiq-components.mjs.map