chore: full deployment hardening - force webpack, fix suspense boundary, exclude m1 binaries

lifeline-ai/package-lock.json

@@ -1583,17 +1583,17 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.58.0.tgz",
-      "integrity": "sha512-RLkVSiNuUP1C2ROIWfqX+YcUfLaSnxGE/8M+Y57lopVwg9VTYYfhuz15Yf1IzCKgZj6/rIbYTmJCUSqr76r0Wg==",
+      "version": "8.58.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.58.1.tgz",
+      "integrity": "sha512-eSkwoemjo76bdXl2MYqtxg51HNwUSkWfODUOQ3PaTLZGh9uIWWFZIjyjaJnex7wXDu+TRx+ATsnSxdN9YWfRTQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.58.0",
-        "@typescript-eslint/type-utils": "8.58.0",
-        "@typescript-eslint/utils": "8.58.0",
-        "@typescript-eslint/visitor-keys": "8.58.0",
+        "@typescript-eslint/scope-manager": "8.58.1",
+        "@typescript-eslint/type-utils": "8.58.1",
+        "@typescript-eslint/utils": "8.58.1",
+        "@typescript-eslint/visitor-keys": "8.58.1",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.5.0"
@@ -1606,7 +1606,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.58.0",
+        "@typescript-eslint/parser": "^8.58.1",
         "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.1.0"
       }
@@ -1622,17 +1622,17 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.58.0.tgz",
-      "integrity": "sha512-rLoGZIf9afaRBYsPUMtvkDWykwXwUPL60HebR4JgTI8mxfFe2cQTu3AGitANp4b9B2QlVru6WzjgB2IzJKiCSA==",
+      "version": "8.58.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.58.1.tgz",
+      "integrity": "sha512-gGkiNMPqerb2cJSVcruigx9eHBlLG14fSdPdqMoOcBfh+vvn4iCq2C8MzUB89PrxOXk0y3GZ1yIWb9aOzL93bw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.58.0",
-        "@typescript-eslint/types": "8.58.0",
-        "@typescript-eslint/typescript-estree": "8.58.0",
-        "@typescript-eslint/visitor-keys": "8.58.0",
+        "@typescript-eslint/scope-manager": "8.58.1",
+        "@typescript-eslint/types": "8.58.1",
+        "@typescript-eslint/typescript-estree": "8.58.1",
+        "@typescript-eslint/visitor-keys": "8.58.1",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -1648,14 +1648,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.58.0.tgz",
-      "integrity": "sha512-8Q/wBPWLQP1j16NxoPNIKpDZFMaxl7yWIoqXWYeWO+Bbd2mjgvoF0dxP2jKZg5+x49rgKdf7Ck473M8PC3V9lg==",
+      "version": "8.58.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.58.1.tgz",
+      "integrity": "sha512-gfQ8fk6cxhtptek+/8ZIqw8YrRW5048Gug8Ts5IYcMLCw18iUgrZAEY/D7s4hkI0FxEfGakKuPK/XUMPzPxi5g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.58.0",
-        "@typescript-eslint/types": "^8.58.0",
+        "@typescript-eslint/tsconfig-utils": "^8.58.1",
+        "@typescript-eslint/types": "^8.58.1",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -1670,14 +1670,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.58.0.tgz",
-      "integrity": "sha512-W1Lur1oF50FxSnNdGp3Vs6P+yBRSmZiw4IIjEeYxd8UQJwhUF0gDgDD/W/Tgmh73mxgEU3qX0Bzdl/NGuSPEpQ==",
+      "version": "8.58.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.58.1.tgz",
+      "integrity": "sha512-TPYUEqJK6avLcEjumWsIuTpuYODTTDAtoMdt8ZZa93uWMTX13Nb8L5leSje1NluammvU+oI3QRr5lLXPgihX3w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.58.0",
-        "@typescript-eslint/visitor-keys": "8.58.0"
+        "@typescript-eslint/types": "8.58.1",
+        "@typescript-eslint/visitor-keys": "8.58.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1688,9 +1688,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.58.0.tgz",
-      "integrity": "sha512-doNSZEVJsWEu4htiVC+PR6NpM+pa+a4ClH9INRWOWCUzMst/VA9c4gXq92F8GUD1rwhNvRLkgjfYtFXegXQF7A==",
+      "version": "8.58.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.58.1.tgz",
+      "integrity": "sha512-JAr2hOIct2Q+qk3G+8YFfqkqi7sC86uNryT+2i5HzMa2MPjw4qNFvtjnw1IiA1rP7QhNKVe21mSSLaSjwA1Olw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1705,15 +1705,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.58.0.tgz",
-      "integrity": "sha512-aGsCQImkDIqMyx1u4PrVlbi/krmDsQUs4zAcCV6M7yPcPev+RqVlndsJy9kJ8TLihW9TZ0kbDAzctpLn5o+lOg==",
+      "version": "8.58.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.58.1.tgz",
+      "integrity": "sha512-HUFxvTJVroT+0rXVJC7eD5zol6ID+Sn5npVPWoFuHGg9Ncq5Q4EYstqR+UOqaNRFXi5TYkpXXkLhoCHe3G0+7w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.58.0",
-        "@typescript-eslint/typescript-estree": "8.58.0",
-        "@typescript-eslint/utils": "8.58.0",
+        "@typescript-eslint/types": "8.58.1",
+        "@typescript-eslint/typescript-estree": "8.58.1",
+        "@typescript-eslint/utils": "8.58.1",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.5.0"
       },
