From 38c5cbdff79f12a842744195ce113a2921752f59 Mon Sep 17 00:00:00 2001
From: Leon Serfaty G <serfowi@gmail.com>
Date: Thu, 17 Jul 2025 10:25:08 +0000
Subject: [PATCH] this is how the next step should look like. extra options
 should be disp

---
 .../cost-estimator/cost-estimator-form.tsx    |  24 +++
 .../cost-estimator/step-2-service-type.tsx    |   1 +
 .../cost-estimator/step-3-project-stage.tsx   |   1 +
 .../cost-estimator/step-4-design-process.tsx  |   1 +
 .../cost-estimator/step-5-page-count.tsx      |   1 +
 .../cost-estimator/step-6-animations.tsx      |   1 +
 .../cost-estimator/step-7-illustrations.tsx   | 189 ++++++++++++++++++
 7 files changed, 218 insertions(+)
 create mode 100644 src/components/cost-estimator/step-7-illustrations.tsx

diff --git a/src/components/cost-estimator/cost-estimator-form.tsx b/src/components/cost-estimator/cost-estimator-form.tsx
index 8576a51..6fff748 100644
--- a/src/components/cost-estimator/cost-estimator-form.tsx
+++ b/src/components/cost-estimator/cost-estimator-form.tsx
@@ -7,9 +7,17 @@ import { Step3ProjectStage } from './step-3-project-stage';
 import { Step4DesignProcess } from './step-4-design-process';
 import { Step5PageCount } from './step-5-page-count';
 import { Step6Animations } from './step-6-animations';
+import { Step7Illustrations } from './step-7-illustrations';
 import { Card, CardContent } from '@/components/ui/card';
 import { AnimatePresence, motion } from 'framer-motion';
 
