Travel Booking (e.g. Airbnb)

/ (homepage)
├── /search?location=X&checkin=Y&checkout=Z&guests=N&filters=...
│   └── (modal) /listing/[slug] (on mobile: full page)
├── /listing/[slug]
│   ├── /listing/[slug]/reviews
│   ├── /listing/[slug]/photos
│   └── /booking/[listingId]
│       ├── /booking/[id]/confirm
│       └── /booking/[id]/receipt
├── /wishlists
├── /trips
├── /messages
│   └── /messages/[threadId]
├── /host
│   ├── /host/listings
│   ├── /host/calendar
│   ├── /host/earnings
│   └── /host/messages
└── /account
    ├── /account/profile
    ├── /account/payments
    └── /account/preferences

SearchPage
├── SearchHeader
│   ├── LocationAutocomplete (Google Places / custom)
│   ├── DateRangePicker (availability-aware)
│   └── GuestSelector (adults/children/infants/pets)
├── FilterBar
│   ├── PriceRangeSlider
│   ├── PropertyTypeSelector
│   ├── AmenityCheckboxGroup
│   └── InstantBookToggle
├── SearchLayout (responsive: stack on mobile, split on desktop)
│   ├── MapView
│   │   ├── MapContainer (Mapbox GL JS)
│   │   ├── MarkerCluster
│   │   ├── PriceMarker
│   │   └── MapControls (zoom, fullscreen, satellite)
│   └── ResultsList
│       ├── ListingCard (virtualized)
│       │   ├── ImageCarousel
│       │   ├── PricingBadge
│       │   ├── RatingStars
│       │   └── WishlistButton
│       └── Pagination / InfiniteScroll
└── SearchFooter (mobile: map toggle FAB)

ListingPage
├── PhotoGallery
│   ├── ImageGrid (hero + 4 supporting)
│   ├── LightboxModal (swipeable, keyboard nav)
│   └── VirtualTourViewer (360° embed)
├── ListingContent
│   ├── TitleBlock (title, rating, location, superhost badge)
│   ├── HostCard
│   ├── DescriptionSection (expandable)
│   ├── AmenityGrid
│   ├── AvailabilityCalendar
│   ├── LocationMap (static + expandable)
│   └── ReviewsSection
│       ├── RatingSummary (category breakdown)
│       ├── ReviewList (virtualized)
│       └── ReviewFilters
└── BookingSidebar (sticky on desktop, bottom sheet on mobile)
    ├── PriceBreakdown
    ├── DateSelector (inline calendar)
    ├── GuestSelector
    └── ReserveButton (with inventory status)

BookingFlow
├── BookingStepIndicator
├── GuestInfoStep
├── PaymentStep (Stripe Elements)
├── ReviewStep (summary before confirm)
└── ConfirmationStep (itinerary + receipt)

// Core listing types
interface Listing {
  id: string;
  slug: string;
  title: string;
  description: string;
  propertyType: PropertyType;
  roomType: "entire_place" | "private_room" | "shared_room";
  hostId: string;
  location: GeoLocation;
  address: Address;
  capacity: GuestCapacity;
  bedrooms: number;
  beds: number;
  bathrooms: number;
  amenities: AmenityId[];
  photos: ListingPhoto[];
  virtualTour?: VirtualTourConfig;
  pricing: PricingConfig;
  availability: AvailabilityConfig;
  instantBook: boolean;
  superhostStatus: boolean;
  rating: RatingAggregate;
  reviewCount: number;
  createdAt: string; // ISO 8601
  updatedAt: string;
  status: "active" | "inactive" | "pending_review" | "suspended";
}

type PropertyType =
  | "apartment"
  | "house"
  | "villa"
  | "cabin"
  | "treehouse"
  | "boat"
  | "castle"
  | "tent"
  | "hotel"
  | "hostel"
  | "resort"
  | "farm";

interface GeoLocation {
  lat: number;
  lng: number;
  /** Obfuscated radius for privacy (meters) */
  fuzzyRadius: number;
}

interface Address {
  street?: string; // Only revealed post-booking
  city: string;
  state?: string;
  country: string;
  countryCode: string; // ISO 3166-1 alpha-2
  postalCode?: string;
  neighborhood?: string;
}

interface GuestCapacity {
  maxGuests: number;
  adults: number;
  children: number;
  infants: number;
  pets: boolean;
}