@@ -1730,9 +1730,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.58.0.tgz",
-      "integrity": "sha512-O9CjxypDT89fbHxRfETNoAnHj/i6IpRK0CvbVN3qibxlLdo5p5hcLmUuCCrHMpxiWSwKyI8mCP7qRNYuOJ0Uww==",
+      "version": "8.58.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.58.1.tgz",
+      "integrity": "sha512-io/dV5Aw5ezwzfPBBWLoT+5QfVtP8O7q4Kftjn5azJ88bYyp/ZMCsyW1lpKK46EXJcaYMZ1JtYj+s/7TdzmQMw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1744,16 +1744,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.58.0.tgz",
-      "integrity": "sha512-7vv5UWbHqew/dvs+D3e1RvLv1v2eeZ9txRHPnEEBUgSNLx5ghdzjHa0sgLWYVKssH+lYmV0JaWdoubo0ncGYLA==",
+      "version": "8.58.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.58.1.tgz",
+      "integrity": "sha512-w4w7WR7GHOjqqPnvAYbazq+Y5oS68b9CzasGtnd6jIeOIeKUzYzupGTB2T4LTPSv4d+WPeccbxuneTFHYgAAWg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.58.0",
-        "@typescript-eslint/tsconfig-utils": "8.58.0",
-        "@typescript-eslint/types": "8.58.0",
-        "@typescript-eslint/visitor-keys": "8.58.0",
+        "@typescript-eslint/project-service": "8.58.1",
+        "@typescript-eslint/tsconfig-utils": "8.58.1",
+        "@typescript-eslint/types": "8.58.1",
+        "@typescript-eslint/visitor-keys": "8.58.1",
         "debug": "^4.4.3",
         "minimatch": "^10.2.2",
         "semver": "^7.7.3",
