/**
 * NuAskSylvan — Time Corridor UI: PAST / NOW / NEXT (fullscreen in app shell when this tab is active).
 * Time corridor: shared rail height + inbound/outbound dots so PAST | NOW | NEXT read as one continuous track when
 * swiping. Header avatar = profile photo (Flow Plan / cache pattern) → PowerUp; day strip removed.
 * PAST: activities from canonical itinerary when present; else synthetic Apr 30–May 20 (current year), 8 AM–11 PM,
 * repeating 5-day catalog POI loop (Gardens → MBS → Botanic Gardens → National Museum → Merlion). Client-only.
 * Day summary + map stay mocked.
 * NOW: action hotbar above Ask bar; Ask bar navigates to Ask Sylvan (same chat). Other panels still DEMO where noted.
 */
(function () {
  'use strict';

  const { useState, useRef, useEffect } = React;

  const FONT =
    "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, sans-serif";

  /** Reference accent ≈ #2DE2C5 */
  const C = {
    accent: '#2DE2C5',
    accentMuted: 'rgba(45,226,197,0.35)',
    accentSoft: 'rgba(45,226,197,0.12)',
    bg: '#000000',
    card: '#111111',
    stroke: 'rgba(45,226,197,0.45)'
  };

  const DEMO = {
    nowLocal: '1:48 PM',
    windowEnd: '3:00 PM',
    windowMins: 42,
    prevTime: '11:30 AM',
    prevStop: 'ArtScience Museum',
    nextStop: 'Merlion Park',
    nextTime: '3:00 PM',
    pastStops: [
      { time: '8:30 AM', title: 'Changi Airport', sub: 'Arrived', icon: '✈️' },
      { time: '10:00 AM', title: 'Marina Bay Walk', sub: 'Walk', icon: '🚶' },
      { time: '11:30 AM', title: 'ArtScience Museum', sub: 'Visited', icon: '🚶' }
    ],
    stats: { places: 3, steps: '8,432', distance: '6.8 km', duration: '3h 15m', energy: 'High' },
    reco: {
      name: '% Arabica Coffee',
      tag: 'Strong fit',
      lineWalk: '5 min walk (0.4 km)',
      lineDwell: '35 min (Ideal duration)',
      lineRating: '4.6 (1.2k reviews)',
      blurb: 'Great coffee, calm vibe. Just 5 min walk from here.'
    },
    merlionDesc: 'Iconic Singapore landmark with amazing photo spots.',
    afterThat: { time: '4:00 PM', title: 'Gardens by the Bay', sub: 'Explore' },
    /** NOW hotbar — matches decision-radar spec; `target` null = mock only */
    nowHotbar: [
      {
        key: 'nearby',
        title: 'Explore Nearby',
        sub: 'Find more things around you.',
        icon: 'pin',
        glow: 'rgba(34,197,94,0.5)',
        ring: 'rgba(74,222,128,0.35)',
        target: 'explore'
      },
      {
        key: 'improve',
        title: 'Improve Plan',
        sub: 'Optimize your itinerary.',
        icon: 'sliders',
        glow: 'rgba(59,130,246,0.55)',
        ring: 'rgba(96,165,250,0.35)',
        target: 'flow-plan'
      },
      {
        key: 'time',
        title: 'Use My Time',
        sub: 'Fill the time wisely.',
        icon: 'stopwatch',
        glow: 'rgba(168,85,247,0.55)',
        ring: 'rgba(192,132,252,0.35)',
        badgeMins: true,
        target: 'ask-sylvan'
      },
      {
        key: 'emergency',
        title: 'Emergency',
        sub: 'Quick help if needed.',
        icon: 'shield',
        glow: 'rgba(249,115,22,0.55)',
        ring: 'rgba(251,146,60,0.35)',
        target: null
      }
    ]
  };

  const PANEL_COPY = [
    { title: 'PAST', subtitle: 'Your journey so far' },
    { title: 'NOW', subtitle: 'Your moment to decide' },
    { title: 'NEXT', subtitle: "What's coming up" }
  ];

  const SF_API_BASE = typeof window !== 'undefined' && window.SF_API_BASE ? window.SF_API_BASE : '';

  /**
   * 5-day flow plan (catalog POIs) repeated across a fixed test window — from POI catalog
   * `data/poi-catalogs/global/r2_global_1.4_103.8_ac.json`. Client-only PAST corridor (not ITINERARY_KV).
   */
  const NUASK_FIVE_DAY_FLOW_PLAN_POIS = [
    {
      name: 'Gardens by the Bay',
      place_id: 'ChIJMxZ-kwQZ2jERdsqftXeWCWI',
      address: '18 Marina Gardens Dr, Singapore 018953',
      lat: 1.2815683,
      lng: 103.8636132
    },
    {
      name: 'Marina Bay Sands Singapore',
      place_id: 'ChIJA5LATO4Z2jER111V-v6abAI',
      address: '10 Bayfront Ave, Singapore 018956',
      lat: 1.2837574999999999,
      lng: 103.8591065
    },
    {
      name: 'Singapore Botanic Gardens',
      place_id: 'ChIJvWDbfRwa2jERgNnTOpAU3-o',
      address: '1 Cluny Rd, Singapore 259569',
      lat: 1.3138397,
      lng: 103.8159136
    },
    {
      name: 'National Museum of Singapore',
      place_id: 'ChIJD1u-EaMZ2jERaLhNfFkR45I',
      address: '93 Stamford Rd, Singapore 178897',
      lat: 1.296613,
      lng: 103.84850910000002
    },
    {
      name: 'Merlion Park',
      place_id: 'ChIJBTYg1g4Z2jERp_MBbu5erWY',
      address: '1 Fullerton Rd, Singapore 049213',
      lat: 1.2867449,
      lng: 103.85438719999999
    }
  ];

  const NUASK_SYNTHETIC_REGION = 'global_1.4_103.8';

  /**
   * Apr 30 → May 20 (inclusive), current calendar year: one activity per day, 8 AM–11 PM,
   * POI = NUASK_FIVE_DAY_FLOW_PLAN_POIS[dayOffset % 5] (5-day pattern repeats).
   */
  function buildSyntheticApr30ToMay20PastItinerary() {
    const items_by_day = {};
    const year = new Date().getFullYear();
    const cursor = new Date(year, 3, 30);
    cursor.setHours(0, 0, 0, 0);
    const end = new Date(year, 4, 20);
    end.setHours(0, 0, 0, 0);
    let cycleIndex = 0;
    for (; cursor.getTime() <= end.getTime(); cursor.setDate(cursor.getDate() + 1)) {
      const y = cursor.getFullYear();
      const mo = String(cursor.getMonth() + 1).padStart(2, '0');
      const da = String(cursor.getDate()).padStart(2, '0');
      const dayKey = `${y}-${mo}-${da}`;
      const p = NUASK_FIVE_DAY_FLOW_PLAN_POIS[cycleIndex % NUASK_FIVE_DAY_FLOW_PLAN_POIS.length];
      cycleIndex += 1;
      const label = cursor.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
      items_by_day[dayKey] = [
        {
          title: p.name,
          Title: p.name,
          start_time: '8:00 AM',
          start_time_local: `${label} · 8:00 AM`,
          end_time: '11:00 PM',
          end_time_local: '11:00 PM',
          location: p.address,
          Location: p.address,
          place_id: p.place_id,
          lat: p.lat,
          lng: p.lng,
          activity_type: '8 AM – 11 PM',
          catalog_region_key: NUASK_SYNTHETIC_REGION,
          description: `NuAsk PAST synthetic · 5-day loop day ${((cycleIndex - 1) % 5) + 1}/5 · not persisted.`
        }
      ];
    }
    return { items_by_day, tz: 'Asia/Singapore' };
  }

  /** Flatten itinerary activities in day order (sorted day keys). */
  function flattenItineraryActivities(itinerary) {
    const itemsByDay = itinerary?.items_by_day;
    if (!itemsByDay || typeof itemsByDay !== 'object') return [];
    const entries = Object.entries(itemsByDay).sort(([a], [b]) => String(a).localeCompare(String(b)));
    const out = [];
    for (const [, activities] of entries) {
      if (Array.isArray(activities)) {
        for (const act of activities) {
          if (act && typeof act === 'object') out.push(act);
        }
      }
    }
    return out;
  }

  function formatActivityTimeLabel(activity) {
    const raw = activity.start_time_local || activity.start_time || activity.Start_Time || '';
    if (raw == null || raw === '') return '—';
    const s = String(raw).trim();
    if (/^\d{1,2}:\d{2}/.test(s)) return s;
    try {
      const d = new Date(s);
      if (!Number.isNaN(d.getTime())) {
        return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
      }
    } catch (e) {
      /* ignore */
    }
    return s.length > 12 ? `${s.slice(0, 12)}…` : s;
  }

  function activityToPastStop(activity, index) {
    const title = activity.title || activity.Title || 'Activity';
    const sub =
      activity.activity_type ||
      activity.Activity_Type ||
      activity.category ||
      (activity.description || activity.Description || '').trim().slice(0, 28) ||
      'Stop';
    const icons = ['✈️', '🚶', '📍'];
    return {
      time: formatActivityTimeLabel(activity),
      title,
      sub: sub.length > 32 ? `${sub.slice(0, 30)}…` : sub,
      icon: icons[index % icons.length]
    };
  }

  function buildPastStopsRow(activities) {
    const placeholder = { time: '—', title: '—', sub: '—', icon: '📍' };
    const fromApi = activities.slice(0, 3).map((a, i) => activityToPastStop(a, i));
    return [0, 1, 2].map((i) => fromApi[i] || placeholder);
  }

  /** One horizontal “rail” height so PAST / NOW / NEXT icon axis lines up when swiping (time corridor). */
  const CORRIDOR_RAIL_H = 'min-h-[92px]';

  /** Teal dashed segment (horizontal). */
  function CorridorDash() {
    return <div className="h-0 w-full border-t border-dashed" style={{ borderColor: C.stroke }} aria-hidden />;
  }

  /** Endpoint / handoff node on the corridor rail. */
  function CorridorEndDot() {
    return (
      <div
        className="h-1.5 w-1.5 shrink-0 rounded-full"
        style={{ backgroundColor: C.accent, boxShadow: `0 0 6px ${C.accentMuted}` }}
        aria-hidden
      />
    );
  }

  /** Solid teal cap — hands off to the next panel’s inbound dot (time corridor). */
  function CorridorTrailCap() {
    return (
      <div className={`relative flex w-7 shrink-0 items-center ${CORRIDOR_RAIL_H}`} aria-hidden>
        <div className="flex w-full flex-col justify-center">
          <div className="h-0 w-full border-t border-dashed opacity-[0.72]" style={{ borderColor: C.stroke }} />
        </div>
        <div
          className="absolute right-0 top-1/2 h-2 w-1 -translate-y-1/2 rounded-r-full"
          style={{ backgroundColor: C.accent, boxShadow: `0 0 6px ${C.accentMuted}` }}
        />
      </div>
    );
  }

  /** Inbound handoff from the previous panel (matches trail cap / prior dot). */
  function CorridorInbound() {
    return (
      <div className={`flex shrink-0 items-center gap-0 ${CORRIDOR_RAIL_H}`} aria-hidden>
        <CorridorEndDot />
        <div className="mx-0.5 flex w-2 min-w-[6px] flex-col justify-center">
          <CorridorDash />
        </div>
      </div>
    );
  }

  /** Outbound handoff into the next panel (pairs with NEXT / NOW inbound dot). */
  function CorridorOutbound() {
    return (
      <div className={`flex shrink-0 items-center gap-0 ${CORRIDOR_RAIL_H}`} aria-hidden>
        <div className="mx-0.5 flex w-2 min-w-[6px] flex-col justify-center">
          <CorridorDash />
        </div>
        <CorridorEndDot />
      </div>
    );
  }

  function corridorNavigate(view) {
    const legalAgreed = localStorage.getItem('sylvanflow_legal_agreed');
    const restrictedTabs = ['explore', 'flow-plan', 'ask-sylvan', 'nu-ask-sylvan'];
    if (restrictedTabs.includes(view) && !legalAgreed) {
      // SF_ALLOW_HARDEXIT_REDIRECT
      window.location.href = '/legal?return=/power-up';
      return;
    }
    if (window.appState && typeof window.appState.set === 'function') {
      window.appState.set({ view });
    }
  }

  function MicBarLight() {
    return (
      <svg className="h-5 w-5 text-slate-300" viewBox="0 0 24 24" fill="none" aria-hidden stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
        <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
        <line x1="12" y1="19" x2="12" y2="23" />
        <line x1="8" y1="23" x2="16" y2="23" />
      </svg>
    );
  }

  function SlidersIconBlue() {
    return (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden>
        <line x1="3" y1="7" x2="21" y2="7" stroke="#60A5FA" strokeWidth="2" strokeLinecap="round" />
        <circle cx="14" cy="7" r="3" fill="#0f172a" stroke="#93C5FD" strokeWidth="1.5" />
        <line x1="3" y1="12" x2="21" y2="12" stroke="#60A5FA" strokeWidth="2" strokeLinecap="round" />
        <circle cx="9" cy="12" r="3" fill="#0f172a" stroke="#93C5FD" strokeWidth="1.5" />
        <line x1="3" y1="17" x2="21" y2="17" stroke="#60A5FA" strokeWidth="2" strokeLinecap="round" />
        <circle cx="16" cy="17" r="3" fill="#0f172a" stroke="#93C5FD" strokeWidth="1.5" />
      </svg>
    );
  }

  function HotbarIcon({ spec }) {
    if (spec.icon === 'sliders') return <SlidersIconBlue />;
    if (spec.icon === 'pin') return <span className="text-[17px] leading-none">📍</span>;
    if (spec.icon === 'stopwatch') return <span className="text-[17px] leading-none">⏱</span>;
    if (spec.icon === 'shield') return <span className="text-[17px] leading-none">🛡️</span>;
    return null;
  }

  function NuAskSylvanPage() {
    const scrollerRef = useRef(null);
    const [panel, setPanel] = useState(1);
    const [whyOpen, setWhyOpen] = useState(false);
    const [profile, setProfile] = useState(() => window.SylvanFlowState?.getProfile?.() || null);
    const [profilePhotoUrl, setProfilePhotoUrl] = useState(null);
    const [pastStopsRow, setPastStopsRow] = useState(() => DEMO.pastStops.map((s) => ({ ...s })));
    const [placesActivityCount, setPlacesActivityCount] = useState(DEMO.stats.places);

    useEffect(() => {
      const syncProfile = () => setProfile(window.SylvanFlowState?.getProfile?.() || null);
      syncProfile();
      if (window.SylvanFlowState?.on) {
        window.SylvanFlowState.on('profile', syncProfile);
        return () => window.SylvanFlowState.off('profile', syncProfile);
      }
      return undefined;
    }, []);

    useEffect(() => {
      setProfilePhotoUrl(null);
      if (!profile || !SF_API_BASE || !window.SylvanFlowAuth?.authenticatedFetch) return;

      const CACHE_KEY = 'profile_photo_cache_v1';
      const CACHE_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;

      if (profile.profile_photo_url && !profile.profile_photo_url.includes('/api/profile-photo/')) {
        setProfilePhotoUrl(profile.profile_photo_url);
        return;
      }

      const r2Key = profile.profile_photo_r2_key;

      const fetchSelfPhoto = async () => {
        try {
          const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/profile-photo/self`);
          if (res.status === 204 || !res.ok) {
            setProfilePhotoUrl(null);
            return;
          }
          const blob = await res.blob();
          if (blob.size === 0 || !blob.type.startsWith('image/')) {
            setProfilePhotoUrl(null);
            return;
          }
          const reader = new FileReader();
          reader.onloadend = () => {
            const dataUrl = reader.result;
            if (r2Key && dataUrl) {
              try {
                localStorage.setItem(
                  CACHE_KEY,
                  JSON.stringify({ profile_photo_r2_key: r2Key, dataUrl, cachedAt: Date.now() })
                );
              } catch (e) {
                /* ignore */
              }
            }
            setProfilePhotoUrl(dataUrl);
          };
          reader.onerror = () => setProfilePhotoUrl(null);
          reader.readAsDataURL(blob);
        } catch (e) {
          setProfilePhotoUrl(null);
        }
      };

      if (r2Key || (profile.profile_photo_url && profile.profile_photo_url.includes('/api/profile-photo/'))) {
        (async () => {
          try {
            if (r2Key) {
              const cached = localStorage.getItem(CACHE_KEY);
              if (cached) {
                const cacheData = JSON.parse(cached);
                const cacheAge = Date.now() - (cacheData.cachedAt || 0);
                if (
                  cacheData.profile_photo_r2_key === r2Key &&
                  cacheAge < CACHE_MAX_AGE_MS &&
                  cacheData.dataUrl
                ) {
                  setProfilePhotoUrl(cacheData.dataUrl);
                  return;
                }
                localStorage.removeItem(CACHE_KEY);
              }
            }
            await fetchSelfPhoto();
          } catch (e) {
            setProfilePhotoUrl(null);
          }
        })();
      } else if (profile.photo_url) {
        setProfilePhotoUrl(profile.photo_url);
      }
    }, [profile?.profile_photo_r2_key, profile?.profile_photo_url, profile?.photo_url]);

    useEffect(() => {
      let cancelled = false;
      async function loadPastCorridorData() {
        let activities = [];
        if (SF_API_BASE && window.SylvanFlowAuth?.authenticatedFetch) {
          try {
            let tripKey = null;
            const cachedList = window.SylvanFlowState?.getItineraries?.();
            if (cachedList && cachedList.length > 0) {
              tripKey = cachedList[0].trip_key || cachedList[0].Trip_Key;
            }
            if (!tripKey) {
              const res = await window.SylvanFlowAuth.authenticatedFetch(`${SF_API_BASE}/api/itineraries`);
              window.SylvanFlowAuth.handleAuthResponse(res);
              if (res.ok && !cancelled) {
                const data = await res.json();
                const itins = data.itineraries || [];
                if (itins.length > 0) {
                  tripKey = itins[0].trip_key || itins[0].Trip_Key;
                  if (window.SylvanFlowState?.setItineraries) window.SylvanFlowState.setItineraries(itins);
                }
              }
            }
            if (tripKey && !cancelled) {
              const res2 = await window.SylvanFlowAuth.authenticatedFetch(
                `${SF_API_BASE}/api/itineraries/${encodeURIComponent(tripKey)}`
              );
              window.SylvanFlowAuth.handleAuthResponse(res2);
              if (res2.ok && !cancelled) {
                const detail = await res2.json();
                const itinerary = detail.itinerary;
                if (itinerary) {
                  activities = flattenItineraryActivities(itinerary);
                }
              }
            }
          } catch (e) {
            if (!cancelled && window.uiLogger) {
              window.uiLogger.uiWarn('[NuAsk] past corridor load failed:', e?.message || e);
            }
          }
        }
        if (activities.length === 0) {
          activities = flattenItineraryActivities(buildSyntheticApr30ToMay20PastItinerary());
        }
        if (!cancelled) {
          setPlacesActivityCount(activities.length);
          setPastStopsRow(buildPastStopsRow(activities));
        }
      }
      loadPastCorridorData();
      const onItins = () => {
        if (!cancelled) loadPastCorridorData();
      };
      if (window.SylvanFlowState?.on) {
        window.SylvanFlowState.on('itineraries', onItins);
      }
      return () => {
        cancelled = true;
        if (window.SylvanFlowState?.off) window.SylvanFlowState.off('itineraries', onItins);
      };
    }, []);

    useEffect(() => {
      const el = scrollerRef.current;
      if (!el) return;
      const scrollToNow = () => {
        const w = el.clientWidth;
        if (w > 0) el.scrollLeft = w;
      };
      scrollToNow();
      requestAnimationFrame(() => requestAnimationFrame(scrollToNow));
      const onScroll = () => {
        const cw = el.clientWidth || 1;
        const i = Math.round(el.scrollLeft / cw);
        setPanel(Math.max(0, Math.min(2, i)));
      };
      el.addEventListener('scroll', onScroll, { passive: true });
      return () => el.removeEventListener('scroll', onScroll);
    }, []);

    const header = PANEL_COPY[panel];
    const displayName = profile?.name || profile?.user_name || 'User';

    /* Extra bottom space for NOW hotbar + Ask pill + tab bar (fixed) */
    const sectionPad = 'px-4 pb-64 pt-3';

    return (
      <div
        className="relative flex h-full min-h-0 flex-col text-white"
        style={{ fontFamily: FONT, backgroundColor: C.bg }}
      >
        {/* Header — reference: menu · large caps title · SF */}
        <header className="z-20 flex-shrink-0 border-b border-white/[0.06] px-4 pb-0 pt-3">
          <div className="flex items-start justify-between gap-3">
            <button
              type="button"
              onClick={() => window.dispatchEvent(new CustomEvent('sylvanflow-open-drawer'))}
              className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg active:bg-white/10"
              aria-label="Menu"
            >
              <span className="flex flex-col gap-1.5">
                <span className="block h-0.5 w-[18px] rounded-full bg-white" />
                <span className="block h-0.5 w-[18px] rounded-full bg-white" />
                <span className="block h-0.5 w-[18px] rounded-full bg-white" />
              </span>
            </button>
            <div className="min-w-0 flex-1 text-center">
              <h1
                className="text-[22px] font-bold uppercase leading-tight tracking-[0.08em]"
                style={{ color: C.accent }}
              >
                {header.title}
              </h1>
              <p className="mt-1 text-[13px] font-normal leading-snug text-[#9CA3AF]">{header.subtitle}</p>
            </div>
            <button
              type="button"
              onClick={() => corridorNavigate('power-up')}
              className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full ring-2 ring-[#2DE2C5] ring-offset-2 ring-offset-black"
              style={{
                backgroundColor: profilePhotoUrl ? '#0a0a0a' : C.accent,
                boxShadow: `0 0 22px ${C.accentMuted}`
              }}
              aria-label="Profile"
            >
              {profilePhotoUrl ? (
                <img
                  src={profilePhotoUrl}
                  alt={displayName}
                  className="h-full w-full object-cover"
                  onError={(e) => {
                    e.target.style.display = 'none';
                    const par = e.target.parentElement;
                    if (par) par.style.backgroundColor = C.accent;
                    const fb = e.target.nextElementSibling;
                    if (fb) fb.style.display = 'flex';
                  }}
                />
              ) : null}
              <span
                className="flex h-full w-full items-center justify-center text-[11px] font-bold tracking-tight text-black"
                style={{ display: profilePhotoUrl ? 'none' : 'flex' }}
              >
                {(displayName || 'U')[0].toUpperCase()}
              </span>
            </button>
          </div>
        </header>

        <div
          ref={scrollerRef}
          className="flex min-h-0 w-full flex-1 snap-x snap-mandatory overflow-x-auto overflow-y-hidden scroll-smooth"
          style={{ WebkitOverflowScrolling: 'touch' }}
        >
          {/* —— PAST —— (ref: cards + gutters only; dashed joins card edge → card edge; trail cap → NOW) */}
          <section className={`box-border min-h-0 min-w-full shrink-0 snap-start overflow-y-auto ${sectionPad}`}>
            <div className="relative mb-6">
              <div className="mb-1.5 grid grid-cols-3 gap-1 text-center">
                {pastStopsRow.map((s, i) => (
                  <p key={`hdr-${i}-${s.time}`} className="text-[9px] font-medium text-white/90">
                    {s.time}
                  </p>
                ))}
              </div>
              <div className="flex items-center gap-0">
                <CorridorInbound />
                {pastStopsRow.map((s, idx) => (
                  <React.Fragment key={`past-${idx}-${s.title}`}>
                    <div className="min-w-0 flex-1">
                      <div
                        className={`flex ${CORRIDOR_RAIL_H} flex-col justify-center rounded-xl border border-white/10 bg-[#11151d] p-2 text-center shadow-[0_8px_24px_-14px_rgba(0,0,0,0.9)]`}
                        style={{ boxShadow: `0 0 0 1px ${C.accentSoft}, 0 8px 24px -14px rgba(0,0,0,0.9)` }}
                      >
                        <div className="mx-auto flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 bg-black/45 text-sm">
                          {s.icon}
                        </div>
                        <p className="mt-1 line-clamp-2 text-[10px] font-semibold leading-tight text-white">{s.title}</p>
                        <p className="mt-0.5 text-[9px] text-[#9CA3AF]">{s.sub}</p>
                      </div>
                    </div>
                    {idx < pastStopsRow.length - 1 ? (
                      <div className={`mx-0.5 flex w-3 shrink-0 flex-col justify-center ${CORRIDOR_RAIL_H}`}>
                        <CorridorDash />
                      </div>
                    ) : (
                      <CorridorTrailCap />
                    )}
                  </React.Fragment>
                ))}
              </div>
            </div>

            <div
              className="relative mb-5 overflow-hidden rounded-2xl border p-4 shadow-lg"
              style={{
                borderColor: 'rgba(139,92,246,0.25)',
                background: 'linear-gradient(135deg, rgba(46,16,101,0.55) 0%, rgba(15,15,25,0.98) 55%, #000 100%)',
                boxShadow: '0 0 48px -12px rgba(139,92,246,0.35), 0 20px 50px -24px rgba(45,226,197,0.12)'
              }}
            >
              <div className="pointer-events-none absolute -right-6 -top-10 h-32 w-32 rounded-full bg-violet-600/20 blur-3xl" aria-hidden />
              <div className="relative flex items-start justify-between gap-3">
                <div className="min-w-0 pr-2">
                  <p className="text-[17px] font-bold leading-snug text-white">
                    Great start! <span className="inline">🥳</span>
                  </p>
                  <p className="mt-2 text-[12px] leading-relaxed text-[#D1D5DB]">
                    You&apos;ve explored {placesActivityCount} places. Keep the adventure going.
                  </p>
                </div>
                <div className="relative flex h-[76px] w-[76px] shrink-0 flex-col items-center justify-center rounded-full border-2 bg-black/50 text-center">
                  <div
                    className="pointer-events-none absolute inset-0 rounded-full blur-md"
                    style={{ background: `radial-gradient(circle, ${C.accentMuted} 0%, transparent 70%)` }}
                    aria-hidden
                  />
                  <div
                    className="relative flex h-full w-full flex-col items-center justify-center rounded-full border-2"
                    style={{ borderColor: C.accent, boxShadow: `0 0 28px ${C.accentMuted}` }}
                  >
                    <span className="text-xl font-bold text-white">{placesActivityCount}</span>
                    <span className="text-[9px] font-semibold uppercase tracking-wide text-[#A1A1AA]">Places</span>
                  </div>
                </div>
              </div>
            </div>

            <p
              className="mb-2 text-center text-[10px] font-bold uppercase tracking-[0.22em]"
              style={{ color: C.accent }}
            >
              Day summary
            </p>
            <div
              className="mb-5 grid grid-cols-4 gap-px overflow-hidden rounded-2xl border p-0"
              style={{ backgroundColor: 'rgba(255,255,255,0.06)', borderColor: 'rgba(255,255,255,0.08)' }}
            >
              {[
                ['👣', 'Steps', DEMO.stats.steps],
                ['📏', 'Dist', DEMO.stats.distance],
                ['⏱', 'Time', DEMO.stats.duration],
                ['⚡', 'Energy', DEMO.stats.energy]
              ].map(([ic, lab, val]) => (
                <div key={lab} className="flex flex-col items-center bg-black/80 px-1 py-3 text-center">
                  <span className="text-[14px] leading-none opacity-90">{ic}</span>
                  <p className="mt-1 text-[11px] font-bold tabular-nums" style={{ color: C.accent }}>
                    {val}
                  </p>
                  <p className="mt-0.5 text-[8px] font-medium uppercase tracking-wide text-[#6B7280]">{lab}</p>
                </div>
              ))}
            </div>

            <div className="relative h-[168px] overflow-hidden rounded-2xl border border-white/[0.08] bg-[#030303]">
              <div
                className="absolute inset-0 opacity-25"
                style={{
                  backgroundImage:
                    'linear-gradient(rgba(20,184,166,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(20,184,166,0.12) 1px, transparent 1px)',
                  backgroundSize: '18px 18px'
                }}
                aria-hidden
              />
              <svg className="absolute inset-0 h-full w-full" viewBox="0 0 320 160" preserveAspectRatio="xMidYMid slice">
                <defs>
                  <linearGradient id="nuCorridorPath" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" stopColor="#2DE2C5" stopOpacity="0.35" />
                    <stop offset="50%" stopColor="#5FF5E0" stopOpacity="1" />
                    <stop offset="100%" stopColor="#2DE2C5" stopOpacity="0.35" />
                  </linearGradient>
                </defs>
                <path
                  d="M40 110 C 80 40, 120 100, 160 70 S 260 30, 290 50"
                  fill="none"
                  stroke="url(#nuCorridorPath)"
                  strokeWidth="2.5"
                  strokeLinecap="round"
                />
                {[
                  [40, 110],
                  [160, 70],
                  [290, 50]
                ].map(([cx, cy], i) => (
                  <g key={i}>
                    <circle cx={cx} cy={cy} r="6" fill="#000" stroke="#2DE2C5" strokeWidth="2" />
                    <circle cx={cx} cy={cy} r="2.5" fill="#2DE2C5" />
                  </g>
                ))}
              </svg>
              <p className="absolute bottom-2 left-0 right-0 text-center text-[9px] font-medium text-[#525252]">
                Changi · Marina Bay · ArtScience
              </p>
            </div>
          </section>

          {/* —— NOW —— (ref: dashed only prev → ○ and ○ → next; no full-bleed line through the circle) */}
          <section className={`box-border flex min-h-0 min-w-full shrink-0 snap-start flex-col overflow-y-auto ${sectionPad}`}>
            <div className="relative mb-5">
              <div className="mb-1.5 grid grid-cols-3 items-center text-center">
                <p className="text-[9px] font-medium text-[#6B7280]">{DEMO.prevTime}</p>
                <p className="text-[10px] font-bold uppercase tracking-[0.14em]" style={{ color: C.accent }}>
                  NOW · {DEMO.nowLocal}
                </p>
                <p className="text-[9px] font-medium text-[#6B7280]">{DEMO.nextTime}</p>
              </div>

              <div className="flex items-center gap-1">
                <CorridorInbound />
                <div className="w-[27%] min-w-0 shrink-0">
                  <div
                    className={`flex ${CORRIDOR_RAIL_H} flex-col justify-center rounded-xl border border-white/10 bg-[#11151d] p-2 text-center opacity-55 shadow-[0_8px_24px_-14px_rgba(0,0,0,0.9)]`}
                  >
                    <p className="text-[9px] font-medium text-[#8b93a3]">{DEMO.prevTime}</p>
                    <div className="mx-auto mt-1 flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 bg-black/45 text-sm">
                      🏛️
                    </div>
                    <p className="mt-1 line-clamp-2 text-[10px] font-semibold leading-tight text-white">{DEMO.prevStop}</p>
                    <p className="mt-0.5 text-[9px] text-[#9CA3AF]">Visited</p>
                  </div>
                </div>

                <div className={`flex ${CORRIDOR_RAIL_H} min-w-0 flex-1 items-center`}>
                  <div className={`flex min-w-0 flex-1 flex-col justify-center ${CORRIDOR_RAIL_H}`}>
                    <CorridorDash />
                  </div>
                  <div className="relative z-10 mx-0.5 flex h-[92px] w-[92px] shrink-0 items-center justify-center">
                    <div
                      className="absolute inset-0 rounded-full blur-2xl"
                      style={{ background: `radial-gradient(circle, ${C.accentMuted} 0%, transparent 65%)` }}
                      aria-hidden
                    />
                    <div className="absolute inset-2 rounded-full border opacity-80" style={{ borderColor: C.accent }} aria-hidden />
                    <div className="absolute inset-0 rounded-full border border-dashed opacity-40" style={{ borderColor: C.accent }} aria-hidden />
                    <div
                      className="relative flex h-[50px] w-[50px] items-center justify-center rounded-full text-2xl text-white"
                      style={{
                        background: `linear-gradient(165deg, #5FF5E0 0%, ${C.accent} 45%, #0d6b5c 100%)`,
                        boxShadow: `0 0 36px ${C.accentMuted}, inset 0 1px 0 rgba(255,255,255,0.35)`
                      }}
                    >
                      ☕
                    </div>
                  </div>
                  <div className={`flex min-w-0 flex-1 flex-col justify-center ${CORRIDOR_RAIL_H}`}>
                    <CorridorDash />
                  </div>
                </div>

                <div className="w-[27%] min-w-0 shrink-0">
                  <div
                    className={`flex ${CORRIDOR_RAIL_H} flex-col justify-center rounded-xl border border-cyan-400/35 bg-[#11151d] p-2 text-center opacity-[0.82] shadow-[0_0_22px_-12px_rgba(45,226,197,0.7)]`}
                    style={{ boxShadow: `0 0 0 1px ${C.accentSoft}, 0 0 22px -12px rgba(45,226,197,0.55)` }}
                  >
                    <p className="text-[9px] font-medium text-[#8b93a3]">{DEMO.nextTime}</p>
                    <div className="mx-auto mt-1 flex h-9 w-9 items-center justify-center rounded-xl border border-cyan-400/30 bg-black/45 text-sm">
                      🦁
                    </div>
                    <p className="mt-1 line-clamp-2 text-[10px] font-semibold leading-tight text-white">{DEMO.nextStop}</p>
                    <p className="mt-0.5 text-[9px] text-[#9CA3AF]">Next</p>
                  </div>
                </div>
                <CorridorOutbound />
              </div>

              <div className="mt-1.5 flex justify-center px-[18%] text-center">
                <div>
                  <p className="text-[11px] text-[#9CA3AF]">
                    Available Window <span className="font-semibold text-white">{DEMO.windowMins} min</span>
                  </p>
                  <p className="mt-0.5 text-[11px] text-white">
                    {DEMO.nowLocal} - {DEMO.windowEnd}
                  </p>
                </div>
              </div>
            </div>

            <div
              className="overflow-hidden rounded-2xl border bg-[#0d0d0d] shadow-2xl"
              style={{ borderColor: 'rgba(45,226,197,0.2)', boxShadow: `0 24px 60px -20px rgba(0,0,0,0.9), 0 0 40px -12px ${C.accentSoft}` }}
            >
              <div className="flex items-center justify-between border-b border-white/[0.06] px-3 py-2.5">
                <p className="flex items-center gap-1 text-[10px] font-bold uppercase tracking-[0.18em] text-[#9CA3AF]">
                  <span className="text-violet-400">★</span> Top recommendation
                </p>
                <span className="rounded-full border-2 border-emerald-500/90 bg-emerald-500/10 px-2.5 py-0.5 text-[9px] font-bold uppercase tracking-wide text-emerald-200">
                  {DEMO.reco.tag}
                </span>
              </div>
              <div className="relative h-[140px] w-full overflow-hidden bg-[#1c1410]">
                <div
                  className="absolute inset-0 opacity-100"
                  style={{
                    backgroundImage:
                      'radial-gradient(ellipse 90% 80% at 30% 20%, rgba(251,191,36,0.15), transparent 50%), radial-gradient(ellipse 70% 60% at 70% 60%, rgba(120,53,15,0.35), transparent 45%), linear-gradient(165deg, #2a1f18 0%, #141414 100%)'
                  }}
                  aria-hidden
                />
                <div className="absolute inset-0 bg-gradient-to-t from-[#141414] via-transparent to-transparent" aria-hidden />
              </div>
              <div className="p-3.5">
                <p className="text-[16px] font-bold leading-tight text-white">{DEMO.reco.name}</p>
                <p className="mt-1.5 text-[12px] leading-relaxed text-[#9CA3AF]">{DEMO.reco.blurb}</p>
                <div className="mt-3 space-y-1.5 text-[11px] text-[#9CA3AF]">
                  <p>{DEMO.reco.lineWalk}</p>
                  <p>{DEMO.reco.lineDwell}</p>
                  <p>{DEMO.reco.lineRating}</p>
                </div>
                <div className="mt-4 grid grid-cols-3 gap-2">
                  <button
                    type="button"
                    className="flex flex-col items-center justify-center rounded-xl py-2.5 text-center shadow-lg active:opacity-90"
                    style={{
                      backgroundColor: C.accent,
                      boxShadow: `0 8px 28px -4px ${C.accentMuted}`
                    }}
                  >
                    <span className="text-[11px] font-bold text-white">Add Here</span>
                    <span className="mt-0.5 text-[10px] font-medium text-white/90">{DEMO.nowLocal}</span>
                  </button>
                  <button
                    type="button"
                    className="flex flex-col items-center justify-center rounded-xl bg-gradient-to-b from-violet-600 to-violet-900 py-2.5 text-center shadow-md active:opacity-90"
                  >
                    <span className="text-[11px] font-bold text-white">Replace Next</span>
                    <span className="mt-0.5 truncate px-0.5 text-[9px] font-medium text-white/85">{DEMO.nextStop}</span>
                  </button>
                  <button
                    type="button"
                    className="flex flex-col items-center justify-center rounded-xl bg-[#27272A] py-2.5 text-center active:bg-[#3f3f46]"
                  >
                    <span className="text-[11px] font-bold text-white">Skip</span>
                    <span className="mt-0.5 text-[10px] font-medium text-[#9CA3AF]">Not now</span>
                  </button>
                </div>
                <button
                  type="button"
                  onClick={() => setWhyOpen(!whyOpen)}
                  className="mt-3 flex w-full items-center justify-between border-t border-white/[0.06] pt-3 text-left text-[12px] text-[#9CA3AF] active:bg-white/[0.03]"
                >
                  <span>Why this recommendation?</span>
                  <span className="text-[#6B7280]">{whyOpen ? '⌄' : '›'}</span>
                </button>
                {whyOpen ? (
                  <p className="mt-2 text-[11px] leading-relaxed text-[#6B7280]">
                    Fits your free window, short walk, and high intent match. (Illustrative — production will use
                    scored reasons from Smart Brain.)
                  </p>
                ) : null}
              </div>
            </div>
          </section>

          {/* —— NEXT —— (ref: three cards + gutters; line through icon row; teal dots at both ends) */}
          <section className={`box-border min-h-0 min-w-full shrink-0 snap-start overflow-y-auto ${sectionPad}`}>
            <div className="relative mb-6">
              <div className="mb-1.5 grid grid-cols-3 gap-1 text-center">
                <p className="text-[9px] font-medium text-[#6B7280]">{DEMO.nowLocal}</p>
                <p className="text-[9px] font-medium text-[#6B7280]">{DEMO.nextTime}</p>
                <p className="text-[9px] font-medium text-[#6B7280]">{DEMO.afterThat.time}</p>
              </div>
              <div className="flex items-center gap-0">
                <CorridorInbound />
                <div className="min-w-0 flex-1">
                  <div
                    className={`flex ${CORRIDOR_RAIL_H} flex-col justify-center rounded-xl border border-white/[0.08] bg-[#11151d] p-2 text-center opacity-[0.48] shadow-[0_8px_24px_-14px_rgba(0,0,0,0.9)]`}
                  >
                    <div className="mx-auto flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 bg-black/45 text-sm">
                      ☕
                    </div>
                    <p className="mt-1 line-clamp-2 text-[10px] font-semibold leading-tight text-white">Now</p>
                    <p className="mt-0.5 text-[9px] text-[#9CA3AF]">Current</p>
                  </div>
                </div>
                <div className={`mx-0.5 flex w-3 shrink-0 flex-col justify-center ${CORRIDOR_RAIL_H}`}>
                  <CorridorDash />
                </div>
                <div className="min-w-0 flex-1">
                  <div
                    className={`flex ${CORRIDOR_RAIL_H} flex-col justify-center rounded-xl border-2 bg-black/70 p-2 text-center`}
                    style={{
                      borderColor: C.accent,
                      boxShadow: `0 0 28px ${C.accentMuted}`
                    }}
                  >
                    <div className="mx-auto flex h-9 w-9 items-center justify-center rounded-xl border border-cyan-400/30 bg-black/45 text-sm">
                      🦁
                    </div>
                    <p className="mt-1 text-center text-[10px] font-bold leading-tight text-white">{DEMO.nextStop}</p>
                    <p className="mt-0.5 text-[9px] font-medium text-[#9CA3AF]">Photo stop · 30 min</p>
                  </div>
                </div>
                <div className={`mx-0.5 flex w-3 shrink-0 flex-col justify-center ${CORRIDOR_RAIL_H}`}>
                  <CorridorDash />
                </div>
                <div className="min-w-0 flex-1">
                  <div
                    className={`flex ${CORRIDOR_RAIL_H} flex-col justify-center rounded-xl border border-white/[0.08] bg-[#11151d] p-2 text-center opacity-[0.72] shadow-[0_8px_24px_-14px_rgba(0,0,0,0.9)]`}
                  >
                    <div className="mx-auto flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 bg-black/45 text-sm">
                      🌿
                    </div>
                    <p className="mt-1 line-clamp-2 text-[10px] font-semibold leading-tight text-white">{DEMO.afterThat.title}</p>
                    <p className="mt-0.5 text-[9px] text-[#9CA3AF]">{DEMO.afterThat.sub}</p>
                  </div>
                </div>
                <CorridorOutbound />
              </div>
            </div>

            <p
              className="mb-2 text-center text-[10px] font-bold uppercase tracking-[0.22em]"
              style={{ color: C.accent }}
            >
              Upcoming highlight
            </p>
            <div className="mb-5 overflow-hidden rounded-2xl border border-white/[0.08] bg-[#141414]">
              <div className="relative h-[152px] w-full overflow-hidden bg-[#0c1929]">
                <div
                  className="absolute inset-0 flex items-center justify-center text-6xl opacity-40"
                  aria-hidden
                >
                  🦁
                </div>
                <div
                  className="absolute inset-0"
                  style={{
                    backgroundImage:
                      'linear-gradient(to top, #141414 0%, transparent 55%), radial-gradient(ellipse 80% 70% at 50% 40%, rgba(56,189,248,0.12), transparent 60%)'
                  }}
                  aria-hidden
                />
              </div>
              <div className="border-t border-white/[0.06] p-3.5">
                <p className="text-[17px] font-bold tracking-tight text-white">{DEMO.nextStop}</p>
                <p className="mt-1 text-[11px] font-semibold text-[#9CA3AF]">30 min · 0.8 km walk</p>
                <p className="mt-2 text-[13px] leading-relaxed text-[#9CA3AF]">{DEMO.merlionDesc}</p>
                <div className="mt-4 flex items-stretch gap-3">
                  <button
                    type="button"
                    className="flex flex-1 items-center justify-center rounded-xl border border-[#4B5563] bg-transparent py-2.5 text-[13px] font-semibold text-white"
                  >
                    View on Map
                  </button>
                  <div className="relative h-[52px] w-[72px] shrink-0 overflow-hidden rounded-lg border border-white/10 bg-[#1A1A1A]">
                    <div
                      className="absolute inset-0 opacity-50"
                      style={{
                        backgroundImage:
                          'linear-gradient(rgba(148,163,184,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.12) 1px, transparent 1px)',
                        backgroundSize: '7px 7px'
                      }}
                    />
                    <div
                      className="absolute bottom-2 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full border-2 border-white"
                      style={{ backgroundColor: C.accent }}
                    />
                  </div>
                </div>
              </div>
            </div>

            <p className="mb-2 text-center text-[10px] font-semibold uppercase tracking-[0.2em] text-[#6B7280]">
              After that
            </p>
            <div className="flex gap-3 rounded-2xl border border-white/[0.08] bg-[#141414] p-3">
              <div
                className="h-16 w-16 shrink-0 rounded-lg ring-1 ring-white/10"
                style={{
                  backgroundImage:
                    'linear-gradient(145deg, rgba(6,95,70,0.55) 0%, rgba(15,15,15,0.95) 70%), radial-gradient(circle at 30% 40%, rgba(52,211,153,0.2), transparent 55%)'
                }}
                aria-hidden
              />
              <div className="min-w-0 flex-1">
                <p className="font-semibold text-white">{DEMO.afterThat.title}</p>
                <p className="text-[11px] text-[#9CA3AF]">{DEMO.afterThat.time}</p>
                <p className="mt-0.5 text-[10px] text-[#6B7280]">{DEMO.afterThat.sub}</p>
              </div>
            </div>
          </section>
        </div>

        {/* NOW hotbar + Ask Sylvan (opens Ask Sylvan tab — same chat) + four-tab bar */}
        <div
          className="pointer-events-auto fixed bottom-0 left-0 right-0 z-40 flex flex-col border-t border-white/[0.06] pb-[env(safe-area-inset-bottom,0px)]"
          style={{ backgroundColor: C.bg }}
        >
          {panel === 1 ? (
            <div className="border-b border-white/[0.04] px-2 pb-2 pt-2">
              <div className="mx-auto grid max-w-lg grid-cols-4 gap-1.5">
                {DEMO.nowHotbar.map((h) => (
                  <button
                    key={h.key}
                    type="button"
                    onClick={() => {
                      if (h.target) corridorNavigate(h.target);
                    }}
                    className={`flex min-h-[118px] flex-col items-center rounded-2xl border border-white/[0.08] bg-[#12151c] px-1.5 py-3 text-center shadow-sm transition active:scale-[0.98] ${
                      h.target ? '' : 'opacity-95'
                    }`}
                    style={{ boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04)' }}
                    aria-label={h.title}
                  >
                    <div className="relative mb-2 flex h-[52px] w-full items-center justify-center">
                      <div
                        className="absolute h-11 w-11 rounded-full blur-lg"
                        style={{ background: h.glow }}
                        aria-hidden
                      />
                      <div
                        className="relative flex h-11 w-11 items-center justify-center rounded-full border bg-[#0a0c10]"
                        style={{ borderColor: h.ring, boxShadow: `0 0 14px ${h.glow}` }}
                      >
                        <HotbarIcon spec={h} />
                      </div>
                      {h.badgeMins ? (
                        <span className="absolute -right-0.5 -top-0.5 z-10 rounded-full border border-violet-500/40 bg-[#2e1065] px-1.5 py-0.5 text-[8px] font-bold leading-none text-white shadow-md">
                          {DEMO.windowMins} min
                        </span>
                      ) : null}
                    </div>
                    <p className="w-full text-[10px] font-bold leading-tight text-white">{h.title}</p>
                    <p className="mt-1.5 w-full text-[8px] leading-snug text-[#9CA3AF]">{h.sub}</p>
                  </button>
                ))}
              </div>
            </div>
          ) : null}

          <div className="px-3 pt-2 pb-1.5">
            <button
              type="button"
              onClick={() => corridorNavigate('ask-sylvan')}
              className="mx-auto flex w-full max-w-md items-center gap-3 rounded-[28px] border border-white/[0.1] bg-[#16181f] px-3 py-2.5 text-left shadow-inner backdrop-blur-md active:bg-white/[0.04]"
            >
              <span className="pointer-events-none flex h-9 w-9 shrink-0 items-center justify-center text-lg text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.45)]">
                🍃
              </span>
              <span className="pointer-events-none min-w-0 flex-1 truncate text-left text-[13px] text-[#6B7280]">
                Ask about places, history, or your plan...
              </span>
              <span className="pointer-events-none flex h-9 w-9 shrink-0 items-center justify-center">
                <MicBarLight />
              </span>
            </button>
          </div>
          <nav
            className="grid h-14 grid-cols-4 border-t border-white/[0.08] text-[10px] font-medium text-[#6B7280]"
            style={{ backgroundColor: C.bg }}
          >
            <button
              type="button"
              onClick={() => corridorNavigate('flow-plan')}
              className="flex flex-col items-center justify-center gap-0.5 font-semibold"
              style={{ color: C.accent }}
            >
              <span className="text-base">🧾</span>
              <span>Itinerary</span>
            </button>
            <button type="button" onClick={() => corridorNavigate('explore')} className="flex flex-col items-center justify-center gap-0.5">
              <span className="text-base">🧭</span>
              <span>Explore</span>
            </button>
            <button type="button" onClick={() => corridorNavigate('explore')} className="flex flex-col items-center justify-center gap-0.5">
              <span className="text-base">🗺️</span>
              <span>Map</span>
            </button>
            <button type="button" onClick={() => corridorNavigate('power-up')} className="flex flex-col items-center justify-center gap-0.5">
              <span className="text-base">👤</span>
              <span>Profile</span>
            </button>
          </nav>
        </div>
      </div>
    );
  }

  if (typeof window !== 'undefined') {
    window.NuAskSylvanPage = NuAskSylvanPage;
  }
})();