interface ListingPhoto {
  id: string;
  url: string;
  caption?: string;
  width: number;
  height: number;
  blurhash: string;
  /** Responsive variants */
  srcset: ImageVariant[];
  category:
    | "exterior"
    | "interior"
    | "bedroom"
    | "bathroom"
    | "kitchen"
    | "view"
    | "amenity";
}

interface ImageVariant {
  url: string;
  width: number;
  format: "webp" | "avif" | "jpeg";
}

interface VirtualTourConfig {
  provider: "matterport" | "custom";
  embedUrl: string;
  thumbnailUrl: string;
}

// Pricing
interface PricingConfig {
  basePricePerNight: MonetaryAmount;
  currency: CurrencyCode;
  weekendMultiplier: number; // e.g., 1.2
  weeklyDiscount?: number; // percentage
  monthlyDiscount?: number;
  cleaningFee: MonetaryAmount;
  securityDeposit?: MonetaryAmount;
  extraGuestFee?: MonetaryAmount;
  extraGuestThreshold?: number;
  seasonalPricing: SeasonalRate[];
  customNightlyPrices: Record<string, MonetaryAmount>; // date -> price override
}

interface MonetaryAmount {
  amount: number; // cents/smallest unit
  currency: CurrencyCode;
}

type CurrencyCode = "USD" | "EUR" | "GBP" | "JPY" | "AUD" | string;

interface SeasonalRate {
  startDate: string; // MM-DD
  endDate: string;
  multiplier: number;
  label?: string; // "Peak Season", "Holiday"
}

// Availability
interface AvailabilityConfig {
  minNights: number;
  maxNights: number;
  advanceNotice: number; // hours
  preparationTime: number; // days between bookings
  availabilityWindow: number; // months into future
  blockedDates: DateRange[];
  checkInTime: string; // HH:mm
  checkOutTime: string;
  checkInDays?: DayOfWeek[]; // restrict check-in to specific days
}

interface DateRange {
  start: string; // ISO date
  end: string;
  reason?: "host_blocked" | "booked" | "maintenance";
}

type DayOfWeek = "mon" | "tue" | "wed" | "thu" | "fri" | "sat" | "sun";

// Search
interface SearchParams {
  location?: string;
  bounds?: MapBounds;
  checkin?: string;
  checkout?: string;
  guests: GuestCapacity;
  priceMin?: number;
  priceMax?: number;
  propertyTypes?: PropertyType[];
  amenities?: AmenityId[];
  instantBook?: boolean;
  superhostOnly?: boolean;
  roomType?: ("entire_place" | "private_room" | "shared_room")[];
  bedrooms?: number;
  beds?: number;
  bathrooms?: number;
  accessibility?: AccessibilityFeature[];
  sortBy: "relevance" | "price_asc" | "price_desc" | "rating" | "newest";
  page: number;
  pageSize: number;
}

interface MapBounds {
  ne: { lat: number; lng: number };
  sw: { lat: number; lng: number };
}

interface SearchResult {
  listings: ListingCard[];
  total: number;
  pagination: PaginationMeta;
  mapMarkers: MapMarker[];
  facets: SearchFacets;
  searchId: string; // for analytics correlation
}

interface ListingCard {
  id: string;
  slug: string;
  title: string;
  photos: ListingPhoto[]; // first 5 only
  pricing: {
    perNight: MonetaryAmount;
    total?: MonetaryAmount; // if dates provided
  };
  rating: RatingAggregate;
  reviewCount: number;
  propertyType: PropertyType;
  roomType: string;
  location: { city: string; country: string; lat: number; lng: number };
  instantBook: boolean;
  superhostStatus: boolean;
  capacity: GuestCapacity;
  amenityHighlights: AmenityId[]; // top 3-5
  isWishlisted: boolean;
}

interface MapMarker {
  id: string;
  lat: number;
  lng: number;
  price: MonetaryAmount;
  isSelected: boolean;
}

// Booking
interface Booking {
  id: string;
  listingId: string;
  guestId: string;
  hostId: string;
  status: BookingStatus;
  checkIn: string;
  checkOut: string;
  guests: GuestCapacity;
  pricing: BookingPricing;
  paymentIntentId: string;
  specialRequests?: string;
  guestInfo: GuestInfo;
  createdAt: string;
  confirmedAt?: string;
  cancelledAt?: string;
  cancellationReason?: string;
}

