fix: react-doctor → 64/100 (Bugs 122, Perf 286, A11y 613, Maint 436)

- CartContext: lazy initializers replace mount-only useEffect
  hydration; remove 8 no-initialize-state warnings
- Toast/AdminSearchInput: React 19 useContext/use + drop
  forwardRef (3 no-react19-deprecated-apis)
- ProductFormModal: lazy initializers + useSyncExternalStore
  for mount; parent adds key=editingProduct.id
- InstallPrompt: useReducer for prompt state (no-cascading-set-state)
- QRScanModal: ref-based latest-callback pattern replaces
  useEffectEvent deps mistake
- OnboardingFlow: functional setState (rerender-functional-setstate)
- UsersPage/StopsCalendar/FeaturesAndStats: lazy initializers
  (rerender-lazy-state-init)
- FAQClientPage: server-side brand settings fetch via getBrandSettingsPublic
  in layout; remove supabase import
- LandingPageWrapper: href='#' → href='#top' (anchor-is-valid)
- TuxedoVideoHero: replace animate-bounce with ease-out-expo
  (no-inline-bounce-easing)
- ProductTableClient: useCallback for handleDeleted
  (jsx-no-new-function-as-prop)
- excel-parser: pre-compile delimiter regexes (js-hoist-regexp)
- water-log/settings: Promise.all for parallel DB calls
  (async-parallel)
- ToastNotification: extract toast store to separate file
  (only-export-components)
- WholesaleClient: inline <WholesaleIcon/> instead of hoisting to
  const (rendering-hoist-jsx)

src/app/admin/water-log/headgates/HeadgatesManager.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import Image from "next/image";
 import { useRouter } from "next/navigation";
 import {
   getWaterHeadgatesAdmin,
@@ -331,9 +332,12 @@ export default function HeadgatesManager({ initialHeadgates, brandId }: Props) {
                         </AdminButton>
                         {/* QR preview thumbnail */}
                         <button type="button" onClick={() => setQrModal(hg)} className="hover:opacity-80" title="View / Print QR">
-                          <img
+                          <Image
                             src={`/api/water-qr?token=${hg.headgate_token}&size=80`}
                             alt={`QR for ${hg.name}`}
+                            width={40}
+                            height={40}
+                            unoptimized
                             className="w-10 h-10 rounded border border-[var(--admin-border)]"
                           />
                         </button>
@@ -531,9 +535,12 @@ function QRModal({ hg, onClose, onRegenerate }: { hg: Headgate; onClose: () => v
             <div className="text-xl font-black text-black leading-tight tracking-tight">{hg.name}</div>
             <div className="text-[9px] font-bold text-gray-500 uppercase tracking-widest mt-0.5 mb-3">{code}</div>
             <div className="flex justify-center mb-2">
-              <img
+              <Image
                 src={`/api/water-qr?token=${hg.headgate_token}&size=160`}
                 alt="QR"
+                width={112}
+                height={112}
+                unoptimized
                 className="w-28 h-28 rounded"
               />
             </div>