i cant move from step 1

src/components/cost-estimator/cost-estimator-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useTransition } from 'react';
+import React, { useState, useTransition, useMemo } from 'react';
 import { Step1ProjectType } from './step-1-project-type';
 import { Step2ServiceType } from './step-2-service-type';
 import { Step3ProjectStage } from './step-3-project-stage';
@@ -9,6 +9,7 @@ import { Step5PageCount } from './step-5-page-count';
 import { Step6Animations } from './step-6-animations';
 import { Step7Illustrations } from './step-7-illustrations';
 import { Step8Branding } from './step-8-branding';
+import { Step9Results, calculateTotalHours } from './step-9-results';
 import { Card, CardContent } from '@/components/ui/card';
 import { AnimatePresence, motion } from 'framer-motion';
 
@@ -67,6 +68,28 @@ export function CostEstimatorForm() {
     setFormData((prev) => ({ ...prev, ...newData }));
   };
 
+  const handleReset = () => {
+    setFormData({
+        projectType: null,
+        serviceType: null,
+        projectStage: 0,
+        designProcess: null,
+        pageCount: 0,
+        animatedElements: null,
+        illustrations: {
+          has2d: false,
+          is2dAnimated: null,
+          has3d: false,
+          is3dAnimated: null,
+        },
+        branding: null,
+    });
+    setCurrentStep(1);
+  }
+
+  const estimatedHours = useMemo(() => calculateTotalHours(formData), [formData]);
+
+
   const renderStep = () => {
     switch (currentStep) {
       case 1:
@@ -139,6 +162,14 @@ export function CostEstimatorForm() {
                 formData={formData}
             />
         );
+      case 9:
+        return (
+            <Step9Results
+                formData={formData}
+                onReset={handleReset}
+                estimatedHours={estimatedHours}
+            />
+        )
       default:
         return (
           <Step1ProjectType

src/components/cost-estimator/step-8-branding.tsx

@@ -55,7 +55,6 @@ export function Step8Branding({ onNext, onBack, onUpdateData, formData }: Step8P
   const handleSelect = (option: BrandingSelection) => {
     setSelected(option);
     onUpdateData({ branding: option });
-    onNext();
   };
   
   const estimatedHours = useMemo(() => {

src/components/cost-estimator/step-9-results.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import type { FormData, IllustrationSelection, BrandingSelection } from './cost-estimator-form';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { PartyPopper, RefreshCw } from 'lucide-react';
+import React from 'react';
+
+type Step9Props = {
+  formData: FormData;
+  onReset: () => void;
+  estimatedHours: number;
+};
+
+const designHoursMap = { custom: 60, mockups: 30, existing: 0 };
+const illustrationHoursMap = { '2d_static': 10, '2d_animated': 25, '3d_static': 20, '3d_animated': 40 };
+const brandingHoursMap = { 'full-cycle': 80, 'brush-up': 40, 'logo-only': 20, 'none': 0 };
+
+export const calculateTotalHours = (formData: FormData): number => {
+    const pageVal = formData.pageCount === 10 ? 50 : (formData.pageCount + 1) * 5 - 1;
+    const pageHours = pageVal * 6;
+    const stageHours = Math.round((formData.projectStage / 100) * 50);
+    const designHours = formData.designProcess ? designHoursMap[formData.designProcess] : 0;
+    const animationHours = formData.animatedElements ? 30 : 0;
+
+    let illustrationTotalHours = 0;
+    if (formData.illustrations.has2d) {
+        if (formData.illustrations.is2dAnimated === 'static') illustrationTotalHours += illustrationHoursMap['2d_static'];
+        if (formData.illustrations.is2dAnimated === 'animated') illustrationTotalHours += illustrationHoursMap['2d_animated'];
+    }
+    if (formData.illustrations.has3d) {
+        if (formData.illustrations.is3dAnimated === 'static') illustrationTotalHours += illustrationHoursMap['3d_static'];
+        if (formData.illustrations.is3dAnimated === 'animated') illustrationTotalHours += illustrationHoursMap['3d_animated'];
+    }
+
+    const brandingH = formData.branding ? (brandingHoursMap[formData.branding] ?? 0) : 0;
+
+    return pageHours + stageHours + designHours + animationHours + illustrationTotalHours + brandingH;
+};
+
+const HOURLY_RATE = 75; // Example hourly rate in USD
+
+export function Step9Results({ formData, onReset, estimatedHours }: Step9Props) {
+  
+  const estimatedCost = estimatedHours * HOURLY_RATE;
+
+  return (
+    <div className="flex flex-col items-center text-center">
+      <div className="rounded-full bg-primary/10 p-4 mb-4">
+        <PartyPopper className="h-12 w-12 text-primary" />
+      </div>
+      <h2 className="font-headline text-3xl font-bold tracking-tight">Your Estimate is Ready!</h2>
+      <p className="mt-2 text-muted-foreground">Based on your selections, here's our initial estimate.</p>
+      
+      <Card className="mt-8 w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-muted-foreground tracking-normal font-medium">Estimated Cost</CardTitle>
+          <CardDescription>This is an approximation. Final cost may vary.</CardDescription>
+        </CardHeader>
+        <CardContent className="text-center">
+            <p className="text-5xl font-bold text-primary">${estimatedCost.toLocaleString()}</p>
+            <p className="text-lg text-muted-foreground mt-2">({estimatedHours}+ hours)</p>
+        </CardContent>
+      </Card>
+
+      <div className="mt-8">
+        <Button onClick={onReset} size="lg">
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Start Over
+        </Button>
+      </div>
+    </div>
+  );
+}