@@ -1824,16 +1824,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.58.0.tgz",
-      "integrity": "sha512-RfeSqcFeHMHlAWzt4TBjWOAtoW9lnsAGiP3GbaX9uVgTYYrMbVnGONEfUCiSss+xMHFl+eHZiipmA8WkQ7FuNA==",
+      "version": "8.58.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.58.1.tgz",
+      "integrity": "sha512-Ln8R0tmWC7pTtLOzgJzYTXSCjJ9rDNHAqTaVONF4FEi2qwce8mD9iSOxOpLFFvWp/wBFlew0mjM1L1ihYWfBdQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.58.0",
-        "@typescript-eslint/types": "8.58.0",
-        "@typescript-eslint/typescript-estree": "8.58.0"
+        "@typescript-eslint/scope-manager": "8.58.1",
+        "@typescript-eslint/types": "8.58.1",
+        "@typescript-eslint/typescript-estree": "8.58.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1848,13 +1848,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.58.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.58.0.tgz",
-      "integrity": "sha512-XJ9UD9+bbDo4a4epraTwG3TsNPeiB9aShrUneAVXy8q4LuwowN+qu89/6ByLMINqvIMeI9H9hOHQtg/ijrYXzQ==",
+      "version": "8.58.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.58.1.tgz",
+      "integrity": "sha512-y+vH7QE8ycjoa0bWciFg7OpFcipUuem1ujhrdLtq1gByKwfbC7bPeKsiny9e0urg93DqwGcHey+bGRKCnF1nZQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.58.0",
+        "@typescript-eslint/types": "8.58.1",
         "eslint-visitor-keys": "^5.0.0"
       },
       "engines": {
@@ -2479,9 +2479,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.10.16",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.16.tgz",
-      "integrity": "sha512-Lyf3aK28zpsD1yQMiiHD4RvVb6UdMoo8xzG2XzFIfR9luPzOpcBlAsT/qfB1XWS1bxWT+UtE4WmQgsp297FYOA==",
+      "version": "2.10.17",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.17.tgz",
+      "integrity": "sha512-HdrkN8eVG2CXxeifv/VdJ4A4RSra1DTW8dc/hdxzhGHN8QePs6gKaWM9pHPcpCoxYZJuOZ8drHmbdpLHjCYjLA==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.cjs"
@@ -2550,15 +2550,15 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
-      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
+      "integrity": "sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "call-bind-apply-helpers": "^1.0.0",
-        "es-define-property": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "get-intrinsic": "^1.3.0",
         "set-function-length": "^1.2.2"
       },
       "engines": {
@@ -2610,9 +2610,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001786",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001786.tgz",
-      "integrity": "sha512-4oxTZEvqmLLrERwxO76yfKM7acZo310U+v4kqexI2TL1DkkUEMT8UijrxxcnVdxR3qkVf5awGRX+4Z6aPHVKrA==",
+      "version": "1.0.30001787",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001787.tgz",
+      "integrity": "sha512-mNcrMN9KeI68u7muanUpEejSLghOKlVhRqS/Za2IeyGllJ9I9otGpR9g3nsw7n4W378TE/LyIteA0+/FOZm4Kg==",
       "funding": [
         {
           "type": "opencollective",
@@ -2869,9 +2869,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.331",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.331.tgz",
-      "integrity": "sha512-IbxXrsTlD3hRodkLnbxAPP4OuJYdWCeM3IOdT+CpcMoIwIoDfCmRpEtSPfwBXxVkg9xmBeY7Lz2Eo2TDn/HC3Q==",
+      "version": "1.5.334",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.334.tgz",
+      "integrity": "sha512-mgjZAz7Jyx1SRCwEpy9wefDS7GvNPazLthHg8eQMJ76wBdGQQDW33TCrUTvQ4wzpmOrv2zrFoD3oNufMdyMpog==",
       "dev": true,
       "license": "ISC"
     },
@@ -2897,9 +2897,9 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.24.1",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
-      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
+      "version": "1.24.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.2.tgz",
+      "integrity": "sha512-2FpH9Q5i2RRwyEP1AylXe6nYLR5OhaJTZwmlcP0dL/+JCbgg7yyEo/sEK6HeGZRf3dFpWwThaRHVApXSkW3xeg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3289,7 +3289,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5391,9 +5390,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.8",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
-      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+      "version": "8.5.9",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.9.tgz",
+      "integrity": "sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==",
       "dev": true,
       "funding": [
         {
@@ -5855,14 +5854,14 @@
       }
     },
     "node_modules/side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
+        "object-inspect": "^1.13.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6147,14 +6146,14 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
+        "picomatch": "^4.0.4"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -6360,16 +6359,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.58.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.58.0.tgz",
-      "integrity": "sha512-e2TQzKfaI85fO+F3QywtX+tCTsu/D3WW5LVU6nz8hTFKFZ8yBJ6mSYRpXqdR3mFjPWmO0eWsTa5f+UpAOe/FMA==",
+      "version": "8.58.1",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.58.1.tgz",
+      "integrity": "sha512-gf6/oHChByg9HJvhMO1iBexJh12AqqTfnuxscMDOVqfJW3htsdRJI/GfPpHTTcyeB8cSTUY2JcZmVgoyPqcrDg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.58.0",
-        "@typescript-eslint/parser": "8.58.0",
-        "@typescript-eslint/typescript-estree": "8.58.0",
-        "@typescript-eslint/utils": "8.58.0"
+        "@typescript-eslint/eslint-plugin": "8.58.1",
+        "@typescript-eslint/parser": "8.58.1",
+        "@typescript-eslint/typescript-estree": "8.58.1",
+        "@typescript-eslint/utils": "8.58.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"

lifeline-ai/package.json

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "clean": "rm -rf node_modules package-lock.json .next",
     "reinstall": "npm run clean && npm install",
-    "build": "next build",
+    "build": "TURBOPACK=0 next build",
     "start": "next start",
     "lint": "eslint"
   },

lifeline-ai/src/app/hospitals/HospitalsClient.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { getHospitals, Hospital } from "@/lib/api";
+import { Button, Card, Container, Pill, TopNav } from "@/components/ui";
+import { SOSButton } from "@/components/SOSButton";
+
+function Stars({ rating }: { rating: number }) {
+  const full = Math.round(rating);
+  return (
+    <div className="flex items-center gap-1">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <span key={i} className={i < full ? "text-amber-500" : "text-slate-200"}>
+          ★
+        </span>
+      ))}
+      <span className="ml-2 text-xs font-semibold text-slate-600">{rating.toFixed(1)}</span>
+    </div>
+  );
+}
+
+function AvailabilityPill({ v }: { v: Hospital["availability"] }) {
+  if (v === "busy") return <Pill className="bg-orange-500 text-white">Busy</Pill>;
+  if (v === "limited") return <Pill className="bg-blue-600 text-white">Limited</Pill>;
+  return <Pill className="bg-emerald-600 text-white">Open</Pill>;
+}
+
+export default function HospitalsClient() {
+  const sp = useSearchParams();
+  const initialLocation = sp.get("location") || "Downtown";
+
+  const [location, setLocation] = useState(initialLocation);
+  const [sort, setSort] = useState<"best_rated" | "closest" | "fastest_route">("closest");
+  const [hospitals, setHospitals] = useState<Hospital[]>([]);
+  const [geo, setGeo] = useState<{ lat: number; lng: number } | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    getHospitals(location, sort, geo?.lat ?? null, geo?.lng ?? null)
+      .then((r) => {
+        if (cancelled) return;
+        setHospitals(r.hospitals);
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setHospitals([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [location, sort, geo]);
+
+  function enableGeolocation() {
+    if (!navigator.geolocation) return;
+    navigator.geolocation.getCurrentPosition((p) => {
+      const lat = p.coords.latitude;
+      const lng = p.coords.longitude;
+      setGeo({ lat, lng });
+      setLocation(`${lat.toFixed(4)},${lng.toFixed(4)}`);
+      getHospitals(`${lat.toFixed(4)},${lng.toFixed(4)}`, sort, lat, lng)
+        .then((r) => setHospitals(r.hospitals))
+        .catch(() => {});
+    });
+  }
+
+  const bounds = useMemo(() => {
+    if (!hospitals.length) return null;
+    const lats = hospitals.map((h) => h.lat);
+    const lngs = hospitals.map((h) => h.lng);
+    return {
+      minLat: Math.min(...lats),
+      maxLat: Math.max(...lats),
+      minLng: Math.min(...lngs),
+      maxLng: Math.max(...lngs),
+    };
+  }, [hospitals]);
+
+  return (
+    <div className="min-h-full bg-gradient-to-b from-white to-slate-50">
+      <TopNav />
+      <main className="py-10 sm:py-14">
+        <Container>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <Pill className="bg-blue-50 text-blue-700">Nearby hospital finder</Pill>
+              <h1 className="mt-3 text-3xl font-extrabold tracking-tight text-slate-900">Hospitals near you</h1>
+              <p className="mt-2 text-slate-600">
+                Compare <span className="font-semibold">best rated</span>, <span className="font-semibold">closest</span>, or{" "}
+                <span className="font-semibold">fastest route</span>.
+              </p>
+            </div>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <div>
+                <div className="text-xs font-semibold text-slate-600">Location</div>
+                <input
+                  value={location}
+                  onChange={(e) => setLocation(e.target.value)}
+                  aria-label="Location"
+                  className="mt-2 w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
+                />
+              </div>
+              <div>
+                <div className="text-xs font-semibold text-slate-600">Sort</div>
+                <div className="mt-2 flex gap-2">
+                  <Button variant={sort === "best_rated" ? "primary" : "secondary"} onClick={() => setSort("best_rated")}>
+                    Best rated
+                  </Button>
+                  <Button variant={sort === "closest" ? "primary" : "secondary"} onClick={() => setSort("closest")}>
+                    Closest
+                  </Button>
+                  <Button variant={sort === "fastest_route" ? "primary" : "secondary"} onClick={() => setSort("fastest_route")}>
+                    Fastest
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className="sm:ml-auto">
+              <Button variant="secondary" onClick={enableGeolocation}>
+                Use my location
+              </Button>
+            </div>
+          </div>
+
+          <div className="mt-8 grid gap-6 lg:grid-cols-3">
+            <div className="lg:col-span-2 space-y-4">
+              {!hospitals.length && <div className="text-sm text-slate-600">Loading hospitals…</div>}
+              {hospitals.map((h) => {
+                const erWait = Math.max(8, Math.round(h.eta_minutes * 1.2 + (5 - h.rating) * 4));
+                const doctorMins = Math.max(6, Math.round(h.eta_minutes * 0.65));
+                const beds =
+                  h.availability === "open"
+                    ? "Beds: 12 available"
+                    : h.availability === "limited"
+                    ? "Beds: 4 available"
+                    : "Beds: 1 available";
+                return (
+                  <Card key={h.id}>
+                    <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between group">
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                          <div className="text-lg font-extrabold text-slate-900">{h.name}</div>
+                          <AvailabilityPill v={h.availability} />
+                          <Pill className="bg-emerald-100 text-emerald-800">Verified hospital</Pill>
+                        </div>
+                        <Stars rating={h.rating} />
+                        <div className="text-sm text-slate-600">{h.address}</div>
+                        <div className="flex flex-wrap gap-2 text-xs">
+                          <Pill className="bg-blue-50 text-blue-700">Doctor available in {doctorMins} mins</Pill>
+                          <Pill className="bg-slate-100 text-slate-700">ER wait {erWait} mins</Pill>
+                          <Pill className="bg-violet-100 text-violet-700">{beds}</Pill>
+                        </div>
+                        <div className="flex flex-wrap gap-2">
+                          {h.specialties.slice(0, 5).map((s) => (
+                            <Pill key={s} className="bg-slate-100 text-slate-700">
+                              {s} • verified specialist
+                            </Pill>
+                          ))}
+                        </div>
+                      </div>
+                      <div className="grid gap-2 rounded-2xl border border-slate-200 bg-slate-50 p-4 transition group-hover:-translate-y-0.5">
+                        <div className="text-xs font-semibold text-slate-600">Distance</div>
+                        <div className="text-sm font-extrabold text-slate-900">{h.distance_km.toFixed(1)} km</div>
+                        <div className="text-xs font-semibold text-slate-600">ETA</div>
+                        <div className="text-sm font-extrabold text-slate-900">{h.eta_minutes} min</div>
+                        {geo && (
+                          <a
+                            className="text-xs font-semibold text-blue-700 hover:underline"
+                            target="_blank"
+                            rel="noreferrer"
+                            href={`https://www.google.com/maps/dir/?api=1&origin=${geo.lat},${geo.lng}&destination=${h.lat},${h.lng}&travelmode=driving`}
+                          >
+                            Open live route
+                          </a>
+                        )}
+                        <a className="text-xs font-semibold text-blue-700 hover:underline" href={`tel:${h.phone}`}>
+                          Call {h.phone}
+                        </a>
+                      </div>
+                    </div>
+                  </Card>
+                );
+              })}
+            </div>
+
+            <div className="space-y-6">
+              <Card>
+                <div className="text-sm font-semibold text-slate-900">Map (demo)</div>
+                <p className="mt-2 text-sm text-slate-600">
+                  Demo map pins. In production, replace with Google Maps / Mapbox. Pins are plotted from mock hospital coordinates.
+                </p>
+                <div className="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-slate-50">
+                  <div className="relative h-[280px] w-full">
+                    <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.18),transparent_35%),radial-gradient(circle_at_70%_70%,rgba(16,185,129,0.18),transparent_40%)]" />
+                    <div className="absolute inset-0 p-4">
+                      {bounds &&
+                        hospitals.map((h) => {
+                          const x = ((h.lng - bounds.minLng) / (bounds.maxLng - bounds.minLng || 1)) * 100;
+                          const y = (1 - (h.lat - bounds.minLat) / (bounds.maxLat - bounds.minLat || 1)) * 100;
+                          return (
+                            <div
+                              key={h.id}
+                              className="absolute -translate-x-1/2 -translate-y-1/2"
+                              style={{ left: `${x}%`, top: `${y}%` }}
+                              title={h.name}
+                            >
+                              <div className="grid h-9 w-9 place-items-center rounded-full bg-blue-600 text-white shadow-md">
+                                +
+                              </div>
+                            </div>
+                          );
+                        })}
+                      <div className="absolute bottom-3 left-3 rounded-xl bg-white/90 px-3 py-2 text-xs font-semibold text-slate-700 shadow-sm">
+                        {sort === "best_rated" ? "Best rated" : sort === "fastest_route" ? "Fastest route" : "Closest"}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </Container>
+      </main>
+      <SOSButton />
+    </div>
+  );
+}

