/* ApproachPage — philosophy, the eight-step process, and what clients should know. */ function ApproachPage({ onNav }) { const [openStep, setOpenStep] = React.useState(null); const [hoverTier, setHoverTier] = React.useState(null); const { Eyebrow, Divider } = window.DomumDesignSystem_84ba75; const { Photo, PageHeader, InquiryBand, TextureBand, Rule, SectionFrame, ScriptMark } = window; /* Touch devices fire mouseenter on tap, which would open the row and let the click handler immediately close it again. Hover-to-open is therefore only wired up where hover genuinely exists. */ const canHover = typeof window.matchMedia === 'function' ? window.matchMedia('(hover: hover)').matches : true; const steps = [ ['01', 'Discover', 'We begin by understanding how you live, what you love, what is not working, and what you want your home to become.', 'You feel heard before anyone proposes anything.'], ['02', 'Define', 'We evaluate the property, clarify the scope of work, discuss priorities, and establish an appropriate investment range.', 'You learn the real number early, not after design fees.'], ['03', 'Explore', 'We develop thoughtful options at different levels of scope so you can understand what each approach accomplishes.', 'You see what more investment actually buys you.'], ['04', 'Design', 'We refine the selected direction into a cohesive plan, including layouts, materials, fixtures, finishes, and architectural details.', 'You stop guessing how it will turn out.'], ['05', 'Propose', 'We prepare a formal scope and project proposal so you understand what is included and what the project requires.', 'You know exactly what you are approving.'], ['06', 'Prepare', 'We finalize selections, coordinate trades, order materials, and prepare the project for construction.', 'You avoid rushed decisions and change orders later.'], ['07', 'Build', 'We manage construction, coordinate subcontractors, communicate progress, and protect the larger design vision.', 'You keep your weekends and your sanity.'], ['08', 'Complete', 'We walk the finished project together, address remaining details, and hand the home back ready to be lived in.', 'You get a home that feels finished, not almost.'], ]; const tiers = [ ['Essential', 'Address the most important functional or aesthetic needs.'], ['Considered', 'Expand the scope to improve flow, materials, or long-term functionality.'], ['Transformative', 'Explore the larger potential of the property.'], ]; const know = [ ['We begin with the whole house.', 'Even when renovating a single room, we consider how it relates to the rest of the property: materials, architecture, circulation, sightlines, and future plans all matter.'], ['Budget is part of the design conversation.', 'Design decisions have financial consequences. Knowing the investment range early helps us recommend solutions that are realistic. A clear budget does not limit creativity; it helps direct it.'], ['We help prioritize where money matters most.', 'Not every upgrade carries the same value. Sometimes the right answer is a premium material. Sometimes it is keeping what already works and investing elsewhere.'], ['We consider both enjoyment and property value.', 'A home is first a place to live, and not every decision needs to produce a return. At the same time, real estate context matters, and we help you see the relationship.'], ['We respect the character of the home.', 'Renovation should not automatically mean replacement. We look for opportunities to retain what gives a home character while improving what no longer functions.'], ['We prefer decisions before demolition.', 'We finalize major materials, fixtures, and cabinetry before work begins, which reduces delays, rushed decisions, change orders, and surprises.'], ['We narrow choices rather than overwhelm.', 'Instead of dozens of unrelated options, we present a thoughtful selection that fits the design direction, budget, and architecture.'], ['Renovation can uncover the unexpected.', 'Homes sometimes hide conditions that cannot be known until walls, floors, or ceilings are opened. When it happens, we explain the options before moving forward.'], ]; return (
{/* Philosophy */} {/* Process */}
Our Process
{steps.map(([n, t, d, win]) => { const open = openStep === n; return (
setOpenStep(n)) : undefined} onMouseLeave={canHover ? (() => setOpenStep((c) => (c === n ? null : c))) : undefined} onFocus={canHover ? (() => setOpenStep(n)) : undefined} onBlur={canHover ? (() => setOpenStep((c) => (c === n ? null : c))) : undefined} onClick={() => setOpenStep((c) => (c === n ? null : n))} tabIndex={0} aria-expanded={open} style={{ borderTop: '1px solid var(--border-strong)', paddingTop: '22px', cursor: 'pointer', outline: 'none' }}>
{n}

{t}

{/* Expand affordance — touch only. Desktop opens on hover, so the chevron is redundant there; on touch it is the only signal. */}

{d}

{win}

); })}
{/* Scaled options */}
Options & Direction

There is rarely only one way to improve a home.

Rather than immediately committing to a single solution, we may develop a small number of scaled approaches based on your priorities and budget. The objective is not to encourage a larger project; it is to help you make an informed decision about the right project.

{tiers.map(([t, d], i) => (
setHoverTier(i)) : undefined} onMouseLeave={() => setHoverTier(null)} style={{ borderTop: `1px solid ${hoverTier === i || i === 1 ? '#4A2426' : 'rgba(43,33,27,.24)'}`, backgroundColor: hoverTier === i ? '#E9E0D3' : 'transparent', padding: 'var(--space-6) var(--space-4) var(--space-5)', }}>

{`Level ${i + 1}`}

{t}

{d}

))}
{/* What clients should know */}
What Clients Should Know

How we think about the work

{know.map(([t, d], i) => (
{String(i + 1).padStart(2, '0')}

{t}

{d}

))}
{/* Collaboration + difference */}
What We Ask From Our Clients

The best projects are collaborative.

    {[ 'Communicate openly about priorities and budget.', 'Provide timely feedback.', 'Make decisions within agreed timelines.', 'Ask questions when something is unclear.', 'Trust the process once a direction has been established.', ].map((x, i) => (
  1. {`0${i + 1}`} {x}
    2. ))}

In return: guidance, transparency, thoughtful recommendations, and stewardship of the larger vision.

The Spring Street Difference

Most renovation decisions sit at the intersection of several questions.

{[ 'Is it beautiful?', 'Does it function well?', 'Can it be built properly?', 'Is it worth the cost?', 'Does it make sense for this particular home?', ].map((q) => (

{q}

))}

Our process is designed to consider all five. That is where design, construction, and real estate come together, and that is the perspective we bring to every project.

); } window.ApproachPage = ApproachPage;