import React, { useMemo, useState } from "react"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; import L from "leaflet"; import "leaflet/dist/leaflet.css"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Badge } from "@/components/ui/badge"; import { MapPin, Mountain, Route, Search, ExternalLink, Gauge, Clock3 } from "lucide-react"; const rides = [ { id: 1, name: "Little Creek Mesa", lat: 37.056, lng: -113.259, difficulty: "Easy–Moderate", terrain: "Open desert, mesa roads, scenic overlooks", driveTime: "10–20 min", summary: "A close-to-home Apple Valley option with quieter ATV and dirt bike trails, wide-open views, and room for casual riders or guided scenic loops.", bestFor: ["Beginners", "Scenic rides", "Small groups"], cta: "https://www.google.com/maps/search/?api=1&query=37.056,-113.259", }, { id: 2, name: "Gooseberry Mesa Access", lat: 37.08491, lng: -113.10299, difficulty: "Easy", terrain: "BLM access roads, mesa views, connector riding", driveTime: "20–30 min", summary: "Known for incredible mesa views and easy access roads. Good for scenic dual-sport style riding and mellow exploration around the Gooseberry area.", bestFor: ["Scenic rides", "Easy access", "Photo stops"], cta: "https://www.google.com/maps/search/?api=1&query=37.08491,-113.10299", }, { id: 3, name: "Sand Mountain / Sand Hollow OHV Area", lat: 37.060898, lng: -113.412487, difficulty: "Moderate–Expert", terrain: "Sand dunes, slickrock, bowls, technical climbs", driveTime: "35–45 min", summary: "The biggest headline riding area near you. Massive sand, technical sections, and a wide skill range, but parts of it are very serious terrain.", bestFor: ["Experienced riders", "Big terrain", "Bucket-list rides"], cta: "https://www.google.com/maps/search/?api=1&query=37.060898,-113.412487", }, { id: 4, name: "Warner Valley", lat: 37.02303669, lng: -113.3670982, difficulty: "Easy–Moderate", terrain: "Desert roads, wash sections, mixed-access routes", driveTime: "30–40 min", summary: "A broad southern Utah riding zone with easier desert mileage, wash riding, and good variety for guided trips that do not need extreme terrain.", bestFor: ["Tours", "Intermediate riders", "Longer loops"], cta: "https://www.google.com/maps/search/?api=1&query=37.02303669,-113.3670982", }, { id: 5, name: "Smithsonian Butte Backcountry Byway", lat: 37.127, lng: -113.154, difficulty: "Easy", terrain: "Graded dirt road, cliffs, panoramic desert views", driveTime: "20–30 min", summary: "A scenic backcountry road more than a technical trail. Great for visitors who want an adventure feel with low intimidation and big Zion-area scenery.", bestFor: ["Beginners", "Sightseeing", "Family-friendly"], cta: "https://www.google.com/maps/search/?api=1&query=Smithsonian+Butte+Backcountry+Byway+Utah", }, { id: 6, name: "Toquerville Falls Route", lat: 37.29896, lng: -113.24684, difficulty: "Moderate", terrain: "Rocky dirt road, creek crossing, destination ride", driveTime: "45–55 min", summary: "A classic destination ride with a memorable payoff. Better for confident riders and drier conditions because the route can change after weather.", bestFor: ["Adventure rides", "Intermediate riders", "Destination routes"], cta: "https://www.google.com/maps/search/?api=1&query=37.29896,-113.24684", }, ]; const markerSvg = (active) => ` `; const makeIcon = (active) => L.divIcon({ html: markerSvg(active), className: "bg-transparent border-0", iconSize: [34, 44], iconAnchor: [17, 44], popupAnchor: [0, -36], }); export default function AlpMXNearbyRidingMapPage() { const [search, setSearch] = useState(""); const [difficulty, setDifficulty] = useState("All"); const [selectedRideId, setSelectedRideId] = useState(rides[0].id); const filteredRides = useMemo(() => { return rides.filter((ride) => { const matchesSearch = !search || ride.name.toLowerCase().includes(search.toLowerCase()) || ride.terrain.toLowerCase().includes(search.toLowerCase()) || ride.summary.toLowerCase().includes(search.toLowerCase()); const matchesDifficulty = difficulty === "All" || ride.difficulty.includes(difficulty); return matchesSearch && matchesDifficulty; }); }, [search, difficulty]); const selectedRide = filteredRides.find((r) => r.id === selectedRideId) || filteredRides[0] || rides[0]; return (

Southern Utah Riding Map

Find the best places to ride near AlpMX Adventures.

Give customers an easy way to see where they can ride from Apple Valley. This page highlights a strong mix of scenic beginner areas, guided-tour-friendly zones, and high-profile terrain for advanced riders.

Ride zones

{rides.length}

Closest options

Terrain mix

Wide

Nearby riding areas

Use the map and filters to explore the best-known zones around Apple Valley, Hurricane, and the greater southern Utah riding corridor.

setSearch(e.target.value)} placeholder="Search by area or terrain" className="rounded-full border-stone-300 bg-white pl-9" />

{[ ["All", "All"], ["Easy", "Easy"], ["Moderate", "Moderate"], ["Expert", "Expert"], ].map(([label, value]) => { const active = difficulty === value; return ( ); })}

{filteredRides.map((ride) => { const active = selectedRide?.id === ride.id; return ( setSelectedRideId(ride.id) }} >

{ride.name}

{ride.summary}

{ride.bestFor.map((item) => ( {item} ))}

); })}

Featured area {selectedRide ? (

{selectedRide.name}

{selectedRide.summary}

{selectedRide.difficulty}

Terrain

{selectedRide.terrain}

From Apple Valley

{selectedRide.driveTime}

Best for

{selectedRide.bestFor.map((item) => ( {item} ))}

) : (

No ride area matches the current filters.

)} All ride areas {filteredRides.map((ride) => { const active = selectedRide?.id === ride.id; return ( ); })}

);