lifeline-ai/src/app/hospitals/page.tsx

@@ -1,220 +1,21 @@
-"use client";
+import { Suspense } from "react";
+import HospitalsClient from "./HospitalsClient";
 
-import { useEffect, useMemo, useState } from "react";
-import { useSearchParams } from "next/navigation";
-import { getHospitals, Hospital } from "@/lib/api";
-import { Button, Card, Container, Pill, TopNav } from "@/components/ui";
-import { SOSButton } from "@/components/SOSButton";
-
-function Stars({ rating }: { rating: number }) {
-  const full = Math.round(rating);
-  return (
-    <div className="flex items-center gap-1">
-      {Array.from({ length: 5 }).map((_, i) => (
-        <span key={i} className={i < full ? "text-amber-500" : "text-slate-200"}>
-          ★
-        </span>
-      ))}
-      <span className="ml-2 text-xs font-semibold text-slate-600">{rating.toFixed(1)}</span>
-    </div>
-  );
-}
-
-function AvailabilityPill({ v }: { v: Hospital["availability"] }) {
-  if (v === "busy") return <Pill className="bg-orange-500 text-white">Busy</Pill>;
-  if (v === "limited") return <Pill className="bg-blue-600 text-white">Limited</Pill>;
-  return <Pill className="bg-emerald-600 text-white">Open</Pill>;
-}
+export const metadata = {
+  title: "Hospitals Near You | LifeLine AI",
+  description: "Find the best rated, closest, or fastest route to nearby hospitals.",
+};
 
 export default function HospitalsPage() {
-  const sp = useSearchParams();
-  const initialLocation = sp.get("location") || "Downtown";
-
-  const [location, setLocation] = useState(initialLocation);
-  const [sort, setSort] = useState<"best_rated" | "closest" | "fastest_route">("closest");
-  const [hospitals, setHospitals] = useState<Hospital[]>([]);
-  const [geo, setGeo] = useState<{ lat: number; lng: number } | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    getHospitals(location, sort, geo?.lat ?? null, geo?.lng ?? null)
-      .then((r) => {
-        if (cancelled) return;
-        setHospitals(r.hospitals);
-      })
-      .catch(() => {
-        if (cancelled) return;
-        setHospitals([]);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [location, sort, geo]);
-
-  function enableGeolocation() {
-    if (!navigator.geolocation) return;
-    navigator.geolocation.getCurrentPosition((p) => {
-      const lat = p.coords.latitude;
-      const lng = p.coords.longitude;
-      setGeo({ lat, lng });
-      // Update textual location for visibility
-      setLocation(`${lat.toFixed(4)},${lng.toFixed(4)}`);
-      // Immediately fetch hospitals for this location
-      getHospitals(`${lat.toFixed(4)},${lng.toFixed(4)}`, sort, lat, lng).then((r) => setHospitals(r.hospitals)).catch(() => {});
-    });
-  }
-
-  const bounds = useMemo(() => {
-    if (!hospitals.length) return null;
-    const lats = hospitals.map((h) => h.lat);
-    const lngs = hospitals.map((h) => h.lng);
-    const minLat = Math.min(...lats);
-    const maxLat = Math.max(...lats);
-    const minLng = Math.min(...lngs);
-    const maxLng = Math.max(...lngs);
-    return { minLat, maxLat, minLng, maxLng };
-  }, [hospitals]);
-
   return (
-    <div className="min-h-full bg-gradient-to-b from-white to-slate-50">
-      <TopNav />
-      <main className="py-10 sm:py-14">
-        <Container>
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-            <div>
-              <Pill className="bg-blue-50 text-blue-700">Nearby hospital finder</Pill>
-              <h1 className="mt-3 text-3xl font-extrabold tracking-tight text-slate-900">Hospitals near you</h1>
-              <p className="mt-2 text-slate-600">
-                Compare <span className="font-semibold">best rated</span>, <span className="font-semibold">closest</span>, or{" "}
-                <span className="font-semibold">fastest route</span>.
-              </p>
-            </div>
-            <div className="grid gap-3 sm:grid-cols-2">
-              <div>
-                <div className="text-xs font-semibold text-slate-600">Location</div>
-                <input
-                  value={location}
-                  onChange={(e) => setLocation(e.target.value)}
-                  aria-label="Location"
-                  className="mt-2 w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
-                />
-              </div>
-              <div>
-                <div className="text-xs font-semibold text-slate-600">Sort</div>
-                <div className="mt-2 flex gap-2">
-                  <Button variant={sort === "best_rated" ? "primary" : "secondary"} onClick={() => setSort("best_rated")}>
-                    Best rated
-                  </Button>
-                  <Button variant={sort === "closest" ? "primary" : "secondary"} onClick={() => setSort("closest")}>
-                    Closest
-                  </Button>
-                  <Button variant={sort === "fastest_route" ? "primary" : "secondary"} onClick={() => setSort("fastest_route")}>
-                    Fastest
-                  </Button>
-                </div>
-              </div>
-            </div>
-            <div className="sm:ml-auto">
-              <Button variant="secondary" onClick={enableGeolocation}>
-                Use my location
-              </Button>
-            </div>
-          </div>
-
-          <div className="mt-8 grid gap-6 lg:grid-cols-3">
-            <div className="lg:col-span-2 space-y-4">
-              {!hospitals.length && <div className="text-sm text-slate-600">Loading hospitals…</div>}
-              {hospitals.map((h) => {
-                const erWait = Math.max(8, Math.round(h.eta_minutes * 1.2 + (5 - h.rating) * 4));
-                const doctorMins = Math.max(6, Math.round(h.eta_minutes * 0.65));
-                const beds = h.availability === "open" ? "Beds: 12 available" : h.availability === "limited" ? "Beds: 4 available" : "Beds: 1 available";
-                return (
-                <Card key={h.id}>
-                  <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between group">
-                    <div className="space-y-2">
-                      <div className="flex items-center gap-2">
-                        <div className="text-lg font-extrabold text-slate-900">{h.name}</div>
-                        <AvailabilityPill v={h.availability} />
-                        <Pill className="bg-emerald-100 text-emerald-800">Verified hospital</Pill>
-                      </div>
-                      <Stars rating={h.rating} />
-                      <div className="text-sm text-slate-600">{h.address}</div>
-                      <div className="flex flex-wrap gap-2 text-xs">
-                        <Pill className="bg-blue-50 text-blue-700">Doctor available in {doctorMins} mins</Pill>
-                        <Pill className="bg-slate-100 text-slate-700">ER wait {erWait} mins</Pill>
-                        <Pill className="bg-violet-100 text-violet-700">{beds}</Pill>
-                      </div>
-                      <div className="flex flex-wrap gap-2">
-                        {h.specialties.slice(0, 5).map((s) => (
-                          <Pill key={s} className="bg-slate-100 text-slate-700">
-                            {s} • verified specialist
-                          </Pill>
-                        ))}
-                      </div>
-                    </div>
-                    <div className="grid gap-2 rounded-2xl border border-slate-200 bg-slate-50 p-4 transition group-hover:-translate-y-0.5">
-                      <div className="text-xs font-semibold text-slate-600">Distance</div>
-                      <div className="text-sm font-extrabold text-slate-900">{h.distance_km.toFixed(1)} km</div>
-                      <div className="text-xs font-semibold text-slate-600">ETA</div>
-                      <div className="text-sm font-extrabold text-slate-900">{h.eta_minutes} min</div>
-                      {geo && (
-                        <a
-                          className="text-xs font-semibold text-blue-700 hover:underline"
-                          target="_blank"
-                          rel="noreferrer"
-                          href={`https://www.google.com/maps/dir/?api=1&origin=${geo.lat},${geo.lng}&destination=${h.lat},${h.lng}&travelmode=driving`}
-                        >
-                          Open live route
-                        </a>
-                      )}
-                      <a className="text-xs font-semibold text-blue-700 hover:underline" href={`tel:${h.phone}`}>
-                        Call {h.phone}
-                      </a>
-                    </div>
-                  </div>
-                </Card>
-              )})}
-            </div>
-
-            <div className="space-y-6">
-              <Card>
-                <div className="text-sm font-semibold text-slate-900">Map (demo)</div>
-                <p className="mt-2 text-sm text-slate-600">
-                  Demo map pins. In production, replace with Google Maps / Mapbox. Pins are plotted from mock hospital coordinates.
-                </p>
-                <div className="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-slate-50">
-                  <div className="relative h-[280px] w-full">
-                    <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.18),transparent_35%),radial-gradient(circle_at_70%_70%,rgba(16,185,129,0.18),transparent_40%)]" />
-                    <div className="absolute inset-0 p-4">
-                      {bounds && hospitals.map((h) => {
-                        const x = ((h.lng - bounds.minLng) / (bounds.maxLng - bounds.minLng || 1)) * 100;
-                        const y = (1 - (h.lat - bounds.minLat) / (bounds.maxLat - bounds.minLat || 1)) * 100;
-                        return (
-                          <div
-                            key={h.id}
-                            className="absolute -translate-x-1/2 -translate-y-1/2"
-                            style={{ left: `${x}%`, top: `${y}%` }}
-                            title={h.name}
-                          >
-                            <div className="grid h-9 w-9 place-items-center rounded-full bg-blue-600 text-white shadow-md">
-                              +
-                            </div>
-                          </div>
-                        );
-                      })}
-                      <div className="absolute bottom-3 left-3 rounded-xl bg-white/90 px-3 py-2 text-xs font-semibold text-slate-700 shadow-sm">
-                        {sort === "best_rated" ? "Best rated" : sort === "fastest_route" ? "Fastest route" : "Closest"}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </div>
-        </Container>
-      </main>
-      <SOSButton />
-    </div>
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center text-slate-600 text-sm">
+          Loading hospitals…
+        </div>
+      }
+    >
+      <HospitalsClient />
+    </Suspense>
   );
 }
-