refactor: comprehensive frontend review — consistency, a11y, code quality

- Replace event dispatchers with BookingContext (Hero, Header, FloatingContact)
- Add focus trap hook for modals (SignupModal, NewsModal)
- Extract shared components: CollapsibleSection, ConfirmDialog, PriceField, AdminSkeleton
- Add delete confirmation dialog to ArrayEditor
- Replace hardcoded colors (#050505, #0a0a0a, #c9a96e, #2ecc71) with theme tokens
- Add CSS variables --color-surface-deep/dark for consistent dark surfaces
- Improve contrast: muted text neutral-500 → neutral-400 in dark mode
- Fix modal z-index hierarchy (modals z-60, header z-50, floats z-40)
- Consolidate duplicate formatDate → shared formatting.ts
- Add useMemo to TeamProfile groupMap computation
- Fix typography: responsive price text in Pricing section
- Add ARIA labels/expanded to FAQ, OpenDay, ArrayEditor grip handles
- Hide number input spinners globally
- Reorder admin sidebar: Dashboard → SEO → Bookings → site section order
- Use shared PriceField in Open Day editor
- Fix schedule grid first time slot (09:00) clipped by container
- Fix pre-existing type errors (bookings, hero, db interfaces)

src/components/sections/Pricing.tsx

@@ -25,7 +25,7 @@ export function Pricing({ data: pricing }: PricingProps) {
   const regularItems = pricing.items.filter((item) => !item.featured);
 
   return (
-    <section id="pricing" className="section-glow relative section-padding bg-neutral-50 dark:bg-[#050505]">
+    <section id="pricing" className="section-glow relative section-padding bg-neutral-50 dark:bg-neutral-950">
       <div className="section-divider absolute top-0 left-0 right-0" />
       <div className="section-container">
         <Reveal>
@@ -69,7 +69,7 @@ export function Pricing({ data: pricing }: PricingProps) {
                     className={`group relative rounded-2xl border p-5 transition-all duration-300 ${
                       isPopular
                         ? "border-gold/40 bg-gradient-to-br from-gold/10 via-transparent to-gold/5 dark:from-gold/[0.07] dark:to-gold/[0.02] shadow-lg shadow-gold/10"
-                        : "border-neutral-200 bg-white dark:border-white/[0.06] dark:bg-[#0a0a0a]"
+                        : "border-neutral-200 bg-white dark:border-white/[0.06] dark:bg-neutral-950"
                     }`}
                   >
                     {/* Popular badge */}
@@ -96,7 +96,7 @@ export function Pricing({ data: pricing }: PricingProps) {
                       )}
 
                       {/* Price */}
-                      <p className={`mt-3 font-display text-2xl font-bold ${isPopular ? "text-gold" : "text-neutral-900 dark:text-white"}`}>
+                      <p className={`mt-3 font-display text-xl sm:text-2xl font-bold ${isPopular ? "text-gold" : "text-neutral-900 dark:text-white"}`}>
                         {item.price}
                       </p>
                     </div>
@@ -122,7 +122,7 @@ export function Pricing({ data: pricing }: PricingProps) {
                       </p>
                     )}
                   </div>
-                  <p className="shrink-0 font-display text-3xl font-bold text-gold">
+                  <p className="shrink-0 font-display text-2xl sm:text-3xl font-bold text-gold">
                     {featuredItem.price}
                   </p>
                 </div>
@@ -137,7 +137,7 @@ export function Pricing({ data: pricing }: PricingProps) {
             {pricing.rentalItems.map((item, i) => (
               <div
                 key={i}
-                className="flex items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white px-6 py-5 dark:border-white/[0.06] dark:bg-[#0a0a0a]"
+                className="flex items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white px-6 py-5 dark:border-white/[0.06] dark:bg-neutral-950"
               >
                 <div>
                   <p className="font-medium text-neutral-900 dark:text-white">
@@ -163,7 +163,7 @@ export function Pricing({ data: pricing }: PricingProps) {
             {pricing.rules.map((rule, i) => (
               <div
                 key={i}
-                className="flex gap-4 rounded-2xl border border-neutral-200 bg-white px-5 py-4 dark:border-white/[0.06] dark:bg-[#0a0a0a]"
+                className="flex gap-4 rounded-2xl border border-neutral-200 bg-white px-5 py-4 dark:border-white/[0.06] dark:bg-neutral-950"
               >
                 <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gold/10 text-xs font-bold text-gold-dark dark:bg-gold/10 dark:text-gold-light">
                   {i + 1}