type BookingStatus =
  | "pending"
  | "confirmed"
  | "cancelled_guest"
  | "cancelled_host"
  | "completed"
  | "review_pending";

interface BookingPricing {
  nights: number;
  perNightRate: MonetaryAmount;
  subtotal: MonetaryAmount;
  cleaningFee: MonetaryAmount;
  serviceFee: MonetaryAmount;
  taxes: TaxBreakdown[];
  total: MonetaryAmount;
  currency: CurrencyCode;
  /** Exchange rate if display currency differs from listing currency */
  exchangeRate?: { from: CurrencyCode; to: CurrencyCode; rate: number };
}

interface TaxBreakdown {
  name: string;
  rate: number;
  amount: MonetaryAmount;
}

// Reviews
interface Review {
  id: string;
  listingId: string;
  bookingId: string;
  authorId: string;
  authorName: string;
  authorAvatar: string;
  rating: number; // 1-5
  categoryRatings: CategoryRatings;
  content: string;
  photos?: ReviewPhoto[];
  sentiment: "positive" | "neutral" | "negative";
  hostResponse?: { content: string; respondedAt: string };
  createdAt: string;
  stayDates: { checkIn: string; checkOut: string };
  tripType?: "business" | "family" | "couple" | "solo" | "friends";
}

interface CategoryRatings {
  cleanliness: number;
  accuracy: number;
  communication: number;
  location: number;
  checkIn: number;
  value: number;
}

interface RatingAggregate {
  overall: number;
  categories: CategoryRatings;
  distribution: Record<1 | 2 | 3 | 4 | 5, number>;
}

// GET /api/search
// Query params serialized from SearchParams type
interface SearchRequest {
  method: "GET";
  path: "/api/search";
  query: SearchParams;
  headers: {
    "Accept-Language": string;
    "X-Currency": CurrencyCode;
    "X-Request-Id": string;
  };
}

interface SearchResponse {
  data: SearchResult;
  meta: {
    requestId: string;
    latencyMs: number;
    cacheHit: boolean;
  };
}

// GET /api/search/autocomplete
interface AutocompleteRequest {
  method: "GET";
  path: "/api/search/autocomplete";
  query: {
    q: string;
    types?: ("city" | "region" | "country" | "listing")[];
    limit?: number;
  };
}

interface AutocompleteResponse {
  suggestions: Array<{
    id: string;
    type: "city" | "region" | "country" | "listing";
    label: string;
    subtitle?: string;
    location: GeoLocation;
    resultCount?: number;
  }>;
}

// GET /api/listings/[slug]
interface ListingDetailResponse {
  listing: Listing;
  host: HostProfile;
  nearbyListings: ListingCard[];
  structuredData: SchemaOrgLodgingBusiness; // JSON-LD
}

// GET /api/listings/[id]/availability
interface AvailabilityRequest {
  method: "GET";
  path: "/api/listings/:id/availability";
  query: { startMonth: string; months: number }; // YYYY-MM, 1-18
}

interface AvailabilityResponse {
  listingId: string;
  calendar: CalendarMonth[];
}

interface CalendarMonth {
  month: string; // YYYY-MM
  days: CalendarDay[];
}

interface CalendarDay {
  date: string; // YYYY-MM-DD
  available: boolean;
  price?: MonetaryAmount;
  minNights?: number;
  checkInAllowed: boolean;
  checkOutAllowed: boolean;
  reason?: "booked" | "blocked" | "past" | "too_far";
}

// GET /api/listings/[id]/reviews
interface ReviewsRequest {
  method: "GET";
  path: "/api/listings/:id/reviews";
  query: {
    page: number;
    pageSize: number; // max 50
    sortBy: "newest" | "highest" | "lowest" | "relevance";
    rating?: number; // filter by star count
    hasPhotos?: boolean;
  };
}

interface ReviewsResponse {
  reviews: Review[];
  aggregate: RatingAggregate;
  pagination: PaginationMeta;
}

// POST /api/bookings/price-quote
interface PriceQuoteRequest {
  listingId: string;
  checkIn: string;
  checkOut: string;
  guests: GuestCapacity;
  currency: CurrencyCode;
}

