feat(record-mode): unify mouse tool and enhance visuals

- Removed manual 'images' metadata overrides.
- This allows Next.js to use built-in automatic discovery.
- Ensures metadata uses the dynamic metadataBase from the environment.
- Refined Traefik public router regex for sub-routes.
- Restored and verified imports in modified page.tsx files.

.env

@@ -22,8 +22,8 @@ DIRECTUS_ADMIN_EMAIL=marc@mintel.me
 DIRECTUS_ADMIN_PASSWORD=Tim300493.
 DIRECTUS_API_TOKEN=59fb8f4c1a51b18fe28ad947f713914e
 DIRECTUS_DB_NAME=directus
-DIRECTUS_DB_USER=directus
-DIRECTUS_DB_PASSWORD=directus
+DIRECTUS_DB_USER=klz_db_user
+DIRECTUS_DB_PASSWORD=klz_db_pass
 # Local Development
 PROJECT_NAME=klz-cables
 GATEKEEPER_BYPASS_ENABLED=true
@@ -33,3 +33,4 @@ GATEKEEPER_PASSWORD=klz2026
 COOKIE_DOMAIN=localhost
 INFRA_DIRECTUS_URL=http://localhost:8059
 INFRA_DIRECTUS_TOKEN=59fb8f4c1a51b18fe28ad947f713914e
+GATEKEEPER_ORIGIN=http://klz.localhost

.gitea/workflows/ci.yml

@@ -32,9 +32,5 @@ jobs:
         env:
           NPM_TOKEN: ${{ secrets.REGISTRY_PASS }}
 
-      - name: 🧪 Parallel Checks
-        run: |
-          pnpm lint &
-          pnpm typecheck &
-          pnpm test &
-          wait
+      - name: 🧪 QA Checks
+        run: pnpm lint && pnpm typecheck && pnpm test

.gitea/workflows/deploy.yml

@@ -37,6 +37,13 @@ jobs:
     container:
       image: catthehacker/ubuntu:act-latest
     steps:
+      - name: 🧹 Maintenance (High Density Cleanup)
+        shell: bash
+        run: |
+          echo "Purging old build layers and dangling images..."
+          docker image prune -f
+          docker builder prune -f --filter "until=6h"
+
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
@@ -78,10 +85,10 @@ jobs:
 
           # Standardize Traefik Rule
           if [[ "$TRAEFIK_HOST" == *","* ]]; then
-            TRAEFIK_RULE=$(echo "$TRAEFIK_HOST" | sed 's/,/ /g' | awk '{for(i=1;i<=NF;i++) printf "Host(`%s`)%s", $i, (i==NF?"":" || ")}')
+            TRAEFIK_RULE=$(echo "$TRAEFIK_HOST" | sed 's/,/ /g' | awk '{for(i=1;i<=NF;i++) printf "Host(\"%s\")%s", $i, (i==NF?"":" || ")}')
             PRIMARY_HOST=$(echo "$TRAEFIK_HOST" | cut -d',' -f1 | sed 's/ //g')
           else
-            TRAEFIK_RULE="Host(\`$TRAEFIK_HOST\`)"
+            TRAEFIK_RULE="Host(\"$TRAEFIK_HOST\")"
             PRIMARY_HOST="$TRAEFIK_HOST"
           fi
 
@@ -97,6 +104,39 @@ jobs:
             echo "short_sha=$SHORT_SHA"
           } >> "$GITHUB_OUTPUT"
 
+          # ⏳ Wait for Upstream Packages/Images if Tagged
+          if [[ "${{ github.ref_type }}" == "tag" ]]; then
+            echo "🔎 Checking for @mintel dependencies in package.json..."
+            # Extract any @mintel/ version (they should be synced in monorepo)
+            UPSTREAM_VERSION=$(grep -o '"@mintel/.*": "[^"]*"' package.json | grep -v "next-utils" | cut -d'"' -f4 | sed 's/\^//; s/\~//' | sort -V | tail -1)
+            TAG_TO_WAIT="v$UPSTREAM_VERSION"
+            
+            if [[ -n "$UPSTREAM_VERSION" && "$UPSTREAM_VERSION" != "workspace:"* ]]; then
+              # 1. Discovery (Works without token for public repositories)
+              UPSTREAM_SHA=$(git ls-remote --tags https://git.infra.mintel.me/mmintel/at-mintel.git "$TAG_TO_WAIT" | grep "$TAG_TO_WAIT" | tail -n1 | awk '{print $1}')
+              
+              if [[ -z "$UPSTREAM_SHA" ]]; then
+                echo "❌ Error: Tag $TAG_TO_WAIT not found in mmintel/at-mintel."
+                exit 1
+              fi
+              echo "✅ Tag verified: Found upstream SHA $UPSTREAM_SHA for $TAG_TO_WAIT"
+
+              # 2. Status Check (Requires GITEA_PAT for cross-repo API access)
+              POLL_TOKEN="${{ secrets.GITEA_PAT || secrets.MINTEL_PRIVATE_TOKEN }}"
+              
+              if [[ -n "$POLL_TOKEN" ]]; then
+                echo "⏳ GITEA_PAT found. Checking upstream build status..."
+                curl -s -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+                  "https://git.infra.mintel.me/mmintel/at-mintel/raw/branch/main/packages/infra/scripts/wait-for-upstream.sh" > wait-for-upstream.sh
+                chmod +x wait-for-upstream.sh
+                GITEA_TOKEN="$POLL_TOKEN" ./wait-for-upstream.sh "mmintel/at-mintel" "$TAG_TO_WAIT"
+              else
+                echo "ℹ️ No GITEA_PAT secret found. Skipping build status wait (Actions API is restricted)."
+                echo "   If this build fails, ensure that mmintel/at-mintel $TAG_TO_WAIT has finished its Docker build."
+              fi
+            fi
+          fi
+
   # ──────────────────────────────────────────────────────────────────────────────
   # JOB 2: QA (Lint, Typecheck, Test)
   # ──────────────────────────────────────────────────────────────────────────────
@@ -136,7 +176,7 @@ jobs:
   # ──────────────────────────────────────────────────────────────────────────────
   build:
     name: 🏗️ Build
-    needs: prepare
+    needs: [prepare, qa]
     if: needs.prepare.outputs.target != 'skip'
     runs-on: docker
     container:
@@ -158,6 +198,8 @@ jobs:
             NEXT_PUBLIC_BASE_URL=${{ needs.prepare.outputs.next_public_url }}
             NEXT_PUBLIC_TARGET=${{ needs.prepare.outputs.target }}
             DIRECTUS_URL=${{ needs.prepare.outputs.directus_url }}
+            UMAMI_WEBSITE_ID=${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
+            UMAMI_API_ENDPOINT=${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
             NPM_TOKEN=${{ secrets.REGISTRY_PASS }}
           tags: registry.infra.mintel.me/mintel/klz-cables.com:${{ needs.prepare.outputs.image_tag }}
           cache-from: type=registry,ref=registry.infra.mintel.me/mintel/klz-cables.com:buildcache
@@ -181,6 +223,7 @@ jobs:
       NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
       DIRECTUS_URL:         ${{ needs.prepare.outputs.directus_url }}
       DIRECTUS_HOST:        cms.${{ needs.prepare.outputs.traefik_host }}
+      TRAEFIK_HOST:         ${{ needs.prepare.outputs.traefik_host }}
       
       # Secrets mapping (Directus)
       DIRECTUS_KEY:            ${{ (needs.prepare.outputs.target == 'testing' && secrets.TESTING_DIRECTUS_KEY) || (needs.prepare.outputs.target == 'staging' && secrets.STAGING_DIRECTUS_KEY) || secrets.DIRECTUS_KEY || vars.DIRECTUS_KEY }}
@@ -205,6 +248,10 @@ jobs:
       
       # Gatekeeper
       GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
+
+      # Analytics
+      UMAMI_WEBSITE_ID:    ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
+      UMAMI_API_ENDPOINT:  ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -212,50 +259,81 @@ jobs:
         shell: bash
         env:
           TRAEFIK_RULE:     ${{ needs.prepare.outputs.traefik_rule }}
+          ENV_FILE:         ${{ needs.prepare.outputs.env_file }}
         run: |
-          # Generate Environment File
+          # Middleware Selection Logic
+          # Regular app routes get auth on non-production
+          # Unprotected routes (/stats, /errors) never get auth
           LOG_LEVEL=$( [[ "$TARGET" == "testing" || "$TARGET" == "development" ]] && echo "debug" || echo "info" )
           COOKIE_DOMAIN=.$(echo $NEXT_PUBLIC_BASE_URL | sed 's|https://||')
-
-          cat > .env.deploy << EOF
-          # Generated by CI - $TARGET
-          IMAGE_TAG=$IMAGE_TAG
-          NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
-          SENTRY_DSN=$SENTRY_DSN
-          LOG_LEVEL=$LOG_LEVEL
-          MAIL_HOST=$MAIL_HOST
-          MAIL_PORT=$MAIL_PORT
-          MAIL_USERNAME=$MAIL_USERNAME
-          MAIL_PASSWORD=$MAIL_PASSWORD
-          MAIL_FROM=$MAIL_FROM
-          MAIL_RECIPIENTS=$MAIL_RECIPIENTS
-
-          # Directus
-          DIRECTUS_URL=$DIRECTUS_URL
-          DIRECTUS_HOST=$DIRECTUS_HOST
-          DIRECTUS_KEY=$DIRECTUS_KEY
-          DIRECTUS_SECRET=$DIRECTUS_SECRET
-          DIRECTUS_ADMIN_EMAIL=$DIRECTUS_ADMIN_EMAIL
-          DIRECTUS_ADMIN_PASSWORD=$DIRECTUS_ADMIN_PASSWORD
-          DIRECTUS_DB_NAME=$DIRECTUS_DB_NAME
-          DIRECTUS_DB_USER=$DIRECTUS_DB_USER
-          DIRECTUS_DB_PASSWORD=$DIRECTUS_DB_PASSWORD
-          DIRECTUS_API_TOKEN=$DIRECTUS_API_TOKEN
-          INTERNAL_DIRECTUS_URL=http://directus:8055
+          STD_MW="${PROJECT_NAME}-ratelimit,${PROJECT_NAME}-forward,${PROJECT_NAME}-compress"
           
-          # Gatekeeper
-          GATEKEEPER_PASSWORD=$GATEKEEPER_PASSWORD
-          AUTH_COOKIE_NAME=klz_gatekeeper_session
-          COOKIE_DOMAIN=$COOKIE_DOMAIN
+          if [[ "$TARGET" == "production" ]]; then
+            AUTH_MIDDLEWARE="$STD_MW"
+            COMPOSE_PROFILES=""
+          else
+            # Order: Ratelimit -> Forward (Proto) -> Auth -> Compression
+            AUTH_MIDDLEWARE="${PROJECT_NAME}-ratelimit,${PROJECT_NAME}-forward,${PROJECT_NAME}-auth,${PROJECT_NAME}-compress"
+            COMPOSE_PROFILES="gatekeeper"
+          fi
+          AUTH_MIDDLEWARE_UNPROTECTED="$STD_MW"
 
-          TARGET=$TARGET
-          SENTRY_ENVIRONMENT=$TARGET
-          PROJECT_NAME=$PROJECT_NAME
-          TRAEFIK_HOST_RULE='$TRAEFIK_RULE'
-          EOF
+          # Gatekeeper Origin
+          GATEKEEPER_ORIGIN="$NEXT_PUBLIC_BASE_URL/gatekeeper"
 
-          # AUTH_MIDDLEWARE logic
-          printf "AUTH_MIDDLEWARE=%s\n" "$( [[ "$TARGET" == "production" ]] && echo "${PROJECT_NAME}-compress" || echo "${PROJECT_NAME}-auth,${PROJECT_NAME}-compress" )" >> .env.deploy
+          {
+            echo "# Generated by CI - $TARGET"
+            echo "IMAGE_TAG=$IMAGE_TAG"
+            echo "NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL"
+            echo "GATEKEEPER_ORIGIN=$GATEKEEPER_ORIGIN"
+            echo "SENTRY_DSN=$SENTRY_DSN"
+            echo "LOG_LEVEL=$LOG_LEVEL"
+            echo "MAIL_HOST=$MAIL_HOST"
+            echo "MAIL_PORT=$MAIL_PORT"
+            echo "MAIL_USERNAME=$MAIL_USERNAME"
+            echo "MAIL_PASSWORD=$MAIL_PASSWORD"
+            echo "MAIL_FROM=$MAIL_FROM"
+            echo "MAIL_RECIPIENTS=$MAIL_RECIPIENTS"
+            echo ""
+            echo "# Directus"
+            echo "DIRECTUS_URL=$DIRECTUS_URL"
+            echo "DIRECTUS_HOST=$DIRECTUS_HOST"
+            echo "DIRECTUS_KEY=$DIRECTUS_KEY"
+            echo "DIRECTUS_SECRET=$DIRECTUS_SECRET"
+            echo "DIRECTUS_ADMIN_EMAIL=$DIRECTUS_ADMIN_EMAIL"
+            echo "DIRECTUS_ADMIN_PASSWORD=$DIRECTUS_ADMIN_PASSWORD"
+            echo "DIRECTUS_DB_NAME=$DIRECTUS_DB_NAME"
+            echo "DIRECTUS_DB_USER=$DIRECTUS_DB_USER"
+            echo "DIRECTUS_DB_PASSWORD=$DIRECTUS_DB_PASSWORD"
+            echo "DIRECTUS_DB_CLIENT=pg"
+            echo "DIRECTUS_DB_HOST=directus-db"
+            echo "DIRECTUS_DB_PORT=5432"
+            echo "DIRECTUS_API_TOKEN=$DIRECTUS_API_TOKEN"
+            echo "INTERNAL_DIRECTUS_URL=http://directus:8055"
+            echo ""
+            echo "# Gatekeeper"
+            echo "GATEKEEPER_PASSWORD=$GATEKEEPER_PASSWORD"
+            echo "AUTH_COOKIE_NAME=klz_gatekeeper_session"
+            echo "COOKIE_DOMAIN=$COOKIE_DOMAIN"
+            echo ""
+            echo "# Analytics"
+            echo "UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID"
+            echo "UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT"
+            echo ""
+            echo "TARGET=$TARGET"
+            echo "SENTRY_ENVIRONMENT=$TARGET"
+            echo "PROJECT_NAME=$PROJECT_NAME"
+            printf 'TRAEFIK_HOST_RULE=%s\n' "$TRAEFIK_RULE"
+            echo "TRAEFIK_HOST=$TRAEFIK_HOST"
+            echo "ENV_FILE=$ENV_FILE"
+            echo "COMPOSE_PROFILES=$COMPOSE_PROFILES"
+            echo "AUTH_MIDDLEWARE=$AUTH_MIDDLEWARE"
+            echo "AUTH_MIDDLEWARE_UNPROTECTED=$AUTH_MIDDLEWARE_UNPROTECTED"
+          } > .env.deploy
+
+          echo "--- Generated .env.deploy ---"
+          cat .env.deploy
+          echo "----------------------------"
 
       - name: 🚀 SSH Deploy
         shell: bash
@@ -284,12 +362,48 @@ jobs:
           
           ssh root@alpha.mintel.me "docker system prune -f --filter 'until=24h'"
 
+      - name: 🧹 Post-Deploy Cleanup (Runner)
+        if: always()
+        run: docker builder prune -f --filter "until=1h"
+
   # ──────────────────────────────────────────────────────────────────────────────
-  # JOB 5: Notifications
+  # JOB 5: Smoke Test (OG Images)
+  # ──────────────────────────────────────────────────────────────────────────────
+  smoke_test:
+    name: 🧪 Smoke Test
+    needs: [prepare, deploy]
+    if: needs.deploy.result == 'success'
+    runs-on: docker
+    container:
+      image: catthehacker/ubuntu:act-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 10
+      - name: 🔐 Registry Auth
+        run: |
+          echo "@mintel:registry=https://${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}" > .npmrc
+          echo "//${{ vars.REGISTRY_HOST || 'npm.infra.mintel.me' }}/:_authToken=${{ secrets.REGISTRY_PASS }}" >> .npmrc
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: 🚀 Run OG Image Check
+        env:
+          TEST_URL: ${{ needs.prepare.outputs.next_public_url }}
+        run: pnpm run check:og
+
+  # ──────────────────────────────────────────────────────────────────────────────
+  # JOB 6: Notifications
   # ──────────────────────────────────────────────────────────────────────────────
   notifications:
     name: 🔔 Notify
-    needs: [prepare, deploy]
+    needs: [prepare, deploy, smoke_test]
     if: always()
     runs-on: docker
     container:

.lintstagedrc.cjs

@@ -1,4 +1,5 @@
-const path = require('path');
+/* eslint-disable no-undef */
+const path = require('path'); // eslint-disable-line @typescript-eslint/no-require-imports
 
 const buildEslintCommand = (filenames) =>
   `eslint --fix ${filenames.map((f) => path.relative(process.cwd(), f)).join(' ')}`;

.prettierignore

@@ -0,0 +1,11 @@
+# Ignore Next.js auto-generated environment file
+# It often uses different quote styles than our project config
+next-env.d.ts
+
+# Ignore build output
+.next
+dist
+out
+
+# Ignore other potentially generated files
+pnpm-lock.yaml

Dockerfile

@@ -1,45 +1,56 @@
 # Stage 1: Builder
-FROM registry.infra.mintel.me/mintel/nextjs:latest AS builder
+FROM registry.infra.mintel.me/mintel/nextjs:v1.7.10 AS builder
 WORKDIR /app
 
-# Clean the workspace in case the base image is dirty
-RUN rm -rf ./*
-
 # Arguments for build-time configuration
 ARG NEXT_PUBLIC_BASE_URL
 ARG NEXT_PUBLIC_TARGET
 ARG DIRECTUS_URL
+ARG UMAMI_WEBSITE_ID
+ARG UMAMI_API_ENDPOINT
 ARG NPM_TOKEN
 
 # Environment variables for Next.js build
 ENV NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
 ENV NEXT_PUBLIC_TARGET=$NEXT_PUBLIC_TARGET
 ENV DIRECTUS_URL=$DIRECTUS_URL
+ENV UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID
+ENV UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT
 ENV SKIP_RUNTIME_ENV_VALIDATION=true
 ENV CI=true
 
-# Enable pnpm
-RUN corepack enable
-
 # Copy lockfile and manifest for dependency installation caching
 COPY pnpm-lock.yaml package.json .npmrc* ./
 
-# Install dependencies with cache mount
+# Configure private registry and install dependencies
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
     --mount=type=secret,id=NPM_TOKEN \
     export NPM_TOKEN=$(cat /run/secrets/NPM_TOKEN 2>/dev/null || echo $NPM_TOKEN) && \
-    pnpm install --frozen-lockfile
+    echo "@mintel:registry=https://npm.infra.mintel.me" > .npmrc && \
+    echo "//npm.infra.mintel.me/:_authToken=\${NPM_TOKEN}" >> .npmrc && \
+    pnpm install --frozen-lockfile && \
+    rm .npmrc
 
 # Copy source code
 COPY . .
 
-# Build application
-RUN pnpm build
+# Stage 2: Development (Hot-Reloading)
+FROM builder AS development
+ENV NODE_ENV=development
+CMD ["pnpm", "dev:local"]
 
-# Stage 2: Runner
-FROM registry.infra.mintel.me/mintel/runtime:latest AS runner
+# Build application
+# RUN pnpm build
+
+# Stage 3: Runner
+FROM registry.infra.mintel.me/mintel/runtime:v1.7.10 AS runner
 WORKDIR /app
 
+# Create nextjs user and group (standardized in runtime image but ensuring local ownership)
+USER root
+RUN chown -R nextjs:nodejs /app
+USER nextjs
+
 ENV HOSTNAME="0.0.0.0"
 ENV PORT=3000
 ENV NODE_ENV=production
@@ -50,6 +61,4 @@ COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
 
-USER nextjs
-
 CMD ["node", "server.js"]

app/[locale]/[slug]/opengraph-image.tsx

@@ -5,7 +5,12 @@ import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string } }) {
+export default async function Image({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug } = await params;
   const pageData = await getPageBySlug(slug, locale);
 
   if (!pageData) {
@@ -15,17 +20,14 @@ export default async function Image({ params: { locale, slug } }: { params: { lo
   const fonts = await getOgFonts();
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={pageData.frontmatter.title}
-        description={pageData.frontmatter.excerpt}
-        label="Information"
-      />
-    ),
+    <OGImageTemplate
+      title={pageData.frontmatter.title}
+      description={pageData.frontmatter.excerpt}
+      label="Information"
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }
-

app/[locale]/[slug]/page.tsx

@@ -5,7 +5,6 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { getPageBySlug, getAllPages } from '@/lib/pages';
 import { mdxComponents } from '@/components/blog/MDXComponents';
-import { getOGImageMetadata } from '@/lib/metadata';
 import { SITE_URL } from '@/lib/schema';
 
 interface PageProps {
@@ -50,7 +49,6 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
       title: `${pageData.frontmatter.title} | KLZ Cables`,
       description: pageData.frontmatter.excerpt || '',
       url: `${SITE_URL}/${locale}/${slug}`,
-      images: getOGImageMetadata(slug, pageData.frontmatter.title, locale),
     },
     twitter: {
       card: 'summary_large_image',

app/[locale]/api/og/product/route.tsx

@@ -5,13 +5,15 @@ import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { NextRequest } from 'next/server';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+import { SITE_URL } from '@/lib/schema';
+
 export const runtime = 'nodejs';
 
 export async function GET(
   request: NextRequest,
   { params }: { params: Promise<{ locale: string }> },
 ) {
-  const { searchParams, origin } = new URL(request.url);
+  const { searchParams } = new URL(request.url);
   const slug = searchParams.get('slug');
   const { locale } = await params;
 
@@ -58,7 +60,7 @@ export async function GET(
   const featuredImage = product.frontmatter.images?.[0]
     ? product.frontmatter.images[0].startsWith('http')
       ? product.frontmatter.images[0]
-      : `${origin}${product.frontmatter.images[0]}`
+      : `${SITE_URL}${product.frontmatter.images[0]}`
     : undefined;
 
   return new ImageResponse(

app/[locale]/blog/[slug]/opengraph-image.tsx

@@ -7,10 +7,11 @@ import { SITE_URL } from '@/lib/schema';
 export const runtime = 'nodejs';
 
 export default async function Image({
-  params: { locale, slug },
+  params,
 }: {
-  params: { locale: string; slug: string };
+  params: Promise<{ locale: string; slug: string }>;
 }) {
+  const { locale, slug } = await params;
   const post = await getPostBySlug(slug, locale);
 
   if (!post) {

app/[locale]/blog/[slug]/page.tsx

@@ -1,7 +1,6 @@
 import { notFound } from 'next/navigation';
-import Script from 'next/script';
 import JsonLd from '@/components/JsonLd';
-import { getBreadcrumbSchema, SITE_URL, LOGO_URL } from '@/lib/schema';
+import { SITE_URL } from '@/lib/schema';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import { getPostBySlug, getAdjacentPosts, getReadingTime, getHeadings } from '@/lib/blog';
 import { Metadata } from 'next';
@@ -11,7 +10,6 @@ import PowerCTA from '@/components/blog/PowerCTA';
 import TableOfContents from '@/components/blog/TableOfContents';
 import { mdxComponents } from '@/components/blog/MDXComponents';
 import { Heading } from '@/components/ui';
-import { getOGImageMetadata } from '@/lib/metadata';
 import { setRequestLocale } from 'next-intl/server';
 
 interface BlogPostProps {
@@ -46,7 +44,6 @@ export async function generateMetadata({ params }: BlogPostProps): Promise<Metad
       publishedTime: post.frontmatter.date,
       authors: ['KLZ Cables'],
       url: `${SITE_URL}/${locale}/blog/${slug}`,
-      images: getOGImageMetadata(`blog/${slug}`, post.frontmatter.title, locale),
     },
     twitter: {
       card: 'summary_large_image',

app/[locale]/blog/opengraph-image.tsx

@@ -5,21 +5,16 @@ import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Blog.meta' });
   const fonts = await getOgFonts();
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={t('title')}
-        description={t('description')}
-        label="Blog"
-      />
-    ),
+    <OGImageTemplate title={t('title')} description={t('description')} label="Blog" />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }

app/[locale]/blog/page.tsx

@@ -1,9 +1,10 @@
 import Link from 'next/link';
+import Image from 'next/image';
 import { getAllPosts } from '@/lib/blog';
 import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
 import Reveal from '@/components/Reveal';
+import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
-import { getOGImageMetadata } from '@/lib/metadata';
 import { SITE_URL } from '@/lib/schema';
 
 interface BlogIndexProps {
@@ -30,7 +31,6 @@ export async function generateMetadata({ params }: BlogIndexProps) {
       title: `${t('title')} | KLZ Cables`,
       description: t('description'),
       url: `${SITE_URL}/${locale}/blog`,
-      images: getOGImageMetadata('blog', t('title'), locale),
     },
     twitter: {
       card: 'summary_large_image',
@@ -60,10 +60,13 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
         <section className="relative h-[50vh] md:h-[70vh] min-h-[400px] md:min-h-[600px] flex items-center overflow-hidden bg-primary-dark">
           {featuredPost && featuredPost.frontmatter.featuredImage && (
             <>
-              <img
+              <Image
                 src={featuredPost.frontmatter.featuredImage}
                 alt={featuredPost.frontmatter.title}
+                fill
                 className="absolute inset-0 w-full h-full object-cover scale-105 animate-slow-zoom opacity-40 md:opacity-60"
+                sizes="100vw"
+                priority
               />
               <div className="absolute inset-0 image-overlay-gradient" />
             </>
@@ -145,10 +148,12 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
                   <Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-2xl md:rounded-3xl overflow-hidden">
                     {post.frontmatter.featuredImage && (
                       <div className="relative h-48 md:h-72 overflow-hidden">
-                        <img
+                        <Image
                           src={post.frontmatter.featuredImage}
                           alt={post.frontmatter.title}
+                          fill
                           className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
+                          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                         />
                         <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                         {post.frontmatter.category && (

app/[locale]/contact/opengraph-image.tsx

@@ -5,7 +5,8 @@ import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Contact' });
   const fonts = await getOgFonts();
 
@@ -13,16 +14,10 @@ export default async function Image({ params: { locale } }: { params: { locale:
   const description = t('meta.description') || t('subtitle');
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={title}
-        description={description}
-        label="Contact"
-      />
-    ),
+    <OGImageTemplate title={title} description={description} label="Contact" />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }

app/[locale]/contact/page.tsx

@@ -35,7 +35,6 @@ export async function generateMetadata({ params }: ContactPageProps): Promise<Me
       description,
       url: `${SITE_URL}/${locale}/contact`,
       siteName: 'KLZ Cables',
-      images: getOGImageMetadata('contact', title, locale),
       locale: `${locale.toUpperCase()}_DE`,
       type: 'website',
     },
@@ -43,7 +42,6 @@ export async function generateMetadata({ params }: ContactPageProps): Promise<Me
       card: 'summary_large_image',
       title: `${title} | KLZ Cables`,
       description,
-      images: [`${SITE_URL}/${locale}/contact/opengraph-image`],
     },
     robots: {
       index: true,

app/[locale]/layout.tsx

@@ -3,7 +3,9 @@ import Header from '@/components/Header';
 import JsonLd from '@/components/JsonLd';
 import AnalyticsProvider from '@/components/analytics/AnalyticsProvider';
 import CMSConnectivityNotice from '@/components/CMSConnectivityNotice';
-import { FeedbackOverlay } from '@mintel/next-feedback';
+import { RecordModeProvider } from '@/components/record-mode/RecordModeContext';
+import { RecordModeVisuals } from '@/components/record-mode/RecordModeVisuals';
+import { ToolCoordinator } from '@/components/record-mode/ToolCoordinator';
 import { Metadata, Viewport } from 'next';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
@@ -12,6 +14,13 @@ import '../../styles/globals.css';
 import { SITE_URL } from '@/lib/schema';
 import { config } from '@/lib/config';
 import { setRequestLocale } from 'next-intl/server';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+});
 
 export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),
@@ -78,7 +87,7 @@ export default async function LocaleLayout({
 
     // Track initial server-side pageview
     serverServices.analytics.trackPageview();
-  } catch (e) {
+  } catch {
     // Falls back to noop or client-side only during static generation
     if (process.env.NODE_ENV !== 'production' || !process.env.CI) {
       console.warn(
@@ -88,19 +97,51 @@ export default async function LocaleLayout({
   }
 
   return (
-    <html lang={safeLocale} className="scroll-smooth overflow-x-hidden">
+    <html lang={safeLocale} className={`scroll-smooth overflow-x-hidden ${inter.variable}`}>
+      <head>
+        <style dangerouslySetInnerHTML={{
+          __html: `
+          /* Effectively Invisible Scrollbar */
+          ::-webkit-scrollbar {
+            width: 2px;
+            height: 2px;
+          }
+          ::-webkit-scrollbar-track {
+            background: transparent;
+          }
+          ::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 10px;
+          }
+          ::-webkit-scrollbar-thumb:hover {
+            background: rgba(130, 237, 32, 0.4);
+          }
+          * {
+            scrollbar-width: none;
+          }
+          *:hover {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(130, 237, 32, 0.2) transparent;
+          }
+        `}} />
+      </head>
       <body className="flex flex-col min-h-screen font-sans selection:bg-accent selection:text-primary-dark antialiased overflow-x-hidden">
         <NextIntlClientProvider messages={messages} locale={safeLocale}>
-          <JsonLd />
-          <Header />
-          <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
-          <Footer />
-          <CMSConnectivityNotice />
+          <RecordModeProvider>
+            <RecordModeVisuals>
+              <JsonLd />
+              <Header />
+              <main className="flex-grow animate-fade-in overflow-visible">{children}</main>
+              <Footer />
+            </RecordModeVisuals>
 
-          <Suspense fallback={null}>
-            <AnalyticsProvider />
-          </Suspense>
-          {config.feedbackEnabled && <FeedbackOverlay />}
+            <CMSConnectivityNotice />
+
+            <Suspense fallback={null}>
+              <AnalyticsProvider />
+            </Suspense>
+            <ToolCoordinator />
+          </RecordModeProvider>
         </NextIntlClientProvider>
       </body>
     </html>

app/[locale]/opengraph-image.tsx

@@ -5,22 +5,20 @@ import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
   const fonts = await getOgFonts();
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={t('title')}
-        description={t('description')}
-        label="Reliable Energy Infrastructure"
-      />
-    ),
+    <OGImageTemplate
+      title={t('title')}
+      description={t('description')}
+      label="Reliable Energy Infrastructure"
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }
-

app/[locale]/page.tsx

@@ -3,14 +3,16 @@ import JsonLd from '@/components/JsonLd';
 import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
 import ProductCategories from '@/components/home/ProductCategories';
 import WhatWeDo from '@/components/home/WhatWeDo';
-import RecentPosts from '@/components/home/RecentPosts';
-import Experience from '@/components/home/Experience';
-import WhyChooseUs from '@/components/home/WhyChooseUs';
-import MeetTheTeam from '@/components/home/MeetTheTeam';
-import GallerySection from '@/components/home/GallerySection';
-import VideoSection from '@/components/home/VideoSection';
-import CTA from '@/components/home/CTA';
+import dynamic from 'next/dynamic';
 import Reveal from '@/components/Reveal';
+
+const RecentPosts = dynamic(() => import('@/components/home/RecentPosts'));
+const Experience = dynamic(() => import('@/components/home/Experience'));
+const WhyChooseUs = dynamic(() => import('@/components/home/WhyChooseUs'));
+const MeetTheTeam = dynamic(() => import('@/components/home/MeetTheTeam'));
+const GallerySection = dynamic(() => import('@/components/home/GallerySection'));
+const VideoSection = dynamic(() => import('@/components/home/VideoSection'));
+const CTA = dynamic(() => import('@/components/home/CTA'));
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { getOGImageMetadata } from '@/lib/metadata';
@@ -49,7 +51,7 @@ export default async function HomePage({ params }: { params: Promise<{ locale: s
       <Reveal>
         <VideoSection />
       </Reveal>
-      <Reveal>
+      <Reveal className="content-visibility-auto">
         <CTA />
       </Reveal>
     </div>
@@ -67,12 +69,12 @@ export async function generateMetadata({
   let t;
   try {
     t = await getTranslations({ locale, namespace: 'Index.meta' });
-  } catch (err) {
+  } catch {
     // If translations for Index.meta are not present, try generic Index namespace
     try {
       t = await getTranslations({ locale, namespace: 'Index' });
-    } catch (e) {
-      t = (key: string) => '';
+    } catch {
+      t = () => '';
     }
   }
 

app/[locale]/products/[...slug]/page.tsx

@@ -1,6 +1,5 @@
-import Script from 'next/script';
 import JsonLd from '@/components/JsonLd';
-import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
+import { SITE_URL } from '@/lib/schema';
 import ProductSidebar from '@/components/ProductSidebar';
 import ProductTabs from '@/components/ProductTabs';
 import ProductTechnicalData from '@/components/ProductTechnicalData';
@@ -213,8 +212,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
           <Container className="relative z-10">
             <div className="max-w-4xl animate-slide-up">
               <nav className="flex items-center mb-8 text-white/40 text-sm font-bold uppercase tracking-widest">
-                <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
-                  {t('title')}
+                <Link href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`} className="hover:text-accent transition-colors">
+                  {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
                 </Link>
                 <span className="mx-3 opacity-30">/</span>
                 <span className="text-white/90">{categoryTitle}</span>
@@ -244,6 +243,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
                           alt={product.frontmatter.title}
                           fill
                           className="object-contain p-8 transition-transform duration-700 group-hover:scale-110 z-10"
+                          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                         />
                         {/* Subtle reflection/shadow effect */}
                         <div className="absolute bottom-4 left-1/2 -translate-x-1/2 w-2/3 h-4 bg-black/5 blur-xl rounded-full" />
@@ -361,8 +361,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
         <Container className="relative z-10">
           <div className="max-w-4xl animate-slide-up">
             <nav className="flex items-center mb-12 text-white/40 text-[10px] font-black uppercase tracking-[0.2em]">
-              <Link href={`/${locale}/products`} className="hover:text-accent transition-colors">
-                {t('title')}
+              <Link href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`} className="hover:text-accent transition-colors">
+                {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
               </Link>
               <span className="mx-4 opacity-20">/</span>
               <Link

app/[locale]/products/opengraph-image.tsx

@@ -5,25 +5,19 @@ import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Products' });
   const fonts = await getOgFonts();
 
-  const title = t('meta.title') || t('title');
+  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
   const description = t('meta.description') || t('subtitle');
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={title}
-        description={description}
-        label="Products"
-      />
-    ),
+    <OGImageTemplate title={title} description={description} label="Products" />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }
-

app/[locale]/products/page.tsx

@@ -6,7 +6,6 @@ import { Metadata } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
 import { mapFileSlugToTranslated } from '@/lib/slugs';
-import { getOGImageMetadata } from '@/lib/metadata';
 import { SITE_URL } from '@/lib/schema';
 
 interface ProductsPageProps {
@@ -18,24 +17,23 @@ interface ProductsPageProps {
 export async function generateMetadata({ params }: ProductsPageProps): Promise<Metadata> {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Products' });
-  const title = t('meta.title') || t('title');
+  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
   const description = t('meta.description') || t('subtitle');
   return {
     title,
     description,
     alternates: {
-      canonical: `/${locale}/products`,
+      canonical: `/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
       languages: {
-        de: '/de/products',
-        en: '/en/products',
-        'x-default': '/en/products',
+        de: `/de/${await mapFileSlugToTranslated('products', 'de')}`,
+        en: `/en/${await mapFileSlugToTranslated('products', 'en')}`,
+        'x-default': `/en/${await mapFileSlugToTranslated('products', 'en')}`,
       },
     },
     openGraph: {
       title: `${title} | KLZ Cables`,
       description,
-      url: `${SITE_URL}/${locale}/products`,
-      images: getOGImageMetadata('products', title, locale),
+      url: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}`,
     },
     twitter: {
       card: 'summary_large_image',
@@ -56,34 +54,36 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
   const highVoltageSlug = await mapFileSlugToTranslated('high-voltage-cables', locale);
   const solarSlug = await mapFileSlugToTranslated('solar-cables', locale);
 
+  const productsSlug = await mapFileSlugToTranslated('products', locale);
+
   const categories = [
     {
       title: t('categories.lowVoltage.title'),
       desc: t('categories.lowVoltage.description'),
       img: '/uploads/2024/11/low-voltage-category.webp',
       icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${locale}/products/${lowVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${lowVoltageSlug}`,
     },
     {
       title: t('categories.mediumVoltage.title'),
       desc: t('categories.mediumVoltage.description'),
       img: '/uploads/2024/11/medium-voltage-category.webp',
       icon: '/uploads/2024/11/Medium-Voltage.svg',
-      href: `/${locale}/products/${mediumVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${mediumVoltageSlug}`,
     },
     {
       title: t('categories.highVoltage.title'),
       desc: t('categories.highVoltage.description'),
       img: '/uploads/2024/11/high-voltage-category.webp',
       icon: '/uploads/2024/11/High-Voltage.svg',
-      href: `/${locale}/products/${highVoltageSlug}`,
+      href: `/${locale}/${productsSlug}/${highVoltageSlug}`,
     },
     {
       title: t('categories.solar.title'),
       desc: t('categories.solar.description'),
       img: '/uploads/2024/11/solar-category.webp',
       icon: '/uploads/2024/11/Solar.svg',
-      href: `/${locale}/products/${solarSlug}`,
+      href: `/${locale}/${productsSlug}/${solarSlug}`,
     },
   ];
 
