feat: upgrade to Intaleq Style v3 and enable Egypt routing demo (code only)

apps/web/src/App.tsx

@@ -18,6 +18,25 @@ function App() {
   const [showResults, setShowResults] = useState(false);
   const [newPlace, setNewPlace] = useState<{lat: number, lng: number} | null>(null);
   const [placeForm, setPlaceForm] = useState({ name: '', name_ar: '', category: '' });
+  const [currentRegion, setCurrentRegion] = useState('Jordan');
+
+  const regions = [
+    { name: 'Syria', name_ar: 'سوريا', center: [36.29, 33.51], zoom: 12, flag: '🇸🇾' },
+    { name: 'Jordan', name_ar: 'الأردن', center: [35.91, 31.95], zoom: 12, flag: '🇯🇴' },
+    { name: 'Egypt', name_ar: 'مصر', center: [31.23, 30.04], zoom: 11, flag: '🇪🇬' },
+  ];
+
+  const handleRegionSwitch = (region: any) => {
+    setCurrentRegion(region.name);
+    if (map) {
+      map.flyTo({
+        center: region.center,
+        zoom: region.zoom,
+        essential: true,
+        duration: 3000
+      });
+    }
+  };
 
   const handleMapClick = (lat: number, lng: number) => {
     setNewPlace({ lat, lng });
@@ -146,9 +165,37 @@ function App() {
   return (
     <div className="app">
       <div className="sidebar glass-morphism">
-        <h1>Jordan Maps SaaS</h1>
+        <h1>{currentRegion} Maps SaaS</h1>
         <p style={{ color: 'var(--text-muted)', fontSize: '0.8rem' }}>Self-Hosted Mobility Prototype</p>
         
+        <div className="region-selector" style={{ display: 'flex', gap: '8px', margin: '15px 0' }}>
+          {regions.map(r => (
+            <button 
+              key={r.name}
+              onClick={() => handleRegionSwitch(r)}
+              className={`region-btn ${currentRegion === r.name ? 'active' : ''}`}
+              style={{
+                flex: 1,
+                padding: '8px 4px',
+                borderRadius: '8px',
+                border: currentRegion === r.name ? '1px solid #3b82f6' : '1px solid var(--glass-border)',
+                background: currentRegion === r.name ? 'rgba(59, 130, 246, 0.1)' : 'transparent',
+                color: 'var(--text-main)',
+                cursor: 'pointer',
+                fontSize: '0.75rem',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '4px',
+                transition: 'all 0.2s'
+              }}
+            >
+              <span style={{ fontSize: '1.2rem' }}>{r.flag}</span>
+              <span>{r.name_ar}</span>
+            </button>
+          ))}
+        </div>
+
         <div className="input-group">
           <label><MapPin size={14} style={{ marginRight: 5 }} /> Search / البحث</label>
           <div style={{ display: 'flex', gap: '5px' }}>