%% Mermaid architecture diagram for Miracles In Motion platform
%% Generate PNG: npx @mermaid-js/mermaid-cli -i docs/ArchitectureDiagram.mmd -o docs/ArchitectureDiagram.png

flowchart LR
	subgraph Client[Client Layers]
		A1[Public Site (React/Vite)] --> A2[Portals Suite]
		A2 --> A3[PWA Service Worker]
		A2 --> A4[i18n Engine]
		A2 --> A5[AI Assistance UI]
	end

	subgraph Edge[Azure Static Web Apps]
		SWA[Static Web App Front-end]
		APIProxy[Managed Functions Proxy]
	end

	subgraph Functions[Azure Functions (Premium Plan)]
		F1[API Endpoints]
		F2[AI Matching Orchestrator]
		F3[Notification Dispatcher]
		F4[Stripe Handler]
	end

	subgraph Data[Data & Integration]
		Cosmos[(Cosmos DB)]
		KV[(Key Vault Secrets)]
		SignalR[(SignalR Service)]
		Salesforce[(Salesforce CRM)]
	end

	subgraph Observability[Monitoring]
		AIInsights[Application Insights]
		Logs[Log Analytics Workspace]
	end

	Client --> SWA
	SWA --> APIProxy --> F1
	F1 --> Cosmos
	F2 --> Cosmos
	F2 --> SignalR
	F3 --> SignalR
	F4 --> Cosmos
	F4 --> KV
	F1 --> KV
	F1 --> Salesforce
	F1 --> AIInsights
	F2 --> AIInsights
	F3 --> AIInsights
	F4 --> AIInsights
	AIInsights --> Logs

	classDef data fill:#eef,stroke:#336,stroke-width:1px;
	class Cosmos,KV,SignalR,Salesforce data;