interface PriceQuoteResponse {
  pricing: BookingPricing;
  holdExpiry?: string; // ISO datetime — inventory hold expiration
  quoteId: string;
  validUntil: string;
}

// POST /api/bookings/hold
interface InventoryHoldRequest {
  listingId: string;
  checkIn: string;
  checkOut: string;
  quoteId: string;
}

interface InventoryHoldResponse {
  holdId: string;
  expiresAt: string; // 15-minute hold
  status: "held" | "unavailable";
}

// POST /api/bookings
interface CreateBookingRequest {
  holdId: string;
  quoteId: string;
  guests: GuestCapacity;
  guestInfo: GuestInfo;
  paymentMethodId: string;
  specialRequests?: string;
  agreedToTerms: boolean;
}

interface CreateBookingResponse {
  booking: Booking;
  paymentStatus: "succeeded" | "requires_action" | "failed";
  /** Stripe client secret for 3D Secure if requires_action */
  clientSecret?: string;
  confirmationCode: string;
}

// WSS /ws/search
interface SearchWSMessage {
  type: "price_update" | "availability_change" | "new_listing";
  payload: PriceUpdatePayload | AvailabilityChangePayload;
}

interface PriceUpdatePayload {
  listingId: string;
  oldPrice: MonetaryAmount;
  newPrice: MonetaryAmount;
  reason: "demand" | "host_change" | "promotion";
}

interface AvailabilityChangePayload {
  listingId: string;
  dates: string[];
  available: boolean;
}

// WSS /ws/messages
interface MessageWSPayload {
  type: "new_message" | "typing" | "read_receipt";
  threadId: string;
  senderId: string;
  content?: string;
  timestamp: string;
}

interface PaginationMeta {
  page: number;
  pageSize: number;
  total: number;
  totalPages: number;
  hasNext: boolean;
  hasPrev: boolean;
  /** Cursor for keyset pagination (preferred for map-based results) */
  cursor?: string;
}

// TanStack Query configuration for search
const searchQueryOptions = {
  queryKey: ["search", serializedParams],
  queryFn: () => searchAPI.search(params),
  staleTime: 30_000,
  gcTime: 300_000,
  placeholderData: keepPreviousData, // Show previous results while fetching
  refetchOnWindowFocus: false, // Don't refetch on tab switch
  retry: 2,
  retryDelay: (attempt: number) => Math.min(1000 * 2 ** attempt, 10000),
};

// Optimistic wishlist toggle
const wishlistMutation = useMutation({
  mutationFn: (listingId: string) => toggleWishlist(listingId),
  onMutate: async (listingId) => {
    await queryClient.cancelQueries({ queryKey: ["search"] });
    const previous = queryClient.getQueryData<SearchResult>(["search", params]);
    queryClient.setQueryData(["search", params], (old: SearchResult) => ({
      ...old,
      listings: old.listings.map((l) =>
        l.id === listingId ? { ...l, isWishlisted: !l.isWishlisted } : l,
      ),
    }));
    return { previous };
  },
  onError: (_err, _id, context) => {
    queryClient.setQueryData(["search", params], context?.previous);
  },
});

Cache-Control headers by route:

