From 6d3c72bfe8209951f0652b9d303f24aa385ba326 Mon Sep 17 00:00:00 2001
From: varshini-1396 <varshini3919@gmail.com>
Date: Thu, 24 Jul 2025 23:12:37 +0530
Subject: [PATCH] Enhance HelpPage: Convert location, phone, and email to
 clickable links for improved user interaction

---
 app/help/page.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/help/page.tsx b/app/help/page.tsx
index 5dd39e7..7a5eca8 100644
--- a/app/help/page.tsx
+++ b/app/help/page.tsx
@@ -305,23 +305,38 @@ export default function HelpPage() {
                         <div className="flex items-start">
                           <MapPin className="h-4 w-4 text-slate-500 mt-0.5 mr-2" />
                           <div>
-                            <p className="text-sm text-slate-700">
+                            <a
+                              className="text-sm text-slate-700 hover:underline"
+                              href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(provider.location + ', ' + provider.state)}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
                               {provider.location}, {provider.state}
-                            </p>
+                            </a>
                           </div>
                         </div>
 
                         {provider.contact.phone && (
                           <div className="flex items-start">
                             <Phone className="h-4 w-4 text-slate-500 mt-0.5 mr-2" />
-                            <p className="text-sm text-slate-700">{provider.contact.phone}</p>
+                            <a
+                              className="text-sm text-slate-700 hover:underline"
+                              href={`tel:${provider.contact.phone.replace(/[^+\d]/g, '')}`}
+                            >
+                              {provider.contact.phone}
+                            </a>
                           </div>
                         )}
 
                         {provider.contact.email && (
                           <div className="flex items-start">
                             <Mail className="h-4 w-4 text-slate-500 mt-0.5 mr-2" />
-                            <p className="text-sm text-slate-700">{provider.contact.email}</p>
+                            <a
+                              className="text-sm text-slate-700 hover:underline"
+                              href={`mailto:${provider.contact.email}`}
+                            >
+                              {provider.contact.email}
+                            </a>
                           </div>
                         )}
                       </div>