From 0a309a0240aca006091d5917535ce01bdff6ef42 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Thu, 26 Mar 2026 19:47:01 +1100
Subject: [PATCH] =?UTF-8?q?Polish=20FuneralFinderV3=20=E2=80=94=20copy,=20?=
 =?UTF-8?q?spacing,=20defaults,=20label=20tweaks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Section labels use text.secondary instead of brand-800
- Rename "Current Status" → "How Can We Help" (warmer, less programmatic)
- Revise copy: "A recent loss or one expected soon" (clarifies imminent vs pre-plan)
- Pre-planning: "Planning ahead for yourself or a loved one"
- Default selection: Immediate Need selected on load
- Fix spacing: remove minHeight from error containers so gap is consistent
- Add divider between location section and CTA
- Mobile: status cards already stack (xs: 1fr)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../FuneralFinder/FuneralFinderV3.tsx         | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx b/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx
index 8b1aa2e..f1d5bfa 100644
--- a/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx
+++ b/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx
@@ -52,12 +52,12 @@ const STATUS_OPTIONS: { key: Status; title: string; description: string }[] = [
   {
     key: 'immediate',
     title: 'Immediate Need',
-    description: 'For a recent or expected loss',
+    description: 'A recent loss or one expected soon',
   },
   {
     key: 'preplanning',
     title: 'Pre-planning',
-    description: 'For yourself or a loved one',
+    description: 'Planning ahead for yourself or a loved one',
   },
 ];
 
@@ -95,7 +95,7 @@ function SectionLabel({
       variant="overline"
       component="div"
       id={id}
-      sx={{ color: 'var(--fa-color-brand-800, #6B3C13)' }}
+      sx={{ color: 'text.secondary' }}
     >
       {children}
     </Typography>
@@ -273,7 +273,7 @@ export const FuneralFinderV3 = React.forwardRef<
   const locationLabelId = `${id}-location`;
 
   // ─── State ───────────────────────────────────────────────
-  const [status, setStatus] = React.useState<Status | ''>('');
+  const [status, setStatus] = React.useState<Status | ''>('immediate');
   const [funeralType, setFuneralType] = React.useState<FuneralType | ''>('');
   const [location, setLocation] = React.useState('');
   const [errors, setErrors] = React.useState<{
@@ -402,9 +402,9 @@ export const FuneralFinderV3 = React.forwardRef<
 
       <Divider />
 
-      {/* ── Current Status ──────────────────────────────────── */}
+      {/* ── How can we help ─────────────────────────────────── */}
       <Box ref={statusSectionRef}>
-        <SectionLabel id={statusLabelId}>Current Status</SectionLabel>
+        <SectionLabel id={statusLabelId}>How Can We Help</SectionLabel>
         <Box
           role="radiogroup"
           aria-labelledby={statusLabelId}
@@ -430,17 +430,18 @@ export const FuneralFinderV3 = React.forwardRef<
             />
           ))}
         </Box>
-        <Box
-          sx={{ minHeight: '1.5rem', mt: 1, textAlign: 'center' }}
-          aria-live="polite"
-        >
+        <Box aria-live="polite" sx={{ textAlign: 'center' }}>
           {errors.status && (
             <Typography
               variant="caption"
               role="alert"
-              sx={{ color: 'var(--fa-color-text-brand, #B0610F)' }}
+              sx={{
+                color: 'var(--fa-color-text-brand, #B0610F)',
+                display: 'block',
+                mt: 1,
+              }}
             >
-              Please select your current situation
+              Please select how we can help
             </Typography>
           )}
         </Box>
@@ -520,15 +521,16 @@ export const FuneralFinderV3 = React.forwardRef<
             }}
           />
         </Box>
-        <Box
-          sx={{ minHeight: '1.5rem', mt: 1 }}
-          aria-live="polite"
-        >
+        <Box aria-live="polite">
           {errors.location && (
             <Typography
               variant="caption"
               role="alert"
-              sx={{ color: 'var(--fa-color-text-brand, #B0610F)' }}
+              sx={{
+                color: 'var(--fa-color-text-brand, #B0610F)',
+                display: 'block',
+                mt: 1,
+              }}
             >
               Please enter a suburb or postcode
             </Typography>
@@ -536,6 +538,8 @@ export const FuneralFinderV3 = React.forwardRef<
         </Box>
       </Box>
 
+      <Divider />
+
       {/* ── CTA ─────────────────────────────────────────────── */}
       <Box>
         <Button