+export type IllustrationSelection = {
+  has2d: boolean;
+  is2dAnimated: 'static' | 'animated' | null;
+  has3d: boolean;
+  is3dAnimated: 'static' | 'animated' | null;
+};
+
 export type FormData = {
   projectType: 'website' | 'mobile-app' | 'platform' | null;
   serviceType: 'entire-project' | 'development' | 'ui-ux-design' | 'identity-branding' | null;
@@ -17,6 +25,7 @@ export type FormData = {
   designProcess: 'custom' | 'mockups' | 'existing' | null;
   pageCount: number;
   animatedElements: boolean | null;
+  illustrations: IllustrationSelection;
 };
 
 export function CostEstimatorForm() {
@@ -28,6 +37,12 @@ export function CostEstimatorForm() {
     designProcess: null,
     pageCount: 0,
     animatedElements: null,
+    illustrations: {
+      has2d: false,
+      is2dAnimated: null,
+      has3d: false,
+      is3dAnimated: null,
+    },
   });
   const [isPending, startTransition] = useTransition();
 
@@ -101,6 +116,15 @@ export function CostEstimatorForm() {
             formData={formData}
           />
         );
+       case 7:
+        return (
+          <Step7Illustrations
+            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 8114890..53be0fe 100644
--- a/src/components/cost-estimator/step-2-service-type.tsx
+++ b/src/components/cost-estimator/step-2-service-type.tsx
@@ -62,6 +62,7 @@ export function Step2ServiceType({ onNext, onBack, onUpdateData, formData }: Ste
             <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-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 378f7e3..735039e 100644
--- a/src/components/cost-estimator/step-3-project-stage.tsx
+++ b/src/components/cost-estimator/step-3-project-stage.tsx
@@ -83,6 +83,7 @@ export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: St
               <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-muted rounded-full" />
           </div>
           <Button onClick={onNext}>
             Next
diff --git a/src/components/cost-estimator/step-4-design-process.tsx b/src/components/cost-estimator/step-4-design-process.tsx
index 7b8ed93..32d25a7 100644
--- a/src/components/cost-estimator/step-4-design-process.tsx
+++ b/src/components/cost-estimator/step-4-design-process.tsx
@@ -74,6 +74,7 @@ export function Step4DesignProcess({ onNext, onBack, onUpdateData, formData }: S
               <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={!selectedOption}>
               Next
diff --git a/src/components/cost-estimator/step-5-page-count.tsx b/src/components/cost-estimator/step-5-page-count.tsx
index ae3c547..592c0e9 100644
--- a/src/components/cost-estimator/step-5-page-count.tsx
+++ b/src/components/cost-estimator/step-5-page-count.tsx
@@ -92,6 +92,7 @@ export function Step5PageCount({ onNext, onBack, onUpdateData, formData }: Step5
               <div className="w-12 h-2 bg-primary 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
diff --git a/src/components/cost-estimator/step-6-animations.tsx b/src/components/cost-estimator/step-6-animations.tsx
index b7bb37e..3762052 100644
--- a/src/components/cost-estimator/step-6-animations.tsx
+++ b/src/components/cost-estimator/step-6-animations.tsx
@@ -78,6 +78,7 @@ export function Step6Animations({ onNext, onBack, onUpdateData, formData }: Step
               <div className="w-12 h-2 bg-primary rounded-full" />
               <div className="w-12 h-2 bg-primary 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 === null}>
               Next
diff --git a/src/components/cost-estimator/step-7-illustrations.tsx b/src/components/cost-estimator/step-7-illustrations.tsx
new file mode 100644
index 0000000..a53e488
--- /dev/null
+++ b/src/components/cost-estimator/step-7-illustrations.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import type { FormData, IllustrationSelection } from './cost-estimator-form';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Label } from '@/components/ui/label';
+import { Gauge } from 'lucide-react';
+import React, { useState, useMemo, useEffect } from 'react';
+
+type Step7Props = {
+  onNext: () => void;
+  onBack: () => void;
+  onUpdateData: (data: Partial<FormData>) => void;
+  formData: FormData;
+};
+
+const designHoursMap = {
+  custom: 60,
+  mockups: 30,
+  existing: 0,
+};
+
+const illustrationHours = {
+  '2d_static': 40,
+  '2d_animated': 80,
+  '3d_static': 100,
+  '3d_animated': 200,
+}
+
+const calculateHours = (
+    pageCount: number, 
+    projectStage: number, 
+    designProcess: 'custom' | 'mockups' | 'existing' | null,
+    animatedElements: boolean | null,
+    illustrations: IllustrationSelection
+): number => {
+    const pageVal = pageCount === 10 ? 50 : (pageCount + 1) * 5 - 1;
+    const pageHours = pageVal * 6;
+    const stageHours = Math.round((projectStage / 100) * 50);
+    const designHours = designProcess ? designHoursMap[designProcess] : 0;
+    const animationHours = animatedElements ? 30 : 0;
+    
+    let illustrationTotalHours = 0;
+    if (illustrations.has2d) {
+        if (illustrations.is2dAnimated === 'static') illustrationTotalHours += illustrationHours['2d_static'];
+        if (illustrations.is2dAnimated === 'animated') illustrationTotalHours += illustrationHours['2d_animated'];
+    }
+    if (illustrations.has3d) {
+        if (illustrations.is3dAnimated === 'static') illustrationTotalHours += illustrationHours['3d_static'];
+        if (illustrations.is3dAnimated === 'animated') illustrationTotalHours += illustrationHours['3d_animated'];
+    }
+
+    return pageHours + stageHours + designHours + animationHours + illustrationTotalHours;
+};
+
+export function Step7Illustrations({ onNext, onBack, onUpdateData, formData }: Step7Props) {
+  const [selections, setSelections] = useState<IllustrationSelection>(formData.illustrations);
+  const [noIllustrations, setNoIllustrations] = useState(false);
+
+  useEffect(() => {
+    const no2d = !selections.has2d || selections.is2dAnimated === null;
+    const no3d = !selections.has3d || selections.is3dAnimated === null;
+    setNoIllustrations(no2d && no3d);
+  }, [selections]);
+
+  const handleUpdate = (newSelections: Partial<IllustrationSelection>) => {
+    const updated = { ...selections, ...newSelections };
+    setSelections(updated);
+    onUpdateData({ illustrations: updated });
+  };
+
+  const handleNoIllustrationsChange = (checked: boolean) => {
+    setNoIllustrations(checked);
+    if(checked) {
+        const resetSelections = {
+            has2d: false,
+            is2dAnimated: null,
+            has3d: false,
+            is3dAnimated: null,
+        };
+        setSelections(resetSelections);
+        onUpdateData({ illustrations: resetSelections });
+    }
+  }
+
+  const handle2dCheck = (checked: boolean) => {
+    handleUpdate({ has2d: checked, is2dAnimated: checked ? 'static' : null });
+    if (!checked && !selections.has3d) setNoIllustrations(true);
+  };
+  
+  const handle3dCheck = (checked: boolean) => {
+    handleUpdate({ has3d: checked, is3dAnimated: checked ? 'static' : null });
+    if (!checked && !selections.has2d) setNoIllustrations(true);
+  };
+
+  const estimatedHours = useMemo(() => {
+    return calculateHours(
+      formData.pageCount, 
+      formData.projectStage, 
+      formData.designProcess, 
+      formData.animatedElements,
+      selections
+    );
+  }, [selections, formData]);
+
+  const isNextDisabled = (selections.has2d && !selections.is2dAnimated) || (selections.has3d && !selections.is3dAnimated)
+
+  return (
+    <div className="flex flex-col items-start">
+      <h2 className="font-headline text-3xl font-bold tracking-tight text-center w-full">Would you like us to create illustrations tailored to your project?</h2>
+      <div className="mt-8 w-full space-y-4">
+        
+        <div className="space-y-4 rounded-lg border p-4">
+            <div className="flex items-center space-x-2">
+                <Checkbox id="2d-illustrations" checked={selections.has2d} onCheckedChange={handle2dCheck} />
+                <Label htmlFor="2d-illustrations" className="text-lg">Yes, I need eye-catching 2D illustrations</Label>
+            </div>
+            {selections.has2d && (
+                <RadioGroup 
+                    value={selections.is2dAnimated || undefined}
+                    onValueChange={(value: 'static' | 'animated') => handleUpdate({ is2dAnimated: value })}
+                    className="ml-6 space-y-2"
+                >
+                    <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="static" id="2d-static" />
+                        <Label htmlFor="2d-static">Make them static</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="animated" id="2d-animated" />
+                        <Label htmlFor="2d-animated">Make them animated</Label>
+                    </div>
+                </RadioGroup>
+            )}
+        </div>
+
+        <div className="space-y-4 rounded-lg border p-4">
+            <div className="flex items-center space-x-2">
+                <Checkbox id="3d-illustrations" checked={selections.has3d} onCheckedChange={handle3dCheck} />
+                <Label htmlFor="3d-illustrations" className="text-lg">Yes, let's add some gorgeous 3D illustrations</Label>
+            </div>
+            {selections.has3d && (
+                <RadioGroup
+                    value={selections.is3dAnimated || undefined}
+                    onValueChange={(value: 'static' | 'animated') => handleUpdate({ is3dAnimated: value })}
+                    className="ml-6 space-y-2"
+                >
+                    <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="static" id="3d-static" />
+                        <Label htmlFor="3d-static">Make them static</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="animated" id="3d-animated" />
+                        <Label htmlFor="3d-animated">Make them animated</Label>
+                    </div>
+                </RadioGroup>
+            )}
+        </div>
+        
+        <div className="flex items-center space-x-2 p-4">
+            <Checkbox id="no-illustrations" checked={noIllustrations} onCheckedChange={handleNoIllustrationsChange} />
+            <Label htmlFor="no-illustrations" className="text-lg">No, I don't need illustrations</Label>
+        </div>
+
+      </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-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+              <div className="w-12 h-2 bg-primary rounded-full" />
+            </div>
+            <Button onClick={onNext} disabled={isNextDisabled}>
+              Next
+            </Button>
+        </div>
+      </div>
+    </div>
+  );
+}