@@ -143,8 +143,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                         alt={category.title}
                         fill
                         className="object-cover transition-transform duration-1000 group-hover:scale-105"
-                        sizes="(max-width: 768px) 100vw, 50vw"
-                        unoptimized
+                        sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                       />
                       <div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
 

app/[locale]/team/opengraph-image.tsx

@@ -5,7 +5,8 @@ import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
 export const runtime = 'nodejs';
 
-export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Team' });
   const fonts = await getOgFonts();
 
@@ -13,17 +14,10 @@ export default async function Image({ params: { locale } }: { params: { locale:
   const description = t('meta.description') || t('hero.title');
 
   return new ImageResponse(
-    (
-      <OGImageTemplate
-        title={title}
-        description={description}
-        label="Our Team"
-      />
-    ),
+    <OGImageTemplate title={title} description={description} label="Our Team" />,
     {
       ...OG_IMAGE_SIZE,
       fonts,
-    }
+    },
   );
 }
-

app/[locale]/team/page.tsx

@@ -3,7 +3,6 @@ import { Metadata } from 'next';
 import JsonLd from '@/components/JsonLd';
 import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
 import { Section, Container, Heading, Badge, Button } from '@/components/ui';
-import { getOGImageMetadata } from '@/lib/metadata';
 import Image from 'next/image';
 import Reveal from '@/components/Reveal';
 import Gallery from '@/components/team/Gallery';
@@ -34,7 +33,6 @@ export async function generateMetadata({ params }: TeamPageProps): Promise<Metad
       title: `${title} | KLZ Cables`,
       description,
       url: `${SITE_URL}/${locale}/team`,
-      images: getOGImageMetadata('team', title, locale),
     },
     twitter: {
       card: 'summary_large_image',
@@ -94,6 +92,7 @@ export default async function TeamPage({ params }: TeamPageProps) {
               alt="KLZ Team"
               fill
               className="object-cover scale-105 animate-slow-zoom opacity-30 md:opacity-40"
+              sizes="100vw"
               priority
             />
             <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />

app/api/save-session/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+
+export async function POST(req: NextRequest) {
+    // Only allow in development
+    if (process.env.NODE_ENV === 'production') {
+        return NextResponse.json({ error: 'This route is disabled in production.' }, { status: 403 });
+    }
+
+    try {
+        const body = await req.json();
+
+        // Ensure we are in the project root by using process.cwd()
+        // Path: <project-root>/remotion/session.json
+        const remotionDir = path.join(process.cwd(), 'remotion');
+        const filePath = path.join(remotionDir, 'session.json');
+
+        // Create remotion directory if it doesn't exist
+        if (!fs.existsSync(remotionDir)) {
+            fs.mkdirSync(remotionDir, { recursive: true });
+        }
+
+        // Write the JSON file
+        fs.writeFileSync(filePath, JSON.stringify(body, null, 2), 'utf-8');
+
+        return NextResponse.json({ success: true, path: filePath });
+    } catch (error: any) {
+        console.error('Failed to save session:', error);
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/errors/api/relay/route.ts

@@ -25,7 +25,7 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'Empty envelope' }, { status: 400 });
     }
 
-    const header = JSON.parse(lines[0]);
+    JSON.parse(lines[0]);
     const realDsn = config.errors.glitchtip.dsn;
 
     if (!realDsn) {

build_output.txt

@@ -0,0 +1,85 @@
+
+> klz-cables-nextjs@1.0.0 build /Users/marcmintel/Projects/klz-2026
+> next build
+
+▲ Next.js 16.1.6 (Turbopack)
+- Environments: .env.production, .env
+- Experiments (use with caution):
+  · clientTraceMetadata
+
+⚠ The "middleware" file convention is deprecated. Please use "proxy" instead. Learn more: https://nextjs.org/docs/messages/middleware-to-proxy
+  Creating an optimized production build ...
+✓ Compiled successfully in 5.2s
+  Running next.config.js provided runAfterProductionCompile ...
+✓ Completed runAfterProductionCompile in 329ms
+  Running TypeScript ...
+  Collecting page data using 15 workers ...
+  Generating static pages using 15 workers (0/21) ...
+{"level":30,"time":1770803086126,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Initializing server application services"}
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+{"level":30,"time":1770803086126,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Service configuration"}
+{"level":30,"time":1770803086126,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Noop analytics service initialized (analytics disabled)"}
+{"level":30,"time":1770803086126,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Noop notification service initialized (notifications disabled)"}
+{"level":30,"time":1770803086126,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Noop error reporting service initialized (error reporting disabled)"}
+{"level":30,"time":1770803086126,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Memory cache service initialized"}
+{"level":30,"time":1770803086126,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Pino logger service initialized"}
+{"level":30,"time":1770803086126,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"All application services initialized successfully"}
+  Generating static pages using 15 workers (5/21) 
+  Generating static pages using 15 workers (10/21) 
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+{"level":30,"time":1770803086317,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Initializing server application services"}
+[Layout] Static generation detected or headers unavailable, skipping server-side analytics context
+{"level":30,"time":1770803086317,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Service configuration"}
+{"level":30,"time":1770803086317,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Noop analytics service initialized (analytics disabled)"}
+{"level":30,"time":1770803086317,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Notification service initialized (noop)"}
+{"level":30,"time":1770803086317,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Noop error reporting service initialized (error reporting disabled)"}
+{"level":30,"time":1770803086317,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Memory cache service initialized"}
+{"level":30,"time":1770803086317,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"Pino logger service initialized"}
+{"level":30,"time":1770803086317,"pid":70317,"hostname":"MacBook-Air-von-Marc-2.local","name":"server","msg":"All application services initialized successfully"}
+  Generating static pages using 15 workers (15/21) 
+✓ Generating static pages using 15 workers (21/21) in 512.4ms
+  Finalizing page optimization ...
+
+Route (app)
+┌ ○ /_not-found
+├ ƒ /[locale]
+├ ƒ /[locale]/[slug]
+├ ƒ /[locale]/[slug]/opengraph-image
+├ ƒ /[locale]/api/og/product
+├ ƒ /[locale]/blog
+├ ƒ /[locale]/blog/[slug]
+├ ƒ /[locale]/blog/[slug]/opengraph-image
+├ ƒ /[locale]/blog/opengraph-image
+├ ƒ /[locale]/contact
+├ ƒ /[locale]/contact/opengraph-image
+├ ƒ /[locale]/opengraph-image
+├ ƒ /[locale]/products
+├ ƒ /[locale]/products/[...slug]
+├ ƒ /[locale]/products/opengraph-image
+├ ƒ /[locale]/team
+├ ƒ /[locale]/team/opengraph-image
+├ ƒ /api/feedback
+├ ƒ /api/health/cms
+├ ƒ /api/whoami
+├ ƒ /errors/api/relay
+├ ƒ /health
+├ ○ /manifest.webmanifest
+├ ○ /robots.txt
+├ ƒ /sitemap.xml
+└ ƒ /stats/api/send
+
+
+ƒ Proxy (Middleware)
+
+○  (Static)   prerendered as static content
+ƒ  (Dynamic)  server-rendered on demand
+

commitlint.config.cjs

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 module.exports = {
   extends: ['@commitlint/config-conventional'],
   rules: {

components/CMSConnectivityNotice.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { AlertCircle, RefreshCw, Database } from 'lucide-react';
+import { AlertCircle, RefreshCw } from 'lucide-react';
 import { config } from '../lib/config';
 
 export default function CMSConnectivityNotice() {
-  const [status, setStatus] = useState<'checking' | 'ok' | 'error'>('checking');
+  const [, setStatus] = useState<'checking' | 'ok' | 'error'>('checking');
   const [errorMsg, setErrorMsg] = useState('');
   const [isVisible, setIsVisible] = useState(false);
 
@@ -32,7 +32,7 @@ export default function CMSConnectivityNotice() {
           setStatus('ok');
           setIsVisible(false);
         }
-      } catch (err) {
+      } catch {
         // If it's a connection error, only show if we are really debugging
         if (isDebug || isLocal) {
           setStatus('error');

components/Footer.tsx

@@ -10,31 +10,35 @@ export default function Footer() {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="bg-primary text-white py-24 relative overflow-hidden">
+    <footer className="bg-primary text-white py-24 relative overflow-hidden content-visibility-auto">
       <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
-      
+
       <Container>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 mb-20">
           {/* Brand Column */}
           <div className="lg:col-span-4 space-y-8">
             <Link href={`/${locale}`} className="inline-block group">
-              <Image 
-                src="/logo-white.svg" 
-                alt={t('products')} 
-                width={150} 
-                height={40} 
+              <Image
+                src="/logo-white.svg"
+                alt={t('products')}
+                width={150}
+                height={40}
                 className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
-                unoptimized
               />
             </Link>
             <p className="text-white/60 text-base md:text-lg leading-relaxed max-w-sm">
               {t('tagline')}
             </p>
             <div className="flex gap-4">
-              <a href="https://www.linkedin.com/company/klz-vertriebs-gmbh/" target="_blank" rel="noopener noreferrer" className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center text-white hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10">
+              <a
+                href="https://www.linkedin.com/company/klz-vertriebs-gmbh/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center text-white hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10"
+              >
                 <span className="sr-only">LinkedIn</span>
                 <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
-                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
                 </svg>
               </a>
             </div>
@@ -42,52 +46,113 @@ export default function Footer() {
 
           {/* Links Columns */}
           <div className="lg:col-span-2">
-            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('legal')}</h4>
+            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+              {t('legal')}
+            </h4>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
-              <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('legalNotice')}</Link></li>
-              <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('privacyPolicy')}</Link></li>
-              <li><Link href={`/${locale}/${t('termsSlug')}`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{t('terms')}</Link></li>
+              <li>
+                <Link
+                  href={`/${locale}/${t('legalNoticeSlug')}`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {t('legalNotice')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/${t('privacyPolicySlug')}`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {t('privacyPolicy')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/${t('termsSlug')}`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {t('terms')}
+                </Link>
+              </li>
             </ul>
           </div>
 
           <div className="lg:col-span-2">
-            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('company')}</h4>
+            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+              {t('company')}
+            </h4>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
-              <li><Link href={`/${locale}/team`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('team')}</Link></li>
-              <li><Link href={`/${locale}/products`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('products')}</Link></li>
-              <li><Link href={`/${locale}/blog`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('blog')}</Link></li>
-              <li><Link href={`/${locale}/contact`} className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block">{navT('contact')}</Link></li>
+              <li>
+                <Link
+                  href={`/${locale}/team`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {navT('team')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {navT('products')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/blog`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {navT('blog')}
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href={`/${locale}/contact`}
+                  className="text-white/70 hover:text-accent transition-all duration-300 hover:translate-x-1 inline-block"
+                >
+                  {navT('contact')}
+                </Link>
+              </li>
             </ul>
           </div>
 
           {/* Recent Posts Column */}
           <div className="lg:col-span-4">
-            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('recentPosts')}</h4>
+            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+              {t('recentPosts')}
+            </h4>
             <ul className="space-y-6 list-none m-0 p-0">
               {[
                 {
-                  title: locale === 'de'
-                    ? "Windparkbau im Fokus: drei typische Kabelherausforderungen"
-                    : "Focus on wind farm construction: three typical cable challenges",
-                  slug: locale === 'de'
-                    ? "windparkbau-im-fokus-drei-typische-kabelherausforderungen"
-                    : "focus-on-wind-farm-construction-three-typical-cable-challenges"
+                  title:
+                    locale === 'de'
+                      ? 'Windparkbau im Fokus: drei typische Kabelherausforderungen'
+                      : 'Focus on wind farm construction: three typical cable challenges',
+                  slug:
+                    locale === 'de'
+                      ? 'windparkbau-im-fokus-drei-typische-kabelherausforderungen'
+                      : 'focus-on-wind-farm-construction-three-typical-cable-challenges',
                 },
                 {
-                  title: locale === 'de'
-                    ? "Warum das N2XS(F)2Y das ideale Kabel für Ihr Energieprojekt ist"
-                    : "Why the N2XS(F)2Y is the ideal cable for your energy project",
-                  slug: locale === 'de'
-                    ? "n2xsf2y-mittelspannungskabel-energieprojekt"
-                    : "why-the-n2xsf2y-is-the-ideal-cable-for-your-energy-project"
-                }
+                  title:
+                    locale === 'de'
+                      ? 'Warum das N2XS(F)2Y das ideale Kabel für Ihr Energieprojekt ist'
+                      : 'Why the N2XS(F)2Y is the ideal cable for your energy project',
+                  slug:
+                    locale === 'de'
+                      ? 'n2xsf2y-mittelspannungskabel-energieprojekt'
+                      : 'why-the-n2xsf2y-is-the-ideal-cable-for-your-energy-project',
+                },
               ].map((post, i) => (
                 <li key={i}>
                   <Link href={`/${locale}/blog/${post.slug}`} className="group block text-white/80">
                     <p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2 text-base md:text-base">
                       {post.title}
                     </p>
-                    <span className="text-xs text-white/40 uppercase tracking-widest">{t('readArticle')} &rarr;</span>
+                    <span className="text-xs text-white/40 uppercase tracking-widest">
+                      {t('readArticle')} &rarr;
+                    </span>
                   </Link>
                 </li>
               ))}
@@ -98,8 +163,12 @@ export default function Footer() {
         <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-xs md:text-sm font-medium">
           <p>{t('copyright', { year: currentYear })}</p>
           <div className="flex gap-8">
-            <Link href="/en" locale="en" className="hover:text-white transition-colors">English</Link>
-            <Link href="/de" locale="de" className="hover:text-white transition-colors">Deutsch</Link>
+            <Link href="/en" locale="en" className="hover:text-white transition-colors">
+              English
+            </Link>
+            <Link href="/de" locale="de" className="hover:text-white transition-colors">
+              Deutsch
+            </Link>
           </div>
         </div>
       </Container>

components/Header.tsx

@@ -30,13 +30,6 @@ export default function Header() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  // Close mobile menu on route change
-  useEffect(() => {
-    if (isMobileMenuOpen) {
-      setIsMobileMenuOpen(false);
-    }
-  }, [pathname, isMobileMenuOpen]);
-
   // Prevent scroll when mobile menu is open
   useEffect(() => {
     if (isMobileMenuOpen) {
@@ -53,10 +46,22 @@ export default function Header() {
     return segments.join('/');
   };
 
+  const [productsSlug, setProductsSlug] = useState('products');
+
+  useEffect(() => {
+    // We can't use mapFileSlugToTranslated directly in client components easily without an API or similar
+    // For now, let's just check the locale
+    if (currentLocale === 'de') {
+      setProductsSlug('produkte');
+    } else {
+      setProductsSlug('products');
+    }
+  }, [currentLocale]);
+
   const menuItems = [
     { label: t('home'), href: '/' },
     { label: t('team'), href: '/team' },
-    { label: t('products'), href: '/products' },
+    { label: t('products'), href: `/${productsSlug}` },
     { label: t('blog'), href: '/blog' },
   ];
 
@@ -94,7 +99,6 @@ export default function Header() {
                 height={120}
                 className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
                 priority
-                unoptimized
               />
             </Link>
           </motion.div>
@@ -113,10 +117,11 @@ export default function Header() {
             }}
           >
             <motion.nav className="hidden lg:flex items-center space-x-10" variants={navVariants}>
-              {menuItems.map((item, idx) => (
+              {menuItems.map((item, _idx) => (
                 <motion.div key={item.href} variants={navLinkVariants}>
                   <Link
                     href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                    onClick={() => setIsMobileMenuOpen(false)}
                     className={cn(
                       textColorClass,
                       'hover:text-accent font-bold transition-all duration-500 text-base md:text-lg tracking-tight relative group inline-block hover:-translate-y-0.5',
@@ -281,6 +286,7 @@ export default function Header() {
               >
                 <Link
                   href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
+                  onClick={() => setIsMobileMenuOpen(false)}
                   className="text-2xl md:text-3xl font-extrabold text-white hover:text-accent transition-all transform block py-4"
                 >
                   {item.label}

components/Lightbox.tsx

@@ -21,7 +21,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true);
+    setMounted(true); // eslint-disable-line react-hooks/set-state-in-effect
     return () => setMounted(false);
   }, []);
 
@@ -59,7 +59,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
     if (photoParam !== null) {
       const index = parseInt(photoParam, 10);
       if (!isNaN(index) && index >= 0 && index < images.length) {
-        setCurrentIndex(index);
+        setCurrentIndex(index); // eslint-disable-line react-hooks/set-state-in-effect
       }
     }
   }, [searchParams, images.length]);

components/OGImageTemplate.tsx

@@ -46,6 +46,7 @@ export function OGImageTemplate({
             display: 'flex',
           }}
         >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={image}
             alt=""
@@ -182,4 +183,3 @@ export function OGImageTemplate({
     </div>
   );
 }
-

components/RelatedProducts.tsx

@@ -13,11 +13,11 @@ interface RelatedProductsProps {
 export default async function RelatedProducts({ currentSlug, categories, locale }: RelatedProductsProps) {
   const allProducts = await getAllProducts(locale);
   const t = await getTranslations('Products');
-  
+
   // Filter products: same category, not current product
   const related = allProducts
-    .filter(p => 
-      p.slug !== currentSlug && 
+    .filter(p =>
+      p.slug !== currentSlug &&
       p.frontmatter.categories.some(cat => categories.includes(cat))
     )
     .slice(0, 3); // Limit to 3 for better spacing
@@ -42,17 +42,19 @@ export default async function RelatedProducts({ currentSlug, categories, locale
           const catSlug = categorySlugs.find(slug => {
             const key = slug.replace(/-cables$/, '').replace(/-([a-z])/g, (g) => g[1].toUpperCase());
             const title = t(`categories.${key}.title`);
-            return product.frontmatter.categories.some(cat => 
+            return product.frontmatter.categories.some(cat =>
               cat.toLowerCase().replace(/\s+/g, '-') === slug || cat === title
             );
           }) || 'low-voltage-cables';
-          
+
           const translatedProductSlug = await mapFileSlugToTranslated(product.slug, locale);
-          
+          const translatedCategorySlug = await mapFileSlugToTranslated(catSlug, locale);
+          const productsBase = await mapFileSlugToTranslated('products', locale);
+
           return (
-            <Link 
-              key={product.slug} 
-              href={`/${locale}/products/${catSlug}/${translatedProductSlug}`}
+            <Link
+              key={product.slug}
+              href={`/${locale}/${productsBase}/${translatedCategorySlug}/${translatedProductSlug}`}
               className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
             >
               <div className="aspect-[16/10] relative bg-neutral-light/30 p-8 overflow-hidden">

components/home/Experience.tsx

@@ -9,17 +9,17 @@ export default function Experience() {
   return (
     <Section className="relative py-32 md:py-48 overflow-hidden text-white">
       <div className="absolute inset-0 z-0">
-        <Image 
-          src="/uploads/2024/12/1694273920124-copy-2.webp" 
-          alt={t('subtitle')} 
+        <Image
+          src="/uploads/2024/12/1694273920124-copy-2.webp"
+          alt={t('subtitle')}
           fill
           className="object-cover object-center scale-105 animate-slow-zoom"
-          unoptimized
+          sizes="100vw"
         />
         <div className="absolute inset-0 bg-primary/80 mix-blend-multiply" />
         <div className="absolute inset-0 bg-gradient-to-r from-primary via-primary/40 to-transparent" />
       </div>
-      
+
       <Container className="relative z-10">
         <div className="max-w-3xl">
           <Heading level={2} subtitle={t('subtitle')} className="text-white">
@@ -29,19 +29,25 @@ export default function Experience() {
             <p className="border-l-4 border-accent pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl">
               {t('p1')}
             </p>
-            <p className="pl-9">
-              {t('p2')}
-            </p>
+            <p className="pl-9">{t('p2')}</p>
           </div>
-          
+
           <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
             <div className="animate-fade-in">
-              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">{t('certifiedQuality')}</div>
-              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('vdeApproved')}</div>
+              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
+                {t('certifiedQuality')}
+              </div>
+              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
+                {t('vdeApproved')}
+              </div>
             </div>
             <div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
-              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">{t('fullSpectrum')}</div>
-              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">{t('solutionsRange')}</div>
+              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
+                {t('fullSpectrum')}
+              </div>
+              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
+                {t('solutionsRange')}
+              </div>
             </div>
           </div>
         </div>

components/home/GallerySection.tsx

@@ -1,6 +1,5 @@
 'use client';
-
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { Section, Container, Heading } from '../../components/ui';
@@ -19,19 +18,9 @@ export default function GallerySection() {
     '/uploads/2024/12/DSC07768-Large.webp',
   ];
 
-  const [lightboxOpen, setLightboxOpen] = useState(false);
-  const [lightboxIndex, setLightboxIndex] = useState(0);
-
-  useEffect(() => {
-    const photoParam = searchParams.get('photo');
-    if (photoParam !== null) {
-      const index = parseInt(photoParam, 10);
-      if (!isNaN(index) && index >= 0 && index < images.length) {
-        if (lightboxIndex !== index) setLightboxIndex(index);
-        if (!lightboxOpen) setLightboxOpen(true);
-      }
-    }
-  }, [searchParams, images.length, lightboxIndex, lightboxOpen]);
+  const photoParam = searchParams.get('photo');
+  const lightboxOpen = photoParam !== null;
+  const lightboxIndex = photoParam ? parseInt(photoParam, 10) : 0;
 
   return (
     <Section className="bg-white text-white py-32">
@@ -45,8 +34,10 @@ export default function GallerySection() {
             <button
               key={idx}
               onClick={() => {
-                setLightboxIndex(idx);
-                setLightboxOpen(true);
+                const params = new URLSearchParams(searchParams.toString());
+                params.set('photo', idx.toString());
+                window.history.replaceState(null, '', `?${params.toString()}`);
+                // Since we're using derive-from-url, the component will re-render with the new value
               }}
               className="relative aspect-[4/3] overflow-hidden rounded-3xl group shadow-lg hover:shadow-2xl transition-all duration-700 cursor-pointer"
             >
@@ -55,7 +46,7 @@ export default function GallerySection() {
                 alt={`${t('alt')} ${idx + 1}`}
                 fill
                 className="object-cover transition-transform duration-1000 group-hover:scale-110"
-                unoptimized
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
               />
               <div className="absolute inset-0 bg-primary-dark/20 group-hover:bg-transparent transition-all duration-500" />
               <div className="absolute inset-0 border-0 group-hover:border-[16px] border-white/10 transition-all duration-500 pointer-events-none" />
@@ -68,7 +59,11 @@ export default function GallerySection() {
         isOpen={lightboxOpen}
         images={images}
         initialIndex={lightboxIndex}
-        onClose={() => setLightboxOpen(false)}
+        onClose={() => {
+          const params = new URLSearchParams(searchParams.toString());
+          params.delete('photo');
+          window.history.replaceState(null, '', `?${params.toString()}`);
+        }}
       />
     </Section>
   );

components/home/Hero.tsx

@@ -3,11 +3,13 @@
 import Scribble from '@/components/Scribble';
 import { Button, Container, Heading, Section } from '@/components/ui';
 import { motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
-import HeroIllustration from './HeroIllustration';
+import { useTranslations, useLocale } from 'next-intl';
+import dynamic from 'next/dynamic';
+const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false });
 
 export default function Hero() {
   const t = useTranslations('Home.hero');
+  const locale = useLocale();
 
   return (
     <Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
@@ -19,7 +21,10 @@ export default function Hero() {
           variants={containerVariants}
         >
           <motion.div variants={headingVariants}>
-            <Heading level={1} className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]">
+            <Heading
+              level={1}
+              className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
+            >
               {t.rich('title', {
                 green: (chunks) => (
                   <span className="relative inline-block">
@@ -36,7 +41,7 @@ export default function Hero() {
                       <Scribble variant="circle" />
                     </motion.div>
                   </span>
-                )
+                ),
               })}
             </Heading>
           </motion.div>
@@ -50,13 +55,23 @@ export default function Hero() {
             variants={buttonContainerVariants}
           >
             <motion.div variants={buttonVariants}>
-              <Button href="/contact" variant="accent" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg">
+              <Button
+                href="/contact"
+                variant="accent"
+                size="lg"
+                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg"
+              >
                 {t('cta')}
                 <span className="transition-transform group-hover/btn:translate-x-1">&rarr;</span>
               </Button>
             </motion.div>
             <motion.div variants={buttonVariants}>
-              <Button href="/products" variant="white" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none">
+              <Button
+                href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
+                variant="white"
+                size="lg"
+                className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none"
+              >
                 {t('exploreProducts')}
               </Button>
             </motion.div>
@@ -77,7 +92,7 @@ export default function Hero() {
         className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block"
         initial={{ opacity: 0, y: 16 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 1, ease: "easeOut", delay: 3 }}
+        transition={{ duration: 1, ease: 'easeOut', delay: 3 }}
       >
         <div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
           <motion.div
@@ -86,7 +101,7 @@ export default function Hero() {
             transition={{
               duration: 1.5,
               repeat: Infinity,
-              ease: "easeInOut"
+              ease: 'easeInOut',
             }}
           />
         </div>
@@ -101,9 +116,9 @@ const containerVariants = {
     opacity: 1,
     transition: {
       staggerChildren: 0.12,
-      delayChildren: 0.4
-    }
-  }
+      delayChildren: 0.4,
+    },
+  },
 } as const;
 
 const headingVariants = {
@@ -112,8 +127,8 @@ const headingVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { duration: 1.2, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 1.2, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const accentVariants = {
@@ -122,8 +137,8 @@ const accentVariants = {
     opacity: 1,
     scale: 1,
     rotate: 0,
-    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const scribbleVariants = {
@@ -132,8 +147,8 @@ const scribbleVariants = {
     opacity: 1,
     scale: 1,
     rotate: 0,
-    transition: { duration: 1, type: "spring", stiffness: 300, damping: 20 }
-  }
+    transition: { duration: 1, type: 'spring', stiffness: 300, damping: 20 },
+  },
 } as const;
 
 const subtitleVariants = {
@@ -142,8 +157,8 @@ const subtitleVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { duration: 1, ease: [0.25, 0.46, 0.45, 0.94] }
-  }
+    transition: { duration: 1, ease: [0.25, 0.46, 0.45, 0.94] },
+  },
 } as const;
 
 const buttonContainerVariants = {
@@ -152,9 +167,9 @@ const buttonContainerVariants = {
     opacity: 1,
     transition: {
       staggerChildren: 0.15,
-      delayChildren: 0.4
-    }
-  }
+      delayChildren: 0.4,
+    },
+  },
 } as const;
 
 const buttonVariants = {
@@ -163,6 +178,6 @@ const buttonVariants = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { type: "spring", stiffness: 400, damping: 20 }
-  }
+    transition: { type: 'spring', stiffness: 400, damping: 20 },
+  },
 } as const;

components/home/MeetTheTeam.tsx

@@ -11,43 +11,53 @@ export default function MeetTheTeam() {
   return (
     <Section className="relative py-32 md:py-48 overflow-hidden">
       <div className="absolute inset-0 z-0">
-        <Image 
-          src="/uploads/2024/12/DSC08036-Large.webp" 
-          alt={t('subtitle')} 
+        <Image
+          src="/uploads/2024/12/DSC08036-Large.webp"
+          alt={t('subtitle')}
           fill
           className="object-cover scale-105 animate-slow-zoom"
-          unoptimized
+          sizes="100vw"
         />
         <div className="absolute inset-0 bg-primary/70 mix-blend-multiply" />
         <div className="absolute inset-0 bg-gradient-to-t from-primary via-primary/20 to-transparent" />
       </div>
-      
+
       <Container className="relative z-10">
         <div className="max-w-3xl text-white animate-slide-up">
           <Heading level={2} subtitle={t('subtitle')} className="text-white mb-8">
             <span className="text-white">{t('title')}</span>
           </Heading>
-          
+
           <div className="relative mb-12">
             <div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" />
             <p className="text-xl md:text-2xl leading-relaxed font-medium italic text-white/90 pl-8">
               "{t('description')}"
             </p>
           </div>
-          
+
           <div className="flex flex-wrap gap-8 items-center">
             <Button href={`/${locale}/team`} variant="accent" size="xl" className="group">
               {t('cta')}
               <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
             </Button>
-            
+
             <div className="flex items-center gap-4">
               <div className="flex -space-x-4">
                 <div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
-                  <Image src="/uploads/2024/12/DSC07768-Large.webp" alt={teamT('michael.name')} fill className="object-cover" />
+                  <Image
+                    src="/uploads/2024/12/DSC07768-Large.webp"
+                    alt={teamT('michael.name')}
+                    fill
+                    className="object-cover"
+                  />
                 </div>
                 <div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
-                  <Image src="/uploads/2024/12/DSC07963-Large.webp" alt={teamT('klaus.name')} fill className="object-cover" />
+                  <Image
+                    src="/uploads/2024/12/DSC07963-Large.webp"
+                    alt={teamT('klaus.name')}
+                    fill
+                    className="object-cover"
+                  />
                 </div>
               </div>
               <span className="text-white/60 font-bold text-xs md:text-sm uppercase tracking-widest">

components/home/ProductCategories.tsx

@@ -8,63 +8,77 @@ export default function ProductCategories() {
   const t = useTranslations('Products');
   const locale = useLocale();
 
+  const productsBase = locale === 'de' ? 'produkte' : 'products';
+
   const categories = [
-    { 
-      title: t('categories.lowVoltage.title'), 
+    {
+      title: t('categories.lowVoltage.title'),
       desc: t('categories.lowVoltage.description'),
       img: '/uploads/2024/11/low-voltage-category.webp',
       icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${locale}/products/low-voltage-cables`
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'niederspannungskabel' : 'low-voltage-cables'}`,
     },
-    { 
-      title: t('categories.mediumVoltage.title'), 
+    {
+      title: t('categories.mediumVoltage.title'),
       desc: t('categories.mediumVoltage.description'),
       img: '/uploads/2024/11/medium-voltage-category.webp',
       icon: '/uploads/2024/11/Medium-Voltage.svg',
-      href: `/${locale}/products/medium-voltage-cables`
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'mittelspannungskabel' : 'medium-voltage-cables'}`,
     },
-    { 
-      title: t('categories.highVoltage.title'), 
+    {
+      title: t('categories.highVoltage.title'),
       desc: t('categories.highVoltage.description'),
       img: '/uploads/2024/11/high-voltage-category.webp',
       icon: '/uploads/2024/11/High-Voltage.svg',
-      href: `/${locale}/products/high-voltage-cables`
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'hochspannungskabel' : 'high-voltage-cables'}`,
     },
-    { 
-      title: t('categories.solar.title'), 
+    {
+      title: t('categories.solar.title'),
       desc: t('categories.solar.description'),
       img: '/uploads/2024/11/solar-category.webp',
       icon: '/uploads/2024/11/Solar.svg',
-      href: `/${locale}/products/solar-cables`
-    }
+      href: `/${locale}/${productsBase}/${locale === 'de' ? 'solarkabel' : 'solar-cables'}`,
+    },
   ];
 
   return (
     <Section className="bg-neutral-light py-0 md:py-0 lg:py-0 -mt-px">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
         {categories.map((category, idx) => (
-          <Link key={idx} href={category.href} className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0">
-            <Image 
-              src={category.img} 
+          <Link
+            key={idx}
+            href={category.href}
+            className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0"
+          >
+            <Image
+              src={category.img}
               alt={category.title}
               fill
               className="object-cover transition-transform duration-1000 group-hover:scale-110"
               sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
-              unoptimized
             />
             <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-primary-dark/60 transition-all duration-500" />
             <div className="absolute inset-0 p-8 md:p-10 flex flex-col justify-end text-white">
               <div className="mb-4 md:mb-6 transform transition-all duration-500 group-hover:-translate-y-4">
                 <div className="w-12 h-12 md:w-16 md:h-16 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center mb-4 md:mb-6 border border-white/20">
-                  <Image src={category.icon} alt="" width={40} height={40} className="w-8 h-8 md:w-10 md:h-10 brightness-0 invert" unoptimized />
+                  <Image
+                    src={category.icon}
+                    alt=""
+                    width={40}
+                    height={40}
+                    className="w-8 h-8 md:w-10 md:h-10 brightness-0 invert"
+                  />
                 </div>
-                <h3 className="text-xl md:text-2xl font-bold mb-2 md:mb-4 leading-tight">{category.title}</h3>
+                <h3 className="text-xl md:text-2xl font-bold mb-2 md:mb-4 leading-tight">
+                  {category.title}
+                </h3>
                 <p className="text-white/80 text-sm md:text-base line-clamp-3 opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 max-h-24 md:max-h-0 group-hover:max-h-32">
                   {category.desc}
                 </p>
               </div>
               <div className="flex items-center text-accent font-bold tracking-wider uppercase text-xs md:text-xs opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
-                {t('exploreCategory')} <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
+                {t('exploreCategory')}{' '}
+                <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
               </div>
             </div>
           </Link>

components/home/RecentPosts.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { getAllPosts } from '@/lib/blog';
 import { getTranslations } from 'next-intl/server';
@@ -22,8 +23,11 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
           <Heading level={2} subtitle={t('latestNews')} className="mb-0 text-primary">
             {t('allArticles')}
           </Heading>
-          <Link href={`/${locale}/blog`} className="group flex items-center text-primary font-bold text-base md:text-lg touch-target">
-            {t('allArticles')} 
+          <Link
+            href={`/${locale}/blog`}
+            className="group flex items-center text-primary font-bold text-base md:text-lg touch-target"
+          >
+            {t('allArticles')}
             <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
           </Link>
         </div>
@@ -34,10 +38,12 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
               <Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl">
                 {post.frontmatter.featuredImage && (
                   <div className="relative h-64 overflow-hidden">
-                    <img 
-                      src={post.frontmatter.featuredImage} 
+                    <Image
+                      src={post.frontmatter.featuredImage}
                       alt={post.frontmatter.title}
+                      fill
                       className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                      sizes="(max-width: 768px) 100vw, 33vw"
                     />
                     <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                     {post.frontmatter.category && (
@@ -53,7 +59,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                     {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                       year: 'numeric',
                       month: 'long',
-                      day: 'numeric'
+                      day: 'numeric',
                     })}
                   </div>
                   <h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
@@ -61,8 +67,18 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                   </h3>
                   <div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
                     {t('readMore')}
-                    <svg className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                    <svg
+                      className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M17 8l4 4m0 0l-4 4m4-4H3"
+                      />
                     </svg>
                   </div>
                 </div>

components/record-mode/PickingHelper.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { finder } from '@medv/finder';
+
+export function PickingHelper() {
+    const [pickingMode, setPickingMode] = useState<'click' | 'scroll' | null>(null);
+    const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);
+
+    useEffect(() => {
+        const handleMessage = (e: MessageEvent) => {
+            if (e.data.type === 'START_PICKING') {
+                setPickingMode(e.data.mode);
+            } else if (e.data.type === 'STOP_PICKING') {
+                setPickingMode(null);
+                setHoveredElement(null);
+            } else if (e.data.type === 'SET_HOVER_SELECTOR') {
+                const selector = e.data.selector;
+                if (selector) {
+                    const el = document.querySelector(selector) as HTMLElement;
+                    setHoveredElement(el || null);
+                } else {
+                    setHoveredElement(null);
+                }
+            }
+        };
+
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+
+    useEffect(() => {
+        if (!pickingMode) return;
+
+        const handleMouseOver = (e: MouseEvent) => {
+            const target = e.target as HTMLElement;
+            if (target.closest('.record-mode-ignore') || target.closest('.feedback-ui-ignore')) return;
+            setHoveredElement(target);
+        };
+
+        const handleClick = (e: MouseEvent) => {
+            if (hoveredElement) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                const selector = finder(hoveredElement, {
+                    root: document.body,
+                    seedMinLength: 3,
+                    optimizedMinLength: 2,
+                    className: (name) =>
+                        !name.startsWith('record-mode-') &&
+                        !name.startsWith('feedback-') &&
+                        !name.includes('[') &&
+                        !name.includes('/') &&
+                        !name.match(/^[a-z]-[0-9]/) &&
+                        !name.match(/[0-9]{4,}/), // Avoid dynamic IDs in classnames
+                    idName: (name) => !name.startsWith('__next') && !name.includes(':') && !name.match(/[0-9]{5,}/),
+                });
+                const rect = hoveredElement.getBoundingClientRect();
+
+                window.parent.postMessage({
+                    type: 'ELEMENT_SELECTED',
+                    selector,
+                    rect: {
+                        x: rect.left,
+                        y: rect.top,
+                        width: rect.width,
+                        height: rect.height
+                    },
+                    tagName: hoveredElement.tagName.toLowerCase()
+                }, '*');
+
+                setPickingMode(null);
+                setHoveredElement(null);
+            }
+        };
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                setPickingMode(null);
+                setHoveredElement(null);
+                window.parent.postMessage({ type: 'PICKING_CANCELLED' }, '*');
+            }
+        };
+
+        window.addEventListener('mouseover', handleMouseOver);
+        window.addEventListener('click', handleClick, true);
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            window.removeEventListener('mouseover', handleMouseOver);
+            window.removeEventListener('click', handleClick, true);
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [pickingMode, hoveredElement]);
+
+    if (!hoveredElement) return null;
+    // Don't show highlight if we are in picking mode but NOT hovering anything (handled by logic above)
+    // but DO show if we have a hoveredElement (from message or mouseover)
+
+    const rect = hoveredElement.getBoundingClientRect();
+
+    return (
+        <div
+            className="fixed pointer-events-none border-2 border-[#82ed20] bg-[#82ed20]/15 transition-all z-[9999] shadow-[0_0_20px_rgba(130,237,32,0.3)] rounded-sm"
+            style={{
+                top: rect.top,
+                left: rect.left,
+                width: rect.width,
+                height: rect.height,
+            }}
+        >
+            <div className="absolute top-0 right-0 bg-[#82ed20] text-black text-[10px] font-black px-1.5 py-1 transform -translate-y-full uppercase tracking-tighter shadow-xl">
+                {hoveredElement.tagName.toLowerCase()}
+            </div>
+        </div>
+    );
+}

components/record-mode/PlaybackCursor.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useRecordMode } from './RecordModeContext';
+
+export function PlaybackCursor() {
+  const { isPlaying, cursorPosition, isClicking } = useRecordMode();
+  const [scrollOffset, setScrollOffset] = useState({ x: 0, y: 0 });
+
+  // Track scroll so cursor stays locked to the correct element
+  useEffect(() => {
+    if (!isPlaying) return;
+
+    const handleScroll = () => {
+      setScrollOffset({ x: window.scrollX, y: window.scrollY });
+    };
+
+    handleScroll(); // Init
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [isPlaying]);
+
+  if (!isPlaying) return null;
+
+  return (
+    <motion.div
+      className="fixed z-[10000] pointer-events-none"
+      animate={{
+        x: cursorPosition.x,
+        y: cursorPosition.y,
+        scale: isClicking ? 0.8 : 1,
+        rotateX: isClicking ? 15 : 0,
+        rotateY: isClicking ? -15 : 0,
+      }}
+      transition={{
+        x: { type: 'spring', damping: 30, stiffness: 250, mass: 0.5 },
+        y: { type: 'spring', damping: 30, stiffness: 250, mass: 0.5 },
+        scale: { type: 'spring', damping: 15, stiffness: 400 },
+        rotateX: { type: 'spring', damping: 15, stiffness: 400 },
+        rotateY: { type: 'spring', damping: 15, stiffness: 400 },
+      }}
+      style={{ perspective: '1000px' }}
+    >
+      <AnimatePresence>
+        {isClicking && (
+          <motion.div
+            initial={{ scale: 0.5, opacity: 0 }}
+            animate={{ scale: 2.5, opacity: 0 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.4, ease: 'easeOut' }}
+            className="absolute inset-0 rounded-full border-2 border-[#82ed20] blur-[1px]"
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Outer Pulse Ring */}
+      <div
+        className={`absolute -inset-3 rounded-full bg-[#82ed20]/10 ${isClicking ? 'scale-150 opacity-0' : 'animate-ping'} transition-all duration-300`}
+      />
+
+      {/* Visual Cursor */}
+      <div className="relative">
+        {/* Soft Glow */}
+        <div
+          className={`absolute -inset-2 bg-[#82ed20]/20 rounded-full blur-md transition-all ${isClicking ? 'bg-[#82ed20]/50 blur-xl' : ''}`}
+        />
+
+        {/* Pointer Arrow */}
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={`drop-shadow-[0_2px_8px_rgba(130,237,32,0.5)] transition-transform ${isClicking ? 'translate-y-0.5' : ''}`}
+        >
+          <path
+            d="M3 3L10.07 19.97L12.58 12.58L19.97 10.07L3 3Z"
+            fill={isClicking ? '#82ed20' : 'white'}
+            stroke="black"
+            strokeWidth="1.5"
+            strokeLinejoin="round"
+            className="transition-colors duration-150"
+          />
+        </svg>
+      </div>
+    </motion.div>
+  );
+}

components/record-mode/RecordModeContext.tsx

@@ -0,0 +1,369 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, useRef } from 'react';
+import { RecordEvent, RecordingSession } from '@/types/record-mode';
+
+interface RecordModeContextType {
+  isActive: boolean;
+  setIsActive: (active: boolean) => void;
+  events: RecordEvent[];
+  addEvent: (event: Omit<RecordEvent, 'id' | 'timestamp'>) => void;
+  updateEvent: (id: string, event: Partial<RecordEvent>) => void;
+  removeEvent: (id: string) => void;
+  clearEvents: () => void;
+  setEvents: (events: RecordEvent[]) => void;
+  isPlaying: boolean;
+  playEvents: () => void;
+  stopPlayback: () => void;
+  cursorPosition: { x: number; y: number };
+  zoomLevel: number;
+  isBlurry: boolean;
+  currentSession: RecordingSession | null;
+  saveSession: (name: string) => void;
+  isFeedbackActive: boolean;
+  setIsFeedbackActive: (active: boolean) => void;
+  reorderEvents: (startIndex: number, endIndex: number) => void;
+  hoveredEventId: string | null;
+  setHoveredEventId: (id: string | null) => void;
+  isClicking: boolean;
+}
+
+const RecordModeContext = createContext<RecordModeContextType | null>(null);
+
+export function useRecordMode(): RecordModeContextType {
+  const context = useContext(RecordModeContext);
+  if (!context) {
+    return {
+      isActive: false,
+      setIsActive: () => {},
+      events: [],
+      addEvent: () => {},
+      updateEvent: () => {},
+      removeEvent: () => {},
+      clearEvents: () => {},
+      isPlaying: false,
+      playEvents: () => {},
+      stopPlayback: () => {},
+      cursorPosition: { x: 0, y: 0 },
+      zoomLevel: 1,
+      isBlurry: false,
+      currentSession: null,
+      isFeedbackActive: false,
+      setIsFeedbackActive: () => {},
+      saveSession: () => {},
+      reorderEvents: () => {},
+      hoveredEventId: null,
+      setHoveredEventId: () => {},
+      setEvents: () => {},
+      isClicking: false,
+    };
+  }
+  return context;
+}
+
+export function RecordModeProvider({ children }: { children: React.ReactNode }) {
+  const [isActive, setIsActiveState] = useState(false);
+  const [events, setEvents] = useState<RecordEvent[]>([]);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [isBlurry, setIsBlurry] = useState(false);
+  const [isFeedbackActive, setIsFeedbackActiveState] = useState(false);
+  const [hoveredEventId, setHoveredEventId] = useState<string | null>(null);
+  const [isClicking, setIsClicking] = useState(false);
+  const [isEmbedded, setIsEmbedded] = useState(false);
+
+  useEffect(() => {
+    const embedded =
+      typeof window !== 'undefined' &&
+      (window.location.search.includes('embedded=true') ||
+        window.name === 'record-mode-iframe' ||
+        window.self !== window.top);
+    setIsEmbedded(embedded);
+  }, []);
+
+  const setIsActive = (active: boolean) => {
+    setIsActiveState(active);
+    if (active) setIsFeedbackActiveState(false);
+  };
+
+  const setIsFeedbackActive = (active: boolean) => {
+    setIsFeedbackActiveState(active);
+    if (active) setIsActiveState(false);
+  };
+
+  const isPlayingRef = useRef(false);
+  const isLoadedRef = useRef(false);
+
+  useEffect(() => {
+    const savedEvents = localStorage.getItem('klz-record-events');
+    const savedActive = localStorage.getItem('klz-record-active');
+    if (savedEvents) setEvents(JSON.parse(savedEvents));
+    if (savedActive) setIsActive(JSON.parse(savedActive));
+    isLoadedRef.current = true;
+  }, []);
+
+  useEffect(() => {
+    if (!isLoadedRef.current) return;
+    localStorage.setItem('klz-record-events', JSON.stringify(events));
+  }, [events]);
+
+  useEffect(() => {
+    localStorage.setItem('klz-record-active', JSON.stringify(isActive));
+  }, [isActive]);
+
+  useEffect(() => {
+    if (isEmbedded) {
+      const handlePlaybackMessage = (e: MessageEvent) => {
+        if (e.data.type === 'PLAY_EVENT') {
+          const { event } = e.data;
+          const el = event.selector
+            ? (document.querySelector(event.selector) as HTMLElement)
+            : null;
+          if (el) {
+            if (event.type === 'scroll') {
+              el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            } else if (event.type === 'mouse') {
+              const currentRect = el.getBoundingClientRect();
+              let targetX = currentRect.left + currentRect.width / 2;
+              let targetY = currentRect.top + currentRect.height / 2;
+
+              if (event.clickOrigin === 'top-left') {
+                targetX = currentRect.left + 5;
+                targetY = currentRect.top + 5;
+              } else if (event.clickOrigin === 'top-right') {
+                targetX = currentRect.right - 5;
+                targetY = currentRect.top + 5;
+              } else if (event.clickOrigin === 'bottom-left') {
+                targetX = currentRect.left + 5;
+                targetY = currentRect.bottom - 5;
+              } else if (event.clickOrigin === 'bottom-right') {
+                targetX = currentRect.right - 5;
+                targetY = currentRect.bottom - 5;
+              }
+
+              const eventCoords = { clientX: targetX, clientY: targetY };
+              const dispatchMouse = (type: string) => {
+                el.dispatchEvent(
+                  new MouseEvent(type, {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true,
+                    ...eventCoords,
+                  }),
+                );
+              };
+
+              if (event.interactionType === 'click') {
+                setIsClicking(true);
+                dispatchMouse('mousedown');
+                setTimeout(() => {
+                  dispatchMouse('mouseup');
+                  if (event.realClick) {
+                    dispatchMouse('click');
+                    el.click();
+                  }
+                  setIsClicking(false);
+                }, 150);
+              } else {
+                dispatchMouse('mousemove');
+                dispatchMouse('mouseover');
+                dispatchMouse('mouseenter');
+              }
+            }
+          }
+        }
+      };
+      window.addEventListener('message', handlePlaybackMessage);
+      return () => window.removeEventListener('message', handlePlaybackMessage);
+    }
+  }, [isEmbedded]);
+
+  useEffect(() => {
+    if (isEmbedded || !isActive) return;
+    const event = events.find((e) => e.id === hoveredEventId);
+    const iframe = document.querySelector('iframe[name="record-mode-iframe"]') as HTMLIFrameElement;
+    if (iframe?.contentWindow) {
+      iframe.contentWindow.postMessage(
+        { type: 'SET_HOVER_SELECTOR', selector: event?.selector || null },
+        '*',
+      );
+    }
+  }, [hoveredEventId, events, isActive, isEmbedded]);
+
+  const addEvent = (event: Omit<RecordEvent, 'id' | 'timestamp'>) => {
+    const newEvent: RecordEvent = {
+      realClick: false,
+      ...event,
+      id: Math.random().toString(36).substr(2, 9),
+      timestamp: Date.now(),
+    };
+    setEvents((prev) => [...prev, newEvent]);
+  };
+
+  const updateEvent = (id: string, updatedFields: Partial<RecordEvent>) => {
+    setEvents((prev) =>
+      prev.map((event) => (event.id === id ? { ...event, ...updatedFields } : event)),
+    );
+  };
+
+  const reorderEvents = (startIndex: number, endIndex: number) => {
+    const result = Array.from(events);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    setEvents(result);
+  };
+
+  const removeEvent = (id: string) => {
+    setEvents((prev) => prev.filter((event) => event.id !== id));
+  };
+
+  const clearEvents = () => {
+    if (confirm('Clear all recorded events?')) setEvents([]);
+  };
+
+  const currentSession: RecordingSession | null =
+    events.length > 0
+      ? {
+          id: 'draft',
+          name: 'Draft Session',
+          events,
+          createdAt: new Date().toISOString(),
+        }
+      : null;
+
+  const saveSession = (name: string) => {
+    console.log('Saving session:', name, events);
+  };
+
+  const playEvents = async () => {
+    if (events.length === 0 || isPlayingRef.current) return;
+    setIsPlaying(true);
+    isPlayingRef.current = true;
+    const sortedEvents = [...events].sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));
+
+    for (const event of sortedEvents) {
+      if (!isPlayingRef.current) break;
+      if (event.rect && !isEmbedded) {
+        const iframe = document.querySelector(
+          'iframe[name="record-mode-iframe"]',
+        ) as HTMLIFrameElement;
+        const iframeRect = iframe?.getBoundingClientRect();
+        setCursorPosition({
+          x: (iframeRect?.left || 0) + event.rect.x + event.rect.width / 2,
+          y: (iframeRect?.top || 0) + event.rect.y + event.rect.height / 2,
+        });
+      }
+
+      if (event.selector) {
+        if (!isEmbedded) {
+          const iframe = document.querySelector(
+            'iframe[name="record-mode-iframe"]',
+          ) as HTMLIFrameElement;
+          if (iframe?.contentWindow)
+            iframe.contentWindow.postMessage({ type: 'PLAY_EVENT', event }, '*');
+        } else {
+          // Self-execution logic for guest
+          const el = document.querySelector(event.selector) as HTMLElement;
+          if (el) {
+            if (event.type === 'scroll') el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            else if (event.type === 'mouse') {
+              const currentRect = el.getBoundingClientRect();
+              let targetX = currentRect.left + currentRect.width / 2;
+              let targetY = currentRect.top + currentRect.height / 2;
+
+              if (event.clickOrigin === 'top-left') {
+                targetX = currentRect.left + 5;
+                targetY = currentRect.top + 5;
+              } else if (event.clickOrigin === 'top-right') {
+                targetX = currentRect.right - 5;
+                targetY = currentRect.top + 5;
+              } else if (event.clickOrigin === 'bottom-left') {
+                targetX = currentRect.left + 5;
+                targetY = currentRect.bottom - 5;
+              } else if (event.clickOrigin === 'bottom-right') {
+                targetX = currentRect.right - 5;
+                targetY = currentRect.bottom - 5;
+              }
+
+              const eventCoords = { clientX: targetX, clientY: targetY };
+              const dispatchMouse = (type: string) => {
+                el.dispatchEvent(
+                  new MouseEvent(type, {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true,
+                    ...eventCoords,
+                  }),
+                );
+              };
+
+              if (event.interactionType === 'click') {
+                setIsClicking(true);
+                dispatchMouse('mousedown');
+                setTimeout(() => {
+                  dispatchMouse('mouseup');
+                  if (event.realClick) {
+                    dispatchMouse('click');
+                    el.click();
+                  }
+                  setIsClicking(false);
+                }, 150);
+              } else {
+                dispatchMouse('mousemove');
+                dispatchMouse('mouseover');
+                dispatchMouse('mouseenter');
+              }
+            }
+          }
+        }
+      }
+
+      if (event.zoom) setZoomLevel(event.zoom);
+      if (event.motionBlur) setIsBlurry(true);
+      await new Promise((resolve) => setTimeout(resolve, event.duration || 1000));
+      setIsBlurry(false);
+    }
+    setIsPlaying(false);
+    isPlayingRef.current = false;
+    setZoomLevel(1);
+  };
+
+  const stopPlayback = () => {
+    setIsPlaying(false);
+    isPlayingRef.current = false;
+    setZoomLevel(1);
+    setIsBlurry(false);
+  };
+
+  return (
+    <RecordModeContext.Provider
+      value={{
+        isActive,
+        setIsActive,
+        events,
+        addEvent,
+        updateEvent,
+        removeEvent,
+        clearEvents,
+        setEvents,
+        isPlaying,
+        playEvents,
+        stopPlayback,
+        cursorPosition,
+        zoomLevel,
+        isBlurry,
+        currentSession,
+        saveSession,
+        isFeedbackActive,
+        setIsFeedbackActive,
+        reorderEvents,
+        hoveredEventId,
+        setHoveredEventId,
+        isClicking,
+      }}
+    >
+      {children}
+    </RecordModeContext.Provider>
+  );
+}

components/record-mode/RecordModeOverlay.tsx

@@ -0,0 +1,583 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRecordMode } from './RecordModeContext';
+import { Reorder, AnimatePresence } from 'framer-motion';
+import {
+  Play,
+  Square,
+  MousePointer2,
+  Scroll,
+  Plus,
+  Save,
+  Trash2,
+  Eye,
+  Edit2,
+  X,
+  Check,
+  Download,
+  Settings2,
+  GripVertical,
+  Clock,
+  Maximize2,
+  Box,
+  ExternalLink,
+} from 'lucide-react';
+import { RecordEvent } from '@/types/record-mode';
+import { PlaybackCursor } from './PlaybackCursor';
+
+export function RecordModeOverlay() {
+  const {
+    isActive,
+    setIsActive,
+    events,
+    addEvent,
+    updateEvent,
+    removeEvent,
+    isPlaying,
+    playEvents,
+    saveSession,
+    clearEvents,
+    reorderEvents,
+    setHoveredEventId,
+    setEvents, // Added setEvents here
+  } = useRecordMode();
+
+  const [pickingMode, setPickingMode] = useState<'mouse' | 'scroll' | null>(null);
+  const [lastInteractionType, setLastInteractionType] = useState<'click' | 'hover'>('click');
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);
+  const [editingEventId, setEditingEventId] = useState<string | null>(null);
+
+  // Edit form state
+  const [editForm, setEditForm] = useState<Partial<RecordEvent>>({});
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted || !isActive) return;
+
+    const handleMessage = (e: MessageEvent) => {
+      if (e.data.type === 'ELEMENT_SELECTED') {
+        const { selector, rect, tagName } = e.data;
+
+        if (pickingMode === 'mouse') {
+          addEvent({
+            type: 'mouse',
+            interactionType: lastInteractionType,
+            selector,
+            duration: lastInteractionType === 'click' ? 1000 : 1500,
+            zoom: 1,
+            description: `Mouse ${lastInteractionType === 'click' ? '(Click)' : '(Hover)'} on ${tagName}`,
+            motionBlur: false,
+            realClick: false,
+            rect,
+          });
+        } else if (pickingMode === 'scroll') {
+          addEvent({
+            type: 'scroll',
+            selector,
+            duration: 1500,
+            zoom: 1,
+            description: `Scroll to ${tagName}`,
+            motionBlur: false,
+            rect,
+          });
+        }
+        setPickingMode(null);
+      } else if (e.data.type === 'PICKING_CANCELLED') {
+        setPickingMode(null);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    if (pickingMode) {
+      // Find the iframe and signal start picking
+      const iframe = document.querySelector('iframe');
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.postMessage({ type: 'START_PICKING', mode: pickingMode }, '*');
+      }
+    } else {
+      // Signal stop picking
+      const iframe = document.querySelector('iframe');
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.postMessage({ type: 'STOP_PICKING' }, '*');
+      }
+    }
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [isActive, pickingMode, addEvent, mounted]);
+
+  const saveEdit = () => {
+    if (editingEventId) {
+      updateEvent(editingEventId, editForm);
+      setEditingEventId(null);
+    }
+  };
+
+  const [showEvents, setShowEvents] = useState(true);
+
+  if (!mounted) return null;
+
+  if (!isActive) {
+    // Failsafe: Never render host toggle in embedded mode
+    if (
+      typeof window !== 'undefined' &&
+      (window.self !== window.top ||
+        window.name === 'record-mode-iframe' ||
+        window.location.search.includes('embedded=true'))
+    ) {
+      return null;
+    }
+
+    return (
+      <button
+        onClick={() => setIsActive(true)}
+        className="fixed bottom-6 left-6 z-[9999] bg-[#82ed20]/20 hover:bg-[#82ed20]/30 text-[#82ed20] p-4 rounded-full shadow-2xl transition-all hover:scale-110 record-mode-ignore border border-[#82ed20]/30 backdrop-blur-md animate-pulse"
+      >
+        <div className="w-5 h-5 rounded-[4px] border-2 border-[#82ed20]" />
+      </button>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 z-[9998] pointer-events-none font-sans">
+      {/* 1. Global Toolbar - Slim Industrial Bar */}
+      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
+        <div className="bg-black/80 backdrop-blur-2xl border border-white/10 p-2 rounded-[24px] shadow-[0_32px_80px_rgba(0,0,0,0.8)] flex items-center gap-2">
+          {/* Identity Tag */}
+          <div className="flex items-center gap-3 px-4 py-2 bg-white/5 rounded-[16px] border border-white/5 mx-1">
+            <div className="w-2 h-2 rounded-full bg-accent animate-pulse" />
+            <div className="flex flex-col">
+              <span className="text-[10px] font-bold text-white uppercase tracking-wider leading-none">
+                Event Builder
+              </span>
+              <span className="text-[8px] text-white/30 uppercase tracking-widest mt-1">
+                Manual Mode
+              </span>
+            </div>
+          </div>
+
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          {/* Action Tools */}
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => {
+                setPickingMode('mouse');
+                setLastInteractionType('click');
+              }}
+              className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'mouse' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
+            >
+              <MousePointer2 size={16} />
+              <span>Mouse</span>
+            </button>
+
+            <button
+              onClick={() => setPickingMode('scroll')}
+              className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'scroll' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
+            >
+              <Scroll size={16} />
+              <span>Scroll</span>
+            </button>
+
+            <button
+              onClick={() =>
+                addEvent({
+                  type: 'wait',
+                  duration: 2000,
+                  zoom: 1,
+                  description: 'Wait for 2s',
+                  motionBlur: false,
+                })
+              }
+              className="flex items-center gap-2 px-4 py-2.5 rounded-[16px] text-white/40 hover:text-white hover:bg-white/5 transition-all text-xs font-bold uppercase tracking-wide"
+            >
+              <Plus size={16} />
+              <span>Wait</span>
+            </button>
+          </div>
+
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          {/* Sequence Controls */}
+          <div className="flex items-center gap-1 p-0.5">
+            <button
+              onClick={playEvents}
+              disabled={isPlaying || events.length === 0}
+              className="p-2.5 text-accent hover:bg-accent/10 rounded-[14px] disabled:opacity-20 transition-all"
+              title="Preview Sequence"
+            >
+              <Play size={18} fill="currentColor" />
+            </button>
+
+            <button
+              onClick={() => setShowEvents(!showEvents)}
+              className={`p-2.5 rounded-[14px] transition-all relative ${showEvents ? 'bg-white/10 text-white' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
+            >
+              <Edit2 size={18} />
+              {events.length > 0 && (
+                <span className="absolute -top-1 -right-1 w-4 h-4 bg-accent text-primary-dark text-[10px] flex items-center justify-center rounded-full font-bold border-2 border-black">
+                  {events.length}
+                </span>
+              )}
+            </button>
+
+            <button
+              onClick={async () => {
+                const session = { events, name: 'Recording', createdAt: new Date().toISOString() };
+                try {
+                  const res = await fetch('/api/save-session', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(session),
+                  });
+                  if (res.ok) {
+                    // Visual feedback could be improved, but alert is fine for dev tool
+                    alert('Session saved to remotion/session.json');
+                  } else {
+                    const err = await res.json();
+                    alert(`Failed to save: ${err.error}`);
+                  }
+                } catch (e) {
+                  console.error(e);
+                  alert('Error saving session');
+                }
+              }}
+              disabled={events.length === 0}
+              className="p-3 bg-white/5 hover:bg-green-500/20 rounded-2xl disabled:opacity-30 transition-all text-green-400"
+              title="Save to Project (Dev)"
+            >
+              <Save size={20} />
+            </button>
+
+            <button
+              onClick={() => {
+                const data = JSON.stringify(
+                  { events, name: 'Recording', createdAt: new Date().toISOString() },
+                  null,
+                  2,
+                );
+                const blob = new Blob([data], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'remotion-session.json';
+                a.click();
+                URL.revokeObjectURL(url);
+              }}
+              disabled={events.length === 0}
+              className="p-3 bg-white/5 hover:bg-blue-500/20 rounded-2xl disabled:opacity-30 transition-all text-blue-400"
+              title="Download JSON"
+            >
+              <Download size={20} />
+            </button>
+          </div>
+
+          <div className="w-px h-6 bg-white/10 mx-1" />
+
+          <button
+            onClick={() => setIsActive(false)}
+            className="p-2.5 text-red-500 hover:bg-red-500/10 rounded-[14px] transition-all mx-1"
+            title="Exit Studio"
+          >
+            <X size={20} />
+          </button>
+        </div>
+      </div>
+
+      {/* 2. Event Timeline Popover */}
+      {showEvents && (
+        <div className="fixed bottom-[100px] left-1/2 -translate-x-1/2 w-[400px] pointer-events-auto z-[9999]">
+          <div className="bg-black/90 backdrop-blur-3xl border border-white/10 rounded-[32px] p-6 shadow-[0_40px_100px_rgba(0,0,0,0.9)] max-h-[500px] overflow-hidden flex flex-col scale-in">
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h4 className="text-white font-bold text-lg leading-none">Recording Track</h4>
+                <p className="text-[10px] text-white/30 uppercase tracking-widest mt-2">
+                  {events.length} Actions Recorded
+                </p>
+              </div>
+              <button
+                onClick={clearEvents}
+                disabled={events.length === 0}
+                className="text-red-400/40 hover:text-red-400 transition-colors p-2 hover:bg-red-500/10 rounded-xl disabled:opacity-10"
+              >
+                <Trash2 size={18} />
+              </button>
+            </div>
+
+            <Reorder.Group
+              axis="y"
+              values={events}
+              onReorder={setEvents}
+              className="flex-1 overflow-y-auto space-y-2 pr-2 scrollbar-hide"
+            >
+              {events.length === 0 ? (
+                <div className="py-12 flex flex-col items-center justify-center text-white/10">
+                  <Plus size={40} strokeWidth={1} />
+                  <p className="text-xs mt-4">Timeline is empty</p>
+                </div>
+              ) : (
+                events.map((event, index) => (
+                  <Reorder.Item
+                    key={event.id}
+                    value={event}
+                    className="group flex items-center gap-3 bg-white/[0.03] border border-white/5 p-3 rounded-[20px] transition-all hover:bg-white/[0.06] hover:border-white/10"
+                    onMouseEnter={() => setHoveredEventId(event.id)}
+                    onMouseLeave={() => setHoveredEventId(null)}
+                  >
+                    <div className="cursor-grab active:cursor-grabbing text-white/10 hover:text-white/30 transition-colors">
+                      <GripVertical size={16} />
+                    </div>
+
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-white text-[10px] font-black uppercase tracking-widest">
+                          {event.type === 'mouse' ? `Mouse (${event.interactionType})` : event.type}
+                        </span>
+                        {event.clickOrigin &&
+                          event.clickOrigin !== 'center' &&
+                          event.interactionType === 'click' && (
+                            <span className="text-[8px] bg-accent/20 text-accent px-1.5 py-0.5 rounded uppercase font-bold">
+                              {event.clickOrigin}
+                            </span>
+                          )}
+                        <span className="text-[8px] bg-white/10 px-1.5 py-0.5 rounded text-white/40 font-mono italic">
+                          {event.duration}ms
+                        </span>
+                      </div>
+                      <p className="text-[9px] text-white/30 truncate font-mono mt-1 opacity-60">
+                        {event.selector || 'system:wait'}
+                      </p>
+                    </div>
+
+                    <div className="flex items-center gap-1">
+                      <button
+                        onClick={() => {
+                          setEditingEventId(event.id);
+                          setEditForm(event);
+                        }}
+                        className="p-2 text-white/0 group-hover:text-white/40 hover:text-white hover:bg-white/10 rounded-xl transition-all"
+                      >
+                        <Settings2 size={14} />
+                      </button>
+                      <button
+                        onClick={() => removeEvent(event.id)}
+                        className="p-2 text-white/0 group-hover:text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded-xl transition-all"
+                      >
+                        <Trash2 size={14} />
+                      </button>
+                    </div>
+                  </Reorder.Item>
+                ))
+              )}
+            </Reorder.Group>
+          </div>
+        </div>
+      )}
+
+      {/* Industrial Selector Highlighter - handled inside iframe via PickingHelper */}
+
+      {/* Picking Tooltip */}
+      {pickingMode && (
+        <div className="fixed top-8 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
+          <div className="bg-accent text-primary-dark px-6 py-3 rounded-full flex items-center gap-4 shadow-[0_20px_40px_rgba(130,237,32,0.4)] animate-reveal border border-primary-dark/10">
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 rounded-full bg-primary-dark animate-pulse" />
+              <span className="font-black uppercase tracking-widest text-xs">
+                Assigning {pickingMode}
+              </span>
+            </div>
+            <div className="w-px h-6 bg-primary-dark/20" />
+            <button
+              onClick={() => {
+                setPickingMode(null);
+                setHoveredElement(null);
+              }}
+              className="text-[10px] font-bold uppercase tracking-widest opacity-60 hover:opacity-100 transition-opacity bg-primary-dark/10 px-3 py-1.5 rounded-full"
+            >
+              ESC to Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      <PlaybackCursor />
+
+      {/* 3. Event Options Panel (Sidebar-like) */}
+      <AnimatePresence>
+        {editingEventId && (
+          <div className="fixed inset-y-0 right-0 w-[350px] bg-black/95 backdrop-blur-3xl border-l border-white/10 z-[11000] pointer-events-auto p-8 shadow-[-40px_0_100px_rgba(0,0,0,0.9)] flex flex-col">
+            <div className="flex items-center justify-between mb-8">
+              <h3 className="text-white font-black uppercase tracking-tighter text-xl">
+                Event Options
+              </h3>
+              <button
+                onClick={() => setEditingEventId(null)}
+                className="p-2 text-white/40 hover:text-white transition-colors"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <div className="flex-1 space-y-8 overflow-y-auto pr-2 scrollbar-hide">
+              {/* Type Display */}
+              <div className="space-y-3">
+                <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-white/30 leading-none">
+                  Interaction Type
+                </label>
+                <div className="flex gap-2 p-1 bg-white/5 rounded-2xl border border-white/5">
+                  <button
+                    onClick={() =>
+                      setEditForm((prev) => ({ ...prev, type: 'mouse', interactionType: 'click' }))
+                    }
+                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'mouse' && editForm.interactionType === 'click' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
+                  >
+                    <MousePointer2 size={14} />
+                    <span className="text-[10px] font-black uppercase">Click</span>
+                  </button>
+                  <button
+                    onClick={() =>
+                      setEditForm((prev) => ({ ...prev, type: 'mouse', interactionType: 'hover' }))
+                    }
+                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'mouse' && editForm.interactionType === 'hover' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
+                  >
+                    <Eye size={14} />
+                    <span className="text-[10px] font-black uppercase">Hover</span>
+                  </button>
+                  <button
+                    onClick={() => setEditForm((prev) => ({ ...prev, type: 'scroll' }))}
+                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'scroll' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
+                  >
+                    <Scroll size={14} />
+                    <span className="text-[10px] font-black uppercase">Scroll</span>
+                  </button>
+                  <button
+                    onClick={() => setEditForm((prev) => ({ ...prev, type: 'wait' }))}
+                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl transition-all border ${editForm.type === 'wait' ? 'bg-accent text-primary-dark border-accent' : 'text-white/40 border-transparent hover:border-white/10'}`}
+                  >
+                    <Clock size={14} />
+                    <span className="text-[10px] font-black uppercase">Wait</span>
+                  </button>
+                </div>
+              </div>
+
+              {/* Precise Click Origin */}
+              {editForm.type === 'mouse' && editForm.interactionType === 'click' && (
+                <div className="space-y-4">
+                  <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-white/30 leading-none">
+                    Click Origin
+                  </label>
+                  <div className="grid grid-cols-3 gap-2 p-2 bg-white/5 rounded-2xl border border-white/5">
+                    {[
+                      { id: 'top-left', label: 'TL' },
+                      { id: 'top-right', label: 'TR' },
+                      { id: 'center', label: 'CTR' },
+                      { id: 'bottom-left', label: 'BL' },
+                      { id: 'bottom-right', label: 'BR' },
+                    ].map((origin) => (
+                      <button
+                        key={origin.id}
+                        onClick={() =>
+                          setEditForm((prev) => ({ ...prev, clickOrigin: origin.id as any }))
+                        }
+                        className={`py-3 rounded-xl text-[10px] font-black uppercase tracking-tighter transition-all border ${editForm.clickOrigin === origin.id ? 'bg-accent text-primary-dark border-accent' : 'bg-transparent text-white/40 border-white/5 hover:border-white/20'}`}
+                      >
+                        {origin.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Timing */}
+              <div className="space-y-4">
+                <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-white/30 leading-none flex items-center justify-between">
+                  <span>Timeline Allocation</span>
+                  <span className="text-accent">{editForm.duration}ms</span>
+                </label>
+                <input
+                  type="range"
+                  min="0"
+                  max="5000"
+                  step="100"
+                  value={editForm.duration || 1000}
+                  onChange={(e) =>
+                    setEditForm((prev) => ({ ...prev, duration: parseInt(e.target.value) }))
+                  }
+                  className="w-full h-1 bg-white/10 rounded-lg appearance-none cursor-pointer accent-accent"
+                />
+              </div>
+
+              {/* Zoom & Effects */}
+              <div className="space-y-6">
+                <div className="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 group hover:border-white/20 transition-all">
+                  <div className="flex items-center gap-3">
+                    <Maximize2 size={18} className="text-white/40" />
+                    <span className="text-xs font-bold text-white uppercase tracking-wider">
+                      Zoom Shift
+                    </span>
+                  </div>
+                  <input
+                    type="number"
+                    step="0.1"
+                    min="1"
+                    max="3"
+                    value={editForm.zoom || 1}
+                    onChange={(e) =>
+                      setEditForm((prev) => ({ ...prev, zoom: parseFloat(e.target.value) }))
+                    }
+                    className="w-16 bg-white/10 border border-white/10 rounded-lg px-2 py-1 text-xs text-white text-center font-mono"
+                  />
+                </div>
+
+                <button
+                  onClick={() => setEditForm((prev) => ({ ...prev, motionBlur: !prev.motionBlur }))}
+                  className={`flex items-center justify-between w-full p-4 rounded-2xl border transition-all ${editForm.motionBlur ? 'bg-accent/10 border-accent/30 text-accent' : 'bg-white/5 border-white/5 text-white/40'}`}
+                >
+                  <div className="flex items-center gap-3">
+                    <Box size={18} />
+                    <span className="text-xs font-bold uppercase tracking-wider">Motion Blur</span>
+                  </div>
+                  {editForm.motionBlur ? <Check size={18} /> : <div className="w-[18px]" />}
+                </button>
+
+                {editForm.type === 'mouse' && editForm.interactionType === 'click' && (
+                  <button
+                    onClick={() => setEditForm((prev) => ({ ...prev, realClick: !prev.realClick }))}
+                    className={`flex items-center justify-between w-full p-4 rounded-2xl border transition-all ${editForm.realClick ? 'bg-orange-500/10 border-orange-500/30 text-orange-400' : 'bg-white/5 border-white/5 text-white/40'}`}
+                  >
+                    <div className="flex items-center gap-3">
+                      <ExternalLink size={18} />
+                      <div className="flex flex-col items-start">
+                        <span className="text-xs font-bold uppercase tracking-wider">
+                          Trigger Navigation
+                        </span>
+                        <span className="text-[8px] opacity-60">
+                          Allows URL transitions in Studio
+                        </span>
+                      </div>
+                    </div>
+                    {editForm.realClick ? <Check size={18} /> : <div className="w-[18px]" />}
+                  </button>
+                )}
+              </div>
+            </div>
+
+            <button
+              onClick={saveEdit}
+              className="mt-8 py-5 bg-accent text-primary-dark text-xs font-black uppercase tracking-[0.2em] rounded-2xl shadow-2xl shadow-accent/20 hover:scale-[1.02] transition-all"
+            >
+              Commit Changes
+            </button>
+          </div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

components/record-mode/RecordModeVisuals.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import React from 'react';
+import { useRecordMode } from './RecordModeContext';
+
+export function RecordModeVisuals({ children }: { children: React.ReactNode }) {
+    const { isActive, isPlaying, zoomLevel, cursorPosition, isBlurry } = useRecordMode();
+    const [mounted, setMounted] = React.useState(false);
+    const [isEmbedded, setIsEmbedded] = React.useState(false);
+    const [iframeUrl, setIframeUrl] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        setMounted(true);
+        // Explicit non-magical detection
+        const embedded = window.location.search.includes('embedded=true') || window.name === 'record-mode-iframe';
+        setIsEmbedded(embedded);
+
+        if (!embedded) {
+            const url = new URL(window.location.href);
+            url.searchParams.set('embedded', 'true');
+            setIframeUrl(url.toString());
+        }
+    }, [isEmbedded]);
+
+    // Hydration Guard: Match server on first render
+    if (!mounted) return <>{children}</>;
+
+    // Recursion Guard: If we are already in an embedded iframe, 
+    // strictly return just the children to prevent Inception.
+    if (isEmbedded) {
+        return (
+            <>
+                <style dangerouslySetInnerHTML={{
+                    __html: `
+                    /* Harder Isolation: Hide ALL potentially duplicate overlays and DEV TOOLS */
+                    #nextjs-portal, 
+                    #nextjs-portal-root,
+                    [data-nextjs-toast-wrapper],
+                    .nextjs-static-indicator,
+                    [data-nextjs-indicator],
+                    [class*="nextjs-"],
+                    [id*="nextjs-"],
+                    nextjs-portal,
+                    #feedback-overlay,
+                    .feedback-ui-root,
+                    .feedback-ui-ignore,
+                    [class*="z-[9999]"],
+                    [class*="z-[10000]"],
+                    [style*="z-index: 9999"],
+                    [style*="z-index: 10000"],
+                    .fixed.bottom-6.left-6,
+                    .fixed.bottom-6.left-1\/2,
+                    .feedback-ui-overlay,
+                    [id^="feedback-"],
+                    [class^="feedback-"] { 
+                        display: none !important; 
+                        opacity: 0 !important;
+                        visibility: hidden !important;
+                        pointer-events: none !important;
+                        z-index: -10000 !important;
+                    }
+                    
+                    /* Nuclear Option 2.0: Kill ALL scrollbars on ALL elements */
+                    * {
+                        scrollbar-width: none !important;
+                        -ms-overflow-style: none !important;
+                    }
+                    *::-webkit-scrollbar {
+                        display: none !important;
+                        width: 0 !important;
+                        height: 0 !important;
+                    }
+
+                    html, body {
+                        border-radius: 3rem;
+                        background: #050505 !important;
+                        color: white !important;
+                        overflow-x: hidden !important;
+                        overflow-y: auto !important;
+                    }
+                `}} />
+                {children}
+            </>
+        );
+    }
+
+    return (
+        <>
+            {/* Global Style for Body Lock */}
+            {isActive && (
+                <style dangerouslySetInnerHTML={{
+                    __html: `
+                    html, body { 
+                        overflow: hidden !important; 
+                        height: 100vh !important; 
+                        position: fixed !important;
+                        width: 100vw !important;
+                    }
+                    /* Kill Next.js Dev tools on host while Studio is active */
+                    #nextjs-portal, 
+                    [data-nextjs-toast-wrapper],
+                    .nextjs-static-indicator {
+                        display: none !important;
+                    }
+                `}} />
+            )}
+
+            <div className={`transition-all duration-1000 ${isActive ? 'fixed inset-0 z-[9997] bg-[#020202] flex items-center justify-center p-6 md:p-12 lg:p-20' : 'relative w-full'}`}>
+                {/* Studio Background - Only visible when active */}
+                {isActive && (
+                    <div className="absolute inset-0 z-0 pointer-events-none overflow-hidden">
+                        <div className="absolute inset-0 bg-gradient-to-br from-[#03110a] via-[#020202] to-[#030a11] animate-pulse duration-[10s]" />
+                        <div className="absolute -top-[60%] -left-[50%] w-[140%] h-[140%] rounded-full opacity-[0.7]"
+                            style={{ background: 'radial-gradient(circle, #10b981 0%, transparent 70%)', filter: 'blur(160px)', animation: 'mesh-float-1 18s ease-in-out infinite' }} />
+                        <div className="absolute -bottom-[60%] -right-[50%] w-[130%] h-[130%] rounded-full opacity-[0.55]"
+                            style={{ background: 'radial-gradient(circle, #06b6d4 0%, transparent 70%)', filter: 'blur(150px)', animation: 'mesh-float-2 22s ease-in-out infinite' }} />
+                        <div className="absolute -top-[30%] -right-[40%] w-[100%] h-[100%] rounded-full opacity-[0.5]"
+                            style={{ background: 'radial-gradient(circle, #82ed20 0%, transparent 70%)', filter: 'blur(130px)', animation: 'mesh-float-3 14s ease-in-out infinite' }} />
+                        <div className="absolute -bottom-[50%] -left-[40%] w-[110%] h-[110%] rounded-full opacity-[0.45]"
+                            style={{ background: 'radial-gradient(circle, #2563eb 0%, transparent 70%)', filter: 'blur(140px)', animation: 'mesh-float-4 20s ease-in-out infinite' }} />
+                        <div className="absolute inset-0 opacity-[0.12] mix-blend-overlay" style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`, backgroundSize: '128px 128px' }} />
+                        <div className="absolute inset-0 opacity-[0.06]" style={{ backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px)' }} />
+                    </div>
+                )}
+
+                <div
+                    className={`transition-all duration-700 ease-in-out relative z-10 w-full ${isActive ? 'h-full max-h-[1000px] max-w-[1600px] drop-shadow-[0_60px_150px_rgba(0,0,0,1)] scale-in' : 'h-full'}`}
+                    style={{
+                        transform: isPlaying ? `scale(${zoomLevel})` : undefined,
+                        transformOrigin: isPlaying ? `${cursorPosition.x}px ${cursorPosition.y}px` : 'center',
+                        filter: isBlurry ? 'blur(4px)' : 'none',
+                        willChange: 'transform, filter',
+                        WebkitBackfaceVisibility: 'hidden',
+                        backfaceVisibility: 'hidden',
+                    }}
+                >
+                    <div className={isActive ? 'relative h-full w-full rounded-[3rem] overflow-hidden bg-[#050505] isolate' : 'w-full h-full'}
+                        style={{ transform: isActive ? 'translateZ(0)' : 'none' }}>
+
+                        {isActive && (
+                            <>
+                                <div className="absolute inset-0 rounded-[3rem] border border-white/[0.08] pointer-events-none z-50" />
+                                <div className="absolute inset-[-2px] rounded-[3rem] pointer-events-none z-20"
+                                    style={{ background: 'linear-gradient(135deg, rgba(16,185,129,0.15), rgba(130,237,32,0.15))', animation: 'pulse-ring 4s ease-in-out infinite' }} />
+                                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#82ed20]/[0.05] to-transparent h-[15%] w-full top-[-15%] animate-scan-slow z-50 pointer-events-none opacity-20" />
+                            </>
+                        )}
+
+                        <div className={isActive ? "w-full h-full rounded-[3rem] overflow-hidden relative" : "w-full h-full relative"}
+                            style={{
+                                WebkitMaskImage: isActive ? '-webkit-radial-gradient(white, black)' : 'none',
+                                transform: isActive ? 'translateZ(0)' : 'none'
+                            }}>
+                            {isActive && iframeUrl ? (
+                                <iframe
+                                    src={iframeUrl}
+                                    name="record-mode-iframe"
+                                    className="w-full h-full border-0 block"
+                                    style={{
+                                        backgroundColor: '#050505',
+                                        scrollbarWidth: 'none',
+                                        msOverflowStyle: 'none',
+                                        height: '100%',
+                                        width: '100%'
+                                    }}
+                                />
+                            ) : (
+                                <div className={isActive ? 'blur-2xl opacity-20 pointer-events-none scale-95 transition-all duration-700' : 'transition-all duration-700'}>
+                                    {children}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                <style jsx global>{`
+                    @keyframes mesh-float-1 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 33% { transform: translate(15%, 10%) scale(1.1) rotate(5deg); } 66% { transform: translate(-10%, 20%) scale(0.9) rotate(-3deg); } }
+                    @keyframes mesh-float-2 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 33% { transform: translate(-20%, -15%) scale(1.2) rotate(-8deg); } 66% { transform: translate(15%, -10%) scale(0.8) rotate(4deg); } }
+                    @keyframes mesh-float-3 { 0%, 100% { transform: translate(0, 0) scale(1.2); } 50% { transform: translate(20%, -25%) scale(0.7); } }
+                    @keyframes mesh-float-4 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-15%, 25%) scale(1.1); } }
+                    @keyframes pulse-ring { 0%, 100% { opacity: 0.15; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.005); } }
+                    @keyframes scan-slow { 0% { transform: translateY(-100%); opacity: 0; } 5% { opacity: 0.2; } 95% { opacity: 0.2; } 100% { transform: translateY(800%); opacity: 0; } }
+                    @keyframes scale-in { 0% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
+                    .scale-in { animation: scale-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+                `}</style>
+            </div>
+        </>
+    );
+}

components/record-mode/ToolCoordinator.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRecordMode } from './RecordModeContext';
+import { useSearchParams } from 'next/navigation';
+import { FeedbackOverlay } from '@mintel/next-feedback';
+import { RecordModeOverlay } from './RecordModeOverlay';
+import { PickingHelper } from './PickingHelper';
+import { config } from '@/lib/config';
+
+export function ToolCoordinator({ isEmbedded: isEmbeddedProp }: { isEmbedded?: boolean }) {
+    const { isActive, setIsActive, isFeedbackActive, setIsFeedbackActive } = useRecordMode();
+    const [isEmbedded, setIsEmbedded] = useState(false);
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+        const embedded =
+            isEmbeddedProp ||
+            window.location.search.includes('embedded=true') ||
+            window.name === 'record-mode-iframe' ||
+            (window.self !== window.top);
+        setIsEmbedded(embedded);
+    }, [isEmbeddedProp]);
+
+    if (!mounted) return null;
+
+    // ABSOLUTE Priority 1: Inside Iframe - ONLY Rendering PickingHelper
+    if (isEmbedded) {
+        return <PickingHelper />;
+    }
+
+    // ABSOLUTE Priority 2: Record Mode Studio Active - NO OTHER TOOLS ALLOWED
+    if (isActive) {
+        return <RecordModeOverlay />;
+    }
+
+    // Priority 3: Feedback Tool Active - NO OTHER TOOLS ALLOWED
+    if (isFeedbackActive) {
+        return (
+            <FeedbackOverlay
+                isActive={isFeedbackActive}
+                onActiveChange={(active) => setIsFeedbackActive(active)}
+            />
+        );
+    }
+
+    // Baseline: Both toggle buttons (inactive state)
+    // Only render if neither is active to prevent any overlapping residues
+    // IMPORTANT: FeedbackOverlay must be rendered with isActive={false} to provide the toggle button,
+    // but only if Record Mode is not active.
+    return (
+        <div className="feedback-ui-ignore">
+            {config.feedbackEnabled && (
+                <FeedbackOverlay
+                    isActive={false}
+                    onActiveChange={(active) => setIsFeedbackActive(active)}
+                />
+            )}
+            <RecordModeOverlay />
+        </div>
+    );
+}

directus/schema/minimal_schema.yaml

@@ -0,0 +1,83 @@
+version: 1
+directus: 11.14.1
+vendor: postgres
+collections:
+  - collection: contact_submissions
+    meta:
+      accountability: all
+      archive_app_filter: true
+      collapse: open
+      collection: contact_submissions
+      color: '#002b49'
+      display_template: '{{name}} | {{email}}'
+      hidden: false
+      icon: contact_mail
+      singleton: false
+    schema:
+      name: contact_submissions
+fields:
+  - collection: contact_submissions
+    field: id
+    type: uuid
+    meta:
+      collection: contact_submissions
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: contact_submissions
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  - collection: contact_submissions
+    field: name
+    type: string
+    meta:
+      collection: contact_submissions
+      field: name
+      interface: input
+      sort: 2
+    schema:
+      name: name
+      table: contact_submissions
+      data_type: character varying
+  - collection: contact_submissions
+    field: email
+    type: string
+    meta:
+      collection: contact_submissions
+      field: email
+      interface: input
+      sort: 3
+    schema:
+      name: email
+      table: contact_submissions
+      data_type: character varying
+  - collection: contact_submissions
+    field: message
+    type: text
+    meta:
+      collection: contact_submissions
+      field: message
+      interface: textarea
+      sort: 4
+    schema:
+      name: message
+      table: contact_submissions
+      data_type: text
+  - collection: contact_submissions
+    field: date_created
+    type: timestamp
+    meta:
+      collection: contact_submissions
+      field: date_created
+      interface: datetime
+      readonly: true
+      sort: 5
+    schema:
+      name: date_created
+      table: contact_submissions
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+relations: []

directus/schema/snapshot.yaml

@@ -6,51 +6,474 @@ collections:
     meta:
       accountability: all
       archive_app_filter: true
-      archive_field: null
-      archive_value: null
       collapse: open
       collection: contact_submissions
       color: '#002b49'
-      display_template: '{{first_name}} {{last_name}} | {{subject}}'
-      group: null
+      display_template: '{{name}} | {{email}}'
       hidden: false
       icon: contact_mail
-      item_duplication_fields: null
-      note: null
-      preview_url: null
       singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
     schema:
       name: contact_submissions
   - collection: product_requests
     meta:
       accountability: all
       archive_app_filter: true
-      archive_field: null
-      archive_value: null
       collapse: open
       collection: product_requests
       color: '#002b49'
-      display_template: null
-      group: null
+      display_template: '{{product_name}} | {{email}}'
       hidden: false
       icon: inventory
-      item_duplication_fields: null
-      note: null
-      preview_url: null
       singleton: false
-      sort: null
-      sort_field: null
-      translations: null
-      unarchive_value: null
-      versioning: false
     schema:
       name: product_requests
-fields: []
+  - collection: products
+    meta:
+      accountability: all
+      collection: products
+      icon: inventory_2
+      singleton: false
+    schema:
+      name: products
+  - collection: products_translations
+    meta:
+      accountability: all
+      collection: products_translations
+      hidden: true
+    schema:
+      name: products_translations
+  - collection: visual_feedback
+    meta:
+      accountability: all
+      archive_app_filter: true
+      collapse: open
+      collection: visual_feedback
+      color: '#002b49'
+      display_template: '{{user_name}} | {{type}}: {{text}}'
+      hidden: false
+      icon: feedback
+      singleton: false
+      versioning: false
+    schema:
+      name: visual_feedback
+  - collection: visual_feedback_comments
+    meta:
+      accountability: all
+      archive_app_filter: true
+      collapse: open
+      collection: visual_feedback_comments
+      color: '#002b49'
+      display_template: '{{user_name}}: {{text}}'
+      hidden: false
+      icon: comment
+      singleton: false
+      versioning: false
+    schema:
+      name: visual_feedback_comments
+fields:
+  # contact_submissions
+  - collection: contact_submissions
+    field: id
+    type: uuid
+    meta:
+      collection: contact_submissions
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: contact_submissions
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  - collection: contact_submissions
+    field: name
+    type: string
+    meta:
+      collection: contact_submissions
+      field: name
+      interface: input
+      sort: 2
+    schema:
+      name: name
+      table: contact_submissions
+      data_type: character varying
+  - collection: contact_submissions
+    field: email
+    type: string
+    meta:
+      collection: contact_submissions
+      field: email
+      interface: input
+      sort: 3
+    schema:
+      name: email
+      table: contact_submissions
+      data_type: character varying
+  - collection: contact_submissions
+    field: message
+    type: text
+    meta:
+      collection: contact_submissions
+      field: message
+      interface: textarea
+      sort: 4
+    schema:
+      name: message
+      table: contact_submissions
+      data_type: text
+  - collection: contact_submissions
+    field: date_created
+    type: timestamp
+    meta:
+      collection: contact_submissions
+      field: date_created
+      interface: datetime
+      readonly: true
+      sort: 5
+    schema:
+      name: date_created
+      table: contact_submissions
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+
+  # product_requests
+  - collection: product_requests
+    field: id
+    type: uuid
+    meta:
+      collection: product_requests
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: product_requests
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  - collection: product_requests
+    field: product_name
+    type: string
+    meta:
+      collection: product_requests
+      field: product_name
+      interface: input
+      sort: 2
+    schema:
+      name: product_name
+      table: product_requests
+      data_type: character varying
+  - collection: product_requests
+    field: email
+    type: string
+    meta:
+      collection: product_requests
+      field: email
+      interface: input
+      sort: 3
+    schema:
+      name: email
+      table: product_requests
+      data_type: character varying
+  - collection: product_requests
+    field: message
+    type: text
+    meta:
+      collection: product_requests
+      field: message
+      interface: textarea
+      sort: 4
+    schema:
+      name: message
+      table: product_requests
+      data_type: text
+  - collection: product_requests
+    field: date_created
+    type: timestamp
+    meta:
+      collection: product_requests
+      field: date_created
+      interface: datetime
+      readonly: true
+      sort: 5
+    schema:
+      name: date_created
+      table: product_requests
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+
+  # products
+  - collection: products
+    field: id
+    type: uuid
+    meta:
+      collection: products
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: products
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  
+  # products_translations
+  - collection: products_translations
+    field: id
+    type: integer
+    meta:
+      collection: products_translations
+      field: id
+      hidden: true
+    schema:
+      name: id
+      table: products_translations
+      data_type: integer
+      is_primary_key: true
+      has_auto_increment: true
+
+  # visual_feedback (from current snapshot)
+  - collection: visual_feedback
+    field: id
+    type: uuid
+    meta:
+      collection: visual_feedback
+      field: id
+      hidden: true
+      sort: 1
+    schema:
+      name: id
+      table: visual_feedback
+      data_type: uuid
+      is_nullable: false
+      is_primary_key: true
+  - collection: visual_feedback
+    field: status
+    type: string
+    meta:
+      collection: visual_feedback
+      display: labels
+      interface: select-dropdown
+      sort: 2
+    schema:
+      name: status
+      table: visual_feedback
+      data_type: character varying
+      default_value: open
+      is_nullable: true
+  - collection: visual_feedback
+    field: type
+    type: string
+    meta:
+      collection: visual_feedback
+      display: labels
+      interface: select-dropdown
+      sort: 3
+    schema:
+      name: type
+      table: visual_feedback
+      data_type: character varying
+      is_nullable: true
+  - collection: visual_feedback
+    field: text
+    type: text
+    meta:
+      collection: visual_feedback
+      interface: input-multiline
+      sort: 4
+    schema:
+      name: text
+      table: visual_feedback
+      data_type: text
+      is_nullable: true
+  - collection: visual_feedback
+    field: url
+    type: string
+    meta:
+      collection: visual_feedback
+      interface: input
+      readonly: true
+      sort: 5
+    schema:
+      name: url
+      table: visual_feedback
+      data_type: character varying
+      is_nullable: true
+  - collection: visual_feedback
+    field: user_info_group
+    type: alias
+    meta:
+      collection: visual_feedback
+      field: user_info_group
+      interface: group-detail
+      sort: 6
+      special:
+        - alias
+        - no-data
+        - group
+  - collection: visual_feedback
+    field: user_name
+    type: string
+    meta:
+      collection: visual_feedback
+      field: user_name
+      group: user_info_group
+      interface: input
+      sort: 1
+    schema:
+      name: user_name
+      table: visual_feedback
+      data_type: character varying
+      is_nullable: true
+  - collection: visual_feedback
+    field: user_identity
+    type: string
+    meta:
+      collection: visual_feedback
+      field: user_identity
+      group: user_info_group
+      interface: input
+      readonly: true
+      sort: 2
+    schema:
+      name: user_identity
+      table: visual_feedback
+      data_type: character varying
+      is_nullable: true
+  - collection: visual_feedback
+    field: technical_details_group
+    type: alias
+    meta:
+      collection: visual_feedback
+      field: technical_details_group
+      interface: group-detail
+      sort: 7
+      special:
+        - alias
+        - no-data
+        - group
+  - collection: visual_feedback
+    field: selector
+    type: string
+    meta:
+      collection: visual_feedback
+      field: selector
+      group: technical_details_group
+      interface: input
+      readonly: true
+      sort: 1
+    schema:
+      name: selector
+      table: visual_feedback
+      data_type: character varying
+      is_nullable: true
+  - collection: visual_feedback
+    field: x
+    type: float
+    meta:
+      collection: visual_feedback
+      field: x
+      group: technical_details_group
+      interface: input
+      sort: 2
+    schema:
+      name: x
+      table: visual_feedback
+      data_type: real
+      is_nullable: true
+  - collection: visual_feedback
+    field: 'y'
+    type: float
+    meta:
+      collection: visual_feedback
+      field: 'y'
+      group: technical_details_group
+      interface: input
+      sort: 3
+    schema:
+      name: 'y'
+      table: visual_feedback
+      data_type: real
+      is_nullable: true
+  - collection: visual_feedback
+    field: date_created
+    type: timestamp
+    meta:
+      collection: visual_feedback
+      interface: datetime
+      readonly: true
+      sort: 8
+    schema:
+      name: date_created
+      table: visual_feedback
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+      is_nullable: true
+  - collection: visual_feedback_comments
+    field: id
+    type: uuid
+    meta:
+      collection: visual_feedback_comments
+      field: id
+      hidden: true
+    schema:
+      name: id
+      table: visual_feedback_comments
+      data_type: uuid
+      is_primary_key: true
+  - collection: visual_feedback_comments
+    field: feedback_id
+    type: uuid
+    meta:
+      collection: visual_feedback_comments
+      field: feedback_id
+      interface: select-relational
+      sort: 2
+    schema:
+      name: feedback_id
+      table: visual_feedback_comments
+      data_type: uuid
+  - collection: visual_feedback_comments
+    field: user_name
+    type: string
+    meta:
+      collection: visual_feedback_comments
+      field: user_name
+      interface: input
+      sort: 3
+    schema:
+      name: user_name
+      table: visual_feedback_comments
+      data_type: character varying
+  - collection: visual_feedback_comments
+    field: text
+    type: text
+    meta:
+      collection: visual_feedback_comments
+      field: text
+      interface: input-multiline
+      sort: 4
+    schema:
+      name: text
+      table: visual_feedback_comments
+      data_type: text
+  - collection: visual_feedback_comments
+    field: date_created
+    type: timestamp
+    meta:
+      collection: visual_feedback_comments
+      interface: datetime
+      readonly: true
+      sort: 5
+    schema:
+      name: date_created
+      table: visual_feedback_comments
+      data_type: timestamp with time zone
+      default_value: CURRENT_TIMESTAMP
+
 systemFields:
   - collection: directus_activity
     field: timestamp
@@ -64,4 +487,18 @@ systemFields:
     field: parent
     schema:
       is_indexed: true
-relations: []
+
+relations:
+  - collection: visual_feedback_comments
+    field: feedback_id
+    related_collection: visual_feedback
+    schema:
+      column: feedback_id
+      foreign_key_column: id
+      foreign_key_table: visual_feedback
+      table: visual_feedback_comments
+    meta:
+      many_collection: visual_feedback_comments
+      many_field: feedback_id
+      one_collection: visual_feedback
+      one_field: null

docker-compose.override.yml

@@ -1,83 +1,43 @@
 services:
   klz-app:
-    image: node:20-alpine
-    working_dir: /app
-    command: sh -c "npm install --legacy-peer-deps && npx next dev"
-    networks:
-      - default
-      - infra
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: development
     volumes:
       - .:/app
+      - /app/node_modules
+      - /app/.next
     environment:
-      NODE_ENV: development
-      # Docker Internal Communication
-      DIRECTUS_URL: http://directus:8055
-      INTERNAL_DIRECTUS_URL: http://directus:8055
-      INFRA_DIRECTUS_URL: http://cms-infra-infra-cms-1:8055
-      GATEKEEPER_URL: http://gatekeeper:3000
-      DIRECTUS_API_TOKEN: ${DIRECTUS_API_TOKEN}
-      INFRA_DIRECTUS_TOKEN: ${INFRA_DIRECTUS_TOKEN}
-      NEXT_PUBLIC_FEEDBACK_ENABLED: ${NEXT_PUBLIC_FEEDBACK_ENABLED}
-      GATEKEEPER_BYPASS_ENABLED: ${GATEKEEPER_BYPASS_ENABLED}
-    ports:
-      - "3000:3000"
+      - WATCHPACK_POLLING=true # Useful for Docker volume mounting issues on some systems
+    restart: "no"
+    container_name: klz-app-dev
     labels:
       - "traefik.enable=true"
-      # Global local settings
-      - "traefik.http.routers.klz-cables-local.entrypoints=web"
-      - "traefik.http.routers.klz-cables-local.rule=Host(`klz.localhost`)"
-      - "traefik.http.routers.klz-cables-local.tls=false"
-      - "traefik.http.routers.klz-cables-local.middlewares="
-      - "traefik.http.routers.klz-cables-local.service=klz-cables-local"
-      - "traefik.http.services.klz-cables-local.loadbalancer.server.port=3000"
+      # Clear any production middlewares/headers redirect
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.middlewares="
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.rule=Host(`${TRAEFIK_HOST:-klz.localhost}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.entrypoints=web"
+      # Configure main router for local HTTP without auth
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.rule=Host(`${TRAEFIK_HOST:-klz.localhost}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.entrypoints=web"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.middlewares="
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls=false"
       - "traefik.docker.network=infra"
 
-      # Web direct router
-      - "traefik.http.routers.klz-cables-local-web.entrypoints=web"
-      - "traefik.http.routers.klz-cables-local-web.rule=Host(`klz.localhost`)"
-      - "traefik.http.routers.klz-cables-local-web.tls=false"
-      - "traefik.http.routers.klz-cables-local-web.middlewares="
-      - "traefik.http.routers.klz-cables-local-web.service=klz-cables-local"
-
-  directus:
-    networks:
-      - default
-      - infra
+  directus-cms:
+    container_name: klz-cms-dev
+    restart: "no"
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.klz-cables-directus-local.entrypoints=web"
-      - "traefik.http.routers.klz-cables-directus-local.rule=Host(`cms.klz.localhost`)"
-      - "traefik.http.routers.klz-cables-directus-local.tls=false"
-      - "traefik.http.routers.klz-cables-directus-local.middlewares="
-      - "traefik.http.routers.klz-cables-directus-local.service=klz-cables-directus-local"
-      - "traefik.http.services.klz-cables-directus-local.loadbalancer.server.port=8055"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-cms.rule=Host(`${DIRECTUS_HOST:-cms.klz.localhost}`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-cms.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-cms.service=${PROJECT_NAME:-klz-cables}-cms"
+      - "traefik.http.services.${PROJECT_NAME:-klz-cables}-cms.loadbalancer.server.port=8055"
       - "traefik.docker.network=infra"
-    ports:
-      - "${DIRECTUS_PORT:-8055}:8055"
-    environment:
-      PUBLIC_URL: http://cms.klz.localhost
+
+  klz-db:
+    restart: "no"
 
   gatekeeper:
-    image: node:20-alpine
-    working_dir: /app/packages/gatekeeper
-    command: sh -c "corepack enable && CI=true NPM_TOKEN=dummy pnpm install --no-frozen-lockfile && pnpm dev"
-    volumes:
-      - /Users/marcmintel/Projects/at-mintel:/app
-    networks:
-      - default
-      - infra
-    environment:
-      DIRECTUS_URL: http://directus:8055
-      NEXT_PUBLIC_BASE_URL: http://gatekeeper.klz.localhost
-      DIRECTUS_ADMIN_EMAIL: ${DIRECTUS_ADMIN_EMAIL}
-      DIRECTUS_ADMIN_PASSWORD: ${DIRECTUS_ADMIN_PASSWORD}
-      COOKIE_DOMAIN: localhost
-      NODE_ENV: development
-    labels:
-      - "traefik.enable=true"
-      - "traefik.http.routers.klz-cables-gatekeeper-local.entrypoints=web"
-      - "traefik.http.routers.klz-cables-gatekeeper-local.rule=Host(`gatekeeper.klz.localhost`)"
-      - "traefik.http.routers.klz-cables-gatekeeper-local.tls=false"
-      - "traefik.http.routers.klz-cables-gatekeeper-local.service=klz-cables-gatekeeper-local"
-      - "traefik.http.services.klz-cables-gatekeeper-local.loadbalancer.server.port=3000"
-      - "traefik.docker.network=infra"
+    restart: "no"

docker-compose.yml

@@ -1,7 +1,13 @@
 services:
   klz-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}
+        DIRECTUS_URL: ${DIRECTUS_URL}
     image: registry.infra.mintel.me/mintel/klz-cables.com:${IMAGE_TAG:-latest}
-    restart: always
+    restart: unless-stopped
     networks:
       - default
       - infra
@@ -10,24 +16,25 @@ services:
     labels:
       - "traefik.enable=true"
       # HTTP ⇒ HTTPS redirect
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.rule=${TRAEFIK_HOST_RULE:-Host(`klz-cables.com`)}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.rule=${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}"
       - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.entrypoints=web"
       - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-web.middlewares=redirect-https"
-      # HTTPS router (Protected)
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.rule=${TRAEFIK_HOST_RULE:-Host(`klz-cables.com`)}"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.entrypoints=websecure"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls.certresolver=le"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls=true"
+      # HTTPS router (Standard)
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.rule=${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.tls=${TRAEFIK_TLS:-false}"
       - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.service=${PROJECT_NAME:-klz-cables}"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.middlewares=${PROJECT_NAME:-klz-cables}-ratelimit,${PROJECT_NAME:-klz-cables}-forward,${AUTH_MIDDLEWARE:-${PROJECT_NAME:-klz-cables}-compress}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}.middlewares=${AUTH_MIDDLEWARE:-${PROJECT_NAME:-klz-cables}-ratelimit,${PROJECT_NAME:-klz-cables}-forward,${PROJECT_NAME:-klz-cables}-compress}"
 
-      # HTTPS router (Unprotected - for Analytics & Errors)
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.rule=${TRAEFIK_HOST_RULE:-Host(`klz-cables.com`)} && PathPrefix(`/stats`, `/errors`)"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.entrypoints=websecure"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.tls.certresolver=le"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.tls=true"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.service=${PROJECT_NAME:-klz-cables}"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-unprotected.middlewares=${PROJECT_NAME:-klz-cables}-ratelimit,${PROJECT_NAME:-klz-cables}-forward,${PROJECT_NAME:-klz-cables}-compress"
+      # Public Router (Whitelist for OG Images, Sitemaps, Health)
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && (PathPrefix(`/health`, `/sitemap.xml`, `/robots.txt`, `/manifest.webmanifest`, `/api/og`) || PathRegexp(`.*opengraph-image.*`) || PathRegexp(`.*sitemap.*`))"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.tls=${TRAEFIK_TLS:-false}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.service=${PROJECT_NAME:-klz-cables}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.middlewares=${AUTH_MIDDLEWARE_UNPROTECTED:-${PROJECT_NAME:-klz-cables}-ratelimit,${PROJECT_NAME:-klz-cables}-forward,${PROJECT_NAME:-klz-cables}-compress}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-public.priority=2000"
 
       - "traefik.http.services.${PROJECT_NAME:-klz-cables}.loadbalancer.server.port=3000"
       - "traefik.http.services.${PROJECT_NAME:-klz-cables}.loadbalancer.server.scheme=http"
@@ -40,19 +47,27 @@ services:
       - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-forward.headers.customrequestheaders.X-Forwarded-Proto=https"
       - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-forward.headers.customrequestheaders.X-Forwarded-Ssl=on"
 
-      # Middleware Definitions
-      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-ratelimit.ratelimit.average=100"
-      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-ratelimit.ratelimit.burst=50"
-      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-auth.forwardauth.address=http://${PROJECT_NAME}-gatekeeper:3000/gatekeeper/api/verify"
+      # Authentication Middleware (ForwardAuth)
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-auth.forwardauth.address=http://${PROJECT_NAME:-klz-cables}-gatekeeper:3000/gatekeeper/api/verify"
       - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-auth.forwardauth.trustForwardHeader=true"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-auth.forwardauth.authRequestHeaders=X-Forwarded-Host,X-Forwarded-Proto,X-Forwarded-For,Cookie"
       - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-auth.forwardauth.authResponseHeaders=X-Auth-User"
 
+      # Rate Limit Middleware
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-ratelimit.ratelimit.average=100"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz-cables}-ratelimit.ratelimit.burst=50"
+    healthcheck:
+      test: [ "CMD", "curl", "-f", "http://127.0.0.1:3000/health" ]
+      interval: 15s
+      timeout: 10s
+      retries: 3
+      start_period: 45s
+
   gatekeeper:
-    image: registry.infra.mintel.me/mintel/gatekeeper:latest
-    container_name: ${PROJECT_NAME:-klz-cables}-gatekeeper
-    restart: always
+    profiles: [ "gatekeeper" ]
+    image: registry.infra.mintel.me/mintel/gatekeeper:v1.7.12
+    restart: unless-stopped
     networks:
-      default:
       infra:
         aliases:
           - ${PROJECT_NAME:-klz-cables}-gatekeeper
@@ -60,33 +75,27 @@ services:
       - ${ENV_FILE:-.env}
     environment:
       PORT: 3000
+      PROJECT_NAME: ${PROJECT_NAME:-KLZ Cables}
+      PROJECT_COLOR: "#82ed20"
       COOKIE_DOMAIN: ${COOKIE_DOMAIN}
-      AUTH_COOKIE_NAME: klz_gatekeeper_session
-      NEXT_PUBLIC_BASE_URL: https://gatekeeper.${TRAEFIK_HOST:-klz-cables.com}
-      GATEKEEPER_PASSWORD: ${GATEKEEPER_PASSWORD:-klz2026}
-      DIRECTUS_URL: ${DIRECTUS_URL}
-      DIRECTUS_ADMIN_EMAIL: ${DIRECTUS_ADMIN_EMAIL}
-      DIRECTUS_ADMIN_PASSWORD: ${DIRECTUS_ADMIN_PASSWORD}
+      AUTH_COOKIE_NAME: ${AUTH_COOKIE_NAME:-klz_gatekeeper_session}
+      GATEKEEPER_PASSWORD: ${GATEKEEPER_PASSWORD}
+      NEXT_PUBLIC_BASE_URL: ${GATEKEEPER_ORIGIN}
     labels:
       - "traefik.enable=true"
-      # Gatekeeper Router (Shared Host + dedicated Subdomain)
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.rule=(Host(`${TRAEFIK_HOST:-klz-cables.com}`) && PathPrefix(`/gatekeeper`)) || Host(`gatekeeper.${TRAEFIK_HOST:-klz-cables.com}`)"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.entrypoints=websecure"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.tls.certresolver=le"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.tls=true"
+      - "traefik.docker.network=infra"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.rule=(Host(`${TRAEFIK_HOST:-testing.klz-cables.com}`) && PathPrefix(`/gatekeeper`))"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.tls=${TRAEFIK_TLS:-false}"
       - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-gatekeeper.service=${PROJECT_NAME:-klz-cables}-gatekeeper"
-
       - "traefik.http.services.${PROJECT_NAME:-klz-cables}-gatekeeper.loadbalancer.server.port=3000"
       - "traefik.docker.network=infra"
 
-  directus:
-    image: directus/directus:11
-    restart: always
-    networks:
-      default:
-      infra:
-        aliases:
-          - ${PROJECT_NAME:-klz-cables}-directus
+  directus-cms:
+    image: registry.infra.mintel.me/mintel/directus:latest
+    restart: unless-stopped
+    command: [ "node", "cli.js", "start" ]
     env_file:
       - ${ENV_FILE:-.env}
     environment:
@@ -95,37 +104,35 @@ services:
       ADMIN_EMAIL: ${DIRECTUS_ADMIN_EMAIL}
       ADMIN_PASSWORD: ${DIRECTUS_ADMIN_PASSWORD}
       DB_CLIENT: 'pg'
-      DB_HOST: 'directus-db'
+      DB_HOST: 'klz-db'
       DB_PORT: '5432'
       DB_DATABASE: ${DIRECTUS_DB_NAME:-directus}
       DB_USER: ${DIRECTUS_DB_USER:-directus}
       DB_PASSWORD: ${DIRECTUS_DB_PASSWORD:-directus}
       WEBSOCKETS_ENABLED: 'true'
       PUBLIC_URL: ${DIRECTUS_URL:-https://cms.klz-cables.com}
-      # Error Tracking
-      SENTRY_DSN: ${SENTRY_DSN}
-      SENTRY_ENVIRONMENT: ${TARGET:-development}
-      LOGGER_LEVEL: ${LOG_LEVEL:-info}
+      HOST: '0.0.0.0'
+    networks:
+      - infra
     volumes:
       - ./directus/uploads:/directus/uploads
       - ./directus/extensions:/directus/extensions
       - ./directus/schema:/directus/schema
       - ./directus/migrations:/directus/migrations
+    healthcheck:
+      disable: true
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.rule=Host(`${DIRECTUS_HOST}`)"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.entrypoints=websecure"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.tls.certresolver=le"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.tls=true"
-      - "traefik.http.routers.${PROJECT_NAME:-klz-cables}-directus.middlewares=${PROJECT_NAME:-klz-cables}-forward,compress"
-      - "traefik.http.services.${PROJECT_NAME:-klz-cables}-directus.loadbalancer.server.port=8055"
+      - "traefik.http.routers.klz-production-cms.rule=Host(`cms.klz.localhost`)"
+      - "traefik.http.routers.klz-production-cms.entrypoints=web"
+      - "traefik.http.routers.klz-production-cms.priority=5000"
+      - "traefik.http.routers.klz-production-cms.tls=false"
+      - "traefik.http.routers.klz-production-cms.service=klz-production-cms-svc"
+      - "traefik.http.services.klz-production-cms-svc.loadbalancer.server.port=8055"
       - "traefik.docker.network=infra"
-
-  directus-db:
+  klz-db:
     image: postgres:15-alpine
-    restart: always
-    networks:
-      - default
+    restart: unless-stopped
     env_file:
       - ${ENV_FILE:-.env}
     environment:
@@ -134,6 +141,8 @@ services:
       POSTGRES_PASSWORD: ${DIRECTUS_DB_PASSWORD:-directus}
     volumes:
       - directus-db-data:/var/lib/postgresql/data
+    networks:
+      - infra
 
 networks:
   default:

final_lint_output.txt

@@ -0,0 +1,11 @@
+
+> klz-cables-nextjs@1.0.0 lint /Users/marcmintel/Projects/klz-2026
+> eslint .
+
+
+/Users/marcmintel/Projects/klz-2026/components/home/GallerySection.tsx
+  3:17  warning  'useState' is defined but never used   @typescript-eslint/no-unused-vars
+  3:27  warning  'useEffect' is defined but never used  @typescript-eslint/no-unused-vars
+
+✖ 2 problems (0 errors, 2 warnings)
+

i18n/request.ts

@@ -2,11 +2,18 @@ import { getRequestConfig } from 'next-intl/server';
 import * as Sentry from '@sentry/nextjs';
 
 export default getRequestConfig(async ({ requestLocale }) => {
-  let locale = await requestLocale;
+  // Hardened locale validation: only allow 'en' or 'de'
+  // Use a temporary variable to validate before assigning to locale
+  const rawLocale = await requestLocale;
+  const supportedLocales = ['en', 'de'];
+  const locale =
+    typeof rawLocale === 'string' && supportedLocales.includes(rawLocale) ? rawLocale : 'en';
 
-  // Ensure that a valid locale is used
-  if (!locale || !['en', 'de'].includes(locale)) {
-    locale = 'en';
+  // Log to Sentry if we had to fallback, as it might indicate a routing issue
+  if (!rawLocale || !supportedLocales.includes(rawLocale as string)) {
+    console.warn(
+      `[i18n] Invalid or missing requestLocale received: "${rawLocale}". Falling back to "en".`,
+    );
   }
 
   return {
@@ -26,6 +33,6 @@ export default getRequestConfig(async ({ requestLocale }) => {
         return path;
       }
       return 'fallback';
-    }
+    },
   } as any;
 });

lib/config.ts

@@ -2,7 +2,7 @@
  * Centralized configuration management for the application.
  * This file provides a type-safe way to access environment variables.
  */
-import { env, getRawEnv } from './env';
+import { getRawEnv } from './env';
 
 let memoizedConfig: ReturnType<typeof createConfig> | undefined;
 
@@ -50,7 +50,7 @@ function createConfig() {
     },
 
     logging: {
-      level: env.LOG_LEVEL,
+      level: env.LOG_LEVEL || 'info',
     },
 
     mail: {

lib/directus.ts

@@ -3,8 +3,20 @@ import { createMintelDirectusClient, ensureDirectusAuthenticated } from '@mintel
 import { config } from './config';
 import { getServerAppServices } from './services/create-services.server';
 
+/**
+ * Directus Schema Definitions
+ */
+export interface Schema {
+  products: any[];
+  categories: any[];
+  contact_submissions: any[];
+  product_requests: any[];
+  translations: any[];
+  categories_link: any[];
+}
+
 // Initialize client using Mintel standards (environment-aware)
-const client = createMintelDirectusClient();
+const client = createMintelDirectusClient<Schema>();
 
 /**
  * Helper to determine if we should show detailed errors

lib/env.ts

@@ -1,14 +1,9 @@
 import { z } from 'zod';
-import { validateMintelEnv, mintelEnvSchema } from '@mintel/next-utils';
+import { validateMintelEnv, mintelEnvSchema, withMintelRefinements } from '@mintel/next-utils';
 
 /**
  * Environment variable schema.
- * Extends the default Mintel environment schema which already includes:
- * - Directus (URL, TOKEN, INTERNAL_URL, etc.)
- * - Mail (HOST, PORT, etc.)
- * - Gotify
- * - Logging
- * - Analytics
+ * Extends the default Mintel environment schema.
  */
 const envExtension = {
   // Project specific overrides or additions
@@ -27,8 +22,31 @@ const envExtension = {
 
   INFRA_DIRECTUS_URL: z.string().url().optional(),
   INFRA_DIRECTUS_TOKEN: z.string().optional(),
+
+  // Analytics
+  UMAMI_WEBSITE_ID: z.string().optional(),
+  UMAMI_API_ENDPOINT: z.string().optional(),
+
+  // Mail Configuration
+  MAIL_HOST: z.string().optional(),
+  MAIL_PORT: z.coerce.number().optional(),
+  MAIL_USERNAME: z.string().optional(),
+  MAIL_PASSWORD: z.string().optional(),
+  MAIL_FROM: z.string().optional(),
+  MAIL_RECIPIENTS: z.string().optional(),
+
+  // Directus Authentication
+  DIRECTUS_URL: z.string().url().optional(),
+  DIRECTUS_ADMIN_EMAIL: z.string().email().optional(),
+  DIRECTUS_ADMIN_PASSWORD: z.string().optional(),
+  DIRECTUS_API_TOKEN: z.string().optional(),
 };
 
+/**
+ * Full schema including Mintel base and refinements
+ */
+export const envSchema = withMintelRefinements(z.object(mintelEnvSchema).extend(envExtension));
+
 /**
  * Validated environment object.
  */

lib/mail/mailer.ts

@@ -1,7 +1,6 @@
 import nodemailer from 'nodemailer';
 import { getServerAppServices } from '@/lib/services/create-services.server';
 import { config } from '../config';
-import { ReactElement } from 'react';
 
 let transporterInstance: nodemailer.Transporter | null = null;
 

lib/og-helper.tsx

@@ -6,37 +6,41 @@ import { join } from 'path';
  * Since we are using runtime = 'nodejs', we can read them from the filesystem.
  */
 export async function getOgFonts() {
-    const boldFontPath = join(process.cwd(), 'public/fonts/Inter-Bold.ttf');
-    const regularFontPath = join(process.cwd(), 'public/fonts/Inter-Regular.ttf');
+  const boldFontPath = join(process.cwd(), 'public/fonts/Inter-Bold.woff');
+  const regularFontPath = join(process.cwd(), 'public/fonts/Inter-Regular.woff');
 
-    try {
-        const boldFont = readFileSync(boldFontPath);
-        const regularFont = readFileSync(regularFontPath);
+  try {
+    console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`);
+    const boldFont = readFileSync(boldFontPath);
+    const regularFont = readFileSync(regularFontPath);
+    console.log(
+      `[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`,
+    );
 
-        return [
-            {
-                name: 'Inter',
-                data: boldFont,
-                weight: 700 as const,
-                style: 'normal' as const,
-            },
-            {
-                name: 'Inter',
-                data: regularFont,
-                weight: 400 as const,
-                style: 'normal' as const,
-            },
-        ];
-    } catch (error) {
-        console.error('Failed to load OG fonts from filesystem, falling back to system fonts:', error);
-        return [];
-    }
+    return [
+      {
+        name: 'Inter',
+        data: boldFont,
+        weight: 700 as const,
+        style: 'normal' as const,
+      },
+      {
+        name: 'Inter',
+        data: regularFont,
+        weight: 400 as const,
+        style: 'normal' as const,
+      },
+    ];
+  } catch (error) {
+    console.error(`[OG] Failed to load fonts from ${process.cwd()}:`, error);
+    return [];
+  }
 }
 
 /**
  * Common configuration for OG images
  */
 export const OG_IMAGE_SIZE = {
-    width: 1200,
-    height: 630,
+  width: 1200,
+  height: 630,
 };

lint_output.txt

@@ -0,0 +1,132 @@
+
+> klz-cables-nextjs@1.0.0 lint /Users/marcmintel/Projects/klz-2026
+> eslint .
+
+(node:66439) ESLintEnvWarning: /* eslint-env */ comments are no longer recognized when linting with flat config and will be reported as errors as of v10.0.0. Replace them with /* global */ comments or define globals in your config file. See https://eslint.org/docs/latest/use/configure/migration-guide#eslint-env-configuration-comments for details. Found in /Users/marcmintel/Projects/klz-2026/.lintstagedrc.cjs at line 2.
+(Use `node --trace-warnings ...` to show where the warning was created)
+(node:66439) ESLintEnvWarning: /* eslint-env */ comments are no longer recognized when linting with flat config and will be reported as errors as of v10.0.0. Replace them with /* global */ comments or define globals in your config file. See https://eslint.org/docs/latest/use/configure/migration-guide#eslint-env-configuration-comments for details. Found in /Users/marcmintel/Projects/klz-2026/commitlint.config.cjs at line 2.
+(node:66439) ESLintEnvWarning: /* eslint-env */ comments are no longer recognized when linting with flat config and will be reported as errors as of v10.0.0. Replace them with /* global */ comments or define globals in your config file. See https://eslint.org/docs/latest/use/configure/migration-guide#eslint-env-configuration-comments for details. Found in /Users/marcmintel/Projects/klz-2026/postcss.config.cjs at line 2.
+(node:66439) ESLintEnvWarning: /* eslint-env */ comments are no longer recognized when linting with flat config and will be reported as errors as of v10.0.0. Replace them with /* global */ comments or define globals in your config file. See https://eslint.org/docs/latest/use/configure/migration-guide#eslint-env-configuration-comments for details. Found in /Users/marcmintel/Projects/klz-2026/tailwind.config.cjs at line 2.
+
+/Users/marcmintel/Projects/klz-2026/.lintstagedrc.cjs
+  3:14  error  A `require()` style import is forbidden  @typescript-eslint/no-require-imports
+
+/Users/marcmintel/Projects/klz-2026/app/[locale]/blog/[slug]/page.tsx
+  2:8   warning  'Script' is defined but never used               @typescript-eslint/no-unused-vars
+  4:10  warning  'getBreadcrumbSchema' is defined but never used  @typescript-eslint/no-unused-vars
+  4:41  warning  'LOGO_URL' is defined but never used             @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/app/[locale]/blog/page.tsx
+   63:15  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
+  148:25  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
+
+/Users/marcmintel/Projects/klz-2026/app/[locale]/layout.tsx
+  81:12  warning  'e' is defined but never used  @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/app/[locale]/page.tsx
+  70:12  warning  'err' is defined but never used                                        @typescript-eslint/no-unused-vars
+  74:14  warning  'e' is defined but never used                                          @typescript-eslint/no-unused-vars
+  75:12  warning  'key' is defined but never used. Allowed unused args must match /^_/u  @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/app/[locale]/products/[...slug]/page.tsx
+  1:8   warning  'Script' is defined but never used               @typescript-eslint/no-unused-vars
+  3:10  warning  'getBreadcrumbSchema' is defined but never used  @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/app/errors/api/relay/route.ts
+  28:11  warning  'header' is assigned a value but never used  @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/components/CMSConnectivityNotice.tsx
+   4:34  warning  'Database' is defined but never used         @typescript-eslint/no-unused-vars
+   8:10  warning  'status' is assigned a value but never used  @typescript-eslint/no-unused-vars
+  35:16  warning  'err' is defined but never used              @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/components/Header.tsx
+   36:7   warning  Error: Calling setState synchronously within an effect can trigger cascading renders
+
+Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
+* Update external systems with the latest state from React.
+* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
+
+Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
+
+/Users/marcmintel/Projects/klz-2026/components/Header.tsx:36:7
+  34 |   useEffect(() => {
+  35 |     if (isMobileMenuOpen) {
+> 36 |       setIsMobileMenuOpen(false);
+     |       ^^^^^^^^^^^^^^^^^^^ Avoid calling setState() directly within an effect
+  37 |     }
+  38 |   }, [pathname, isMobileMenuOpen]);
+  39 |  react-hooks/set-state-in-effect
+  116:37  warning  'idx' is defined but never used. Allowed unused args must match /^_/u                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/components/Lightbox.tsx
+  24:5  warning  Error: Calling setState synchronously within an effect can trigger cascading renders
+
+Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
+* Update external systems with the latest state from React.
+* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
+
+Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
+
+/Users/marcmintel/Projects/klz-2026/components/Lightbox.tsx:24:5
+  22 |
+  23 |   useEffect(() => {
+> 24 |     setMounted(true);
+     |     ^^^^^^^^^^ Avoid calling setState() directly within an effect
+  25 |     return () => setMounted(false);
+  26 |   }, []);
+  27 |                                                                                                                      react-hooks/set-state-in-effect
+  62:9  warning  Error: Calling setState synchronously within an effect can trigger cascading renders
+
+Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
+* Update external systems with the latest state from React.
+* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
+
+Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
+
+/Users/marcmintel/Projects/klz-2026/components/Lightbox.tsx:62:9
+  60 |       const index = parseInt(photoParam, 10);
+  61 |       if (!isNaN(index) && index >= 0 && index < images.length) {
+> 62 |         setCurrentIndex(index);
+     |         ^^^^^^^^^^^^^^^ Avoid calling setState() directly within an effect
+  63 |       }
+  64 |     }
+  65 |   }, [searchParams, images.length]);  react-hooks/set-state-in-effect
+
+/Users/marcmintel/Projects/klz-2026/components/OGImageTemplate.tsx
+  49:11  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
+
+/Users/marcmintel/Projects/klz-2026/components/home/GallerySection.tsx
+  30:38  warning  Error: Calling setState synchronously within an effect can trigger cascading renders
+
+Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
+* Update external systems with the latest state from React.
+* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
+
+Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
+
+/Users/marcmintel/Projects/klz-2026/components/home/GallerySection.tsx:30:38
+  28 |       const index = parseInt(photoParam, 10);
+  29 |       if (!isNaN(index) && index >= 0 && index < images.length) {
+> 30 |         if (lightboxIndex !== index) setLightboxIndex(index);
+     |                                      ^^^^^^^^^^^^^^^^ Avoid calling setState() directly within an effect
+  31 |         if (!lightboxOpen) setLightboxOpen(true);
+  32 |       }
+  33 |     }  react-hooks/set-state-in-effect
+
+/Users/marcmintel/Projects/klz-2026/components/home/RecentPosts.tsx
+  37:21  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
+
+/Users/marcmintel/Projects/klz-2026/lib/config.ts
+  5:10  warning  'env' is defined but never used  @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/lib/mail/mailer.ts
+  4:10  warning  'ReactElement' is defined but never used  @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/middleware.ts
+   2:10  warning  'NextResponse' is defined but never used             @typescript-eslint/no-unused-vars
+  33:12  warning  'publicHostname' is assigned a value but never used  @typescript-eslint/no-unused-vars
+
+✖ 27 problems (1 error, 26 warnings)
+
+ ELIFECYCLE  Command failed with exit code 1.

lint_output_after_fixes.txt

@@ -0,0 +1,65 @@
+
+> klz-cables-nextjs@1.0.0 lint /Users/marcmintel/Projects/klz-2026
+> eslint .
+
+
+/Users/marcmintel/Projects/klz-2026/app/[locale]/layout.tsx
+  81:12  warning  '_e' is defined but never used  @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/app/[locale]/page.tsx
+  70:12  warning  '_err' is defined but never used  @typescript-eslint/no-unused-vars
+  74:14  warning  '_e' is defined but never used    @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/app/errors/api/relay/route.ts
+  28:11  warning  '_header' is assigned a value but never used  @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/components/CMSConnectivityNotice.tsx
+   8:10  warning  '_status' is assigned a value but never used  @typescript-eslint/no-unused-vars
+  35:16  warning  '_err' is defined but never used              @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/components/Lightbox.tsx
+  24:5   warning  Error: Calling setState synchronously within an effect can trigger cascading renders
+
+Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
+* Update external systems with the latest state from React.
+* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
+
+Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
+
+/Users/marcmintel/Projects/klz-2026/components/Lightbox.tsx:24:5
+  22 |
+  23 |   useEffect(() => {
+> 24 |     setMounted(true);
+     |     ^^^^^^^^^^ Avoid calling setState() directly within an effect
+  25 |     return () => setMounted(false);
+  26 |   }, []); // eslint-disable-line react-hooks/set-state-in-effect
+  27 |                                                                                                                      react-hooks/set-state-in-effect
+  26:11  warning  Unused eslint-disable directive (no problems were reported from 'react-hooks/set-state-in-effect')
+  62:9   warning  Error: Calling setState synchronously within an effect can trigger cascading renders
+
+Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
+* Update external systems with the latest state from React.
+* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
+
+Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
+
+/Users/marcmintel/Projects/klz-2026/components/Lightbox.tsx:62:9
+  60 |       const index = parseInt(photoParam, 10);
+  61 |       if (!isNaN(index) && index >= 0 && index < images.length) {
+> 62 |         setCurrentIndex(index);
+     |         ^^^^^^^^^^^^^^^ Avoid calling setState() directly within an effect
+  63 |       }
+  64 |     }
+  65 |   }, [searchParams, images.length]); // eslint-disable-line react-hooks/set-state-in-effect  react-hooks/set-state-in-effect
+  65:38  warning  Unused eslint-disable directive (no problems were reported from 'react-hooks/set-state-in-effect')
+
+/Users/marcmintel/Projects/klz-2026/components/home/GallerySection.tsx
+  3:17  warning  'useState' is defined but never used   @typescript-eslint/no-unused-vars
+  3:27  warning  'useEffect' is defined but never used  @typescript-eslint/no-unused-vars
+
+/Users/marcmintel/Projects/klz-2026/middleware.ts
+  33:12  warning  '_publicHostname' is assigned a value but never used  @typescript-eslint/no-unused-vars
+
+✖ 13 problems (0 errors, 13 warnings)
+  0 errors and 2 warnings potentially fixable with the `--fix` option.
+

messages/de.json

@@ -206,7 +206,8 @@
       "title": "Produktportfolio | Hochwertige Kabel für jede Anwendung",
       "description": "Entdecken Sie unser umfassendes Sortiment an zertifizierten Kabeln: von Niederspannung über Mittel- und Hochspannung bis hin zu spezialisierten Solarkabeln."
     },
-    "title": "Unsere Produkte",
+    "title": "Unsere <green>Produkte</green>",
+    "breadcrumb": "Produkte",
     "subtitle": "Entdecken Sie unser umfassendes Sortiment an hochwertigen Kabeln für jede Anwendung.",
     "heroSubtitle": "Produktportfolio",
     "categoryLabel": "Kategorie",

messages/en.json

@@ -206,7 +206,8 @@
       "title": "Product Portfolio | High-Quality Cables for Every Application",
       "description": "Explore our comprehensive range of certified cables: from low voltage to medium and high voltage, as well as specialized solar cables."
     },
-    "title": "Our Products",
+    "title": "Our <green>Products</green>",
+    "breadcrumb": "Products",
     "subtitle": "Explore our comprehensive range of high-quality cables designed for every application.",
     "heroSubtitle": "Product Portfolio",
     "categoryLabel": "Category",

middleware.ts

@@ -1,5 +1,5 @@
 import createMiddleware from 'next-intl/middleware';
-import { NextResponse, NextRequest } from 'next/server';
+import { NextRequest } from 'next/server';
 
 // Create the internationalization middleware
 const intlMiddleware = createMiddleware({
@@ -12,6 +12,18 @@ const intlMiddleware = createMiddleware({
 
 export default function middleware(request: NextRequest) {
   const { method, url, headers } = request;
+  const { pathname } = request.nextUrl;
+
+  // Explicit bypass for infrastructure routes to avoid locale redirects/interception
+  if (
+    pathname.startsWith('/stats') ||
+    pathname.startsWith('/errors') ||
+    pathname.startsWith('/health') ||
+    pathname.startsWith('/api/og') ||
+    pathname.includes('opengraph-image')
+  ) {
+    return;
+  }
 
   // Build header object for logging
   const headerObj: Record<string, string> = {};
@@ -30,7 +42,7 @@ export default function middleware(request: NextRequest) {
     // Prioritize x-forwarded-host (passed by Traefik) over the local Host header
     const hostHeader =
       headers.get('x-forwarded-host') || headers.get('host') || 'testing.klz-cables.com';
-    const [publicHostname] = hostHeader.split(':');
+    hostHeader.split(':');
 
     urlObj.protocol = proto;
     // urlObj.hostname = publicHostname; // Don't rewrite hostname yet as it breaks internal fetches in dev
@@ -62,5 +74,5 @@ export default function middleware(request: NextRequest) {
 
 export const config = {
   // Match only internationalized pathnames
-  matcher: ['/((?!api|_next|_vercel|stats|errors|health|.*\\..*).*)', '/', '/(de|en)/:path*'],
+  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)', '/', '/(de|en)/:path*'],
 };

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/types/routes.d.ts';
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -322,6 +322,15 @@ const nextConfig = {
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
   },
   async rewrites() {
+    const umamiUrl =
+      process.env.UMAMI_API_ENDPOINT ||
+      process.env.UMAMI_SCRIPT_URL ||
+      process.env.NEXT_PUBLIC_UMAMI_SCRIPT_URL ||
+      'https://analytics.infra.mintel.me';
+    const glitchtipUrl = process.env.SENTRY_DSN
+      ? new URL(process.env.SENTRY_DSN).origin
+      : 'https://errors.infra.mintel.me';
+
     const directusUrl = process.env.INTERNAL_DIRECTUS_URL || process.env.DIRECTUS_URL || 'https://cms.klz-cables.com';
 
     return [

package.json

@@ -1,10 +1,14 @@
 {
+  "name": "klz-cables-nextjs",
+  "type": "module",
+  "private": true,
   "dependencies": {
-    "@directus/sdk": "^18.0.3",
-    "@mintel/mail": "^1.6.0",
-    "@mintel/next-config": "^1.6.0",
-    "@mintel/next-feedback": "^1.6.0",
-    "@mintel/next-utils": "^1.7.8",
+    "@directus/sdk": "^21.0.0",
+    "@medv/finder": "^4.0.2",
+    "@mintel/mail": "1.8.3",
+    "@mintel/next-config": "1.8.3",
+    "@mintel/next-feedback": "1.8.10",
+    "@mintel/next-utils": "^1.7.15",
     "@react-email/components": "^1.0.7",
     "@react-pdf/renderer": "^4.3.2",
     "@sentry/nextjs": "^10.38.0",
@@ -16,7 +20,6 @@
     "import-in-the-middle": "^1.11.0",
     "jsdom": "^27.4.0",
     "leaflet": "^1.9.4",
-    "lucide-react": "^0.562.0",
     "next": "16.1.6",
     "next-i18next": "^15.4.3",
     "next-intl": "^4.8.2",
@@ -36,14 +39,18 @@
     "svg-to-pdfkit": "^0.1.8",
     "tailwind-merge": "^3.4.0",
     "xlsx": "^0.18.5",
-    "zod": "^4.3.6"
+    "zod": "3.25.76"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.4.0",
     "@commitlint/config-conventional": "^20.4.0",
     "@lhci/cli": "^0.15.1",
-    "@mintel/eslint-config": "^1.6.0",
-    "@mintel/tsconfig": "^1.6.0",
+    "@mintel/eslint-config": "1.8.3",
+    "@mintel/tsconfig": "1.8.3",
+    "@remotion/cli": "^4.0.421",
+    "@remotion/google-fonts": "^4.0.421",
+    "@remotion/player": "^4.0.421",
+    "@remotion/renderer": "^4.0.421",
     "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/postcss": "^4.1.18",
     "@types/geojson": "^7946.0.16",
@@ -53,23 +60,26 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/sharp": "^0.31.1",
+    "@vitejs/plugin-react": "^5.1.4",
     "@vitest/ui": "^4.0.16",
     "autoprefixer": "^10.4.23",
     "eslint": "^9.18.0",
+    "happy-dom": "^20.6.1",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
+    "lucide-react": "^0.563.0",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
+    "remotion": "^4.0.421",
     "sass": "^1.97.1",
     "tailwindcss": "^4.1.18",
     "tsx": "^4.21.0",
     "typescript": "^5.7.2",
     "vitest": "^4.0.16"
   },
-  "name": "klz-cables-nextjs",
-  "private": true,
   "scripts": {
-    "dev": "docker network create infra 2>/dev/null || true && echo '\\n🚀 Development Environment Starting...\\n\\n📱 App:      http://klz.localhost\\n🗄️  CMS:      http://cms.klz.localhost/admin\\n🚦 Traefik:  http://localhost:8080\\n\\n(Press Ctrl+C to stop)\\n' && docker-compose down --remove-orphans && docker-compose up klz-app directus directus-db gatekeeper",
+    "dev": "docker network create infra 2>/dev/null || true && echo '\\n🚀 Development Environment Starting...\\n\\n📱 App (Next.js): http://localhost:3000\\n📱 App (Traefik): http://klz.localhost\\n🗄️  CMS:           http://cms.klz.localhost/admin\\n🚦 Traefik:      http://localhost:8080\\n\\n(Press Ctrl+C to stop)\\n' && docker-compose down --remove-orphans && docker-compose up --build klz-app directus-cms klz-db gatekeeper",
+    "dev:infra": "docker network create infra 2>/dev/null || true && docker-compose up -d directus-cms klz-db gatekeeper",
     "dev:local": "next dev",
     "build": "next build",
     "start": "next start",
@@ -77,6 +87,7 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run --passWithNoTests",
     "test:og": "vitest run tests/og-image.test.ts",
+    "check:og": "tsx scripts/check-og-images.ts",
     "cms:branding:local": "DIRECTUS_URL=http://localhost:8055 npx tsx --env-file=.env scripts/setup-directus-branding.ts",
     "cms:branding:testing": "DIRECTUS_URL=https://cms.testing.klz-cables.com npx tsx --env-file=.env scripts/setup-directus-branding.ts",
     "cms:branding:staging": "DIRECTUS_URL=https://cms.staging.klz-cables.com npx tsx --env-file=.env scripts/setup-directus-branding.ts",
@@ -97,6 +108,8 @@
     "cms:push:prod:DANGER": "./scripts/sync-directus.sh push production",
     "pagespeed:test": "tsx ./scripts/pagespeed-sitemap.ts",
     "pagespeed:urls": "tsx -e \"import sitemap from './app/sitemap'; sitemap().then(urls => console.log(urls.map(u => u.url).join('\\n')))\"",
+    "remotion:render": "remotion render WebsiteVideo remotion/index.ts out.mp4",
+    "remotion:preview": "remotion preview remotion/index.ts",
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
@@ -105,5 +118,13 @@
     "overrides": {
       "next": "16.1.6"
     }
+  },
+  "peerDependencies": {
+    "@remotion/cli": "^4.0.421",
+    "@remotion/google-fonts": "^4.0.421",
+    "@remotion/player": "^4.0.421",
+    "@remotion/renderer": "^4.0.421",
+    "lucide-react": "^0.563.0",
+    "remotion": "^4.0.421"
   }
-}
+}

postcss.config.cjs

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 module.exports = {
   plugins: {
     '@tailwindcss/postcss': {},

remotion/Root.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Composition } from 'remotion';
+import { WebsiteVideo } from './WebsiteVideo';
+import sessionData from './session.json';
+import { RecordingSession } from '../types/record-mode';
+
+const FPS = 60;
+
+export const RemotionRoot: React.FC = () => {
+    // Calculate duration based on last event + padding
+    const durationMs = (sessionData as unknown as RecordingSession).events.reduce((max, e) => {
+        return Math.max(max, e.timestamp + (e.duration || 1000));
+    }, 0);
+    const durationInFrames = Math.ceil((durationMs + 2000) / 1000 * FPS);
+
+    return (
+        <>
+            <Composition
+                id="WebsiteVideo"
+                component={WebsiteVideo}
+                durationInFrames={durationInFrames}
+                fps={FPS}
+                width={1920}
+                height={1080}
+                defaultProps={{
+                    session: sessionData as unknown as RecordingSession,
+                    siteUrl: 'http://localhost:3000'
+                }}
+            />
+        </>
+    );
+};

remotion/WebsiteVideo.tsx

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import { AbsoluteFill, useVideoConfig, useCurrentFrame, interpolate, spring, Easing } from 'remotion';
+import { RecordingSession, RecordEvent } from '../types/record-mode';
+
+export const WebsiteVideo: React.FC<{
+    session: RecordingSession | null;
+    siteUrl: string;
+}> = ({ session, siteUrl }) => {
+    const { fps, width, height, durationInFrames } = useVideoConfig();
+    const frame = useCurrentFrame();
+
+    if (!session || !session.events.length) {
+        return (
+            <AbsoluteFill style={{ backgroundColor: 'black', color: 'white', justifyContent: 'center', alignItems: 'center' }}>
+                No session data found.
+            </AbsoluteFill>
+        );
+    }
+
+    const sortedEvents = useMemo(() => {
+        return [...session.events].sort((a, b) => a.timestamp - b.timestamp);
+    }, [session]);
+
+    const elapsedTimeMs = (frame / fps) * 1000;
+
+    // --- Interpolation Logic ---
+
+    // 1. Find the current window (between which two events are we?)
+    const nextEventIndex = sortedEvents.findIndex(e => e.timestamp > elapsedTimeMs);
+    let currentEventIndex;
+
+    if (nextEventIndex === -1) {
+        // We are past the last event, stay at the end
+        currentEventIndex = sortedEvents.length - 1;
+    } else {
+        currentEventIndex = Math.max(0, nextEventIndex - 1);
+    }
+
+    const currentEvent = sortedEvents[currentEventIndex];
+    // If there is no next event, we just stay at current (next=current)
+    const nextEvent = (nextEventIndex !== -1) ? sortedEvents[nextEventIndex] : currentEvent;
+
+    // 2. Calculate Progress between events
+    const gap = nextEvent.timestamp - currentEvent.timestamp;
+    const progress = gap > 0 ? (elapsedTimeMs - currentEvent.timestamp) / gap : 1;
+    const easedProgress = Easing.cubic(Math.min(Math.max(progress, 0), 1));
+
+    // 3. Calculate Cursor Position from Rects
+    const getCenter = (event: RecordEvent) => {
+        if (event.rect) {
+            return {
+                x: event.rect.x + event.rect.width / 2,
+                y: event.rect.y + event.rect.height / 2
+            };
+        }
+        return { x: width / 2, y: height / 2 };
+    };
+
+    const p1 = getCenter(currentEvent);
+    const p2 = getCenter(nextEvent);
+
+    const cursorX = interpolate(easedProgress, [0, 1], [p1.x, p2.x]);
+    const cursorY = interpolate(easedProgress, [0, 1], [p1.y, p2.y]);
+
+    // 4. Zoom & Blur
+    const zoom = interpolate(easedProgress, [0, 1], [currentEvent.zoom || 1, nextEvent.zoom || 1]);
+    const isBlurry = currentEvent.motionBlur || nextEvent.motionBlur;
+
+    return (
+        <AbsoluteFill style={{ backgroundColor: '#000' }}>
+            <div style={{
+                width: '100%',
+                height: '100%',
+                position: 'relative',
+                transform: `scale(${zoom})`,
+                transformOrigin: `${cursorX}px ${cursorY}px`,
+                filter: isBlurry ? 'blur(8px)' : 'none',
+                transition: 'filter 0.1s ease-out'
+            }}>
+                <iframe
+                    src={siteUrl}
+                    style={{ width: '100%', height: '100%', border: 'none' }}
+                    title="Website"
+                />
+            </div>
+
+            {/* Visual Cursor */}
+            <div style={{
+                position: 'absolute',
+                left: cursorX,
+                top: cursorY,
+                width: 34, height: 34,
+                backgroundColor: 'white',
+                borderRadius: '50%',
+                border: '3px solid black',
+                boxShadow: '0 4px 15px rgba(0,0,0,0.4)',
+                transform: 'translate(-50%, -50%)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 100
+            }}>
+                <div style={{ width: 12, height: 12, backgroundColor: '#3b82f6', borderRadius: '50%' }} />
+            </div>
+        </AbsoluteFill>
+    );
+};

remotion/index.ts

@@ -0,0 +1,4 @@
+import { registerRoot } from 'remotion';
+import { RemotionRoot } from './Root';
+
+registerRoot(RemotionRoot);

remotion/session.json

@@ -0,0 +1,35 @@
+{
+    "id": "sample-session",
+    "name": "Sample Recording",
+    "createdAt": "2024-03-20T10:00:00.000Z",
+    "events": [
+        {
+            "id": "1",
+            "type": "click",
+            "timestamp": 1000,
+            "duration": 1000,
+            "zoom": 1,
+            "selector": "body",
+            "rect": {
+                "x": 100,
+                "y": 100,
+                "width": 50,
+                "height": 50
+            }
+        },
+        {
+            "id": "2",
+            "type": "scroll",
+            "timestamp": 2500,
+            "duration": 1500,
+            "zoom": 1,
+            "selector": "footer",
+            "rect": {
+                "x": 500,
+                "y": 800,
+                "width": 100,
+                "height": 50
+            }
+        }
+    ]
+}

scripts/check-og-images.ts

@@ -0,0 +1,74 @@
+import { SITE_URL } from '../lib/schema.js';
+
+const BASE_URL = process.env.TEST_URL || SITE_URL;
+
+console.log(`\n🚀 Starting OG Image Verification for ${BASE_URL}\n`);
+
+const routes = [
+  '/de/opengraph-image',
+  '/en/opengraph-image',
+  '/de/blog/opengraph-image',
+  '/de/api/og/product?slug=nay2y',
+  '/en/api/og/product?slug=medium-voltage-cables',
+];
+
+async function verifyImage(path: string): Promise<boolean> {
+  const url = `${BASE_URL}${path}`;
+  const start = Date.now();
+
+  try {
+    const response = await fetch(url);
+    const duration = Date.now() - start;
+
+    console.log(`Checking ${url}...`);
+
+    if (response.status !== 200) {
+      throw new Error(`Status: ${response.status}`);
+    }
+
+    const contentType = response.headers.get('content-type');
+    if (!contentType?.includes('image/png')) {
+      const body = await response.text();
+      console.log(`  Headers: ${JSON.stringify(Object.fromEntries(response.headers))}`);
+      throw new Error(
+        `Content-Type: ${contentType}. Body preview: ${body.substring(0, 500).replace(/\n/g, ' ')}...`,
+      );
+    }
+
+    const buffer = await response.arrayBuffer();
+    const bytes = new Uint8Array(buffer);
+
+    // PNG Signature: 89 50 4E 47 0D 0A 1A 0A
+    if (bytes[0] !== 0x89 || bytes[1] !== 0x50 || bytes[2] !== 0x4e || bytes[3] !== 0x47) {
+      throw new Error('Invalid PNG signature');
+    }
+
+    if (bytes.length < 10000) {
+      throw new Error(`Image too small (${bytes.length} bytes), likely blank`);
+    }
+
+    console.log(`  ✅ OK (${bytes.length} bytes, ${duration}ms)`);
+    return true;
+  } catch (error: unknown) {
+    console.error(`  ❌ FAILED:`, error);
+    return false;
+  }
+}
+
+async function run() {
+  let allOk = true;
+  for (const route of routes) {
+    const ok = await verifyImage(route);
+    if (!ok) allOk = false;
+  }
+
+  if (allOk) {
+    console.log('\n✨ All OG images verified successfully!\n');
+    process.exit(0);
+  } else {
+    console.error('\n⚠️  Some OG images failed verification.\n');
+    process.exit(1);
+  }
+}
+
+run();

scripts/cms-apply.sh

@@ -9,7 +9,7 @@ if [ -z "$ENV" ]; then
     exit 1
 fi
 
-PRJ_ID=$(jq -r .name package.json | sed 's/@mintel\///' | sed 's/\.com$//')
+PRJ_ID=$(jq -r .name package.json | sed 's/@mintel\///' | sed 's/\.com$//' | sed 's/-nextjs$//' | sed 's/-cables$//')
 
 case $ENV in
   local)
@@ -25,7 +25,10 @@ case $ENV in
     case $ENV in
       testing)    PROJECT_NAME="${PRJ_ID}-testing" ;;
       staging)    PROJECT_NAME="${PRJ_ID}-staging" ;;
-      production) PROJECT_NAME="${PRJ_ID}-prod"    ;;
+      production) 
+        PROJECT_NAME="${PRJ_ID}-production"
+        OLD_PROJECT_NAME="${PRJ_ID}-prod" # Fallback for previous convention
+        ;;
     esac
     
     echo "📤 Uploading snapshot to $ENV..."
@@ -34,8 +37,16 @@ case $ENV in
     echo "🔍 Detecting remote container..."
     REMOTE_CONTAINER=$(ssh "$REMOTE_HOST" "cd $REMOTE_DIR && docker compose -p $PROJECT_NAME ps -q directus")
     
+    if [ -z "$REMOTE_CONTAINER" ] && [ -n "$OLD_PROJECT_NAME" ]; then
+        echo "⚠️ $PROJECT_NAME not found, trying fallback $OLD_PROJECT_NAME..."
+        REMOTE_CONTAINER=$(ssh "$REMOTE_HOST" "cd $REMOTE_DIR && docker compose -p $OLD_PROJECT_NAME ps -q directus")
+        if [ -n "$REMOTE_CONTAINER" ]; then
+            PROJECT_NAME=$OLD_PROJECT_NAME
+        fi
+    fi
+
     if [ -z "$REMOTE_CONTAINER" ]; then
-        echo "❌ Remote container for $ENV not found."
+        echo "❌ Remote container for $ENV not found (checked $PROJECT_NAME)."
         exit 1
     fi
     

scripts/sync-directus.sh

@@ -5,7 +5,7 @@ REMOTE_HOST="root@alpha.mintel.me"
 REMOTE_DIR="/home/deploy/sites/klz-cables.com"
 
 # DB Details (matching docker-compose defaults)
-DB_USER="directus"
+DB_USER="klz_db_user"
 DB_NAME="directus"
 
 ACTION=$1
@@ -49,9 +49,9 @@ esac
 # Detect local container
 echo "🔍 Detecting local database..."
 # Use a more robust way to find the container if multiple projects exist locally
-LOCAL_DB_CONTAINER=$(docker compose ps -q directus-db)
+LOCAL_DB_CONTAINER=$(docker compose ps -q klz-directus-db)
 if [ -z "$LOCAL_DB_CONTAINER" ]; then
-    echo "❌ Local directus-db container not found. Is it running? (npm run dev)"
+    echo "❌ Local klz-directus-db container not found. Is it running? (npm run dev)"
     exit 1
 fi
 

sentry.edge.config.ts

@@ -5,6 +5,10 @@ const dsn = process.env.SENTRY_DSN;
 Sentry.init({
   dsn,
   enabled: Boolean(dsn),
-  tracesSampleRate: 0,
-});
 
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

sentry.server.config.ts

@@ -5,6 +5,10 @@ const dsn = process.env.SENTRY_DSN;
 Sentry.init({
   dsn,
   enabled: Boolean(dsn),
-  tracesSampleRate: 0,
-});
 
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

styles/globals.css

@@ -2,21 +2,24 @@
 
 @theme {
   --font-sans:
-    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
-    Arial, sans-serif;
+    var(--font-inter), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
   --font-heading: 'Inter', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;
 
-  --color-primary: #001a4d; /* Deep Blue */
+  --color-primary: #001a4d;
+  /* Deep Blue */
   --color-primary-dark: #000d26;
   --color-primary-light: #e6ebf5;
 
-  --color-saturated: #011dff; /* Saturated Blue Accent */
+  --color-saturated: #011dff;
+  /* Saturated Blue Accent */
 
   --color-secondary: #003d82;
   --color-secondary-light: #0056b3;
 
-  --color-accent: #82ed20; /* Sustainability Green */
+  --color-accent: #82ed20;
+  /* Sustainability Green */
   --color-accent-dark: #6bc41a;
   --color-accent-light: #f0f9e6;
 
@@ -40,76 +43,107 @@
   --animate-slide-up: slide-up 0.6s ease-out;
   --animate-slow-zoom: slow-zoom 20s linear infinite;
   --animate-reveal: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s
-    cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   --animate-gradient-x: gradient-x 15s ease infinite;
 
   @keyframes gradient-x {
+
     0%,
     100% {
       background-position: 0% 50%;
     }
+
     50% {
       background-position: 100% 50%;
     }
   }
+
   @keyframes fade-in {
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }
   }
+
   @keyframes slide-up {
     from {
       opacity: 0;
       transform: translateY(20px);
     }
+
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
+
   @keyframes slow-zoom {
     from {
       transform: scale(1);
     }
+
     to {
       transform: scale(1.1);
     }
   }
+
   @keyframes reveal {
     from {
       opacity: 0;
       transform: translateY(20px);
       filter: blur(8px);
     }
+
     to {
       opacity: 1;
       transform: translateY(0);
       filter: blur(0);
     }
   }
+
   @keyframes slight-fade-in-from-bottom {
     from {
       opacity: 0;
       transform: translateY(10px);
       filter: blur(4px);
     }
+
     to {
       opacity: 1;
       transform: translateY(0);
       filter: blur(0);
     }
   }
+
+  @keyframes float {
+    0% {
+      transform: translate(0, 0) scale(1);
+    }
+
+    33% {
+      transform: translate(2%, 4%) scale(1.1);
+    }
+
+    66% {
+      transform: translate(-3%, 2%) scale(0.9);
+    }
+
+    100% {
+      transform: translate(0, 0) scale(1);
+    }
+  }
 }
 
 @layer base {
+
   .bg-primary a,
   .bg-primary-dark a {
     @apply text-white/90 hover:text-white transition-colors;
   }
+
   body {
     @apply text-base md:text-lg antialiased;
     text-rendering: optimizeLegibility;
@@ -132,18 +166,23 @@
   h1 {
     @apply text-3xl md:text-5xl lg:text-6xl leading-[1.1];
   }
+
   h2 {
     @apply text-2xl md:text-4xl lg:text-5xl leading-[1.2];
   }
+
   h3 {
     @apply text-xl md:text-2xl lg:text-3xl leading-[1.3];
   }
+
   h4 {
     @apply text-lg md:text-xl lg:text-2xl leading-[1.4];
   }
+
   h5 {
     @apply text-base md:text-lg leading-[1.5];
   }
+
   h6 {
     @apply text-sm md:text-base leading-[1.6];
   }
@@ -202,18 +241,23 @@
   .glass-panel {
     @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-lg;
   }
+
   .image-overlay-gradient {
     @apply absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent;
   }
+
   .premium-card {
     @apply bg-white rounded-3xl shadow-sm transition-all duration-500 hover:shadow-2xl hover:-translate-y-1;
   }
+
   .sticky-narrative-container {
     @apply grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20;
   }
+
   .sticky-narrative-sidebar {
     @apply lg:col-span-4 lg:sticky lg:top-32 h-fit;
   }
+
   .sticky-narrative-content {
     @apply lg:col-span-8;
   }
@@ -221,7 +265,8 @@
 
 /* Custom Utilities */
 @utility touch-target {
-  min-height: 48px; /* Increased for better touch-first feel */
+  min-height: 48px;
+  /* Increased for better touch-first feel */
   min-width: 48px;
   display: inline-flex;
   align-items: center;
@@ -276,4 +321,4 @@
 @utility content-visibility-auto {
   content-visibility: auto;
   contain-intrinsic-size: 1px 1000px;
-}
+}

tailwind.config.cjs

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -147,7 +148,7 @@ module.exports = {
   },
   plugins: [
     // Custom plugin for responsive utilities
-    function({ addUtilities }) {
+    function ({ addUtilities }) {
       const newUtilities = {
         // Touch target utilities
         '.touch-target': {

tsconfig.json

@@ -3,10 +3,18 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"],
-      "lib/*": ["./lib/*"],
-      "components/*": ["./components/*"],
-      "data/*": ["./data/*"]
+      "@/*": [
+        "./*"
+      ],
+      "lib/*": [
+        "./lib/*"
+      ],
+      "components/*": [
+        "./components/*"
+      ],
+      "data/*": [
+        "./data/*"
+      ]
     }
   },
   "include": [
@@ -17,5 +25,11 @@
     "tests/**/*.test.ts",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules", "scripts", "reference", "data"]
-}
+  "exclude": [
+    "node_modules",
+    "scripts",
+    "reference",
+    "data",
+    "remotion"
+  ]
+}

typecheck_output.txt

@@ -0,0 +1,4 @@
+
+> klz-cables-nextjs@1.0.0 typecheck /Users/marcmintel/Projects/klz-2026
+> tsc --noEmit
+

types/record-mode.ts

@@ -0,0 +1,21 @@
+export interface RecordEvent {
+  id: string;
+  type: 'mouse' | 'scroll' | 'wait';
+  interactionType?: 'click' | 'hover';
+  selector?: string; // CSS selector
+  timestamp: number; // Time in ms since start of recording
+  duration: number; // Duration allocated for this action in playback
+  zoom?: number; // Zoom level during event
+  description?: string; // Optional label
+  motionBlur?: boolean; // Enable motion blur effect
+  rect?: { x: number; y: number; width: number; height: number }; // Element position for rendering
+  clickOrigin?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  realClick?: boolean; // Trigger real browser action (navigation)
+}
+
+export interface RecordingSession {
+  id: string;
+  name: string;
+  events: RecordEvent[];
+  createdAt: string;
+}

vitest.config.mts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: {
+            '@': __dirname,
+            'next/server': 'next/server.js',
+        },
+    },
+    ssr: {
+        noExternal: ['@mintel/next-utils', 'next-intl'],
+    },
+    test: {
+        environment: 'happy-dom',
+        globals: true,
+        exclude: ['**/node_modules/**', '**/.next/**', '**/dist/**'],
+        include: ['**/*.test.{ts,tsx}'],
+        coverage: {
+            provider: 'v8',
+            reporter: ['text', 'json', 'html'],
+        },
+    },
+});