import { AppShell, AppShellNav, AppShellMain, Stack, Row, Card, CardTitle, Button, Input, Map, MapMarker, Carousel, CarouselSlide, MediaSurface } from "@gradeui/ui"; import { useState } from "react"; import { ArrowLeft, Search, MapPin, Sliders, Bookmark, Map as MapIcon, List, ChevronDown } from "lucide-react"; // Real UK studios / venues (Pocket Films provider set). Coords are // [lng, lat], verified against OpenStreetMap / Wikipedia. `count` is the // marker badge — a simple 1–8 index, NOT the stage count (the stage // figures live in the description). Descriptions are the providers' own. const STUDIOS = [ { id: "sky-elstree", title: "SKY STUDIOS ELSTREE", data1: "Elstree • UK", data2: "Studio • 12 Sound Stages • 6 Acre Backlot", coords: [-0.2513, 51.6604], count: 1, tag: "Popular", src: "https://fbftniekvvkbduwpuzfs.supabase.co/storage/v1/object/public/user-assets/2a40a97c-287a-4e87-87eb-a9f453064abe/86d12092-d310-4078-a8fd-aa6a9191141d.jpg" }, { id: "shinfield", title: "SHINFIELD STUDIOS", data1: "Berkshire • UK", data2: "Studio • 18 Sound Stages • 38 Workshops", coords: [-0.9387, 51.4155], count: 2, src: "https://fbftniekvvkbduwpuzfs.supabase.co/storage/v1/object/public/user-assets/2a40a97c-287a-4e87-87eb-a9f453064abe/a4935914-2218-445d-94bf-91209fe06c70.jpg" }, { id: "pinewood", title: "PINEWOOD STUDIOS", data1: "Buckinghamshire • UK", data2: "Studio • Indie Film Hub • Underwater Stage", coords: [-0.5322, 51.5525], count: 3, tag: "Rare find", src: "https://fbftniekvvkbduwpuzfs.supabase.co/storage/v1/object/public/user-assets/2a40a97c-287a-4e87-87eb-a9f453064abe/24f433e9-79fc-4520-8da1-3946fdd94c02.jpg" }, { id: "leavesden", title: "WARNER BROS. STUDIOS LEAVESDEN", data1: "Hertfordshire • UK", data2: "Studio • 19 Sound Stages • Post Production", coords: [-0.4228, 51.6900], count: 4, src: "https://fbftniekvvkbduwpuzfs.supabase.co/storage/v1/object/public/user-assets/2a40a97c-287a-4e87-87eb-a9f453064abe/329428f1-02c3-41f2-a9f4-01f88ce91236.jpg" }, { id: "ealing", title: "EALING STUDIOS", data1: "Ealing • UK", data2: "Studio • Net Zero Sound Stage • Workshops", coords: [-0.3078, 51.5089], count: 5, src: "https://fbftniekvvkbduwpuzfs.supabase.co/storage/v1/object/public/user-assets/2a40a97c-287a-4e87-87eb-a9f453064abe/ce6637a7-3296-45cd-80b5-ebd753c938f7.jpg" }, { id: "garden", title: "GARDEN STUDIOS", data1: "London • UK", data2: "Studio • Virtual Production • TV Studio", coords: [-0.2664, 51.5361], count: 6, src: "https://fbftniekvvkbduwpuzfs.supabase.co/storage/v1/object/public/user-assets/2a40a97c-287a-4e87-87eb-a9f453064abe/284d8e53-788d-42c6-8f6d-139b2ab3e7e9.jpg" }, { id: "bfi", title: "BFI SOUTHBANK", data1: "London • UK", data2: "Film Institute • Venue Hire • Conferences", coords: [-0.1152, 51.5067], count: 7, src: "https://fbftniekvvkbduwpuzfs.supabase.co/storage/v1/object/public/user-assets/2a40a97c-287a-4e87-87eb-a9f453064abe/a3b77206-360c-4625-a6ba-366fc3d73a42.jpg" }, { id: "british-museum", title: "THE BRITISH MUSEUM", data1: "London • UK", data2: "Screening Room • Venue Hire • Events", coords: [-0.1267, 51.5193], count: 8, src: "https://fbftniekvvkbduwpuzfs.supabase.co/storage/v1/object/public/user-assets/2a40a97c-287a-4e87-87eb-a9f453064abe/b6ca9f47-e7ca-4808-86b0-71129db67c61.jpg" } ]; export default function App() { const [hovered, setHovered] = useState("sky-elstree"); const [bookmarked, setBookmarked] = useState(["sky-elstree"]); const [viewMode, setViewMode] = useState("map"); // "map" or "list" const [mapHandle, setMapHandle] = useState(null); const toggleBookmark = (id, e) => { e.stopPropagation(); setBookmarked(prev => prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id] ); }; // Camera moves are best-effort ON PURPOSE. The Carousel fires its // select event during INIT — i.e. on every recompile/edit — so this // can run while the map is still booting (or tearing down between // double-buffered previews). maplibre throws from deep inside flyTo // in that window ("reading 'lat'" on a null center); skipping the // move is correct — the next real interaction flies fine. The old // `mapHandle.instance.flyTo` fallback is gone: it bypassed the // wrapper straight into provider internals, which is exactly where // the crash lived. const focusListing = (listing) => { if (!listing) return; setHovered(listing.id); if (!mapHandle) return; try { mapHandle.flyTo(listing.coords, { zoom: 11 }); } catch (e) { /* map mid-boot or mid-teardown — skip the camera move */ } }; return ( {/* Map + brand chrome tweaks (self-contained so the live embed is correct even before the DS CSS that defines these ships): 1. .gds-map-label — mode-aware halo behind floating marker labels. 2. Hide the Leaflet zoom buttons below the `md` breakpoint. 3. .pf-logo — dark-mode-ready logo: invert flips the black wordmark to white, hue-rotate(180) cancels invert's hue shift so the coral mark stays on-brand. Lets the screen be toggled light/dark. */} {/* Top Header: Hidden on mobile since we render custom mobile headers */}

