fix: site audit improvements — a11y, perf, SEO, DX

Accessibility:
- Mobile menu: add focus trap, aria-modal, aria-labelledby, focus
  restore to trigger button on close, visibility hidden when closed
- Backdrop gets aria-hidden="true"

Performance:
- Add LazyYouTubeEmbed facade (thumbnail + play button, loads iframe
  on click via youtube-nocookie.com)
- InteractiveCourseCard: replace useState with refs + rAF throttling
  for mouse glow effect, eliminating re-renders on mousemove
- FadeInSection: fix broken dynamic Tailwind classes (duration-${n})
  by using inline style properties with bounds clamping
- Consolidate RUMMonitor into PerformanceMonitor using web-vitals
  library with deduplication and Vercel Analytics retry
- Remove dead API fallback from PerformanceMonitor
- Remove redundant useMemo in LazyYouTubeEmbed (React Compiler)

SEO:
- Sitemap: replace lastModified: new Date() with static per-route
  dates for accurate lastmod signals
- Fix LinkedIn URL inconsistency in json-ld.tsx structured data
- Fix logo path in OrganizationJsonLd (baish-logo-192 -> logo-192)
- Generate OG default image and remove TODO comment

DX:
- Extract LinkedIn URL to constants/social-links.ts
- Add build wrapper script to suppress baseline-browser-mapping noise
- Pin baseline-browser-mapping@2.9.19 via overrides
- Tighten Lighthouse CI thresholds (perf: error@0.7, LCP: error@4s)
- Add outputFileTracingRoot and turbopack.root to next.config.ts
- Move scroll-to-button constants to module level
- Fix glow CSS custom property unit mismatch in InteractiveCourseCard

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: LucaDeLeo

app/[locale]/contact/page.tsx

@@ -8,6 +8,7 @@ import { BreadcrumbJsonLd, FAQJsonLd } from "@/app/components/json-ld";
 import { withLocale } from "@/app/utils/locale";
 import { getDictionary } from "../dictionaries";
 import { generatePageMetadata, SEO_CONTENT } from "@/app/utils/seo";
+import { ORGANIZATION_LINKEDIN_URL } from "@/app/constants/social-links";
 import type { AppLocale } from "@/i18n.config";
 import { isAppLocale } from "@/i18n.config";
 
@@ -198,7 +199,7 @@ export default async function ContactPage({
                     Instagram
                   </a>
                   <a
-                    href="https://www.linkedin.com/company/baish-arg"
+                    href={ORGANIZATION_LINKEDIN_URL}
                     className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-accent-primary)] hover:text-[var(--color-accent-tertiary)] transition"
                     target="_blank"
                     rel="noopener noreferrer"

app/[locale]/layout.tsx

@@ -15,7 +15,6 @@ import { i18n, isAppLocale, type AppLocale } from "../../i18n.config";
 import { getDictionary } from "./dictionaries";
 import Head from "../head";
 import Header from "../components/header";
