feat: clarify municipality-first workbench flow

frontend/src/components/map/MapWorkspace.tsx

@@ -7,6 +7,7 @@ import { useOfficialMapProducts } from '../../hooks/useOfficialMapProducts'
 import { useTemporalComparison } from '../../hooks/useTemporalComparison'
 import { getDatasetDisplayName, getDatasetSourceDisplayName } from '../../lib/datasetDisplay'
 import { TemporalTrendChart } from './TemporalTrendChart'
+import { MunicipalitySearch } from './MunicipalitySearch'
 import { terrainImageUrl } from '../../lib/terrainImage'
 import { floodHazardImageUrl } from '../../lib/floodHazardImage'
 import { thematicRasterImageUrl, walousRasterImageUrl } from '../../lib/thematicRaster'
@@ -2177,9 +2178,10 @@ export function MapWorkspace({
           <div>
             <p className="eyebrow">{activeScopeLabel} · geografische verkenner</p>
             <h2>Gebied analyseren</h2>
-            <p>Kies een thema, teken een rechthoek en lees de beschikbare gegevens.</p>
+            <p>Kies een gemeente, selecteer een thema en analyseer het volledige gebied of een eigen rechthoek.</p>
           </div>
-          <div className="geo-analysis-mode" role="tablist" aria-label="Analyseperiode">
+          <div className="geo-explorer-header-tools">
+            <div className="geo-analysis-mode" role="tablist" aria-label="Analyseperiode">
             <button
               id="geo-analysis-tab-current"
               className={analysisMode === 'current' ? 'active' : ''}
@@ -2206,21 +2208,29 @@ export function MapWorkspace({
             >
               Evolutie
             </button>
+            </div>
+            <button
+              className="secondary-action geo-explorer-advanced"
+              type="button"
+              onClick={() => setAdvancedMode(true)}
+              aria-expanded={advancedMode}
+              aria-controls="geo-advanced-workbench"
+              aria-label="Geavanceerde werkbank"
+              title="Geavanceerde werkbank"
+            >
+              <SlidersHorizontal aria-hidden="true" />
+              <span>Geavanceerde werkbank</span>
+            </button>
           </div>
-          <button
-            className="secondary-action geo-explorer-advanced"
-            type="button"
-            onClick={() => setAdvancedMode(true)}
-            aria-expanded={advancedMode}
-            aria-controls="geo-advanced-workbench"
-            aria-label="Geavanceerde werkbank"
-            title="Geavanceerde werkbank"
-          >
-            <SlidersHorizontal aria-hidden="true" />
-            <span>Geavanceerde werkbank</span>
-          </button>
         </header>
 
+        <MunicipalitySearch
+          areas={areas}
+          selectedAreaId={selectedMapAreaId}
+          disabled={workspaceLoading}
+          onSelect={handleSelectMapArea}
+        />
+
         {workspaceLoading ? (
           <div className="geo-bootstrap-status" role="status" aria-live="polite">
             <span className="geo-loading-indicator" aria-hidden="true" />
@@ -2241,7 +2251,7 @@ export function MapWorkspace({
         <div className="geo-explorer-layout">
           <aside className="geo-theme-panel" aria-label="Datathema kiezen">
             <div className="geo-panel-heading">
-              <span>1</span>
+              <span>2</span>
               <div>
                 <h3>Thema</h3>
                 <p>Kies welke gegevens u wilt meten.</p>
@@ -2502,20 +2512,12 @@ export function MapWorkspace({
               </>
             ) : null}
 
-            <label className="geo-scope-select">
-              Snel naar een gemeente (optioneel)
-              <select aria-label="Werkgebied" value={selectedMapAreaId} onChange={(event) => handleSelectMapArea(event.target.value)} disabled={areas.length === 0}>
-                {areas.map((area) => (
-                  <option key={area.id} value={area.id}>{area.name}</option>
-                ))}
-              </select>
-            </label>
           </aside>
 
           <div className="geo-map-stage">
             <div className="geo-map-toolbar" aria-label="Gebied selecteren">
               <div className="geo-panel-heading geo-map-step">
-                <span>2</span>
+                <span>3</span>
                 <div>
                   <h3>Selecteer een gebied</h3>
                   <p>