{/* Main Application Grid Container */}

{/* DESKTOP SPLIT: Left Listing Panel — header pinned, only the card list scrolls */}

{STUDIOS.length} Spaces available

Click a space to center it on the map

{STUDIOS.map((l) => { const isActive = hovered === l.id; const isSaved = bookmarked.includes(l.id); return (

setHovered(l.id)} onMouseLeave={() => setHovered(null)} onClick={() => focusListing(l)} className="cursor-pointer" > {l.title}

toggleBookmark(l.id, e)} className="-mr-1 -mt-1 shrink-0">

{l.data1} {l.data2}

); })}

{/* RIGHT SIDE: Interactive Map Panel */}

setMapHandle(handle)} center={[-0.45, 51.55]} zoom={9} hoveredId={hovered} {...{ onHoveredIdChange: setHovered }} className="h-full w-full" > {STUDIOS.map((l) => { const isActive = hovered === l.id; return (

focusListing(l)} style={{ border: "none", boxShadow: "none" }} className="flex flex-col items-center group cursor-pointer pb-2 px-2 overflow-visible"> {/* Floating label — mode-aware halo via the DS `.gds-map-label` helper (white stroke on light tiles, near-black on dark) so it never washes out. Was a hard-coded white text-stroke. */}

{l.title}

{/* Shield marker — supplied SVG shape. Fill is `currentColor` so it themes (primary when active, neutral grey #6A7282 otherwise); white 2px stroke + CSS drop-shadow reproduce the source SVG's filter without duplicate filter IDs. */}

{l.count}

); })}

{/* MOBILE LIST VIEW (Conditionally Rendered full screen overlay) */} {viewMode === "list" && (

{/* Spacing spacer for sticky header context */} Filter by {STUDIOS.map((l) => { const isSaved = bookmarked.includes(l.id); return (

focusListing(l)} className="cursor-pointer"> {l.title}

toggleBookmark(l.id, e)} className="-mr-1 -mt-1 shrink-0">

{l.data1} {l.data2}

); })}

)} {/* STICKY MOBILE TOP HEADERS: Absolute positioned overlay with protective gradient backdrop */}

{/* Row 1: Search block */}

{/* Row 2: Location and spaces pill indicators */}

London, UK Within 50 miles

Spaces All spaces

{/* MOBILE OVERLAY: Swipable card carousel anchored above the bottom tray. Arbitrary classes are safe here — the sandbox runs a Tailwind v4 runtime compiler on top of the precompiled DS stylesheet. NOTE: the contract requires an integer slidesPerView; the neighbour-peek effect comes from basis-[91%] on each slide instead (same visual as the old slidesPerView={1.1}). */} {viewMode === "map" && (

focusListing(STUDIOS[index])} className="w-full h-full pointer-events-auto" draggable> {STUDIOS.map((l) => { const isSaved = bookmarked.includes(l.id); const isActive = hovered === l.id; return (

focusListing(l)} className="h-full cursor-pointer"> {l.title}

toggleBookmark(l.id, e)} className="-mr-1.5 -mt-1.5 shrink-0">

{l.data1} {l.data2}

); })}

)} {/* STICKY BOTTOM WIREFRAME TABS BAR: Anchored solid tray */}

{STUDIOS.length} Results

setViewMode("map")} className="flex-1">

setViewMode("list")} className="flex-1">

); }