feat: UI redesign with park detail pages and ride status

Visual overhaul:
- Warmer color system with amber accent for Today, better text hierarchy
- Row hover highlighting, sticky column shadow on horizontal scroll
- Closed cells replaced with dot (·) instead of "Closed" text
- Regional grouping (Northeast/Southeast/Midwest/Texas & South/West)
- Two-row header with park count badge and WeekNav on separate lines
- Amber "Today" button in WeekNav when off current week
- Mobile card layout (< 1024px) with 7-day grid per park; table on desktop
- Skeleton loading state via app/loading.tsx

Park detail pages (/park/[id]):
- Month calendar view with ← → navigation via ?month= param
- Live ride status fetched from Six Flags API (cached 1h)
- Ride hours only shown when they differ from park operating hours
- Fallback to nearest upcoming open day when today is dropped by API,
  including cross-month fallback for end-of-month edge case

Data layer:
- Park type gains region field; parks.ts exports groupByRegion()
- db.ts gains getParkMonthData() for single-park month queries
- sixflags.ts gains scrapeRidesForDay() returning RidesFetchResult
  with rides, dataDate, isExact, and parkHoursLabel

Removed: CalendarGrid.tsx, MonthNav.tsx (dead code)

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

lib/scrapers/sixflags.ts

@@ -62,11 +62,26 @@ interface ApiEvent {
   extEventName: string;
 }
 
+interface ApiRideDetail {
+  itemID: number;
+  itemName: string;
+  extLocationID: string;
+  operatingTimeFrom: string; // "" or "HH:MM" 24h — empty means not scheduled
+  operatingTimeTo: string;
+}
+
+interface ApiVenue {
+  venueId: number;
+  venueName: string;
+  detailHours: ApiRideDetail[];
+}
+
 interface ApiDay {
   date: string;
   isParkClosed: boolean;
   events?: ApiEvent[];
   operatings?: ApiOperating[];
+  venues?: ApiVenue[];
 }
 
 /** "10:30" → "10:30am", "20:00" → "8pm", "12:00" → "12pm" */
@@ -84,8 +99,15 @@ interface ApiResponse {
   dates: ApiDay[];
 }
 