-import RUMMonitor from "../components/rum-monitor";
 import "../globals.css";
 
 const sourceSerif = Source_Serif_4({
@@ -136,7 +135,6 @@ export default async function LocaleLayout({
               {children}
               <DeferredAnalytics />
               <PerformanceMonitor />
-              <RUMMonitor />
               {/* {process.env.NODE_ENV === "development" && <LCPDebugger />} */}
             </LanguageProvider>
           </Suspense>

app/[locale]/resources/page.tsx

@@ -8,6 +8,7 @@ import { AnimatedTitle } from "@/app/components/animated-title";
 import { BreadcrumbJsonLd } from "@/app/components/json-ld";
 import { withLocale } from "@/app/utils/locale";
 import { InteractiveCourseCard } from "@/app/components/interactive-course-card";
+import { LazyYouTubeEmbed } from "@/app/components/lazy-youtube-embed";
 import { HugeiconsIcon } from "@hugeicons/react";
 import {
   Video01Icon,
@@ -123,13 +124,9 @@ export default async function Resources({
                 className="relative w-full overflow-hidden rounded-xl"
                 style={{ paddingBottom: "56.25%" }}
               >
-                <iframe
-                  className="absolute inset-0 h-full w-full"
-                  src="https://www.youtube.com/embed/oAJUuY6gAnY"
+                <LazyYouTubeEmbed
+                  videoId="oAJUuY6gAnY"
                   title="Why experts fear superintelligent AI – and what we can do about it"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  allowFullScreen
-                  style={{ border: 0 }}
                 />
               </div>
             </div>

app/components/fade-in-section.tsx

@@ -76,16 +76,23 @@ export function FadeInSection({
   });
 
   const variantClass = variantClasses[variant];
-  const durationClass = `duration-${duration}`;
-  const delayClass = delay > 0 ? `delay-${delay}` : "";
+  const safeDuration = Number.isFinite(duration)
+    ? Math.min(Math.max(duration, 0), 2000)
+    : 400;
+  const safeDelay =
+    delay > 0 && Number.isFinite(delay) ? Math.min(delay, 2000) : 0;
 
   return (
     <Component
       ref={ref}
       id={id}
-      className={`transition-all ease-out ${durationClass} ${delayClass} ${
+      className={`transition-all ease-out ${
         isVisible ? variantClass.visible : variantClass.hidden
       } ${className}`}
+      style={{
+        transitionDuration: `${safeDuration}ms`,
+        transitionDelay: safeDelay > 0 ? `${safeDelay}ms` : "0ms",
+      }}
     >
       {children}
     </Component>

app/components/footer.tsx

@@ -4,6 +4,7 @@ import { ScrollToButton } from "./scroll-to-button";
 import type { AppLocale } from "@/i18n.config";
 import type { Dictionary } from "@/app/[locale]/dictionaries";
 import { withLocale } from "@/app/utils/locale";
+import { ORGANIZATION_LINKEDIN_URL } from "@/app/constants/social-links";
 import { HugeiconsIcon } from "@hugeicons/react";
 import {
   InstagramIcon,
@@ -94,7 +95,7 @@ export default function Footer({ locale, t }: FooterProps) {
               <HugeiconsIcon icon={InstagramIcon} size={20} />
             </a>
             <a
-              href="https://www.linkedin.com/company/baish-arg"
+              href={ORGANIZATION_LINKEDIN_URL}
               aria-label="LinkedIn"
               className="text-slate-600 hover:text-[var(--color-accent-primary)] transition"
               target="_blank"

app/components/header.tsx

@@ -69,6 +69,7 @@ const HeaderComponent = ({ locale, t }: HeaderProps) => {
   const [scrolled, setScrolled] = useState(false);
   const [isNarrow, setIsNarrow] = useState(false);
   const [isCramped, setIsCramped] = useState(false);
+  const mobileMenuButtonRef = useRef<HTMLButtonElement>(null);
   const titleContainerRef = useRef<HTMLDivElement>(null);
   const lastScrollY = useRef(0);
   const prefersReducedMotion = usePrefersReducedMotion();
@@ -368,6 +369,7 @@ const HeaderComponent = ({ locale, t }: HeaderProps) => {
             </ScrollToButton>
 
             <button
+              ref={mobileMenuButtonRef}
               className="md:hidden flex flex-col justify-center items-center w-10 h-10 rounded-lg hover:bg-slate-100 transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)] focus:ring-offset-2 header-menu-btn"
               onClick={toggleMobileMenu}
               aria-label={mobileMenuOpen ? t.closeMenu : t.openMenu}
@@ -411,6 +413,7 @@ const HeaderComponent = ({ locale, t }: HeaderProps) => {
           pathname={pathname}
           isOpen={mobileMenuOpen}
           onClose={closeMobileMenu}
+          triggerRef={mobileMenuButtonRef}
         />
       )}
     </header>

app/components/interactive-course-card.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState, MouseEvent } from "react";
+import { useEffect, useRef, MouseEvent } from "react";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { BookOpen01Icon, GraduationScrollIcon, ArrowUpRight01Icon } from "@hugeicons/core-free-icons";
 
@@ -24,21 +24,43 @@ export function InteractiveCourseCard({
   accentColor,
 }: InteractiveCourseCardProps) {
   const cardRef = useRef<HTMLAnchorElement>(null);
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const [isHovered, setIsHovered] = useState(false);
+  const pointerRef = useRef({ x: 0, y: 0 });
+  const frameRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, []);
+
+  const commitPointerPosition = () => {
+    frameRef.current = null;
+    const card = cardRef.current;
+    if (!card) return;
+    card.style.setProperty("--glow-x", `${pointerRef.current.x}px`);
+    card.style.setProperty("--glow-y", `${pointerRef.current.y}px`);
+  };
 
   const handleMouseMove = (e: MouseEvent<HTMLAnchorElement>) => {
     if (!cardRef.current) return;
 
     const rect = cardRef.current.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
+    pointerRef.current.x = e.clientX - rect.left;
+    pointerRef.current.y = e.clientY - rect.top;
 
-    setMousePosition({ x, y });
+    if (frameRef.current === null) {
+      frameRef.current = requestAnimationFrame(commitPointerPosition);
+    }
   };
 
-  const handleMouseEnter = () => setIsHovered(true);
-  const handleMouseLeave = () => setIsHovered(false);
+  const handleMouseLeave = () => {
+    if (frameRef.current !== null) {
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    }
+  };
 
   const IconSVG = icon === "book" ? (
     <HugeiconsIcon icon={BookOpen01Icon} size={24} className="text-[#9275E5]" />
@@ -52,38 +74,31 @@ export function InteractiveCourseCard({
       href={url}
       target="_blank"
       rel="noopener noreferrer"
-      className="group relative block overflow-hidden rounded-2xl border border-slate-200 bg-white/80 backdrop-blur-sm p-6 transition-all duration-300 hover:border-transparent hover:shadow-2xl"
+      className="group relative block overflow-hidden rounded-2xl border border-slate-200 bg-white/80 p-6 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-transparent hover:shadow-2xl [--glow-x:150px] [--glow-y:150px]"
       onMouseMove={handleMouseMove}
-      onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      style={{
-        transform: isHovered ? 'translateY(-4px)' : 'translateY(0)',
-      }}
     >
       {/* Cursor glow effect */}
-      {isHovered && (
-        <div
-          className="pointer-events-none absolute z-0 rounded-full opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-          style={{
-            width: '300px',
-            height: '300px',
-            left: mousePosition.x - 150,
-            top: mousePosition.y - 150,
-            background: `radial-gradient(circle, ${accentColor}40 0%, ${accentColor}20 40%, transparent 70%)`,
-            filter: 'blur(20px)',
-          }}
-        />
-      )}
+      <div
+        className="pointer-events-none absolute z-0 h-[300px] w-[300px] rounded-full opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        style={{
+          left: "calc(var(--glow-x) - 150px)",
+          top: "calc(var(--glow-y) - 150px)",
+          background: `radial-gradient(circle, ${accentColor}40 0%, ${accentColor}20 40%, transparent 70%)`,
+          filter: "blur(20px)",
+        }}
+      />
 
       {/* Border glow */}
       <div
         className="absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
         style={{
           background: `linear-gradient(135deg, ${accentColor}30, ${accentColor}10, transparent)`,
-          padding: '1px',
-          WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-          WebkitMaskComposite: 'xor',
-          maskComposite: 'exclude',
+          padding: "1px",
+          WebkitMask:
+            "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+          WebkitMaskComposite: "xor",
+          maskComposite: "exclude",
         }}
       />
 

app/components/json-ld.tsx

@@ -1,4 +1,5 @@
 import type { AppLocale } from "@/i18n.config";
+import { ORGANIZATION_LINKEDIN_URL } from "@/app/constants/social-links";
 
 const BASE_URL = "https://baish.com.ar";
 
@@ -140,12 +141,12 @@ export function OrganizationJsonLd() {
     name: "BAISH - Buenos Aires AI Safety Hub",
     alternateName: "BAISH",
     url: BASE_URL,
-    logo: `${BASE_URL}/images/logos/baish-logo-192.png`,
+    logo: `${BASE_URL}/images/logos/logo-192.png`,
     description:
       "Supporting students in Buenos Aires to enter AI safety research through courses, workshops, and community.",
     sameAs: [
       "https://t.me/+zhSGhXrn56g1YjVh",
-      "https://www.linkedin.com/company/baish-ai-safety",
+      ORGANIZATION_LINKEDIN_URL,
       "https://www.youtube.com/@BAISHaiSafety",
     ],
     contactPoint: {

app/components/lazy-youtube-embed.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+
+interface LazyYouTubeEmbedProps {
+  videoId: string;
+  title: string;
+  className?: string;
+}
+
+export function LazyYouTubeEmbed({
+  videoId,
+  title,
+  className = "",
+}: LazyYouTubeEmbedProps) {
+  const [isActivated, setIsActivated] = useState(false);
+
+  const thumbnailSrc = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
+  const embedSrc = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&modestbranding=1&rel=0`;
+
+  if (isActivated) {
+    return (
+      <iframe
+        className={`absolute inset-0 h-full w-full ${className}`}
+        src={embedSrc}
+        title={title}
+        loading="lazy"
+        referrerPolicy="strict-origin-when-cross-origin"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowFullScreen
+      />
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => setIsActivated(true)}
+      className={`absolute inset-0 block h-full w-full overflow-hidden bg-slate-900 ${className}`}
+      aria-label={`Play video: ${title}`}
+    >
+      <Image
+        src={thumbnailSrc}
+        alt=""
+        fill
+        sizes="(max-width: 768px) 100vw, 896px"
+        className="object-cover"
+      />
+      <span className="absolute inset-0 bg-slate-900/25 transition-colors duration-200 hover:bg-slate-900/10" />
+      <span className="absolute left-1/2 top-1/2 flex h-16 w-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white/95 shadow-xl">
+        <span
+          className="ml-1 h-0 w-0 border-y-[10px] border-y-transparent border-l-[16px] border-l-[var(--color-accent-primary)]"
+          aria-hidden="true"
+        />
+      </span>
+    </button>
+  );
+}