/ (homepage)           → s-maxage=60, stale-while-revalidate=300
/search                → private, no-store (personalized + dynamic)
/listing/[slug]        → s-maxage=300, stale-while-revalidate=3600
/listing/[slug]/photos → s-maxage=86400 (photos rarely change)
/api/search            → private, no-store
/api/listings/[id]     → s-maxage=300, stale-while-revalidate=600
/api/autocomplete      → s-maxage=3600 (locations are stable)
/_next/static/*        → immutable, max-age=31536000
/images/*              → max-age=86400, s-maxage=604800

// Edge middleware for stale content detection
export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Add cache status header for observability
  response.headers.set("X-Cache-Status", "MISS");

  // Inject stale indicator for client hydration
  if (response.headers.get("x-vercel-cache") === "STALE") {
    response.headers.set("X-Content-Stale", "true");
  }

  return response;
}

Search Page Critical Path (Target: 1.8s LCP on 4G):

T+0ms     HTML response starts streaming (Edge)
T+100ms   <head> parsed: critical CSS inlined, preload hints emitted
T+200ms   Shell renders: header, search bar, filter skeleton
T+400ms   First search results chunk streams in (React Suspense boundary)
T+600ms   LCP candidate: first listing card image decoded
T+800ms   Map chunk starts loading (intersection observer)
T+1200ms  Map initializes with markers
T+1800ms  Full page interactive (INP-ready)

Listing Page Critical Path (Target: 2.2s LCP on 4G):

T+0ms     ISR cache hit at edge → instant TTFB
T+50ms    Static shell + hero image preloaded
T+150ms   HTML fully parsed (minimal JS for static content)
T+400ms   Hero image decoded → LCP
T+600ms   Dynamic pricing/availability hole fills (PPR)
T+1000ms  Calendar, map, reviews lazy-loaded below fold
T+2200ms  Full page interactive

// Search results: virtualize when > 50 items (infinite scroll mode)
import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualizedListings({ listings }: { listings: ListingCard[] }) {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: listings.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 320, // Listing card height
    overscan: 5,
    gap: 24,
  });

  return (
    <div ref={parentRef} className="h-[calc(100vh-200px)] overflow-auto">
      <div style={{ height: virtualizer.getTotalSize() }} className="relative w-full">
        {virtualizer.getVirtualItems().map((virtualItem) => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              top: virtualItem.start,
              height: virtualItem.size,
              width: '100%',
            }}
          >
            <ListingCard listing={listings[virtualItem.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

// Reviews list: always virtualized (listings can have 5000+ reviews)
// Photo gallery: virtual scroll for thumbnail strip
// Map markers: Mapbox built-in clustering handles this at the GL level

// Listing photo component with responsive loading
function ListingImage({ photo, priority = false }: {
  photo: ListingPhoto;
  priority?: boolean;
}) {
  return (
    <div
      className="relative overflow-hidden rounded-xl"
      style={{ aspectRatio: `${photo.width}/${photo.height}` }}
    >
      {/* Blurhash placeholder for instant visual */}
      <BlurhashCanvas hash={photo.blurhash} className="absolute inset-0" />

      <Image
        src={photo.url}
        alt={photo.caption ?? ''}
        fill
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        quality={75}
        priority={priority}
        placeholder="empty" // blurhash handles the placeholder
        className="object-cover"
      />
    </div>
  );
}

// Image CDN URL construction (Cloudinary example)
function getOptimizedUrl(baseUrl: string, opts: {
  width: number;
  format?: 'auto' | 'webp' | 'avif';
  quality?: number;
}): string {
  const { width, format = 'auto', quality = 75 } = opts;
  return `${baseUrl}?w=${width}&f=${format}&q=${quality}&fit=crop`;
}

// next.config.ts — aggressive code splitting
const nextConfig: NextConfig = {
  experimental: {
    optimizePackageImports: [
      'lucide-react',
      'date-fns',
      '@tanstack/react-query',
    ],
  },
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    remotePatterns: [
      { protocol: 'https', hostname: '**.cloudinary.com' },
      { protocol: 'https', hostname: '**.imgix.net' },
    ],
  },
};

// Dynamic imports for heavy modules
const MapView = dynamic(() => import('./MapView'), {
  ssr: false,
  loading: () => <MapSkeleton />,
});

const DateRangePicker = dynamic(() => import('./DateRangePicker'), {
  loading: () => <DatePickerSkeleton />,
});

const StripeElements = dynamic(() => import('./StripePaymentForm'), {
  ssr: false,
});

const VirtualTourViewer = dynamic(() => import('./VirtualTourViewer'), {
  ssr: false,
  loading: () => <VirtualTourSkeleton />,
});

// middleware.ts — CSP header construction
const csp = [
  "default-src 'self'",
  "script-src 'self' 'nonce-{NONCE}' https://js.stripe.com https://api.mapbox.com",
  "style-src 'self' 'unsafe-inline' https://api.mapbox.com", // Mapbox requires inline styles
  "img-src 'self' data: blob: https://*.cloudinary.com https://*.mapbox.com https://*.stripe.com",
  "connect-src 'self' https://api.mapbox.com https://*.stripe.com wss://*.mapbox.com wss://ws.travel-platform.com",
  "frame-src https://js.stripe.com https://hooks.stripe.com https://my.matterport.com",
  "font-src 'self' https://fonts.gstatic.com",
  "object-src 'none'",
  "base-uri 'self'",
  "form-action 'self'",
  "frame-ancestors 'none'",
  "upgrade-insecure-requests",
].join("; ");

