CemeteryStep: autocomplete search replaces dropdown, lighter labels

- Select dropdown replaced with MUI Autocomplete (type-to-search
  with search icon) — scalable for large cemetery lists
- Heavy h5 headings replaced with body1 contextual text
- In production, parent can wire this to Google Places API

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/pages/CemeteryStep/CemeteryStep.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import Box from '@mui/material/Box';
+import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
-import MenuItem from '@mui/material/MenuItem';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
+import InputAdornment from '@mui/material/InputAdornment';
 import type { SxProps, Theme } from '@mui/material/styles';
 import { WizardLayout } from '../../templates/WizardLayout';
 import { ToggleButtonGroup } from '../../atoms/ToggleButtonGroup';
@@ -175,29 +177,36 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
         {/* ─── Own plot: tell us where ─── */}
         <Collapse in={showCemeteryForOwnPlot}>
           <Box sx={{ mb: 4 }}>
-            <Typography variant="h5" component="h2" sx={{ mb: 3 }}>
+            <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
-              Tell us where the burial plot is located
+              Tell us where the burial plot is located.
             </Typography>
 
-            <TextField
+            <Autocomplete
-              select
+              options={cemeteries}
-              label="Cemetery"
+              getOptionLabel={(option) => option.label}
-              value={values.selectedCemetery}
+              value={cemeteries.find((c) => c.value === values.selectedCemetery) ?? null}
-              onChange={(e) => onChange({ ...values, selectedCemetery: e.target.value })}
+              onChange={(_, option) =>
-              placeholder="Select a cemetery"
+                onChange({ ...values, selectedCemetery: option?.value ?? '' })
+              }
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder="Search for a cemetery..."
+                  error={!!errors?.selectedCemetery}
+                  helperText={errors?.selectedCemetery}
+                  InputProps={{
+                    ...params.InputProps,
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <SearchOutlinedIcon sx={{ fontSize: 20, color: 'text.secondary' }} />
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              )}
+              noOptionsText="No cemeteries found"
               fullWidth
-              error={!!errors?.selectedCemetery}
+            />
-              helperText={errors?.selectedCemetery}
-            >
-              <MenuItem value="" disabled>
-                Select a cemetery
-              </MenuItem>
-              {cemeteries.map((c) => (
-                <MenuItem key={c.value} value={c.value}>
-                  {c.label}
-                </MenuItem>
-              ))}
-            </TextField>
           </Box>
         </Collapse>
 
@@ -220,32 +229,35 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
           </Box>
         </Collapse>
 
-        {/* ─── Preference: select cemetery ─── */}
+        {/* ─── Preference: search cemetery ─── */}
         <Collapse in={showCemeteryForPreference}>
           <Box sx={{ mb: 4 }}>
-            <Typography variant="h5" component="h2" sx={{ mb: 3 }}>
+            <Autocomplete
-              Select your preferred cemetery
+              options={cemeteries}
-            </Typography>
+              getOptionLabel={(option) => option.label}
-
+              value={cemeteries.find((c) => c.value === values.selectedCemetery) ?? null}
-            <TextField
+              onChange={(_, option) =>
-              select
+                onChange({ ...values, selectedCemetery: option?.value ?? '' })
-              label="Cemetery"
+              }
-              value={values.selectedCemetery}
+              renderInput={(params) => (
-              onChange={(e) => onChange({ ...values, selectedCemetery: e.target.value })}
+                <TextField
-              placeholder="Select a cemetery"
+                  {...params}
+                  placeholder="Search for a cemetery..."
+                  error={!!errors?.selectedCemetery}
+                  helperText={errors?.selectedCemetery}
+                  InputProps={{
+                    ...params.InputProps,
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <SearchOutlinedIcon sx={{ fontSize: 20, color: 'text.secondary' }} />
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              )}
+              noOptionsText="No cemeteries found"
               fullWidth
-              error={!!errors?.selectedCemetery}
+            />
-              helperText={errors?.selectedCemetery}
-            >
-              <MenuItem value="" disabled>
-                Select a cemetery
-              </MenuItem>
-              {cemeteries.map((c) => (
-                <MenuItem key={c.value} value={c.value}>
-                  {c.label}
-                </MenuItem>
-              ))}
-            </TextField>
           </Box>
         </Collapse>