-async function fetchApi(url: string, attempt = 0, totalWaitedMs = 0): Promise<ApiResponse> {
-  const res = await fetch(url, { headers: HEADERS });
+async function fetchApi(
+  url: string,
+  attempt = 0,
+  totalWaitedMs = 0,
+  revalidate?: number,
+): Promise<ApiResponse> {
+  const fetchOpts: RequestInit & { next?: { revalidate: number } } = { headers: HEADERS };
+  if (revalidate !== undefined) fetchOpts.next = { revalidate };
+  const res = await fetch(url, fetchOpts);
 
   if (res.status === 429 || res.status === 503) {
     const retryAfter = res.headers.get("Retry-After");
@@ -96,7 +118,7 @@ async function fetchApi(url: string, attempt = 0, totalWaitedMs = 0): Promise<Ap
       `  [rate-limited] HTTP ${res.status} — waiting ${waitMs / 1000}s (attempt ${attempt + 1}/${MAX_RETRIES})`
     );
     await sleep(waitMs);
-    if (attempt < MAX_RETRIES) return fetchApi(url, attempt + 1, totalWaitedMs + waitMs);
+    if (attempt < MAX_RETRIES) return fetchApi(url, attempt + 1, totalWaitedMs + waitMs, revalidate);
     throw new RateLimitError(totalWaitedMs + waitMs);
   }
 
@@ -105,16 +127,149 @@ async function fetchApi(url: string, attempt = 0, totalWaitedMs = 0): Promise<Ap
 }
 
 /**
- * Fetch the raw API response for a month — used by scripts/debug.ts.
+ * Fetch the raw API response for a month — used by scripts/debug.ts and the park detail page.
+ * Pass `revalidate` (seconds) to enable Next.js ISR caching when called from a Server Component.
  */
 export async function scrapeMonthRaw(
   apiId: number,
   year: number,
-  month: number
+  month: number,
+  revalidate?: number,
 ): Promise<ApiResponse> {
   const dateParam = `${year}${String(month).padStart(2, "0")}`;
   const url = `${API_BASE}/${apiId}?date=${dateParam}`;
-  return fetchApi(url);
+  return fetchApi(url, 0, 0, revalidate);
+}
+
+export interface RideStatus {
+  name: string;
+  isOpen: boolean;
+  hoursLabel?: string; // e.g. "10am – 10pm"
+}
+
+export interface RidesFetchResult {
+  rides: RideStatus[];
+  /** The date the ride data actually came from (YYYY-MM-DD). May differ from
+   *  the requested date when the API has already dropped the current day and
+   *  we fell back to the nearest upcoming open date. */
+  dataDate: string;
+  /** True when dataDate === requested date. False when we fell back. */
+  isExact: boolean;
+  /** Park-level operating hours for the data date (e.g. "10am – 6pm").
+   *  Used by the UI to suppress per-ride hours that match the park hours. */
+  parkHoursLabel?: string;
+}
+
+/** Convert "MM/DD/YYYY" API date string to "YYYY-MM-DD". */
+function apiDateToIso(apiDate: string): string {
+  const [mm, dd, yyyy] = apiDate.split("/");
+  return `${yyyy}-${mm}-${dd}`;
+}
+
+/**
+ * Fetch ride operating status for a given date.
+ *
+ * The Six Flags API drops dates that have already started (including today),
+ * returning only tomorrow onwards. When the requested date is missing, we fall
+ * back to the nearest available upcoming date in the same month's response so
+ * the UI can still show a useful (if approximate) schedule.
+ *
+ * Returns null if no ride data could be found at all (API error, pre-season,
+ * no venues in response).
+ *
+ * Pass `revalidate` (seconds) to enable Next.js ISR caching when called from
+ * a Server Component. Defaults to 1 hour.
+ */
+export async function scrapeRidesForDay(
+  apiId: number,
+  dateIso: string, // YYYY-MM-DD
+  revalidate = 3600,
+): Promise<RidesFetchResult | null> {
+  const [yearStr, monthStr] = dateIso.split("-");
+  const year = parseInt(yearStr);
+  const month = parseInt(monthStr);
+
+  let raw: ApiResponse;
+  try {
+    raw = await scrapeMonthRaw(apiId, year, month, revalidate);
+  } catch {
+    return null;
+  }
+
+  if (!raw.dates.length) return null;
+
+  // The API uses "MM/DD/YYYY" internally.
+  const [, mm, dd] = dateIso.split("-");
+  const apiDate = `${mm}/${dd}/${yearStr}`;
+
+  // Try exact match first; if the API has already dropped today, fall back to
+  // the chronologically nearest available date (always a future date here).
+  let dayData = raw.dates.find((d) => d.date === apiDate);
+  let isExact = true;
+
+  if (!dayData) {
+    // The API drops dates that have already started, so we need a future date.
+    // Prefer the nearest open day; fall back to the nearest date regardless.
+    // If the current month has no more dates (e.g. today is the 30th), also
+    // check next month — a month boundary is not unusual for this case.
+    const futureDates = [...raw.dates]
+      .filter((d) => apiDateToIso(d.date) > dateIso)
+      .sort((a, b) => a.date.localeCompare(b.date));
+
+    dayData = futureDates.find((d) => !d.isParkClosed) ?? futureDates[0];
+
+    if (!dayData) {
+      // Nothing left in the current month — fetch next month.
+      const nextMonthDate = new Date(`${dateIso}T00:00:00`);
+      nextMonthDate.setMonth(nextMonthDate.getMonth() + 1);
+      const nextYear = nextMonthDate.getFullYear();
+      const nextMonth = nextMonthDate.getMonth() + 1;
+      try {
+        const nextRaw = await scrapeMonthRaw(apiId, nextYear, nextMonth, revalidate);
+        const nextSorted = [...nextRaw.dates].sort((a, b) => a.date.localeCompare(b.date));
+        dayData = nextSorted.find((d) => !d.isParkClosed) ?? nextSorted[0];
+      } catch {
+        // If the next month fetch fails, we simply have no fallback data.
+      }
+    }
+
+    isExact = false;
+  }
+
+  if (!dayData) return null;
+
+  // Extract park-level hours from the selected day so the UI can suppress
+  // per-ride hours that simply repeat what the park is already showing.
+  const parkOperating =
+    dayData.operatings?.find((o) => o.operatingTypeName === "Park") ??
+    dayData.operatings?.[0];
+  const parkItem = parkOperating?.items?.[0];
+  const parkHoursLabel =
+    parkItem?.timeFrom && parkItem?.timeTo
+      ? `${fmt24(parkItem.timeFrom)} – ${fmt24(parkItem.timeTo)}`
+      : undefined;
+
+  const rides: RideStatus[] = [];
+  for (const venue of (dayData.venues ?? []).filter((v) => v.venueName === "Rides")) {
+    for (const ride of venue.detailHours ?? []) {
+      if (!ride.itemName) continue;
+      const isOpen = Boolean(ride.operatingTimeFrom && ride.operatingTimeTo);
+      const hoursLabel = isOpen
+        ? `${fmt24(ride.operatingTimeFrom)} – ${fmt24(ride.operatingTimeTo)}`
+        : undefined;
+      rides.push({ name: ride.itemName, isOpen, hoursLabel });
+    }
+  }
+
+  if (rides.length === 0) return null;
+
+  // Sort: open rides first, then alphabetical within each group
+  rides.sort((a, b) => {
+    if (a.isOpen !== b.isOpen) return a.isOpen ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+
+  return { rides, dataDate: apiDateToIso(dayData.date), isExact, parkHoursLabel };
 }
 
 /**

lib/scrapers/types.ts

@@ -4,6 +4,7 @@ export interface Park {
   shortName: string;
   chain: "sixflags" | string;
   slug: string;
+  region: "Northeast" | "Southeast" | "Midwest" | "Texas & South" | "West & International";
   location: {
     lat: number;
     lng: number;