// Booking API route — authorization pattern
export async function POST(req: NextRequest) {
  const session = await getServerSession();
  if (!session) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const body = await req.json();
  const parsed = createBookingSchema.safeParse(body);
  if (!parsed.success) {
    return NextResponse.json(
      { error: "Invalid request", details: parsed.error.flatten() },
      { status: 400 },
    );
  }

  // Validate hold token belongs to this user
  const hold = await validateHold(parsed.data.holdId, session.user.id);
  if (!hold) {
    return NextResponse.json(
      { error: "Hold expired or invalid" },
      { status: 409 },
    );
  }

  // Server-side price recalculation — never trust client price
  const pricing = await calculatePricing(
    hold.listingId,
    hold.checkIn,
    hold.checkOut,
    parsed.data.guests,
  );

  // Compare with quoted price — alert on mismatch > 1%
  const priceDrift =
    Math.abs(pricing.total.amount - hold.quotedTotal.amount) /
    hold.quotedTotal.amount;
  if (priceDrift > 0.01) {
    logger.warn("Price mismatch detected", {
      holdId: hold.id,
      quoted: hold.quotedTotal,
      calculated: pricing.total,
    });
    return NextResponse.json(
      { error: "Price changed", newPricing: pricing },
      { status: 409 },
    );
  }

  // Process payment via Stripe
  const paymentIntent = await stripe.paymentIntents.create({
    amount: pricing.total.amount,
    currency: pricing.total.currency.toLowerCase(),
    customer: session.user.stripeCustomerId,
    payment_method: parsed.data.paymentMethodId,
    confirm: true,
    metadata: { bookingId: hold.id, listingId: hold.listingId },
  });

  // ... create booking record, send confirmations
}

import { z } from "zod";

const searchParamsSchema = z
  .object({
    location: z.string().max(200).optional(),
    checkin: z
      .string()
      .regex(/^\d{4}-\d{2}-\d{2}$/)
      .optional(),
    checkout: z
      .string()
      .regex(/^\d{4}-\d{2}-\d{2}$/)
      .optional(),
    guests: z.object({
      adults: z.number().int().min(1).max(16),
      children: z.number().int().min(0).max(10),
      infants: z.number().int().min(0).max(5),
      pets: z.boolean().default(false),
    }),
    priceMin: z.number().int().min(0).max(100000).optional(),
    priceMax: z.number().int().min(0).max(100000).optional(),
    propertyTypes: z
      .array(
        z.enum([
          "apartment",
          "house",
          "villa",
          "cabin",
          "treehouse",
          "boat",
          "castle",
          "tent",
          "hotel",
          "hostel",
          "resort",
          "farm",
        ]),
      )
      .max(12)
      .optional(),
    amenities: z.array(z.string().max(50)).max(30).optional(),
    instantBook: z.boolean().optional(),
    page: z.number().int().min(1).max(100).default(1),
    pageSize: z.number().int().min(1).max(50).default(20),
  })
  .refine(
    (data) =>
      !data.priceMin || !data.priceMax || data.priceMin <= data.priceMax,
    { message: "priceMin must be <= priceMax" },
  )
  .refine(
    (data) => !data.checkin || !data.checkout || data.checkin < data.checkout,
    { message: "checkin must be before checkout" },
  );

// Review submission — sanitize UGC
const reviewSchema = z.object({
  rating: z.number().int().min(1).max(5),
  content: z.string().min(10).max(2000).transform(sanitizeHtml),
  categoryRatings: z.object({
    cleanliness: z.number().int().min(1).max(5),
    accuracy: z.number().int().min(1).max(5),
    communication: z.number().int().min(1).max(5),
    location: z.number().int().min(1).max(5),
    checkIn: z.number().int().min(1).max(5),
    value: z.number().int().min(1).max(5),
  }),
});

// Circuit breaker for search API
class SearchCircuitBreaker {
  private failures = 0;
  private lastFailure = 0;
  private state: "closed" | "open" | "half-open" = "closed";

  private readonly THRESHOLD = 5;
  private readonly RESET_TIMEOUT = 30_000;

