From 9b0a02d663b29e7aac6c3a5efc1bc5e04772f2c0 Mon Sep 17 00:00:00 2001
From: Leon Serfaty G <serfowi@gmail.com>
Date: Thu, 17 Jul 2025 10:15:39 +0000
Subject: [PATCH] this is how the next step should look like.

option 1: Custom interface
---
 .../cost-estimator/cost-estimator-form.tsx    | 12 +++
 .../cost-estimator/step-2-service-type.tsx    |  9 +-
 .../cost-estimator/step-3-project-stage.tsx   | 15 +++-
 .../cost-estimator/step-4-design-process.tsx  | 84 +++++++++++++++++++
 4 files changed, 112 insertions(+), 8 deletions(-)
 create mode 100644 src/components/cost-estimator/step-4-design-process.tsx

diff --git a/src/components/cost-estimator/cost-estimator-form.tsx b/src/components/cost-estimator/cost-estimator-form.tsx
index 8e4cb82..9bf4f4e 100644
--- a/src/components/cost-estimator/cost-estimator-form.tsx
+++ b/src/components/cost-estimator/cost-estimator-form.tsx
@@ -4,6 +4,7 @@ import React, { useState, useTransition } from 'react';
 import { Step1ProjectType } from './step-1-project-type';
 import { Step2ServiceType } from './step-2-service-type';
 import { Step3ProjectStage } from './step-3-project-stage';
+import { Step4DesignProcess } from './step-4-design-process';
 import { Card, CardContent } from '@/components/ui/card';
 import { AnimatePresence, motion } from 'framer-motion';
 
@@ -11,6 +12,7 @@ export type FormData = {
   projectType: 'website' | 'mobile-app' | 'platform' | null;
   serviceType: 'entire-project' | 'development' | 'ui-ux-design' | 'identity-branding' | null;
   projectStage: number;
+  designProcess: 'custom' | 'mockups' | 'existing' | null;
 };
 
 export function CostEstimatorForm() {
@@ -19,6 +21,7 @@ export function CostEstimatorForm() {
     projectType: null,
     serviceType: null,
     projectStage: 0,
+    designProcess: null,
   });
   const [isPending, startTransition] = useTransition();
 
@@ -65,6 +68,15 @@ export function CostEstimatorForm() {
             formData={formData}
           />
         );
+      case 4:
+        return (
+          <Step4DesignProcess
+            onNext={handleNextStep}
+            onBack={handlePrevStep}
+            onUpdateData={handleUpdateFormData}
+            formData={formData}
+          />
+        );
       default:
         return (
           <Step1ProjectType
diff --git a/src/components/cost-estimator/step-2-service-type.tsx b/src/components/cost-estimator/step-2-service-type.tsx
index 22e585a..b22b757 100644
--- a/src/components/cost-estimator/step-2-service-type.tsx
+++ b/src/components/cost-estimator/step-2-service-type.tsx
@@ -56,10 +56,11 @@ export function Step2ServiceType({ onNext, onBack, onUpdateData, formData }: Ste
       <div className="mt-8 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" />
-            <div className="w-16 h-2 bg-primary rounded-full" />
-            <div className="w-16 h-2 bg-muted rounded-full" />
-            <div className="w-16 h-2 bg-muted rounded-full" />
+            <div className="w-12 h-2 bg-muted rounded-full" />
+            <div className="w-12 h-2 bg-primary rounded-full" />
+            <div className="w-12 h-2 bg-muted rounded-full" />
+            <div className="w-12 h-2 bg-muted rounded-full" />
+            <div className="w-12 h-2 bg-muted rounded-full" />
         </div>
         <Button onClick={onNext} disabled={!selectedService}>
           Next
diff --git a/src/components/cost-estimator/step-3-project-stage.tsx b/src/components/cost-estimator/step-3-project-stage.tsx
index 842c60f..1e9d599 100644
--- a/src/components/cost-estimator/step-3-project-stage.tsx
+++ b/src/components/cost-estimator/step-3-project-stage.tsx
@@ -75,10 +75,17 @@ export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: St
             <span className="font-headline text-lg font-bold">{estimatedHours} hours</span>
         </div>
         <div className="flex items-center gap-4">
-            <Button variant="ghost" onClick={onBack}>Go Back</Button>
-            <Button onClick={onNext}>
-              Next
-            </Button>
+          <Button variant="ghost" onClick={onBack}>Back</Button>
+          <div className="flex items-center gap-2">
+              <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-muted rounded-full" />
+          </div>
+          <Button onClick={onNext}>
+            Next
+          </Button>
         </div>
       </div>
     </div>
diff --git a/src/components/cost-estimator/step-4-design-process.tsx b/src/components/cost-estimator/step-4-design-process.tsx
new file mode 100644
index 0000000..ba98249
--- /dev/null
+++ b/src/components/cost-estimator/step-4-design-process.tsx
@@ -0,0 +1,84 @@
+
+"use client";
+
+import type { FormData } from './cost-estimator-form';
+import { Button } from '@/components/ui/button';
+import { Gauge } from 'lucide-react';
+import React, { useState, useMemo } from 'react';
+
+type Step4Props = {
+  onNext: () => void;
+  onBack: () => void;
+  onUpdateData: (data: Partial<FormData>) => void;
+  formData: FormData;
+};
+
+const designOptions = [
+  {
+    id: 'custom',
+    title: 'Custom interface with Consultative Support',
+    hours: 60,
+  },
+  {
+    id: 'mockups',
+    title: 'I have mockups',
+    hours: 30,
+  },
+  {
+    id: 'existing',
+    title: 'My existing design will do',
+    hours: 0,
+  },
+];
+
+export function Step4DesignProcess({ onNext, onBack, onUpdateData, formData }: Step4Props) {
+  const [selectedOption, setSelectedOption] = useState<string | null>(formData.designProcess);
+
+  const handleSelect = (optionId: 'custom' | 'mockups' | 'existing') => {
+    setSelectedOption(optionId);
+    onUpdateData({ designProcess: optionId });
+  };
+
+  const estimatedHours = useMemo(() => {
+    const designHours = designOptions.find(opt => opt.id === selectedOption)?.hours ?? 0;
+    const stageHours = Math.round((formData.projectStage / 100) * 50);
+    return stageHours + designHours;
+  }, [selectedOption, formData.projectStage]);
+
+  return (
+    <div className="flex flex-col items-start">
+      <h2 className="font-headline text-3xl font-bold tracking-tight">In need of design? What type of design process would you like?</h2>
+      <div className="mt-8 grid w-full grid-cols-1 gap-4">
+        {designOptions.map((option) => (
+          <Button
+            key={option.id}
+            variant={selectedOption === option.id ? 'default' : 'outline'}
+            className="w-full justify-start p-6 text-lg"
+            onClick={() => handleSelect(option.id as any)}
+          >
+            {option.title}
+          </Button>
+        ))}
+      </div>
+      <div className="mt-16 flex w-full items-center justify-between">
+        <div className="flex items-center gap-2">
+            <Gauge className="h-6 w-6 text-primary" />
+            <span className="font-headline text-lg font-bold">{estimatedHours} hours</span>
+        </div>
+        <div className="flex items-center gap-4">
+            <Button variant="ghost" onClick={onBack}>Go Back</Button>
+            <div className="flex items-center gap-2">
+              <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-muted rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-muted rounded-full" />
+            </div>
+            <Button onClick={onNext} disabled={!selectedOption}>
+              Next
+            </Button>
+        </div>
+      </div>
+    </div>
+  );
+}