From 91991ad11b1136a9a5c41647da275a2b32a04a0e Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 13:38:40 +0000
Subject: [PATCH] Refactor Park Address Display

---
 src/pages/ParkDetail.tsx | 58 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 53 insertions(+), 5 deletions(-)

diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index 4fced114..6768ea53 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -337,11 +337,59 @@ export default function ParkDetail() {
 
                     <div className="space-y-4">
                       <div className="font-medium">Location</div>
-                      {park.location && <div className="text-sm text-muted-foreground space-y-1">
-                          {park.location.city && <div>{park.location.city}</div>}
-                          {park.location.state_province && <div>{park.location.state_province}</div>}
-                          <div>{park.location.country}</div>
-                        </div>}
+                      {park.location && (
+                        <div className="space-y-3">
+                          {/* Full Address Display */}
+                          <div className="text-sm text-muted-foreground">
+                            <div className="font-medium text-foreground mb-1">Address:</div>
+                            <div className="space-y-1">
+                              {park.location.name && <div>{park.location.name}</div>}
+                              {park.location.city && <div>{park.location.city}</div>}
+                              {park.location.state_province && <div>{park.location.state_province}</div>}
+                              {park.location.postal_code && <div>{park.location.postal_code}</div>}
+                              <div>{park.location.country}</div>
+                            </div>
+                          </div>
+
+                          {/* Map Links */}
+                          {park.location?.latitude && park.location?.longitude && (
+                            <div className="flex gap-2 flex-wrap">
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                asChild
+                                className="text-xs"
+                              >
+                                <a
+                                  href={`https://maps.apple.com/?q=${encodeURIComponent(park.name)}&ll=${park.location.latitude},${park.location.longitude}`}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="flex items-center gap-1"
+                                >
+                                  <MapPin className="w-3 h-3" />
+                                  Apple Maps
+                                </a>
+                              </Button>
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                asChild
+                                className="text-xs"
+                              >
+                                <a
+                                  href={`https://maps.google.com/?q=${encodeURIComponent(park.name)}&ll=${park.location.latitude},${park.location.longitude}`}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="flex items-center gap-1"
+                                >
+                                  <Globe className="w-3 h-3" />
+                                  Google Maps
+                                </a>
+                              </Button>
+                            </div>
+                          )}
+                        </div>
+                      )}
                       
                       {park.location?.latitude && park.location?.longitude && (
                         <div className="mt-4">