  async execute<T>(fn: () => Promise<T>, fallback: () => T): Promise<T> {
    if (this.state === "open") {
      if (Date.now() - this.lastFailure > this.RESET_TIMEOUT) {
        this.state = "half-open";
      } else {
        return fallback();
      }
    }

    try {
      const result = await fn();
      this.onSuccess();
      return result;
    } catch (error) {
      this.onFailure();
      return fallback();
    }
  }

  private onSuccess() {
    this.failures = 0;
    this.state = "closed";
  }

  private onFailure() {
    this.failures++;
    this.lastFailure = Date.now();
    if (this.failures >= this.THRESHOLD) {
      this.state = "open";
    }
  }
}

// Booking state persistence for recovery
function useBookingPersistence(bookingId: string) {
  const STORAGE_KEY = `booking-draft-${bookingId}`;

  const save = useCallback(
    (state: BookingFormState) => {
      try {
        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));
      } catch {
        /* quota exceeded — non-critical */
      }
    },
    [STORAGE_KEY],
  );

  const restore = useCallback((): BookingFormState | null => {
    try {
      const raw = sessionStorage.getItem(STORAGE_KEY);
      return raw ? JSON.parse(raw) : null;
    } catch {
      return null;
    }
  }, [STORAGE_KEY]);

  const clear = useCallback(() => {
    sessionStorage.removeItem(STORAGE_KEY);
  }, [STORAGE_KEY]);

  return { save, restore, clear };
}

