look at how on step 3 of the form, on the botton of the form, it start t

src/components/cost-estimator/step-3-project-stage.tsx

@@ -4,6 +4,7 @@ import type { FormData } from './cost-estimator-form';
 import { Button } from '@/components/ui/button';
 import { Slider } from '@/components/ui/slider';
 import React, { useState, useMemo } from 'react';
+import { Gauge } from 'lucide-react';
 
 type Step3Props = {
   onNext: () => void;
@@ -25,6 +26,29 @@ const stageLabels = [
     "Ongoing support", // 90
 ];
 
+const calculateHours = (projectType: FormData['projectType'], serviceType: FormData['serviceType'], projectStage: number): number => {
+    let baseHours = 0;
+    switch (projectType) {
+        case 'website': baseHours = 100; break;
+        case 'mobile-app': baseHours = 200; break;
+        case 'platform': baseHours = 400; break;
+        default: baseHours = 50;
+    }
+
+    switch (serviceType) {
+        case 'entire-project': baseHours *= 1; break;
+        case 'development': baseHours *= 0.6; break;
+        case 'ui-ux-design': baseHours *= 0.3; break;
+        case 'identity-branding': baseHours *= 0.1; break;
+    }
+
+    // A higher projectStage means less work, so we reduce the hours.
+    // The logic here is that if a project is 90% complete, only 10% of work remains.
+    const completionMultiplier = 1 - (projectStage / 100);
+
+    return Math.max(52, Math.round(baseHours * completionMultiplier));
+};
+
 export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: Step3Props) {
   const [value, setValue] = useState([formData.projectStage]);
 
@@ -38,6 +62,10 @@ export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: St
     return stageLabels[index];
   }, [value]);
 
+  const estimatedHours = useMemo(() => {
+      return calculateHours(formData.projectType, formData.serviceType, value[0]);
+  }, [formData.projectType, formData.serviceType, value]);
+
   return (
     <div className="flex flex-col items-start">
       <h2 className="font-headline text-3xl font-bold tracking-tight">Choose the stage of your project or let's start from scratch</h2>
@@ -55,21 +83,21 @@ export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: St
         />
         <div className="flex justify-between text-xs text-muted-foreground mt-2">
             <span>0%</span>
-            <span>90+%</span>
+            <span>100%</span>
         </div>
       </div>
       <div className="mt-16 flex w-full items-center justify-between">
-        <Button variant="ghost" onClick={onBack}>Back</Button>
         <div className="flex items-center gap-2">
-            <div className="w-16 h-2 bg-muted rounded-full" />
+            <Gauge className="h-6 w-6 text-primary" />
-            <div className="w-16 h-2 bg-muted rounded-full" />
+            <span className="font-headline text-lg font-bold">{estimatedHours}+ hours</span>
-            <div className="w-16 h-2 bg-primary rounded-full" />
-            <div className="w-16 h-2 bg-muted rounded-full" />
         </div>
+        <div className="flex items-center gap-4">
+            <Button variant="ghost" onClick={onBack}>Go Back</Button>
             <Button onClick={onNext}>
               Next
             </Button>
         </div>
       </div>
+    </div>
   );
 }