// Shared components — custom iconography, header/footer, service card const { useState, useEffect, useMemo, useRef } = React; // Normalize a service website value into a navigable URL. // Data uses bare hostnames (e.g. "samh.org.uk") but a few entries may // already include a scheme or path — prefix only when missing. const externalUrl = (value) => { if (!value) return ""; const trimmed = String(value).trim(); if (/^https?:\/\//i.test(trimmed)) return trimmed; if (/^\/\//.test(trimmed)) return `https:${trimmed}`; return `https://${trimmed.replace(/^\/+/, "")}`; }; // --------------------------------------------------------------------------- // Postcode -> approximate coordinates // // A tiny lookup keyed by Scottish postcode area (the alphabetic prefix). It's // not a substitute for postcodes.io, but it's offline-safe and good enough // to filter the directory by "is this within N miles". The coords sit roughly // in the centre of each area. const POSTCODE_AREAS = { AB: { lat: 57.149, lng: -2.094, name: "Aberdeen" }, DD: { lat: 56.462, lng: -2.970, name: "Dundee" }, DG: { lat: 55.071, lng: -3.604, name: "Dumfries" }, EH: { lat: 55.953, lng: -3.188, name: "Edinburgh" }, FK: { lat: 56.001, lng: -3.785, name: "Falkirk / Stirling" }, G: { lat: 55.864, lng: -4.252, name: "Glasgow" }, HS: { lat: 58.213, lng: -6.387, name: "Western Isles" }, IV: { lat: 57.477, lng: -4.224, name: "Inverness" }, KA: { lat: 55.612, lng: -4.501, name: "Kilmarnock / Ayr" }, KW: { lat: 58.643, lng: -3.090, name: "Kirkwall / Caithness" }, KY: { lat: 56.114, lng: -3.156, name: "Kirkcaldy / Fife" }, ML: { lat: 55.659, lng: -3.785, name: "Motherwell / Lanarkshire" }, PA: { lat: 55.847, lng: -4.423, name: "Paisley" }, PH: { lat: 56.395, lng: -3.437, name: "Perth" }, TD: { lat: 55.605, lng: -2.722, name: "Borders" }, ZE: { lat: 60.155, lng: -1.146, name: "Shetland" }, }; // Slightly more accurate centres for a handful of common districts (first // 1–3 chars). Falls back to the area-level lookup above. const POSTCODE_DISTRICTS = { EH1: { lat: 55.951, lng: -3.190 }, EH2: { lat: 55.953, lng: -3.197 }, EH3: { lat: 55.957, lng: -3.205 }, EH8: { lat: 55.946, lng: -3.175 }, EH10: { lat: 55.927, lng: -3.213 }, EH16: { lat: 55.920, lng: -3.139 }, G1: { lat: 55.860, lng: -4.250 }, G2: { lat: 55.864, lng: -4.260 }, G3: { lat: 55.866, lng: -4.281 }, G12: { lat: 55.876, lng: -4.299 }, AB10: { lat: 57.144, lng: -2.110 }, AB25: { lat: 57.155, lng: -2.117 }, DD1: { lat: 56.462, lng: -2.970 }, IV2: { lat: 57.471, lng: -4.196 }, PH1: { lat: 56.395, lng: -3.437 }, KY1: { lat: 56.114, lng: -3.156 }, }; const lookupPostcode = (raw) => { if (!raw) return null; const code = String(raw).toUpperCase().replace(/\s+/g, ""); // Try district (first 2-4 chars) by stepping down to the area letters. for (let n = Math.min(code.length, 4); n >= 2; n--) { const slice = code.slice(0, n); if (POSTCODE_DISTRICTS[slice]) return { ...POSTCODE_DISTRICTS[slice], code: slice }; } // Area = the leading letters only (1 or 2). const area = (code.match(/^[A-Z]{1,2}/) || [])[0]; if (area && POSTCODE_AREAS[area]) return { ...POSTCODE_AREAS[area], code: area }; return null; }; // Great-circle distance in miles using the Haversine formula. const milesBetween = (a, b) => { if (!a || !b) return null; const R = 3958.8; const toRad = (d) => (d * Math.PI) / 180; const dLat = toRad(b.lat - a.lat); const dLng = toRad(b.lng - a.lng); const lat1 = toRad(a.lat); const lat2 = toRad(b.lat); const h = Math.sin(dLat / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLng / 2) ** 2; return 2 * R * Math.asin(Math.sqrt(h)); }; // Custom-drawn icons. Category icons are bespoke shapes (life-ring, profile, // sprig, venn, paper-plane, feather, rings, flame). Utility icons keep a // consistent 1.5 stroke, 24px viewBox. const Icon = ({ name, size = 18 }) => { const s = size; const stroke = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { /* ---------- Category icons ---------- */ case "cat-crisis": return ( ); case "cat-mind": return ( ); case "cat-addiction": return ( ); case "cat-peer": return ( ); case "cat-young": return ( ); case "cat-bereavement": return ( ); case "cat-lgbtq": return ( ); case "cat-spiritual": return ( ); case "cat-advocacy": // Shield with check — speaking up / standing alongside return ( ); /* ---------- Utility icons ---------- */ case "phone": return ; case "pin": return ; case "clock": return ; case "users": return ; case "info": return ; case "alert": return ; case "back": return ; case "right": return ; case "arrow-ne": return ; case "copy": return ; case "check": return ; case "x": return ; case "search": return ; case "list": return ; case "map": return ; case "mail": return ; case "globe": return ; case "ear": return ; case "keyboard": return ; case "eye": return ; case "wifi-off": return ; case "brain": return ; case "heart": return ; default: return null; } }; // Map category id -> icon name const CATEGORY_ICON = { "crisis": "cat-crisis", "mental-health": "cat-mind", "addiction": "cat-addiction", "peer": "cat-peer", "young": "cat-young", "bereavement": "cat-bereavement", "lgbtq": "cat-lgbtq", "spiritual": "cat-spiritual", "advocacy": "cat-advocacy", }; const CrisisStrip = () => (
In crisis right now?  Call NHS 24 · 111 · Text SHOUT to 85258 · 999 if life is in danger.
); const Header = ({ go, route }) => (
{ e.preventDefault(); go("home"); }}>
S
Scotland Mental Health & Addiction Library
); const Footer = ({ go }) => ( ); const MobileCrisisBar = () => ( ); const formatMiles = (m) => { if (m == null) return null; if (m < 1) return `${(m * 10 | 0) / 10} mi`; if (m < 10) return `${m.toFixed(1)} mi`; return `${Math.round(m)} mi`; }; const ServiceCard = ({ service, onOpen, distance }) => (

{service.name}

{service.coverage}

{distance != null && ( {formatMiles(distance)} )} {service.openNow ? "Open now" : "Closed"}
{service.address && (
{service.address}
)}
{service.phone}
{service.hours?.today}
Ages {service.ageRange}{service.wait ? ` · Wait ${service.wait}` : ""}

{service.blurb}

Call now
); const MapPanel = ({ services, activeId, onPin }) => { // Auto-fit bounds to the services that have coords (with a small fallback // to Edinburgh so the empty state still looks like a map). const pinned = services.filter(s => s.lat && s.lng); let bounds; if (pinned.length === 0) { bounds = { minLat: 55.91, maxLat: 55.98, minLng: -3.26, maxLng: -3.13 }; } else { const lats = pinned.map(s => s.lat); const lngs = pinned.map(s => s.lng); const padLat = Math.max(0.02, (Math.max(...lats) - Math.min(...lats)) * 0.15); const padLng = Math.max(0.02, (Math.max(...lngs) - Math.min(...lngs)) * 0.15); bounds = { minLat: Math.min(...lats) - padLat, maxLat: Math.max(...lats) + padLat, minLng: Math.min(...lngs) - padLng, maxLng: Math.max(...lngs) + padLng, }; } const pinFor = (s) => { if (!s.lat || !s.lng) return null; const x = ((s.lng - bounds.minLng) / (bounds.maxLng - bounds.minLng)) * 100; const y = ((bounds.maxLat - s.lat) / (bounds.maxLat - bounds.minLat)) * 100; return { x, y }; }; return ( ); }; // External finder cards. Deep-link to the authoritative directories with the // user's postcode prefilled where the target site supports it. Filters by // category so only the relevant cards show. const FinderGrid = ({ postcode, category, title = "Search a specialist directory", subtitle, limit }) => { const finders = window.APP_DATA.finders || []; const filtered = finders.filter(f => { if (!category || category === "all") return true; return (f.categories || []).includes(category); }); const items = limit ? filtered.slice(0, limit) : filtered; if (items.length === 0) return null; const resolveUrl = (finder) => { if (postcode && finder.urlWithPostcode) { return finder.urlWithPostcode.replace("{postcode}", encodeURIComponent(postcode)); } return finder.url; }; return (

{title}

{subtitle && {subtitle}}
{items.map(f => (
{f.scope} {f.reach}

{f.name}

{f.blurb}

{postcode && f.urlWithPostcode ? <>Open with {postcode} : <>Open directory } ))}
); }; // Maps app category ids to ALISS API category slugs (best-effort; ALISS uses // loosely structured tag categories so unmatched ids skip the filter). const ALISS_CATEGORY = { "mental-health": "mental-health", "addiction": "drugs-and-alcohol", "bereavement": "bereavement", "peer": "peer-support", "young": "young-people", "lgbtq": "lgbt", "advocacy": "advocacy", "spiritual": "spiritual", }; // AlissPanel — live fetch from aliss.org with graceful fallback. If the API // is unreachable or the response shape is unexpected, we degrade silently to // a deep-link CTA so the user can finish the journey on ALISS itself. const AlissPanel = ({ postcode, category }) => { const [state, setState] = useState({ status: "idle", items: [] }); const origin = useMemo(() => lookupPostcode(postcode), [postcode]); useEffect(() => { if (!postcode) { setState({ status: "idle", items: [] }); return; } const controller = new AbortController(); const timer = setTimeout(() => controller.abort(), 8000); setState({ status: "loading", items: [] }); const params = new URLSearchParams(); params.set("postcode", postcode); params.set("page_size", "20"); if (category && category !== "all" && ALISS_CATEGORY[category]) { params.set("category", ALISS_CATEGORY[category]); } const url = `https://www.aliss.org/api/v4/services/?${params.toString()}`; fetch(url, { signal: controller.signal, headers: { "Accept": "application/json" } }) .then(r => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))) .then(data => { const raw = data.data || data.results || data.items || []; const items = raw.map(s => { const loc = (s.locations && s.locations[0]) || {}; const lat = loc.latitude ?? loc.lat ?? null; const lng = loc.longitude ?? loc.lng ?? null; const distance = origin && lat && lng ? milesBetween(origin, { lat, lng }) : null; return { id: s.id || s.slug || s.name, name: s.name, description: s.description || s.summary || "", phone: s.phone || (s.contacts && s.contacts.phone) || null, url: s.url || s.website || null, address: loc.formatted_address || loc.address || null, postcode: loc.postal_code || loc.postcode || null, distance, }; }).filter(x => x.name); items.sort((a, b) => (a.distance ?? Infinity) - (b.distance ?? Infinity)); setState({ status: items.length ? "ok" : "empty", items }); }) .catch(() => setState({ status: "error", items: [] })) .finally(() => clearTimeout(timer)); return () => { clearTimeout(timer); controller.abort(); }; }, [postcode, category, origin]); if (!postcode) return null; const alissDeepLink = `https://www.aliss.org/?postcode=${encodeURIComponent(postcode)}`; return (

Live community results · ALISS

Open all on aliss.org
{state.status === "loading" && (
Searching ALISS for services near {postcode}…
)} {state.status === "error" && (

Couldn’t reach ALISS right now. The 1,000+ community services on aliss.org are still searchable directly.

Open ALISS for {postcode}
)} {state.status === "empty" && (

No ALISS matches for that postcode and filter. Try the full ALISS directory:

Open ALISS for {postcode}
)} {state.status === "ok" && (
{state.items.map(s => (

{s.name}

{s.distance != null && ( {formatMiles(s.distance)} )}
{s.address &&

{s.address}

} {s.description &&

{s.description.length > 240 ? s.description.slice(0, 240) + "…" : s.description}

}
{s.phone && ( Call )} {s.url && ( Open service )}
))}

Data from aliss.org — community-curated, refreshed daily.

)}
); }; Object.assign(window, { Icon, CATEGORY_ICON, Header, Footer, CrisisStrip, MobileCrisisBar, ServiceCard, MapPanel, externalUrl, lookupPostcode, milesBetween, formatMiles, FinderGrid, AlissPanel, });