// Date picker with ARIA grid pattern
function AvailabilityCalendar({ availability }: { availability: CalendarMonth[] }) {
  return (
    <div role="application" aria-label="Availability calendar">
      {availability.map((month) => (
        <table
          key={month.month}
          role="grid"
          aria-label={formatMonth(month.month)}
        >
          <thead>
            <tr role="row">
              {WEEKDAYS.map((day) => (
                <th key={day.short} role="columnheader" aria-label={day.full}>
                  {day.short}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {getWeeks(month.days).map((week, i) => (
              <tr key={i} role="row">
                {week.map((day) => (
                  <td
                    key={day.date}
                    role="gridcell"
                    aria-selected={isSelected(day.date)}
                    aria-disabled={!day.available}
                    aria-label={`${formatDate(day.date)}, ${
                      day.available
                        ? `${formatCurrency(day.price)} per night`
                        : 'Not available'
                    }`}
                    tabIndex={isFocusable(day.date) ? 0 : -1}
                  >
                    <CalendarDayCell day={day} />
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      ))}
    </div>
  );
}

// Search results with live region for screen readers
function SearchResults({ results, isLoading }: SearchResultsProps) {
  return (
    <>
      <div aria-live="polite" aria-atomic="true" className="sr-only">
        {isLoading
          ? 'Searching for listings...'
          : `${results.total} listings found. Showing ${results.listings.length} results.`}
      </div>
      <ul role="list" aria-label="Search results">
        {results.listings.map((listing) => (
          <li key={listing.id} role="listitem">
            <ListingCard listing={listing} />
          </li>
        ))}
      </ul>
    </>
  );
}

// Listing card with complete screen reader context
function ListingCard({ listing }: { listing: ListingCard }) {
  const srDescription = [
    listing.title,
    `${listing.propertyType} in ${listing.location.city}`,
    `${formatCurrency(listing.pricing.perNight)} per night`,
    `${listing.rating.overall} out of 5 stars from ${listing.reviewCount} reviews`,
    listing.superhostStatus ? 'Superhost' : null,
    listing.instantBook ? 'Instant book available' : null,
  ].filter(Boolean).join('. ');

  return (
    <article aria-label={srDescription}>
      <div aria-hidden="true"> {/* Visual carousel — redundant for SR */}
        <ImageCarousel photos={listing.photos} />
      </div>
      <img
        src={listing.photos[0].url}
        alt={`${listing.title} — ${listing.propertyType} in ${listing.location.city}`}
        className="sr-only"
      />
      {/* Visible content */}
      <h3>{listing.title}</h3>
      <WishlistButton
        listingId={listing.id}
        isWishlisted={listing.isWishlisted}
        aria-label={`${listing.isWishlisted ? 'Remove from' : 'Save to'} wishlist: ${listing.title}`}
      />
    </article>
  );
}

// Booking flow — manage focus between steps
function BookingFlow() {
  const stepRefs = useRef<(HTMLElement | null)[]>([]);
  const [currentStep, setCurrentStep] = useState(0);

  const goToStep = useCallback((step: number) => {
    setCurrentStep(step);
    // Move focus to new step heading after transition
    requestAnimationFrame(() => {
      stepRefs.current[step]?.focus();
    });
  }, []);

  return (
    <div role="form" aria-label="Complete your booking">
      <nav aria-label="Booking progress">
        <ol role="list">
          {STEPS.map((step, i) => (
            <li
              key={step.id}
              aria-current={i === currentStep ? 'step' : undefined}
              aria-label={`Step ${i + 1} of ${STEPS.length}: ${step.label}`}
            >
              {step.label}
            </li>
          ))}
        </ol>
      </nav>

      {STEPS.map((step, i) => (
        <section
          key={step.id}
          ref={(el) => { stepRefs.current[i] = el; }}
          tabIndex={-1}
          aria-labelledby={`step-heading-${step.id}`}
          hidden={i !== currentStep}
        >
          <h2 id={`step-heading-${step.id}`}>{step.label}</h2>
          <step.Component onNext={() => goToStep(i + 1)} />
        </section>
      ))}
    </div>
  );
}

// Modal focus trap for photo gallery lightbox
function useFocusTrap(ref: RefObject<HTMLElement>, isActive: boolean) {
  useEffect(() => {
    if (!isActive || !ref.current) return;

    const element = ref.current;
    const previousFocus = document.activeElement as HTMLElement;

    const focusableElements = element.querySelectorAll<HTMLElement>(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const first = focusableElements[0];
    const last = focusableElements[focusableElements.length - 1];

    first?.focus();

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key !== 'Tab') return;

      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last?.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first?.focus();
      }
    };

    element.addEventListener('keydown', handleKeyDown);
    return () => {
      element.removeEventListener('keydown', handleKeyDown);
      previousFocus?.focus();
    };
  }, [ref, isActive]);
}

// Structured error reporting with context
import * as Sentry from "@sentry/nextjs";

// Tag errors with booking context for faster triage
function reportBookingError(
  error: unknown,
  context: {
    step: string;
    listingId: string;
    holdId?: string;
    paymentMethod?: string;
  },
) {
  Sentry.withScope((scope) => {
    scope.setTag("feature", "booking");
    scope.setTag("step", context.step);
    scope.setContext("booking", context);
    scope.setLevel("error");
    Sentry.captureException(error);
  });
}

// Custom Web Vitals reporting with attribution
function reportWebVitals(metric: WebVitalMetric) {
  const body = {
    name: metric.name,
    value: metric.value,
    rating: metric.rating, // 'good' | 'needs-improvement' | 'poor'
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
    attribution: metric.attribution, // element, URL, timing breakdown
    route: window.location.pathname,
    device: getDeviceCategory(), // 'mobile' | 'tablet' | 'desktop'
    connection: (
      navigator as Navigator & { connection?: { effectiveType: string } }
    ).connection?.effectiveType,
  };

  // Use sendBeacon to avoid blocking unload
  navigator.sendBeacon("/api/vitals", JSON.stringify(body));
}

// Search quality metrics
function trackSearchInteraction(event: {
  type: "impression" | "click" | "book" | "wishlist";
  searchId: string;
  listingId: string;
  position: number;
  filters: Record<string, unknown>;
}) {
  analytics.track("search_interaction", {
    ...event,
    timestamp: Date.now(),
    viewport: { width: window.innerWidth, height: window.innerHeight },
    resultsVisible: document.querySelectorAll("[data-listing-card]").length,
  });
}

# PagerDuty integration thresholds
alerts:
  - name: booking_payment_failures
    condition: payment_failure_rate > 0.05
    window: 15m
    severity: critical
    runbook: /runbooks/payment-failures

  - name: search_latency_degradation
    condition: search_p95_latency > 800ms
    window: 5m
    severity: high
    runbook: /runbooks/search-performance

  - name: inventory_accuracy
    condition: double_booking_attempts > 0
    window: 1h
    severity: critical
    runbook: /runbooks/inventory-conflicts

  - name: lcp_regression
    condition: lcp_p75 > 2500ms AND sample_size > 1000
    window: 30m
    severity: high
    runbook: /runbooks/web-vitals

  - name: map_failures
    condition: map_load_error_rate > 0.03
    window: 10m
    severity: medium
    runbook: /runbooks/map-health