@@ -142,6 +142,16 @@ export default function GeneratedCalculatorPage({ calculatorSlug }: GeneratedCal
142142 . map ( ( item ) => ( { path : `/${ item . slug } ` , title : item . title , icon : item . icon } ) ) ;
143143
144144 const relatedTools = [ ...calculator . relatedTools , ...categoryRelated ] . slice ( 0 , 4 ) ;
145+ const contextualCategoryLinks = generatedCalculators
146+ . filter ( ( item ) => item . category === calculator . category && item . slug !== calculator . slug )
147+ . slice ( 0 , 8 )
148+ . map ( ( item ) => ( { path : `/${ item . slug } ` , title : item . title } ) ) ;
149+ const sampleInputs = calculator . fields . slice ( 0 , 6 ) . map ( ( field ) => ( {
150+ key : field . key ,
151+ label : field . label ,
152+ value : safeInputValues [ field . key ] ?? field . defaultValue ,
153+ } ) ) ;
154+ const sampleResults = output . results . slice ( 0 , 4 ) ;
145155
146156 return (
147157 < div className = "space-y-6" data-calculator-container >
@@ -254,15 +264,76 @@ export default function GeneratedCalculatorPage({ calculatorSlug }: GeneratedCal
254264 </ section >
255265
256266 < Card >
257- < h2 className = "text-lg font-semibold text-slate-900 mb-3" > How this calculator works</ h2 >
267+ < h2 className = "text-lg font-semibold text-slate-900 mb-3" > How this calculator works</ h2 >
258268 < ul className = "list-disc pl-5 text-sm text-slate-700 space-y-1" >
259269 { ( Array . isArray ( calculator . howItWorks ) ? calculator . howItWorks : [ ] ) . map ( ( step ) => (
260270 < li key = { step } > { step } </ li >
261271 ) ) }
262272 </ ul >
263- < p className = "text-xs text-slate-500 mt-4" > Last updated: February 2026</ p >
273+ < p className = "text-xs text-slate-500 mt-4" >
274+ Last updated: February 2026. See our{ ' ' }
275+ < a href = "/methodology" className = "text-blue-700 hover:text-blue-800 underline" > methodology</ a > { ' ' }
276+ and{ ' ' }
277+ < a href = "/editorial-policy" className = "text-blue-700 hover:text-blue-800 underline" > editorial policy</ a > .
278+ </ p >
279+ </ Card >
280+
281+ { sampleResults . length > 0 && (
282+ < Card >
283+ < h2 className = "text-lg font-semibold text-slate-900 mb-3" > Worked Example</ h2 >
284+ < p className = "text-sm text-slate-600 mb-3" >
285+ Example using the current inputs:
286+ </ p >
287+ < div className = "grid md:grid-cols-2 gap-4" >
288+ < div >
289+ < h3 className = "font-semibold text-sm text-slate-900 mb-2" > Inputs</ h3 >
290+ < ul className = "list-disc pl-5 text-sm text-slate-700 space-y-1" >
291+ { sampleInputs . map ( ( input ) => (
292+ < li key = { input . key } >
293+ { input . label } : { input . value }
294+ </ li >
295+ ) ) }
296+ </ ul >
297+ </ div >
298+ < div >
299+ < h3 className = "font-semibold text-sm text-slate-900 mb-2" > Outputs</ h3 >
300+ < ul className = "list-disc pl-5 text-sm text-slate-700 space-y-1" >
301+ { sampleResults . map ( ( result ) => (
302+ < li key = { result . key } >
303+ { result . label } : { formatValue ( result . value , result . format ) }
304+ </ li >
305+ ) ) }
306+ </ ul >
307+ </ div >
308+ </ div >
309+ </ Card >
310+ ) }
311+
312+ < Card >
313+ < h2 className = "text-lg font-semibold text-slate-900 mb-3" > Assumptions and Limitations</ h2 >
314+ < ul className = "list-disc pl-5 text-sm text-slate-700 space-y-1" >
315+ < li > { calculator . note } </ li >
316+ < li > Results are estimates and should be validated for high-stakes decisions.</ li >
317+ < li > Inputs are interpreted using standard units and rounding rules for readability.</ li >
318+ </ ul >
264319 </ Card >
265320
321+ { contextualCategoryLinks . length > 0 && (
322+ < Card >
323+ < h2 className = "text-lg font-semibold text-slate-900 mb-3" > Explore Related { calculator . category } Calculators</ h2 >
324+ < p className = "text-sm text-slate-600 mb-3" >
325+ Use these related tools for follow-up calculations and scenario planning:
326+ </ p >
327+ < div className = "flex flex-wrap gap-x-4 gap-y-2 text-sm" >
328+ { contextualCategoryLinks . map ( ( tool ) => (
329+ < a key = { tool . path } href = { tool . path } className = "text-blue-700 hover:text-blue-800 underline" >
330+ { tool . title }
331+ </ a >
332+ ) ) }
333+ </ div >
334+ </ Card >
335+ ) }
336+
266337 < Card >
267338 < h2 className = "text-lg font-semibold text-slate-900 mb-3" > FAQ</ h2 >
268339 < div className = "space-y-3 text-sm text-slate-700" >
0 commit comments